latest from main

thejackshelton · thejackshelton · commit 49297cc64f8b · 2024-05-25T13:58:59.000-05:00
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/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -29,3 +29,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           chromatic_token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - run: pnpx pkg-pr-new publish ./dist/packages/kit-headless
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is provided automatically in any repository
diff --git a/.gitignore b/.gitignore
@@ -75,4 +75,4 @@ Thumbs.db
 
 # Verdaccio
 tmp
-.nx/cache
+
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,3 @@
 node_modules
+.nx/cache
 coverage
diff --git a/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css b/apps/website/src/routes/docs/headless/accordion/snippets/accordion.css
@@ -48,7 +48,6 @@
   overflow: hidden;
 
   /* offset the dotted border */
-  margin-top: -2px;
 }
 
 .collapsible-content-outline {
@@ -64,22 +63,18 @@
 @keyframes collapsible-open {
   0% {
     height: 0;
-    margin-top: -2px;
   }
   100% {
     height: var(--qwikui-collapsible-content-height);
-    margin-top: 0;
   }
 }
 
 @keyframes collapsible-closed {
   0% {
     height: var(--qwikui-collapsible-content-height);
-    margin-top: 0;
   }
   100% {
     height: 0;
-    margin-top: -2px;
   }
 }
 
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
diff --git a/package.json b/package.json
diff --git a/packages/kit-headless/src/components/select/index.ts b/packages/kit-headless/src/components/select/index.ts
diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/packages/kit-headless/src/components/select/select-root.tsx
diff --git a/packages/kit-styled/src/components/checkbox/checkbox.tsx b/packages/kit-styled/src/components/checkbox/checkbox.tsx
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
diff --git a/packages/kit-styled/src/components/textarea/textarea.tsx b/packages/kit-styled/src/components/textarea/textarea.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`node_modules`
	`2`	`+.nx/cache`
`2`	`3`	`coverage`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@`
`48`	`48`	`overflow: hidden;`
`49`	`49`
`50`	`50`	`/* offset the dotted border */`
`51`		`- margin-top: -2px;`
`52`	`51`	`}`
`53`	`52`
`54`	`53`	`.collapsible-content-outline {`
`@@ -64,22 +63,18 @@`
`64`	`63`	`@keyframes collapsible-open {`
`65`	`64`	`0% {`
`66`	`65`	`height: 0;`
`67`		`- margin-top: -2px;`
`68`	`66`	`}`
`69`	`67`	`100% {`
`70`	`68`	`height: var(--qwikui-collapsible-content-height);`
`71`		`- margin-top: 0;`
`72`	`69`	`}`
`73`	`70`	`}`
`74`	`71`
`75`	`72`	`@keyframes collapsible-closed {`
`76`	`73`	`0% {`
`77`	`74`	`height: var(--qwikui-collapsible-content-height);`
`78`		`- margin-top: 0;`
`79`	`75`	`}`
`80`	`76`	`100% {`
`81`	`77`	`height: 0;`
`82`		`- margin-top: -2px;`
`83`	`78`	`}`
`84`	`79`	`}`
`85`	`80`