Error messages & export 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/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,9 @@ 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
 

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,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 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';
@@ -11,3 +11,4 @@ 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`;

packages/kit-headless/src/components/select/select-error-message.tsx

@@ -0,0 +1,13 @@
+import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
+import SelectContextId from './select-context';
+
+export const HSelectErrorMessage = component$((props: PropsOf<'div'>) => {
+  const context = useContext(SelectContextId);
+  const errorMessageId = `${context.localId}-error-message`;
+
+  return (
+    <div role="alert" id={errorMessageId} {...props}>
+      <Slot />
+    </div>
+  );
+});