From afc674f0b48629b1b3620d55a0b7b67ce20c14bd Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Mon, 20 Jul 2026 10:33:27 +0300
Subject: [PATCH] chore: use SelectItem and SelectListBox in dev page and tests

---
 dev/pages/Select.tsx | 12 ++++++------
 test/Select.spec.tsx | 34 +++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/dev/pages/Select.tsx b/dev/pages/Select.tsx
index c92495c0..7517ae62 100644
--- a/dev/pages/Select.tsx
+++ b/dev/pages/Select.tsx
@@ -1,7 +1,7 @@
 import { Select } from '../../packages/react-components/src/Select.js';
 import type { SelectItemData } from '../../packages/react-components/src/Select.js';
-import { ListBox } from '../../packages/react-components/src/ListBox.js';
-import { Item } from '../../packages/react-components/src/Item.js';
+import { SelectItem } from '../../packages/react-components/src/SelectItem.js';
+import { SelectListBox } from '../../packages/react-components/src/SelectListBox.js';
 import { Tooltip } from '../../packages/react-components/src/Tooltip.js';
 import { useEffect, useState } from 'react';
 import type { SelectInvalidChangedEvent, SelectValidatedEvent } from '@vaadin/select';
@@ -116,9 +116,9 @@ export default function SelectPage() {
           ) : null}
           {useTooltip ? <Tooltip slot="tooltip" text="This is a tooltip" /> : null}
           {useCustomRenderer ? (
-            <ListBox>
+            <SelectListBox>
               {peopleForCustomRendering.map((person) => (
-                <Item
+                <SelectItem
                   value={person.id}
                   key={person.id}
                   label={useItemLabelInCustomRenderer ? `${person.firstName} ${person.lastName}` : undefined}
@@ -146,9 +146,9 @@ export default function SelectPage() {
                       </div>
                     </div>
                   </div>
-                </Item>
+                </SelectItem>
               ))}
-            </ListBox>
+            </SelectListBox>
           ) : null}
         </Select>
 
diff --git a/test/Select.spec.tsx b/test/Select.spec.tsx
index 0d47506d..8c4da2d8 100644
--- a/test/Select.spec.tsx
+++ b/test/Select.spec.tsx
@@ -2,9 +2,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-react';
 import userEvent, { type UserEvent } from '@testing-library/user-event';
 import type { ReactElement } from 'react';
-import { ListBox } from '../packages/react-components/src/ListBox.js';
-import { Item } from '../packages/react-components/src/Item.js';
 import { Select, SelectElement } from '../packages/react-components/src/Select.js';
+import { SelectItem } from '../packages/react-components/src/SelectItem.js';
+import { SelectListBox } from '../packages/react-components/src/SelectListBox.js';
 import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 describe('Select', () => {
@@ -15,10 +15,10 @@ describe('Select', () => {
 
   function Renderer(): ReactElement {
     return (
-      <ListBox>
-        <Item value="foo">Foo</Item>
-        <Item value="bar">Bar</Item>
-      </ListBox>
+      <SelectListBox>
+        <SelectItem value="foo">Foo</SelectItem>
+        <SelectItem value="bar">Bar</SelectItem>
+      </SelectListBox>
     );
   }
 
@@ -33,10 +33,10 @@ describe('Select', () => {
     await user.click(valueButton);
 
     await vi.waitFor(() => {
-      const listBox = select.querySelector('vaadin-list-box, vaadin-select-list-box');
+      const listBox = select.querySelector('vaadin-select-list-box');
       expect(listBox).to.exist;
 
-      const items = listBox!.querySelectorAll('vaadin-item, vaadin-select-item');
+      const items = listBox!.querySelectorAll('vaadin-select-item');
       expect(items[0]).to.have.text('Foo');
       expect(items[1]).to.have.text('Bar');
     });
@@ -64,11 +64,11 @@ describe('Select', () => {
   describe('renderer', () => {
     function NewRenderer() {
       return (
-        <ListBox>
-          <Item value="foo">Foo</Item>
-          <Item value="bar">Bar</Item>
-          <Item value="baz">Baz</Item>
-        </ListBox>
+        <SelectListBox>
+          <SelectItem value="foo">Foo</SelectItem>
+          <SelectItem value="bar">Bar</SelectItem>
+          <SelectItem value="baz">Baz</SelectItem>
+        </SelectListBox>
       );
     }
 
@@ -135,10 +135,10 @@ describe('Select', () => {
     it('should render the element with slot if children component is set', async () => {
       await render(
         <Select>
-          <ListBox>
-            <Item value="foo">Foo</Item>
-            <Item value="bar">Bar</Item>
-          </ListBox>
+          <SelectListBox>
+            <SelectItem value="foo">Foo</SelectItem>
+            <SelectItem value="bar">Bar</SelectItem>
+          </SelectListBox>
           <div slot="prefix">Value:</div>
         </Select>,
       );