Merge pull request #825 from thejackshelton/select-improvements

export select description

Author: thejackshelton

.changeset/gorgeous-falcons-care.md

@@ -0,0 +1,9 @@
+---
+'@qwik-ui/headless': patch
+---
+
+feat: new Select.ErrorMessage component
+
+feat: data-invalid attribute to style when the select is invalid
+
+feat: new Select.Description component

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

@@ -0,0 +1,33 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Select } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+
+  return (
+    <Select.Root class="select">
+      <Select.Label>Logged in users</Select.Label>
+      <Select.Trigger class="select-trigger">
+        <Select.DisplayValue placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Description>Select a user to see their profile</Select.Description>
+      <Select.Popover class="select-popover">
+        <Select.Listbox class="select-listbox">
+          {users.map((user) => (
+            <Select.Item class="select-item" key={user}>
+              <Select.ItemLabel>{user}</Select.ItemLabel>
+              <Select.ItemIndicator>
+                <LuCheck />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Listbox>
+      </Select.Popover>
+    </Select.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/select.css?inline';
+import { LuCheck } from '@qwikest/icons/lucide';

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

@@ -34,7 +34,11 @@ export default component$(() => {
               <Select.Trigger class="select-trigger">
                 <Select.DisplayValue placeholder="Select an option" />
               </Select.Trigger>
-              {field.error && <div style={{ color: '#D2122E' }}>{field.error}</div>}
+              {field.error && (
+                <Select.ErrorMessage style={{ color: '#D2122E' }}>
+                  {field.error}
+                </Select.ErrorMessage>
+              )}
               <Select.Popover class="select-popover">
                 <Select.Listbox class="select-listbox">
                   {users.map((user) => (

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

@@ -175,7 +175,15 @@ The native select element is created when a form name has been given to `<Select
 
 <Showcase name="validation" />
 
-Above is an example of submitting a multi-select form.
+The `<Select.ErrorMessage />` component is used to display errors when the select is invalid.
+
+To style based on the invalid state, use the `data-invalid` data attribute.
+
+### Descriptions
+
+Provide more information to assistive technologies by adding a description to the select.
+
+<Showcase name="description" />
 
 ## Component state
 

apps/website/src/routes/docs/headless/select/snippets/select.css

@@ -28,6 +28,10 @@
   outline-offset: 2px;
 }
 
+.select-trigger[data-invalid] {
+  border: 2px dotted #d2122e;
+}
+
 .select-popover {
   width: 100%;
   max-width: var(--select-width);

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

@@ -19,9 +19,12 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     disabled,
     collapsible = true,
     animated,
+    itemsMap,
     ...rest
   } = props;
 
+  itemsMap;
+
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
   const isAnimatedSig = useSignal<boolean>(animated === true);

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

@@ -41,6 +41,10 @@ export const HHiddenNativeSelect = component$(
                 // @ts-expect-error modular forms ref function
                 ref?.(element);
               }}
+              onFocus$={() => {
+                // override modular forms focus event
+                return;
+              }}
               multiple={context.multiple}
               tabIndex={-1}
               autocomplete={autoComplete}

packages/kit-headless/src/components/select/index.ts

@@ -1,12 +1,14 @@
 export { HSelectRoot as Root } from './select-inline';
 export { HSelectLabel as Label } from './select-label';
 export { HSelectTrigger as Trigger } from './select-trigger';
-export { HSelectDisplayText as DisplayValue } from './select-display-text';
+export { HSelectDisplayValue as DisplayValue } from './select-display-value';
 export { HSelectPopover as Popover } from './select-popover';
 export { HSelectListbox as Listbox } from './select-listbox';
 export { HSelectGroup as Group } from './select-group';
 export { HSelectGroupLabel as GroupLabel } from './select-group-label';
 export { HSelectItem as Item } from './select-item';
 export { HSelectItemLabel as ItemLabel } from './select-item-label';
 export { HSelectItemIndicator as ItemIndicator } from './select-item-indicator';
+export { HSelectDescription as Description } from './select-description';
 export { HHiddenNativeSelect as HiddenNativeSelect } from './hidden-select';
+export { HSelectErrorMessage as ErrorMessage } from './select-error-message';

packages/kit-headless/src/components/select/select-context.ts

@@ -39,6 +39,8 @@ export type SelectContext = {
    * Specifies that the user must select a value before submitting the form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#required).
    */
   required?: boolean;
+
+  isInvalidSig?: Signal<boolean>;
 };
 
 export const groupContextId = createContextId<GroupContext>('Select-Group');

packages/kit-headless/src/components/select/select-display-text.tsx renamed to packages/kit-headless/src/components/select/select-display-value.tsx

@@ -15,7 +15,7 @@ type SelectValueProps = PropsOf<'span'> & {
   placeholder?: string;
 };
 
-export const HSelectDisplayText = component$((props: SelectValueProps) => {
+export const HSelectDisplayValue = component$((props: SelectValueProps) => {
   const { placeholder, ...rest } = props;
   const context = useContext(SelectContextId);
   const valueId = `${context.localId}-value`;