Merge pull request #766 from maiieul/Select-DisplayValue

thejackshelton · web-flow · commit 666ed1173349 · 2024-05-25T13:45:01.000-05:00
refactor(headless select): change `DisplayText` to `DisplayValue` and `displayText` to `displayValue`
diff --git a/.changeset/silent-yaks-crash.md b/.changeset/silent-yaks-crash.md
@@ -5,7 +5,7 @@
 ### Select API Changes
 
 - `<SelectOption />` has been renamed to `<Select.ItemLabel />`.
-- `<Select.Value />` has been renamed to `<Select.DisplayText />`.
+- `<Select.Value />` has been renamed to `<Select.DisplayValue />`.
 
 ### `<Select.Item />`
 
@@ -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
 
diff --git a/apps/website/src/routes/docs/headless/modal/examples/nested-popover.tsx b/apps/website/src/routes/docs/headless/modal/examples/nested-popover.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
         <Select.Root class="select">
           <Select.Label>Logged in users</Select.Label>
           <Select.Trigger class="select-trigger">
-            <Select.DisplayText placeholder="Select an option" />
+            <Select.DisplayValue placeholder="Select an option" />
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/add-users.tsx b/apps/website/src/routes/docs/headless/select/examples/add-users.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
       <Select.Root class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx
@@ -13,7 +13,7 @@ export default component$(() => {
       <Select.Root bind:open={isOpen} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/change-value.tsx b/apps/website/src/routes/docs/headless/select/examples/change-value.tsx
@@ -15,7 +15,7 @@ export default component$(() => {
       <Select.Root onChange$={handleChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
       <Select.Root bind:value={selectedId} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
       <Select.Root bind:value={selected} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/csr.tsx b/apps/website/src/routes/docs/headless/select/examples/csr.tsx
@@ -13,7 +13,7 @@ export default component$(() => {
         <Select.Root class="select">
           <Select.Label>Logged in users</Select.Label>
           <Select.Trigger class="select-trigger">
-            <Select.DisplayText placeholder="Select an option" />
+            <Select.DisplayValue placeholder="Select an option" />
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/disabled.tsx b/apps/website/src/routes/docs/headless/select/examples/disabled.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
       <p>This one is the disabled</p>
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/form.tsx b/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.DisplayText>{displayText.value.join(', ')}</Select.DisplayText>
+            <Select.DisplayValue>{displayValue.value.join(', ')}</Select.DisplayValue>
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/group.tsx b/apps/website/src/routes/docs/headless/select/examples/group.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <Select.Root class="select">
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/hero.tsx b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/indicator.tsx b/apps/website/src/routes/docs/headless/select/examples/indicator.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/item-value.tsx b/apps/website/src/routes/docs/headless/select/examples/item-value.tsx
@@ -22,7 +22,7 @@ export default component$(() => {
       <Select.Root onChange$={handleChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/loop.tsx b/apps/website/src/routes/docs/headless/select/examples/loop.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root loop={true} class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx b/apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx
@@ -9,10 +9,15 @@ 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.DisplayText>
+        <Select.DisplayValue>
           {display.value.map((item) => (
             <span class="select-pill" key={item}>
               {item}
@@ -27,7 +32,7 @@ export default component$(() => {
               </span>
             </span>
           ))}
-        </Select.DisplayText>
+        </Select.DisplayValue>
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/multiple.tsx b/apps/website/src/routes/docs/headless/select/examples/multiple.tsx
@@ -8,9 +8,9 @@ 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.DisplayText>{display.value.join(', ')}</Select.DisplayText>
+        <Select.DisplayValue>{display.value.join(', ')}</Select.DisplayValue>
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/object.tsx b/apps/website/src/routes/docs/headless/select/examples/object.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/open-change.tsx b/apps/website/src/routes/docs/headless/select/examples/open-change.tsx
@@ -18,7 +18,7 @@ export default component$(() => {
       <Select.Root onOpenChange$={handleOpenChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx b/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <Select.Root class="select">
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox select-max-height">
diff --git a/apps/website/src/routes/docs/headless/select/examples/string.tsx b/apps/website/src/routes/docs/headless/select/examples/string.tsx
@@ -8,7 +8,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx b/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx b/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root value="Jessie" class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/validation.tsx b/apps/website/src/routes/docs/headless/select/examples/validation.tsx
@@ -32,7 +32,7 @@ export default component$(() => {
               <Select.HiddenNativeSelect {...props} />
               <Select.Label>Logged in users</Select.Label>
               <Select.Trigger class="select-trigger">
-                <Select.DisplayText placeholder="Select an option" />
+                <Select.DisplayValue placeholder="Select an option" />
               </Select.Trigger>
               {field.error && <div style={{ color: '#D2122E' }}>{field.error}</div>}
               <Select.Popover class="select-popover">
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
@@ -59,7 +59,7 @@ A control that allows the user to select multiple predefined items from a listbo
         'A button or similar control that opens the select menu when interacted with.',
     },
     {
-      name: 'Select.DisplayText',
+      name: 'Select.DisplayValue',
       description: 'Displays the currently selected value.',
     },
     {
@@ -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.DisplayText />` component will now display whatever you put inside of it.
+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" />
 
@@ -315,7 +315,7 @@ To customize the scroll behavior, add the `scrollOptions` prop to the `<Select.R
 
 ## Placeholder
 
-We can provide a custom placeholder to the `<Select.DisplayText />` component by adding the `placeholder` prop.
+We can provide a custom placeholder to the `<Select.DisplayValue />` component by adding the `placeholder` prop.
 
 <Showcase name="hero" />
 
@@ -417,7 +417,7 @@ When in multi select mode, additional keyboard interactions are available.
 
 ### Data Attributes
 
-`Select`, `Select.Trigger`, `Select.DisplayText`, `Select.Popover`, and `Select.Listbox` all have data attributes that are used to track state.
+`Select`, `Select.Trigger`, `Select.DisplayValue`, `Select.Popover`, and `Select.Listbox` all have data attributes that are used to track state.
 
 <AnatomyTable
   firstColumnLabel="Attribute"
@@ -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',
@@ -495,7 +495,7 @@ When in multi select mode, additional keyboard interactions are available.
   ]}
 />
 
-### Select.DisplayText
+### Select.DisplayValue
 
 <APITable
   propDescriptors={[
diff --git a/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/styled/select/examples/hero.tsx b/apps/website/src/routes/docs/styled/select/examples/hero.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root>
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger>
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover gutter={8}>
         <Select.Listbox>
diff --git a/apps/website/src/routes/docs/styled/select/index.mdx b/apps/website/src/routes/docs/styled/select/index.mdx
@@ -65,7 +65,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
   );
 });
 
-const DisplayText = HeadlessSelect.DisplayText;
+const DisplayValue = HeadlessSelect.DisplayValue;
 
 const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }) => {
   return (
@@ -144,7 +144,7 @@ export const Select = {
   Root,
   Label,
   Trigger,
-  DisplayText,
+  DisplayValue,
   Popover,
   Listbox,
   Group,
diff --git a/packages/kit-headless/src/components/select/index.ts b/packages/kit-headless/src/components/select/index.ts
@@ -1,7 +1,7 @@
 export { HSelectRoot as Root } from './select-inline';
 export { HSelectLabel as Label } from './select-label';
 export { HSelectTrigger as Trigger } from './select-trigger';
-export { HSelectDisplayText as DisplayText } from './select-display-text';
+export { HSelectDisplayText as DisplayValue } from './select-display-text';
 export { HSelectPopover as Popover } from './select-popover';
 export { HSelectListbox as Listbox } from './select-listbox';
 export { HSelectGroup as Group } from './select-group';
diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/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 = [];
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
