From ccdde064e592dddaf94688b96686f2d2b7556685 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Thu, 23 Jul 2026 12:23:50 +0300 Subject: [PATCH] docs: update Select TS examples to use SelectItemData --- articles/hilla/tutorial/index.adoc | 4 ++-- .../demo/component/auto-grid/react/auto-grid-filtering.tsx | 4 ++-- .../component/select/react/select-complex-value-label.tsx | 4 ++-- frontend/demo/component/select/react/select-overlay-width.tsx | 4 ++-- frontend/demo/component/select/select-complex-value-label.ts | 4 ++-- frontend/demo/component/select/select-overlay-width.ts | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/articles/hilla/tutorial/index.adoc b/articles/hilla/tutorial/index.adoc index 12c1885c57..ac3cd4a38b 100644 --- a/articles/hilla/tutorial/index.adoc +++ b/articles/hilla/tutorial/index.adoc @@ -243,7 +243,7 @@ For a complete CRM, users need to be able to edit contacts. Create a new compone .ContactForm.tsx [source,tsx] ---- -import { TextField, EmailField, Select, SelectItem, Button} from "@vaadin/react-components"; +import { TextField, EmailField, Select, SelectItemData, Button} from "@vaadin/react-components"; import { useForm } from "@vaadin/hilla-react-form"; import ContactRecordModel from "Frontend/generated/com/example/application/services/CRMService/ContactRecordModel"; import { CRMService } from "Frontend/generated/endpoints"; @@ -264,7 +264,7 @@ interface ContactFormProps { export default function ContactForm({contact, onSubmit}: ContactFormProps) { - const companies = useSignal([]); + const companies = useSignal([]); const {field, model, submit, reset, read} = useForm(ContactRecordModel, { onSubmit } ); diff --git a/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx b/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx index 891b8d91fe..d1c5e8d4f6 100644 --- a/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx +++ b/frontend/demo/component/auto-grid/react/auto-grid-filtering.tsx @@ -3,7 +3,7 @@ import React from 'react'; // hidden-source-line import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line import { AutoGrid } from '@vaadin/hilla-react-crud'; import { useComputed, useSignal } from '@vaadin/hilla-react-signals'; -import { Select, type SelectItem } from '@vaadin/react-components/Select.js'; +import { Select, type SelectItemData } from '@vaadin/react-components/Select.js'; import { TextField } from '@vaadin/react-components/TextField.js'; import ProductModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/ProductModel'; import type AndFilter from 'Frontend/generated/com/vaadin/hilla/crud/filter/AndFilter'; @@ -12,7 +12,7 @@ import Matcher from 'Frontend/generated/com/vaadin/hilla/crud/filter/PropertyStr import { ProductService } from 'Frontend/generated/endpoints'; import { autoGridHostStyles } from './auto-grid-host-styles'; // hidden-source-line -const categories: SelectItem[] = [ +const categories: SelectItemData[] = [ { label: 'All', value: 'All' }, { label: 'Fruit', value: 'Fruit' }, { label: 'Vegetable', value: 'Vegetable' }, diff --git a/frontend/demo/component/select/react/select-complex-value-label.tsx b/frontend/demo/component/select/react/select-complex-value-label.tsx index 74d99d8b47..8ca84767c3 100644 --- a/frontend/demo/component/select/react/select-complex-value-label.tsx +++ b/frontend/demo/component/select/react/select-complex-value-label.tsx @@ -2,12 +2,12 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin import React, { useEffect } from 'react'; import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line import { useSignal } from '@vaadin/hilla-react-signals'; -import { Select, type SelectItem } from '@vaadin/react-components/Select.js'; +import { Select, type SelectItemData } from '@vaadin/react-components/Select.js'; import { getPeople } from 'Frontend/demo/domain/DataService'; function Example() { useSignals(); // hidden-source-line - const items = useSignal([]); + const items = useSignal([]); useEffect(() => { getPeople({ count: 5 }).then(({ people }) => { diff --git a/frontend/demo/component/select/react/select-overlay-width.tsx b/frontend/demo/component/select/react/select-overlay-width.tsx index 2d04895fbc..71c5823952 100644 --- a/frontend/demo/component/select/react/select-overlay-width.tsx +++ b/frontend/demo/component/select/react/select-overlay-width.tsx @@ -2,7 +2,7 @@ import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-lin import React, { useEffect } from 'react'; import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line import { useSignal } from '@vaadin/hilla-react-signals'; -import { Select, type SelectItem } from '@vaadin/react-components/Select.js'; +import { Select, type SelectItemData } from '@vaadin/react-components/Select.js'; import { getPeople } from 'Frontend/demo/domain/DataService'; import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; @@ -10,7 +10,7 @@ const formatPersonFullName = (person: Person) => `${person.firstName} ${person.l function Example() { useSignals(); // hidden-source-line - const items = useSignal([]); + const items = useSignal([]); useEffect(() => { getPeople({ count: 5 }).then(({ people }) => { diff --git a/frontend/demo/component/select/select-complex-value-label.ts b/frontend/demo/component/select/select-complex-value-label.ts index 019a13703e..65e5a6deee 100644 --- a/frontend/demo/component/select/select-complex-value-label.ts +++ b/frontend/demo/component/select/select-complex-value-label.ts @@ -2,7 +2,7 @@ import 'Frontend/demo/init'; // hidden-source-line import '@vaadin/select'; import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import type { SelectItem } from '@vaadin/select'; +import type { SelectItemData } from '@vaadin/select'; import { getPeople } from 'Frontend/demo/domain/DataService'; import { applyTheme } from 'Frontend/demo/theme'; @@ -15,7 +15,7 @@ export class Example extends LitElement { } @state() - private items: SelectItem[] = []; + private items: SelectItemData[] = []; protected override async firstUpdated() { const { people } = await getPeople({ count: 5 }); diff --git a/frontend/demo/component/select/select-overlay-width.ts b/frontend/demo/component/select/select-overlay-width.ts index a8036cec94..dc0b4e54be 100644 --- a/frontend/demo/component/select/select-overlay-width.ts +++ b/frontend/demo/component/select/select-overlay-width.ts @@ -4,7 +4,7 @@ import '@vaadin/list-box'; import '@vaadin/select'; import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import type { SelectItem } from '@vaadin/select'; +import type { SelectItemData } from '@vaadin/select'; import { getPeople } from 'Frontend/demo/domain/DataService'; import { applyTheme } from 'Frontend/demo/theme'; import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; @@ -20,7 +20,7 @@ export class Example extends LitElement { } @state() - private items: SelectItem[] = []; + private items: SelectItemData[] = []; protected override async firstUpdated() { const { people } = await getPeople({ count: 5 });