Merge pull request #659 from thejackshelton/select-v2

feat(select): hidden select is synchronized with headless select

Author: thejackshelton

.changeset/green-months-camp.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: select component now has a flexible hierarchy

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

@@ -6,37 +6,58 @@
  * https://github.com/adobe/react-spectrum/blob/5c1920e50d4b2b80c826ca91aff55c97350bf9f9/packages/@react-aria/select/src/HiddenSelect.tsx
  */
 
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { component$, useContext } from '@builder.io/qwik';
+import { Opt } from './select-inline';
+import SelectContextId from './select-context';
 
-export interface AriaHiddenSelectProps {
+export type AriaHiddenSelectProps = {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
   autoComplete?: string;
 
   /** The text label for the select. */
-  label?: PropsOf<'label'>;
+  label?: string;
 
   /** HTML form input name. */
   name?: string;
 
   /** Sets the disabled state of the select and input. */
   disabled?: boolean;
-}
+};
+
+export type SelectDataProps = {
+  options: Opt[] | undefined;
+};
 
 // export function useHiddenSelect(props: AriaHiddenSelectProps) {
 //   const { autoComplete, name, disabled } = props;
 // }
 
-export const HiddenSelect = component$((props: AriaHiddenSelectProps) => {
-  const { name, disabled } = props;
+export const HiddenSelect = component$(
+  (props: AriaHiddenSelectProps & SelectDataProps) => {
+    const { label, options } = props;
+    const context = useContext(SelectContextId);
 
-  return (
-    <>
+    // TODO: make conditional logic to show either input or select based on the size of the options.
+    return (
       <div>
-        <input />
+        <label>
+          {label}
+          <select>
+            <option />
+            {options?.map((opt: Opt) => (
+              <option
+                value={opt.value}
+                selected={context.selectedIndexSig.value === opt.index}
+                key={opt.value}
+              >
+                {opt.displayValue}
+              </option>
+            ))}
+          </select>
+        </label>
       </div>
-      {name && <input type="hidden" name={name} disabled={disabled} />}
-    </>
-  );
-});
+    );
+  },
+);

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

@@ -7,3 +7,4 @@ export * from './select-trigger';
 export * from './select-value';
 export * from './select-group';
 export * from './select-label';
+export * from './hidden-select';

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

@@ -6,6 +6,7 @@ export type Opt = {
   isDisabled: boolean;
   value: string;
   displayValue?: string;
+  index: number;
 };
 
 /*
@@ -55,6 +56,7 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
           isDisabled,
           value,
           displayValue: child.props.children as string,
+          index: currentIndex,
         };
 
         opts.push(opt);
@@ -69,21 +71,11 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
       }
 
       default: {
-        // Qwik components
-        if (child && child.props) {
-          const componentChildren = Array.isArray(child.props.children)
-            ? [...child.props.children]
-            : [child.props.children];
-          childrenToProcess.unshift(...componentChildren);
-        }
-
-        // regular JSX nodes
-        if (typeof child.type === 'string' && child.children !== undefined) {
-          const nodeChildren = Array.isArray(child.children)
+        if (child) {
+          const anyChildren = Array.isArray(child.children)
             ? [...child.children]
             : [child.children];
-
-          childrenToProcess.unshift(...(nodeChildren as JSXNode[]));
+          childrenToProcess.unshift(...(anyChildren as JSXNode[]));
         }
 
         break;

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

@@ -1,18 +1,19 @@
 import {
-  PropsOf,
-  Signal,
-  Slot,
   component$,
-  useComputed$,
-  useContextProvider,
-  useId,
+  Slot,
+  type PropsOf,
   useSignal,
+  useContextProvider,
+  Signal,
   useTask$,
+  useComputed$,
   type QRL,
+  useId,
 } from '@builder.io/qwik';
-import { isBrowser } from '@builder.io/qwik/build';
-import SelectContextId, { type SelectContext } from './select-context';
+import { type SelectContext } from './select-context';
+import SelectContextId from './select-context';
 import { Opt } from './select-inline';
+import { isBrowser } from '@builder.io/qwik/build';
 import { getActiveDescendant } from './utils';
 
 export type InternalSelectProps = {