refactor(headless select): change displayText prop to displayValue

Author: maiieul

.changeset/silent-yaks-crash.md

@@ -32,7 +32,7 @@ The previous API did not allow for customization of list items. The new API intr
 
 You can now put anything you'd like in your `<Select.Item />`, just like a normal li tag!
 
-There is a new reactive signal called `bind:displayText` that can be used to read the value of the display text. There is a new docs example that shows this in action with item pills.
+There is a new reactive signal called `bind:displayValue` that can be used to read the value of the display text. There is a new docs example that shows this in action with item pills.
 
 #### bind syntax
 

apps/website/src/routes/docs/headless/select/examples/form.tsx

@@ -7,7 +7,7 @@ type FormData = Record<string, FormDataEntryValue[]>;
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const displayText = useSignal<string[]>([]);
+  const displayValue = useSignal<string[]>([]);
 
   const submittedData = useSignal<FormData | null>(null);
   const formName = 'my-example-name!';
@@ -25,15 +25,15 @@ export default component$(() => {
       <form preventdefault:submit onSubmit$={handleSubmit$}>
         <Select.Root
           name={formName}
-          bind:displayText={displayText}
+          bind:displayValue={displayValue}
           multiple
           required
           class="select"
         >
           <Select.Label>Logged in users</Select.Label>
           <Select.HiddenNativeSelect />
           <Select.Trigger class="select-trigger">
-            <Select.DisplayValue>{displayText.value.join(', ')}</Select.DisplayValue>
+            <Select.DisplayValue>{displayValue.value.join(', ')}</Select.DisplayValue>
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">

apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx

@@ -9,7 +9,12 @@ export default component$(() => {
   const selected = useSignal<string[]>([]);
 
   return (
-    <Select.Root multiple bind:displayText={display} bind:value={selected} class="select">
+    <Select.Root
+      multiple
+      bind:displayValue={display}
+      bind:value={selected}
+      class="select"
+    >
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
         <Select.DisplayValue>

apps/website/src/routes/docs/headless/select/examples/multiple.tsx

@@ -8,7 +8,7 @@ export default component$(() => {
   const display = useSignal<string[]>([]);
 
   return (
-    <Select.Root bind:displayText={display} multiple class="select">
+    <Select.Root bind:displayValue={display} multiple class="select">
       <Select.Trigger class="select-trigger">
         <Select.DisplayValue>{display.value.join(', ')}</Select.DisplayValue>
       </Select.Trigger>

apps/website/src/routes/docs/headless/select/index.mdx

@@ -241,13 +241,13 @@ Sometimes we want to allow the user to select multiple pre-defined items at a ti
 
 <Showcase name="multiple" />
 
-If we want to configure the multiple display values, we can use the `bind:displayText` signal.
+If we want to configure the multiple display values, we can use the `bind:displayValue` signal.
 
 Something to be aware of, is the `<Select.DisplayValue />` component will now display whatever you put inside of it.
 
-> Under the hood, Qwik UI updates the `bind:displayText` signal with the latest display values.
+> Under the hood, Qwik UI updates the `bind:displayValue` signal with the latest display values.
 
-Taking this a step further, one could combine the `bind:value` and `bind:displayText` props together to create a custom widget that displays the selected values in a list of pills.
+Taking this a step further, one could combine the `bind:value` and `bind:displayValue` props together to create a custom widget that displays the selected values in a list of pills.
 
 <Showcase name="multiple-pill" />
 
@@ -469,7 +469,7 @@ When in multi select mode, additional keyboard interactions are available.
       info: 'string',
     },
     {
-      name: 'bind:displayText',
+      name: 'bind:displayValue',
       type: 'signal',
       description: 'Controlled display value, manages the display items.',
       info: 'string',

packages/kit-headless/src/components/select/select-root.tsx

@@ -62,7 +62,7 @@ export type SelectProps<M extends boolean = boolean> = Omit<
   'bind:open'?: Signal<boolean>;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  'bind:displayText'?: Signal<TMultiple<M>>;
+  'bind:displayValue'?: Signal<TMultiple<M>>;
 
   /**
    * QRL handler that runs when a select value changes.
@@ -231,7 +231,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
 
     useTask$(async function updateConsumerProps({ track }) {
       const bindValueSig = props['bind:value'];
-      const bindDisplayTextSig = props['bind:displayText'];
+      const bindDisplayTextSig = props['bind:displayValue'];
       track(() => selectedIndexSetSig.value);
 
       const values = [];