@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["mergeProps","JSX","Accessor","For","createEffect","onCleanup","access","MaybeAccessor","createFormValidation","SelectState","Key","FormValidationState","ValidationBehavior","AriaHiddenSelectProps","state","T","name","isDisabled","isRequired","autoComplete","form","validationBehavior","triggerRef","HTMLElement","validationState","HiddenSelectAria","containerProps","HTMLAttributes","HTMLDivElement","selectProps","SelectHTMLAttributes","HTMLSelectElement","inputProps","InputHTMLAttributes","HTMLInputElement","createHiddenSelect","props","getProps","selectRef","p","handleReset","defaultKey","collection","getFirstKey","setSelectedKey","addEventListener","removeEventListener","focus","selectedKey","selectedKeys","Set","isMultiple","selectionMode","multipleValue","Array","from","map","item","String","key","ref","el","tabIndex","disabled","multiple","undefined","required","value","onChange","e","Event","target","setSelectedKeys","selectedOptions","o","first","style","position","top","left","width","height","opacity","border","cursor","margin","padding","useTextInput","type","display","HiddenSelectProps","label","HiddenSelect","Element","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$7","_el$8","_co$2","_$getNextMarker","nextSibling","_el$3","_el$4","_el$5","_el$6","_co$","_$spread","_$insert","_$createComponent","each","children","_el$9","_tmpl$2","textValue","_$effect","_$setProperty","has","_$runHydrationEvents"],"sources":["../../src/select/createSelect.ts","../../src/select/createHiddenSelect.tsx"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * Based on @react-aria/select useSelect.\n */\n\nimport { type JSX, type Accessor, createEffect, onCleanup } from \"solid-js\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusRing } from \"../interactions/createFocusRing\";\nimport { createLabel } from \"../label/createLabel\";\nimport { createTypeSelect } from \"../selection/createTypeSelect\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { SelectState, CollectionNode } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaSelectProps {\n  /** An ID for the select. */\n  id?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** Whether the select is invalid. */\n  isInvalid?: boolean;\n  /** The label for the select. */\n  label?: JSX.Element;\n  /** An accessible label for the select when no visible label is provided. */\n  \"aria-label\"?: string;\n  /** The ID of an element that labels the select. */\n  \"aria-labelledby\"?: string;\n  /** The ID of an element that describes the select. */\n  \"aria-describedby\"?: string;\n  /** Placeholder text when no option is selected. */\n  placeholder?: string;\n  /** Whether the select should be auto-focused. */\n  autoFocus?: boolean;\n  /** Handler called when focus moves to the select. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler called when focus moves away from the select. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler called when the focus state changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** The name of the select, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the hidden native select with a form element by id. */\n  form?: string;\n  /** Whether type-to-select is disabled. @default false */\n  disallowTypeAhead?: boolean;\n  /** Whether the select can open when its collection is empty. @default false */\n  allowsEmptyCollection?: boolean;\n  /** Whether validation should use ARIA attributes or native browser validation. */\n  validationBehavior?: \"aria\" | \"native\";\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the trigger button element. */\n  triggerProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the value display element. */\n  valueProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the listbox/menu popup. */\n  menuProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Whether the select is currently focused. */\n  isFocused: Accessor<boolean>;\n  /** Whether the select has keyboard focus. */\n  isFocusVisible: Accessor<boolean>;\n  /** Whether the select is currently open. */\n  isOpen: Accessor<boolean>;\n  /** Whether the trigger button is currently pressed (for `pressScale`). */\n  isPressed: Accessor<boolean>;\n  /** The currently selected item. */\n  selectedItem: Accessor<CollectionNode<T> | null>;\n}\n\n// Shared data between select and options\nconst selectData = new WeakMap<object, SelectData>();\n\ninterface SelectData {\n  id: string;\n}\n\nexport function getSelectData(state: SelectState): SelectData | undefined {\n  return selectData.get(state);\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n */\nexport function createSelect<T>(\n  props: MaybeAccessor<AriaSelectProps>,\n  state: SelectState<T>,\n  _ref?: () => HTMLElement | null,\n): SelectAria<T> {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n\n  // Generate IDs for associated elements\n  const buttonId = `${id}-button`;\n  const listBoxId = `${id}-listbox`;\n  const valueId = `${id}-value`;\n  const descriptionId = `${id}-description`;\n  const errorMessageId = `${id}-error`;\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Share data with child options\n  createEffect(() => {\n    selectData.set(state, { id });\n\n    onCleanup(() => {\n      selectData.delete(state);\n    });\n  });\n\n  // Label handling\n  const { labelProps, fieldProps } = createLabel({\n    get id() {\n      return buttonId;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    labelElementType: \"span\",\n  });\n\n  // Focus ring for keyboard focus styling\n  const { isFocusVisible, focusProps } = createFocusRing({\n    get autoFocus() {\n      return getProps().autoFocus;\n    },\n  });\n\n  // Track focus state\n  const isFocused = state.isFocused;\n\n  // Handle press on trigger\n  const canOpen = () =>\n    getProps().allowsEmptyCollection || state.collection().getFirstKey() != null;\n\n  // Helper to check if key is disabled\n  const isKeyDisabled = (key: string | number): boolean => {\n    const collection = state.collection();\n    return state.isKeyDisabled?.(key) || collection.getItem(key)?.isDisabled || false;\n  };\n\n  // Helper to find the next non-disabled key.\n  const findNextKey = (\n    fromKey: string | number | null,\n    direction: \"forward\" | \"backward\",\n  ): string | number | null => {\n    const collection = state.collection();\n    const getAdjacent =\n      direction === \"forward\"\n        ? (k: string | number) => collection.getKeyAfter(k)\n        : (k: string | number) => collection.getKeyBefore(k);\n    const getBoundary =\n      direction === \"forward\" ? () => collection.getFirstKey() : () => collection.getLastKey();\n\n    let key = fromKey == null ? getBoundary() : getAdjacent(fromKey);\n    while (key != null && isKeyDisabled(key)) {\n      key = getAdjacent(key);\n    }\n\n    return key;\n  };\n\n  const focusKeyForOpen = (): string | number | null => {\n    const selectedKey = state.selectedKey();\n    if (selectedKey != null && !isKeyDisabled(selectedKey)) {\n      return selectedKey;\n    }\n    return findNextKey(null, \"forward\");\n  };\n\n  const openWithFocus = () => {\n    if (state.isOpen() || !canOpen()) {\n      return;\n    }\n    state.open();\n    const focusKey = focusKeyForOpen();\n    if (focusKey != null) {\n      state.setFocusedKey(focusKey);\n    }\n  };\n\n  const { pressProps, isPressed } = createPress({\n    get isDisabled() {\n      return getProps().isDisabled ?? state.isDisabled;\n    },\n    onPress(e) {\n      if (e.pointerType === \"keyboard\") {\n        return;\n      }\n\n      if (state.isOpen()) {\n        state.close();\n      } else {\n        openWithFocus();\n      }\n    },\n  });\n\n  // Type-to-select - for Select, typing directly selects items when closed\n  const { typeSelectProps } = createTypeSelect({\n    collection: () => state.collection(),\n    focusedKey: () => state.selectedKey(), // Use selectedKey as the \"focused\" key for closed Select\n    onFocusedKeyChange: (key) => {\n      // When closed, type-to-select directly changes selection\n      if (!state.isOpen()) {\n        state.setSelectedKey(key);\n      } else {\n        // When open, update focused key (listbox handles selection)\n        state.setFocusedKey(key);\n      }\n    },\n    isKeyDisabled,\n    get isDisabled() {\n      return Boolean(\n        (getProps().disallowTypeAhead ?? false) || getProps().isDisabled || state.isDisabled,\n      );\n    },\n  });\n\n  // Keyboard navigation\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (getProps().isDisabled ?? state.isDisabled) return;\n\n    const currentKey = state.focusedKey() ?? state.selectedKey();\n\n    switch (e.key) {\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (state.isOpen()) {\n          state.close();\n        } else {\n          openWithFocus();\n        }\n        break;\n\n      case \"ArrowDown\":\n        e.preventDefault();\n        if (!state.isOpen()) {\n          if (!canOpen()) {\n            return;\n          }\n          // ArrowDown: Open the dropdown and focus first/selected item\n          state.open();\n          const focusKey =\n            currentKey != null && !isKeyDisabled(currentKey)\n              ? currentKey\n              : findNextKey(currentKey, \"forward\");\n          if (focusKey) {\n            state.setFocusedKey(focusKey);\n          }\n        }\n        // When open, navigation is handled by the listbox\n        break;\n\n      case \"ArrowUp\":\n        e.preventDefault();\n        if (!state.isOpen()) {\n          if (!canOpen()) {\n            return;\n          }\n          // ArrowUp: Open the dropdown and focus last/selected item\n          state.open();\n          const focusKey =\n            currentKey != null && !isKeyDisabled(currentKey)\n              ? currentKey\n              : findNextKey(currentKey, \"backward\");\n          if (focusKey) {\n            state.setFocusedKey(focusKey);\n          }\n        }\n        // When open, navigation is handled by the listbox\n        break;\n\n      case \"ArrowRight\":\n        // ArrowRight: Select next option (for horizontal keyboard navigation pattern)\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const nextKey = findNextKey(currentKey, \"forward\");\n          if (nextKey != null) {\n            state.setSelectedKey(nextKey);\n          }\n        }\n        break;\n\n      case \"ArrowLeft\":\n        // ArrowLeft: Select previous option (for horizontal keyboard navigation pattern)\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const prevKey = findNextKey(currentKey, \"backward\");\n          if (prevKey != null) {\n            state.setSelectedKey(prevKey);\n          }\n        }\n        break;\n\n      case \"Home\":\n        // Home: Select first option\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const firstKey = findNextKey(null, \"forward\");\n          if (firstKey != null) {\n            state.setSelectedKey(firstKey);\n          }\n        }\n        break;\n\n      case \"End\":\n        // End: Select last option\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const lastKey = findNextKey(null, \"backward\");\n          if (lastKey != null) {\n            state.setSelectedKey(lastKey);\n          }\n        }\n        break;\n\n      case \"Escape\":\n        if (state.isOpen()) {\n          e.preventDefault();\n          state.close();\n        }\n        break;\n    }\n  };\n\n  // Handle focus events\n  const handleFocus = (e: FocusEvent) => {\n    getProps().onFocus?.(e);\n    getProps().onFocusChange?.(true);\n    state.setFocused(true);\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    // Focus moving into the open listbox is not a select blur; the menu's own\n    // onBlur clears the state when focus leaves the listbox entirely.\n    if (state.isOpen()) {\n      return;\n    }\n\n    getProps().onBlur?.(e);\n    getProps().onFocusChange?.(false);\n    state.setFocused(false);\n  };\n\n  return {\n    get labelProps() {\n      return labelProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get triggerProps() {\n      const p = getProps();\n      const isOpen = state.isOpen();\n      const isDisabled = p.isDisabled ?? state.isDisabled;\n\n      const baseProps = mergeProps(\n        domProps(),\n        pressProps as Record<string, unknown>,\n        focusProps as Record<string, unknown>,\n        fieldProps as Record<string, unknown>,\n        {\n          id: buttonId,\n          type: \"button\",\n          tabIndex: isDisabled ? undefined : 0,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-expanded\": isOpen,\n          \"aria-controls\": isOpen ? listBoxId : undefined,\n          \"aria-disabled\": isDisabled || undefined,\n          \"aria-required\": p.isRequired || undefined,\n          \"aria-describedby\": p[\"aria-describedby\"] || undefined,\n          // Mirror upstream `useSelect`: the trigger's accessible name folds the\n          // SELECTED VALUE (\"Pro\") ahead of the field label (\"Plan\") → \"Pro Plan\"\n          // via `aria-labelledby=[valueId, labelId]`. Only wire this when there is\n          // a real visible label; with an `aria-label` (no `labelledby`) the field\n          // props' `aria-label` stays the trigger name (label-less legacy path,\n          // keeps TabsPicker/label-less Select unchanged).\n          \"aria-labelledby\": fieldProps[\"aria-labelledby\"]\n            ? [valueId, fieldProps[\"aria-labelledby\"]].filter(Boolean).join(\" \")\n            : undefined,\n          onKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          \"data-open\": isOpen || undefined,\n          \"data-disabled\": isDisabled || undefined,\n          \"data-focus-visible\": isFocusVisible() || undefined,\n        } as Record<string, unknown>,\n      );\n\n      // Add type-select props if enabled\n      if (!p.disallowTypeAhead) {\n        return mergeProps(\n          baseProps,\n          typeSelectProps as Record<string, unknown>,\n        ) as JSX.HTMLAttributes<HTMLElement>;\n      }\n\n      return baseProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get valueProps() {\n      return {\n        id: valueId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    // Surfaced so the styled layer (S2 Picker) can apply the `pressScale` press\n    // effect on the trigger button — upstream S2 wires `pressScale(buttonRef)` on\n    // the RAC Button, which needs the button's live `isPressed`.\n    isPressed,\n    get menuProps() {\n      return {\n        id: listBoxId,\n        role: \"listbox\",\n        // Mirror upstream `useSelect`: the listbox is labelled by the FIELD LABEL\n        // (`fieldProps['aria-labelledby']` → the visible \"Plan\" label), NOT the\n        // trigger button — the button's own accessible name folds in the selected\n        // value (\"Pro Plan\"), which must not leak onto the listbox. Only when\n        // there is no visible label (an `aria-label` on the field) does it fall\n        // back to the trigger id (unchanged legacy behavior for label-less use).\n        \"aria-labelledby\": fieldProps[\"aria-labelledby\"] ?? buttonId,\n        \"aria-multiselectable\": state.selectionMode() === \"multiple\" ? true : undefined,\n        tabIndex: -1,\n        onBlur: (e: FocusEvent) => {\n          // Only a blur that leaves the listbox entirely blurs the select.\n          if ((e.currentTarget as Node | null)?.contains(e.relatedTarget as Node)) {\n            return;\n          }\n\n          getProps().onBlur?.(e);\n          getProps().onFocusChange?.(false);\n          state.setFocused(false);\n        },\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    isFocused,\n    isFocusVisible: () => isFocused() && isFocusVisible(),\n    isOpen: state.isOpen,\n    selectedItem: state.selectedItem,\n  };\n}\n","/**\n * Provides a hidden native select element for form integration.\n * Based on @react-aria/select useHiddenSelect.\n */\n\nimport { type JSX, type Accessor, For, createEffect, onCleanup } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport { createFormValidation } from \"../form/createFormValidation\";\nimport type { SelectState, Key, FormValidationState } from \"@proyecto-viviana/solid-stately\";\n\nexport type ValidationBehavior = \"aria\" | \"native\";\n\nexport interface AriaHiddenSelectProps<T> {\n  /** The state object for the select. */\n  state: SelectState<T>;\n  /** The name attribute for the hidden select. */\n  name?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** Describes the type of autocomplete functionality the select should provide. */\n  autoComplete?: string;\n  /** The `form` attribute to associate the select with a form by ID. */\n  form?: string;\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n  /** A ref to the trigger element for focus on validation error. */\n  triggerRef?: Accessor<HTMLElement | null>;\n  /** Form validation state (optional, for native validation). */\n  validationState?: FormValidationState;\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: JSX.HTMLAttributes<HTMLDivElement>;\n  /** Props for the hidden select element. */\n  selectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;\n  /** Props for the hidden input element (for form submission). */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Provides the accessibility implementation for a hidden select.\n * This is used for native form submission and accessibility on mobile devices.\n */\nexport function createHiddenSelect<T>(\n  props: MaybeAccessor<AriaHiddenSelectProps<T>>,\n): HiddenSelectAria {\n  const getProps = () => access(props);\n\n  // Track the select element for form reset/validation\n  let selectRef: HTMLSelectElement | undefined;\n\n  // Set up form reset handler\n  createEffect(() => {\n    const p = getProps();\n    if (!selectRef) return;\n\n    const form = selectRef.form;\n    if (!form) return;\n\n    const handleReset = () => {\n      // Reset to default selected key (first key or null)\n      const defaultKey = p.state.collection().getFirstKey();\n      p.state.setSelectedKey(defaultKey);\n    };\n\n    form.addEventListener(\"reset\", handleReset);\n\n    onCleanup(() => {\n      form.removeEventListener(\"reset\", handleReset);\n    });\n  });\n\n  // Set up form validation handler for native validation\n  createEffect(() => {\n    const p = getProps();\n    if (!selectRef || p.validationBehavior !== \"native\" || !p.validationState) return;\n\n    createFormValidation(\n      {\n        validationBehavior: p.validationBehavior,\n        focus: () => p.triggerRef?.()?.focus(),\n      },\n      p.validationState,\n      () => selectRef,\n    );\n  });\n\n  return {\n    get containerProps() {\n      return {\n        \"aria-hidden\": true,\n        \"data-a11y-ignore\": \"aria-hidden-focus\",\n      } as JSX.HTMLAttributes<HTMLDivElement>;\n    },\n    get selectProps() {\n      const p = getProps();\n      const state = p.state;\n      const selectedKey = state.selectedKey();\n      const selectedKeys =\n        typeof state.selectedKeys === \"function\"\n          ? state.selectedKeys()\n          : selectedKey != null\n            ? new Set([selectedKey])\n            : new Set<Key>();\n      const validationBehavior = p.validationBehavior ?? \"aria\";\n      const isMultiple =\n        typeof state.selectionMode === \"function\" && state.selectionMode() === \"multiple\";\n      const multipleValue =\n        selectedKeys === \"all\"\n          ? Array.from(state.collection()).map((item) => String(item.key))\n          : Array.from(selectedKeys).map(String);\n\n      return {\n        ref: (el: HTMLSelectElement) => {\n          selectRef = el;\n        },\n        tabIndex: -1,\n        autoComplete: p.autoComplete,\n        disabled: p.isDisabled ?? state.isDisabled,\n        multiple: isMultiple || undefined,\n        name: p.name,\n        form: p.form,\n        // Add required attribute for native form validation\n        required: validationBehavior === \"native\" && p.isRequired,\n        value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLSelectElement;\n          if (isMultiple) {\n            if (typeof state.setSelectedKeys === \"function\") {\n              state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value as Key));\n            } else {\n              const first = target.selectedOptions[0]?.value;\n              state.setSelectedKey((first ?? null) as Key | null);\n            }\n          } else {\n            state.setSelectedKey(target.value as Key);\n          }\n        },\n        style: {\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          opacity: 0,\n          \"font-size\": \"16px\", // Prevents zoom on iOS\n          border: \"none\",\n          cursor: \"default\",\n          margin: 0,\n          padding: 0,\n          \"pointer-events\": \"none\",\n        },\n      } as JSX.SelectHTMLAttributes<HTMLSelectElement>;\n    },\n    get inputProps() {\n      const p = getProps();\n      const state = p.state;\n      const selectedKey = state.selectedKey();\n      const validationBehavior = p.validationBehavior ?? \"aria\";\n\n      // For native validation with required, use type=\"text\" with display:none\n      // so the browser will validate it on form submit\n      const useTextInput = validationBehavior === \"native\" && p.isRequired;\n\n      return {\n        type: useTextInput ? \"text\" : \"hidden\",\n        name: p.name,\n        form: p.form,\n        value: selectedKey != null ? String(selectedKey) : \"\",\n        disabled: p.isDisabled ?? state.isDisabled,\n        required: useTextInput ? p.isRequired : undefined,\n        style: useTextInput ? { display: \"none\" } : undefined,\n      } as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n  };\n}\n\nexport interface HiddenSelectProps<T> {\n  /** The state object for the select. */\n  state: SelectState<T>;\n  /** The name attribute for the hidden select. */\n  name?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** A ref to the trigger element. */\n  triggerRef?: () => HTMLElement | null;\n  /** Label for the select. */\n  label?: string;\n  /** Describes the type of autocomplete functionality the select should provide. */\n  autoComplete?: string;\n  /** The `form` attribute to associate the select with a form by ID. */\n  form?: string;\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n  /** Form validation state (optional, for native validation). */\n  validationState?: FormValidationState;\n}\n\n/**\n * A component that renders a hidden native select for form submission.\n * This is useful on mobile devices where native select behavior is preferred.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {\n  const { containerProps, selectProps } = createHiddenSelect({\n    get state() {\n      return props.state;\n    },\n    get name() {\n      return props.name;\n    },\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    get isRequired() {\n      return props.isRequired;\n    },\n    get autoComplete() {\n      return props.autoComplete;\n    },\n    get form() {\n      return props.form;\n    },\n    get validationBehavior() {\n      return props.validationBehavior;\n    },\n    get triggerRef() {\n      return props.triggerRef;\n    },\n    get validationState() {\n      return props.validationState;\n    },\n  });\n\n  const collection = () => props.state.collection();\n  const selectedKey = () => props.state.selectedKey();\n  const selectedKeys = () =>\n    typeof props.state.selectedKeys === \"function\"\n      ? props.state.selectedKeys()\n      : selectedKey() != null\n        ? new Set([selectedKey() as Key])\n        : new Set<Key>();\n  const isMultiple = () =>\n    typeof props.state.selectionMode === \"function\" && props.state.selectionMode() === \"multiple\";\n\n  return (\n    <div {...containerProps}>\n      <label>\n        {props.label}\n        <select {...selectProps}>\n          <option />\n          <For each={Array.from(collection())}>\n            {(item) => (\n              <option\n                value={String(item.key)}\n                selected={\n                  isMultiple()\n                    ? selectedKeys() === \"all\"\n                      ? true\n                      : (selectedKeys() as Set<Key>).has(item.key)\n                    : item.key === selectedKey()\n                }\n              >\n                {item.textValue}\n              </option>\n            )}\n          </For>\n        </select>\n      </label>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["<Show\n      when={collectionSize() <= 300}\n      fallback={\n        <Show when={props.name}>\n          <For each={hiddenInputValues()}>\n            {(value) => <input {...inputProps} value={value != null ? String(value) : \"\"} />}\n          </For>\n        </Show>\n      }\n    >\n      <div {...containerProps} data-testid=\"hidden-select-container\">\n        <label>\n          {props.label}\n          <select\n            {...selectProps}\n            value={\n              isMultiple()\n                ? selectedKeys() === \"all\"\n                  ? Array.from(collection()).map((item) => String(item.key))\n                  : Array.from(selectedKeys() as Set<Key>).map(String)\n                : selectedKey() != null\n                  ? String(selectedKey())\n                  : \"\"\n            }\n          >\n            <option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>\n            <For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>\n            <Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>\n          </select>\n        </label>\n      </div>\n    </Show>","<Show when={props.name}>\n          <For each={hiddenInputValues()}>\n            {(value) => <input {...inputProps} value={value != null ? String(value) : \"\"} />}\n          </For>\n        </Show>","<For each={hiddenInputValues()}>\n            {(value) => <input {...inputProps} value={value != null ? String(value) : \"\"} />}\n          </For>","<option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>","<label>\n          {props.label}\n          <select\n            {...selectProps}\n            value={\n              isMultiple()\n                ? selectedKeys() === \"all\"\n                  ? Array.from(collection()).map((item) => String(item.key))\n                  : Array.from(selectedKeys() as Set<Key>).map(String)\n                : selectedKey() != null\n                  ? String(selectedKey())\n                  : \"\"\n            }\n          >\n            <option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>\n            <For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>\n            <Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>\n          </select>\n        </label>","<For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>","<select\n            {...selectProps}\n            value={\n              isMultiple()\n                ? selectedKeys() === \"all\"\n                  ? Array.from(collection()).map((item) => String(item.key))\n                  : Array.from(selectedKeys() as Set<Key>).map(String)\n                : selectedKey() != null\n                  ? String(selectedKey())\n                  : \"\"\n            }\n          >\n            <option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>\n            <For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>\n            <Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>\n          </select>","<Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>","collectionSize() === 0 && props.name","<For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>","<div {...containerProps} data-testid=\"hidden-select-container\">\n        <label>\n          {props.label}\n          <select\n            {...selectProps}\n            value={\n              isMultiple()\n                ? selectedKeys() === \"all\"\n                  ? Array.from(collection()).map((item) => String(item.key))\n                  : Array.from(selectedKeys() as Set<Key>).map(String)\n                : selectedKey() != null\n                  ? String(selectedKey())\n                  : \"\"\n            }\n          >\n            <option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>\n            <For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>\n            <Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>\n          </select>\n        </label>\n      </div>"],"sources":["../../src/select/createSelect.ts","../../src/select/createHiddenSelect.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/useSelect.ts\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * Based on @react-aria/select useSelect.\n */\n\nimport { createTrackedEffect } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusRing } from \"../interactions/createFocusRing\";\nimport { createField } from \"../label/createField\";\nimport { createTypeSelect } from \"../selection/createTypeSelect\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport { nodeContains } from \"../utils/dom\";\nimport type { SelectState, CollectionNode } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaSelectProps {\n  /** An ID for the select. */\n  id?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** Whether the select is invalid. */\n  isInvalid?: boolean;\n  /** @deprecated Use isInvalid instead. */\n  validationState?: \"valid\" | \"invalid\";\n  /** Custom validation function. */\n  validate?: (value: unknown) => boolean | string | string[] | null | undefined;\n  /** The label for the select. */\n  label?: JSX.Element;\n  /** A description for the select. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the select. */\n  errorMessage?: JSX.Element;\n  /** An accessible label for the select when no visible label is provided. */\n  \"aria-label\"?: string;\n  /** The ID of an element that labels the select. */\n  \"aria-labelledby\"?: string;\n  /** The ID of an element that describes the select. */\n  \"aria-describedby\"?: string;\n  /** Placeholder text when no option is selected. */\n  placeholder?: string;\n  /** Whether the select should be auto-focused. */\n  autoFocus?: boolean;\n  /** Handler called when focus moves to the select. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler called when focus moves away from the select. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler called when the focus state changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** The name of the select, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the hidden native select with a form element by id. */\n  form?: string;\n  /** Whether type-to-select is disabled. @default false */\n  disallowTypeAhead?: boolean;\n  /** Whether the select can open when its collection is empty. @default false */\n  allowsEmptyCollection?: boolean;\n  /** Whether validation should use ARIA attributes or native browser validation. */\n  validationBehavior?: \"aria\" | \"native\";\n}\n\nexport interface SelectAria<T> {\n  /** Props for the label element. */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the trigger button element. */\n  triggerProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the value display element. */\n  valueProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the listbox/menu popup. */\n  menuProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Whether the select is currently focused. */\n  isFocused: Accessor<boolean>;\n  /** Whether the select has keyboard focus. */\n  isFocusVisible: Accessor<boolean>;\n  /** Whether the select is currently open. */\n  isOpen: Accessor<boolean>;\n  /** Whether the trigger button is currently pressed (for `pressScale`). */\n  isPressed: Accessor<boolean>;\n  /** The currently selected item. */\n  selectedItem: Accessor<CollectionNode<T> | null>;\n}\n\n// Shared data between select and options\nconst selectData = new WeakMap<object, SelectData>();\n\ninterface SelectData {\n  id: string;\n}\n\nexport function getSelectData(state: SelectState): SelectData | undefined {\n  return selectData.get(state);\n}\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n */\nexport function createSelect<T>(\n  props: MaybeAccessor<AriaSelectProps>,\n  state: SelectState<T>,\n  _ref?: () => HTMLElement | null,\n): SelectAria<T> {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n\n  // Generate IDs for associated elements\n  const buttonId = `${id}-button`;\n  const listBoxId = `${id}-listbox`;\n  const valueId = `${id}-value`;\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Share data with child options\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    selectData.set(state, { id });\n\n    _s2Cleanups.push(() => {\n      selectData.delete(state);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  // RAC `useSelect.ts:181-186`: field wiring (label + description/error slot\n  // ids + trigger `aria-describedby`) comes from `useField`, with\n  // `labelElementType: 'span'`. `createField` already ports `useField`, including\n  // `createSlotId` so ids exist only when the slot is in the DOM.\n  const field = createField({\n    get id() {\n      return buttonId;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get description() {\n      return getProps().description;\n    },\n    get errorMessage() {\n      return getProps().errorMessage;\n    },\n    get isInvalid() {\n      return getProps().isInvalid;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return getProps()[\"aria-describedby\"];\n    },\n    labelElementType: \"span\",\n  });\n\n  // Focus ring for keyboard focus styling\n  const { isFocusVisible, focusProps } = createFocusRing({\n    get autoFocus() {\n      return getProps().autoFocus;\n    },\n  });\n\n  // Track focus state\n  const isFocused = state.isFocused;\n\n  // Handle press on trigger\n  const canOpen = () =>\n    getProps().allowsEmptyCollection || state.collection().getFirstKey() != null;\n\n  // Helper to check if key is disabled\n  const isKeyDisabled = (key: string | number): boolean => {\n    const collection = state.collection();\n    return state.isKeyDisabled?.(key) || collection.getItem(key)?.isDisabled || false;\n  };\n\n  // Helper to find the next non-disabled key.\n  const findNextKey = (\n    fromKey: string | number | null,\n    direction: \"forward\" | \"backward\",\n  ): string | number | null => {\n    const collection = state.collection();\n    const getAdjacent =\n      direction === \"forward\"\n        ? (k: string | number) => collection.getKeyAfter(k)\n        : (k: string | number) => collection.getKeyBefore(k);\n    const getBoundary =\n      direction === \"forward\" ? () => collection.getFirstKey() : () => collection.getLastKey();\n\n    let key = fromKey == null ? getBoundary() : getAdjacent(fromKey);\n    while (key != null && isKeyDisabled(key)) {\n      key = getAdjacent(key);\n    }\n\n    return key;\n  };\n\n  const focusKeyForOpen = (): string | number | null => {\n    const selectedKey = state.selectedKey();\n    if (selectedKey != null && !isKeyDisabled(selectedKey)) {\n      return selectedKey;\n    }\n    return findNextKey(null, \"forward\");\n  };\n\n  const openWithFocus = () => {\n    if (state.isOpen() || !canOpen()) {\n      return;\n    }\n    state.open();\n    const focusKey = focusKeyForOpen();\n    if (focusKey != null) {\n      state.setFocusedKey(focusKey);\n    }\n  };\n\n  const { pressProps, isPressed } = createPress({\n    get isDisabled() {\n      return getProps().isDisabled ?? state.isDisabled;\n    },\n    onPress(e) {\n      if (e.pointerType === \"keyboard\") {\n        return;\n      }\n\n      if (state.isOpen()) {\n        state.close();\n      } else {\n        openWithFocus();\n      }\n    },\n  });\n\n  // Type-to-select - for Select, typing directly selects items when closed\n  const { typeSelectProps } = createTypeSelect({\n    collection: () => state.collection(),\n    focusedKey: () => state.selectedKey(), // Use selectedKey as the \"focused\" key for closed Select\n    onFocusedKeyChange: (key) => {\n      // When closed, type-to-select directly changes selection\n      if (!state.isOpen()) {\n        state.setSelectedKey(key);\n      } else {\n        // When open, update focused key (listbox handles selection)\n        state.setFocusedKey(key);\n      }\n    },\n    isKeyDisabled,\n    get isDisabled() {\n      return Boolean(\n        (getProps().disallowTypeAhead ?? false) || getProps().isDisabled || state.isDisabled,\n      );\n    },\n  });\n\n  // Keyboard navigation\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (getProps().isDisabled ?? state.isDisabled) return;\n\n    const currentKey = state.focusedKey() ?? state.selectedKey();\n\n    switch (e.key) {\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (state.isOpen()) {\n          state.close();\n        } else {\n          openWithFocus();\n        }\n        break;\n\n      case \"ArrowDown\":\n        e.preventDefault();\n        if (!state.isOpen()) {\n          if (!canOpen()) {\n            return;\n          }\n          // ArrowDown: Open the dropdown and focus first/selected item\n          state.open();\n          const focusKey =\n            currentKey != null && !isKeyDisabled(currentKey)\n              ? currentKey\n              : findNextKey(currentKey, \"forward\");\n          if (focusKey) {\n            state.setFocusedKey(focusKey);\n          }\n        }\n        // When open, navigation is handled by the listbox\n        break;\n\n      case \"ArrowUp\":\n        e.preventDefault();\n        if (!state.isOpen()) {\n          if (!canOpen()) {\n            return;\n          }\n          // ArrowUp: Open the dropdown and focus last/selected item\n          state.open();\n          const focusKey =\n            currentKey != null && !isKeyDisabled(currentKey)\n              ? currentKey\n              : findNextKey(currentKey, \"backward\");\n          if (focusKey) {\n            state.setFocusedKey(focusKey);\n          }\n        }\n        // When open, navigation is handled by the listbox\n        break;\n\n      case \"ArrowRight\":\n        // ArrowRight: Select next option (for horizontal keyboard navigation pattern)\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const nextKey = findNextKey(currentKey, \"forward\");\n          if (nextKey != null) {\n            state.setSelectedKey(nextKey);\n          }\n        }\n        break;\n\n      case \"ArrowLeft\":\n        // ArrowLeft: Select previous option (for horizontal keyboard navigation pattern)\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const prevKey = findNextKey(currentKey, \"backward\");\n          if (prevKey != null) {\n            state.setSelectedKey(prevKey);\n          }\n        }\n        break;\n\n      case \"Home\":\n        // Home: Select first option\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const firstKey = findNextKey(null, \"forward\");\n          if (firstKey != null) {\n            state.setSelectedKey(firstKey);\n          }\n        }\n        break;\n\n      case \"End\":\n        // End: Select last option\n        if (!state.isOpen()) {\n          e.preventDefault();\n          const lastKey = findNextKey(null, \"backward\");\n          if (lastKey != null) {\n            state.setSelectedKey(lastKey);\n          }\n        }\n        break;\n\n      case \"Escape\":\n        if (state.isOpen()) {\n          e.preventDefault();\n          state.close();\n        }\n        break;\n    }\n  };\n\n  // Handle focus events\n  const handleFocus = (e: FocusEvent) => {\n    getProps().onFocus?.(e);\n    getProps().onFocusChange?.(true);\n    state.setFocused(true);\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    // Focus moving into the open listbox is not a select blur; the menu's own\n    // onBlur clears the state when focus leaves the listbox entirely.\n    if (state.isOpen()) {\n      return;\n    }\n\n    getProps().onBlur?.(e);\n    getProps().onFocusChange?.(false);\n    state.setFocused(false);\n  };\n\n  return {\n    get labelProps() {\n      return field.labelProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get triggerProps() {\n      const p = getProps();\n      const isOpen = state.isOpen();\n      const isDisabled = p.isDisabled ?? state.isDisabled;\n      const fieldProps = field.fieldProps;\n\n      const baseProps = mergeProps(\n        domProps(),\n        pressProps as Record<string, unknown>,\n        focusProps as Record<string, unknown>,\n        fieldProps as Record<string, unknown>,\n        {\n          id: buttonId,\n          type: \"button\",\n          tabIndex: isDisabled ? undefined : 0,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-expanded\": isOpen,\n          \"aria-controls\": isOpen ? listBoxId : undefined,\n          \"aria-disabled\": isDisabled || undefined,\n          \"aria-required\": p.isRequired || undefined,\n          // Mirror upstream `useSelect` exactly: the trigger name starts with\n          // the selected value, then the visible label. When only `aria-label`\n          // is present, the trigger references itself so that label follows the\n          // value as well (\"Pro Plan\"), rather than masking visible text.\n          // `aria-describedby` comes from `createField` (`useField.ts:51-60`) —\n          // do not overwrite it with the raw user prop.\n          \"aria-labelledby\": [\n            valueId,\n            fieldProps[\"aria-labelledby\"],\n            fieldProps[\"aria-label\"] && !fieldProps[\"aria-labelledby\"] ? fieldProps.id : undefined,\n          ]\n            .filter(Boolean)\n            .join(\" \"),\n          onKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          \"data-open\": isOpen || undefined,\n          \"data-disabled\": isDisabled || undefined,\n          \"data-focus-visible\": isFocusVisible() || undefined,\n        } as Record<string, unknown>,\n      );\n\n      // Add type-select props if enabled\n      if (!p.disallowTypeAhead) {\n        return mergeProps(\n          baseProps,\n          typeSelectProps as Record<string, unknown>,\n        ) as JSX.HTMLAttributes<HTMLElement>;\n      }\n\n      return baseProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get valueProps() {\n      return {\n        id: valueId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    // Surfaced so the styled layer (S2 Picker) can apply the `pressScale` press\n    // effect on the trigger button — upstream S2 wires `pressScale(buttonRef)` on\n    // the RAC Button, which needs the button's live `isPressed`.\n    isPressed,\n    get menuProps() {\n      const fieldProps = field.fieldProps;\n      return {\n        id: listBoxId,\n        role: \"listbox\",\n        // Mirror upstream `useSelect`: a visible field label names the listbox;\n        // the trigger is the fallback only for the `aria-label` branch.\n        \"aria-labelledby\": [\n          fieldProps[\"aria-labelledby\"],\n          fieldProps[\"aria-label\"] && !fieldProps[\"aria-labelledby\"] ? fieldProps.id : undefined,\n        ]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-multiselectable\": state.selectionMode() === \"multiple\" ? \"true\" : undefined,\n        tabIndex: -1,\n        onBlur: (e: FocusEvent) => {\n          // Only a blur that leaves the listbox entirely blurs the select.\n          if (nodeContains(e.currentTarget as Node, e.relatedTarget as Node)) {\n            return;\n          }\n\n          getProps().onBlur?.(e);\n          getProps().onFocusChange?.(false);\n          state.setFocused(false);\n        },\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get descriptionProps() {\n      return field.descriptionProps;\n    },\n    get errorMessageProps() {\n      return field.errorMessageProps;\n    },\n    isFocused,\n    isFocusVisible: () => isFocused() && isFocusVisible(),\n    isOpen: state.isOpen,\n    selectedItem: state.selectedItem,\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/HiddenSelect.tsx\n\n/**\n * Provides a hidden native select element for form integration.\n * Ported from packages/react-aria/src/select/HiddenSelect.tsx.\n */\n\nimport { For, Show, createRenderEffect, createSignal, createTrackedEffect } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport { createFormValidation } from \"../form/createFormValidation\";\nimport { visuallyHiddenStyles } from \"../visually-hidden/createVisuallyHidden\";\nimport type { SelectState, Key } from \"@proyecto-viviana/solid-stately\";\n\nexport type ValidationBehavior = \"aria\" | \"native\";\n\nexport interface AriaHiddenSelectProps<T> {\n  /** The state object for the select. */\n  state: SelectState<T>;\n  /** The name attribute for the hidden select. */\n  name?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** Describes the type of autocomplete functionality the select should provide. */\n  autoComplete?: string;\n  /** The `form` attribute to associate the select with a form by ID. */\n  form?: string;\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n  /** A ref to the trigger element for focus on validation error. */\n  triggerRef?: Accessor<HTMLElement | null>;\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: JSX.HTMLAttributes<HTMLDivElement>;\n  /** Props for the hidden select element. */\n  selectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;\n  /** Props for the hidden input element (for form submission). */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Provides the accessibility implementation for a hidden select.\n * This is used for native form submission and accessibility on mobile devices.\n */\nexport function createHiddenSelect<T>(\n  props: MaybeAccessor<AriaHiddenSelectProps<T>>,\n): HiddenSelectAria {\n  const getProps = () => access(props);\n\n  // Track the select element for form reset/validation and for writing the\n  // RAC-controlled `value` after options exist (HTML ignores <select value>\n  // assigned before its <option>s).\n  const [selectEl, setSelectEl] = createSignal<HTMLSelectElement | undefined>();\n\n  const assignSelectRef = (el: HTMLSelectElement | undefined) => {\n    setSelectEl(el);\n  };\n\n  createFormValidation(\n    {\n      get validationBehavior() {\n        return getProps().validationBehavior ?? \"native\";\n      },\n      focus: () => getProps().triggerRef?.()?.focus(),\n    },\n    getProps().state,\n    () => selectEl(),\n  );\n\n  const nativeSelectValue = (): string | string[] => {\n    const p = getProps();\n    const state = p.state;\n    const selectedKey = state.selectedKey();\n    const isMultiple =\n      typeof state.selectionMode === \"function\" && state.selectionMode() === \"multiple\";\n    if (isMultiple) {\n      const selectedKeys =\n        typeof state.selectedKeys === \"function\"\n          ? state.selectedKeys()\n          : selectedKey != null\n            ? new Set([selectedKey])\n            : new Set<Key>();\n      if (selectedKeys === \"all\") {\n        return Array.from(state.collection()).map((item) => String(item.key));\n      }\n      return Array.from(selectedKeys).map(String);\n    }\n    return selectedKey != null ? String(selectedKey) : \"\";\n  };\n\n  // RAC HiddenSelect.tsx:144 — `value: state.value`. React applies that after\n  // the option children commit; Solid has to write the DOM property once the\n  // <option>s exist, or the native select stays on the empty placeholder.\n  createRenderEffect(\n    () => [selectEl(), nativeSelectValue()] as const,\n    ([el, next]) => {\n      if (!el) return;\n      if (Array.isArray(next)) {\n        const selected = new Set(next);\n        for (const option of el.options) {\n          option.selected = selected.has(option.value);\n        }\n      } else if (el.value !== next) {\n        el.value = next;\n      }\n    },\n  );\n\n  // Set up form reset handler\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const p = getProps();\n    const el = selectEl();\n    if (!el) return;\n\n    const form = el.form;\n    if (!form) return;\n\n    const handleReset = () => {\n      // Reset to default selected key (first key or null)\n      const defaultKey = p.state.collection().getFirstKey();\n      p.state.setSelectedKey(defaultKey);\n    };\n\n    form.addEventListener(\"reset\", handleReset);\n\n    _s2Cleanups.push(() => {\n      form.removeEventListener(\"reset\", handleReset);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  return {\n    get containerProps() {\n      return {\n        style: {\n          ...visuallyHiddenStyles,\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n        },\n        \"aria-hidden\": \"true\",\n        \"data-a11y-ignore\": \"aria-hidden-focus\",\n        \"data-react-aria-prevent-focus\": true,\n      } as JSX.HTMLAttributes<HTMLDivElement>;\n    },\n    get selectProps() {\n      const p = getProps();\n      const state = p.state;\n      const selectedKey = state.selectedKey();\n      const selectedKeys =\n        typeof state.selectedKeys === \"function\"\n          ? state.selectedKeys()\n          : selectedKey != null\n            ? new Set([selectedKey])\n            : new Set<Key>();\n      const validationBehavior = p.validationBehavior ?? \"aria\";\n      const isMultiple =\n        typeof state.selectionMode === \"function\" && state.selectionMode() === \"multiple\";\n      const multipleValue =\n        selectedKeys === \"all\"\n          ? Array.from(state.collection()).map((item) => String(item.key))\n          : Array.from(selectedKeys).map(String);\n      const applyNativeSelectChange = (e: Event) => {\n        const target = e.target as HTMLSelectElement;\n        if (isMultiple) {\n          if (typeof state.setSelectedKeys === \"function\") {\n            state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value as Key));\n          } else {\n            const first = target.selectedOptions[0]?.value;\n            state.setSelectedKey((first ?? null) as Key | null);\n          }\n        } else {\n          state.setSelectedKey(target.value as Key);\n        }\n      };\n\n      return {\n        ref: (el: HTMLSelectElement) => {\n          assignSelectRef(el ?? undefined);\n        },\n        tabIndex: -1,\n        autoComplete: p.autoComplete,\n        disabled: p.isDisabled ?? state.isDisabled,\n        multiple: isMultiple || undefined,\n        name: p.name,\n        form: p.form,\n        // Add required attribute for native form validation\n        required: validationBehavior === \"native\" && p.isRequired,\n        value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : \"\",\n        // RAC HiddenSelect.tsx:145-146 — autofill writes through `input` as well as `change`.\n        onChange: applyNativeSelectChange,\n        onInput: applyNativeSelectChange,\n        style: {\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          opacity: 0,\n          \"font-size\": \"16px\", // Prevents zoom on iOS\n          border: \"none\",\n          cursor: \"default\",\n          margin: 0,\n          padding: 0,\n          \"pointer-events\": \"none\",\n        },\n      } as JSX.SelectHTMLAttributes<HTMLSelectElement>;\n    },\n    get inputProps() {\n      const p = getProps();\n      const state = p.state;\n      const selectedKey = state.selectedKey();\n      const validationBehavior = p.validationBehavior ?? \"aria\";\n\n      // For native validation with required, use type=\"text\" with display:none\n      // so the browser will validate it on form submit\n      const useTextInput = validationBehavior === \"native\" && p.isRequired;\n\n      return {\n        type: useTextInput ? \"text\" : \"hidden\",\n        name: p.name,\n        form: p.form,\n        value: selectedKey != null ? String(selectedKey) : \"\",\n        disabled: p.isDisabled ?? state.isDisabled,\n        required: useTextInput ? p.isRequired : undefined,\n        style: useTextInput ? { display: \"none\" } : undefined,\n      } as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n  };\n}\n\nexport interface HiddenSelectProps<T> {\n  /** The state object for the select. */\n  state: SelectState<T>;\n  /** The name attribute for the hidden select. */\n  name?: string;\n  /** Whether the select is disabled. */\n  isDisabled?: boolean;\n  /** Whether the select is required. */\n  isRequired?: boolean;\n  /** A ref to the trigger element. */\n  triggerRef?: () => HTMLElement | null;\n  /** Label for the select. */\n  label?: string;\n  /** Describes the type of autocomplete functionality the select should provide. */\n  autoComplete?: string;\n  /** The `form` attribute to associate the select with a form by ID. */\n  form?: string;\n  /** Validation behavior: 'aria' for realtime, 'native' for on submit. */\n  validationBehavior?: ValidationBehavior;\n}\n\n/**\n * A component that renders a hidden native select for form submission.\n * This is useful on mobile devices where native select behavior is preferred.\n */\nexport function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element {\n  const { containerProps, selectProps, inputProps } = createHiddenSelect({\n    get state() {\n      return props.state;\n    },\n    get name() {\n      return props.name;\n    },\n    get isDisabled() {\n      return props.isDisabled;\n    },\n    get isRequired() {\n      return props.isRequired;\n    },\n    get autoComplete() {\n      return props.autoComplete;\n    },\n    get form() {\n      return props.form;\n    },\n    get validationBehavior() {\n      return props.validationBehavior;\n    },\n    get triggerRef() {\n      return props.triggerRef;\n    },\n  });\n\n  const collection = () => props.state.collection();\n  const selectedKey = () => props.state.selectedKey();\n  const selectedKeys = () =>\n    typeof props.state.selectedKeys === \"function\"\n      ? props.state.selectedKeys()\n      : selectedKey() != null\n        ? new Set([selectedKey() as Key])\n        : new Set<Key>();\n  const isMultiple = () =>\n    typeof props.state.selectionMode === \"function\" && props.state.selectionMode() === \"multiple\";\n  const collectionSize = () => collection().size;\n  const hiddenInputValues = (): Array<Key | null> => {\n    if (isMultiple()) {\n      const keys = selectedKeys();\n      if (keys === \"all\") {\n        return Array.from(collection()).map((item) => item.key);\n      }\n      const listed = Array.from(keys as Set<Key>);\n      return listed.length === 0 ? [null] : listed;\n    }\n    return [selectedKey()];\n  };\n\n  // Mirror RAC HiddenSelect.tsx:172-244: a native <select> inside a <label>\n  // for collections of ≤300 items (autofill); hidden <input>s only when the\n  // collection is larger AND a form name is set. Never both.\n  return (\n    <Show\n      when={collectionSize() <= 300}\n      fallback={\n        <Show when={props.name}>\n          <For each={hiddenInputValues()}>\n            {(value) => <input {...inputProps} value={value != null ? String(value) : \"\"} />}\n          </For>\n        </Show>\n      }\n    >\n      <div {...containerProps} data-testid=\"hidden-select-container\">\n        <label>\n          {props.label}\n          <select\n            {...selectProps}\n            value={\n              isMultiple()\n                ? selectedKeys() === \"all\"\n                  ? Array.from(collection()).map((item) => String(item.key))\n                  : Array.from(selectedKeys() as Set<Key>).map(String)\n                : selectedKey() != null\n                  ? String(selectedKey())\n                  : \"\"\n            }\n          >\n            <option value=\"\" label={\"\\u00A0\"}>\n              {\"\\u00A0\"}\n            </option>\n            <For each={Array.from(collection()).filter((item) => item.type === \"item\")}>\n              {(item) => <option value={String(item.key)}>{item.textValue}</option>}\n            </For>\n            <Show when={collectionSize() === 0 && props.name}>\n              <For each={hiddenInputValues()}>{(value) => <option value={value ?? \"\"} />}</For>\n            </Show>\n          </select>\n        </label>\n      </div>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA,MAAM,6BAAa,IAAI,QAA4B;AAMnD,SAAgB,cAAc,OAA4C;CACxE,OAAO,WAAW,IAAI,KAAK;AAC7B;;;;AAKA,SAAgB,aACd,OACA,OACA,MACe;CACf,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,KAAK,SAAS,SAAS,CAAC,CAAC,EAAE;CAGjC,MAAM,WAAW,GAAG,GAAG;CACvB,MAAM,YAAY,GAAG,GAAG;CACxB,MAAM,UAAU,GAAG,GAAG;CAGtB,MAAM,iBACJ,eAAe,SAAS,GAAyC,EAAE,WAAW,KAAK,CAAC;CAGtF,0BAA0B;EACxB,MAAM,cAAiC,CAAC;EAExC,WAAW,IAAI,OAAO,EAAE,GAAG,CAAC;EAE5B,YAAY,WAAW;GACrB,WAAW,OAAO,KAAK;EACzB,CAAC;EAED,aAAa;GACX,KAAK,MAAM,KAAK,aAAa,EAAE;EACjC;CACF,CAAC;CAMD,MAAM,QAAQ,YAAY;EACxB,IAAI,KAAK;GACP,OAAO;EACT;EACA,IAAI,QAAQ;GACV,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,cAAc;GAChB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,oBAAoB;GACtB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,qBAAqB;GACvB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,kBAAkB;CACpB,CAAC;CAGD,MAAM,EAAE,gBAAgB,eAAe,gBAAgB,EACrD,IAAI,YAAY;EACd,OAAO,SAAS,CAAC,CAAC;CACpB,EACF,CAAC;CAGD,MAAM,YAAY,MAAM;CAGxB,MAAM,gBACJ,SAAS,CAAC,CAAC,yBAAyB,MAAM,WAAW,CAAC,CAAC,YAAY,KAAK;CAG1E,MAAM,iBAAiB,QAAkC;EACvD,MAAM,aAAa,MAAM,WAAW;EACpC,OAAO,MAAM,gBAAgB,GAAG,KAAK,WAAW,QAAQ,GAAG,CAAC,EAAE,cAAc;CAC9E;CAGA,MAAM,eACJ,SACA,cAC2B;EAC3B,MAAM,aAAa,MAAM,WAAW;EACpC,MAAM,cACJ,cAAc,aACT,MAAuB,WAAW,YAAY,CAAC,KAC/C,MAAuB,WAAW,aAAa,CAAC;EAIvD,IAAI,MAAM,WAAW,QAFnB,cAAc,kBAAkB,WAAW,YAAY,UAAU,WAAW,WAAW,EAAA,CAEjD,IAAI,YAAY,OAAO;EAC/D,OAAO,OAAO,QAAQ,cAAc,GAAG,GACrC,MAAM,YAAY,GAAG;EAGvB,OAAO;CACT;CAEA,MAAM,wBAAgD;EACpD,MAAM,cAAc,MAAM,YAAY;EACtC,IAAI,eAAe,QAAQ,CAAC,cAAc,WAAW,GACnD,OAAO;EAET,OAAO,YAAY,MAAM,SAAS;CACpC;CAEA,MAAM,sBAAsB;EAC1B,IAAI,MAAM,OAAO,KAAK,CAAC,QAAQ,GAC7B;EAEF,MAAM,KAAK;EACX,MAAM,WAAW,gBAAgB;EACjC,IAAI,YAAY,MACd,MAAM,cAAc,QAAQ;CAEhC;CAEA,MAAM,EAAE,YAAY,cAAc,YAAY;EAC5C,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC,cAAc,MAAM;EACxC;EACA,QAAQ,GAAG;GACT,IAAI,EAAE,gBAAgB,YACpB;GAGF,IAAI,MAAM,OAAO,GACf,MAAM,MAAM;QAEZ,cAAc;EAElB;CACF,CAAC;CAGD,MAAM,EAAE,oBAAoB,iBAAiB;EAC3C,kBAAkB,MAAM,WAAW;EACnC,kBAAkB,MAAM,YAAY;EACpC,qBAAqB,QAAQ;GAE3B,IAAI,CAAC,MAAM,OAAO,GAChB,MAAM,eAAe,GAAG;QAGxB,MAAM,cAAc,GAAG;EAE3B;EACA;EACA,IAAI,aAAa;GACf,OAAO,SACJ,SAAS,CAAC,CAAC,qBAAqB,UAAU,SAAS,CAAC,CAAC,cAAc,MAAM,UAC5E;EACF;CACF,CAAC;CAGD,MAAM,aAA2D,MAAM;EACrE,IAAI,SAAS,CAAC,CAAC,cAAc,MAAM,YAAY;EAE/C,MAAM,aAAa,MAAM,WAAW,KAAK,MAAM,YAAY;EAE3D,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,EAAE,eAAe;IACjB,IAAI,MAAM,OAAO,GACf,MAAM,MAAM;SAEZ,cAAc;IAEhB;GAEF,KAAK;IACH,EAAE,eAAe;IACjB,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,IAAI,CAAC,QAAQ,GACX;KAGF,MAAM,KAAK;KACX,MAAM,WACJ,cAAc,QAAQ,CAAC,cAAc,UAAU,IAC3C,aACA,YAAY,YAAY,SAAS;KACvC,IAAI,UACF,MAAM,cAAc,QAAQ;IAEhC;IAEA;GAEF,KAAK;IACH,EAAE,eAAe;IACjB,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,IAAI,CAAC,QAAQ,GACX;KAGF,MAAM,KAAK;KACX,MAAM,WACJ,cAAc,QAAQ,CAAC,cAAc,UAAU,IAC3C,aACA,YAAY,YAAY,UAAU;KACxC,IAAI,UACF,MAAM,cAAc,QAAQ;IAEhC;IAEA;GAEF,KAAK;IAEH,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,EAAE,eAAe;KACjB,MAAM,UAAU,YAAY,YAAY,SAAS;KACjD,IAAI,WAAW,MACb,MAAM,eAAe,OAAO;IAEhC;IACA;GAEF,KAAK;IAEH,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,EAAE,eAAe;KACjB,MAAM,UAAU,YAAY,YAAY,UAAU;KAClD,IAAI,WAAW,MACb,MAAM,eAAe,OAAO;IAEhC;IACA;GAEF,KAAK;IAEH,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,EAAE,eAAe;KACjB,MAAM,WAAW,YAAY,MAAM,SAAS;KAC5C,IAAI,YAAY,MACd,MAAM,eAAe,QAAQ;IAEjC;IACA;GAEF,KAAK;IAEH,IAAI,CAAC,MAAM,OAAO,GAAG;KACnB,EAAE,eAAe;KACjB,MAAM,UAAU,YAAY,MAAM,UAAU;KAC5C,IAAI,WAAW,MACb,MAAM,eAAe,OAAO;IAEhC;IACA;GAEF,KAAK,UACH,IAAI,MAAM,OAAO,GAAG;IAClB,EAAE,eAAe;IACjB,MAAM,MAAM;GACd;EAEJ;CACF;CAGA,MAAM,eAAe,MAAkB;EACrC,SAAS,CAAC,CAAC,UAAU,CAAC;EACtB,SAAS,CAAC,CAAC,gBAAgB,IAAI;EAC/B,MAAM,WAAW,IAAI;CACvB;CAEA,MAAM,cAAc,MAAkB;EAGpC,IAAI,MAAM,OAAO,GACf;EAGF,SAAS,CAAC,CAAC,SAAS,CAAC;EACrB,SAAS,CAAC,CAAC,gBAAgB,KAAK;EAChC,MAAM,WAAW,KAAK;CACxB;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,MAAM,IAAI,SAAS;GACnB,MAAM,SAAS,MAAM,OAAO;GAC5B,MAAM,aAAa,EAAE,cAAc,MAAM;GACzC,MAAM,aAAa,MAAM;GAEzB,MAAM,YAAY,WAChB,SAAS,GACT,YACA,YACA,YACA;IACE,IAAI;IACJ,MAAM;IACN,UAAU,aAAa,KAAA,IAAY;IACnC,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB,SAAS,YAAY,KAAA;IACtC,iBAAiB,cAAc,KAAA;IAC/B,iBAAiB,EAAE,cAAc,KAAA;IAOjC,mBAAmB;KACjB;KACA,WAAW;KACX,WAAW,iBAAiB,CAAC,WAAW,qBAAqB,WAAW,KAAK,KAAA;IAC/E,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX;IACA,SAAS;IACT,QAAQ;IACR,aAAa,UAAU,KAAA;IACvB,iBAAiB,cAAc,KAAA;IAC/B,sBAAsB,eAAe,KAAK,KAAA;GAC5C,CACF;GAGA,IAAI,CAAC,EAAE,mBACL,OAAO,WACL,WACA,eACF;GAGF,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,EACL,IAAI,QACN;EACF;EAIA;EACA,IAAI,YAAY;GACd,MAAM,aAAa,MAAM;GACzB,OAAO;IACL,IAAI;IACJ,MAAM;IAGN,mBAAmB,CACjB,WAAW,oBACX,WAAW,iBAAiB,CAAC,WAAW,qBAAqB,WAAW,KAAK,KAAA,CAC/E,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IACX,wBAAwB,MAAM,cAAc,MAAM,aAAa,SAAS,KAAA;IACxE,UAAU;IACV,SAAS,MAAkB;KAEzB,IAAI,aAAa,EAAE,eAAuB,EAAE,aAAqB,GAC/D;KAGF,SAAS,CAAC,CAAC,SAAS,CAAC;KACrB,SAAS,CAAC,CAAC,gBAAgB,KAAK;KAChC,MAAM,WAAW,KAAK;IACxB;GACF;EACF;EACA,IAAI,mBAAmB;GACrB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA;EACA,sBAAsB,UAAU,KAAK,eAAe;EACpD,QAAQ,MAAM;EACd,cAAc,MAAM;CACtB;AACF;;;;;;;;;;;;;;ACncA,SAAgB,mBACd,OACkB;CAClB,MAAM,iBAAiB,OAAO,KAAK;CAKnC,MAAM,CAAC,UAAU,eAAe,aAA4C;CAE5E,MAAM,mBAAmB,OAAsC;EAC7D,YAAY,EAAE;CAChB;CAEA,qBACE;EACE,IAAI,qBAAqB;GACvB,OAAO,SAAS,CAAC,CAAC,sBAAsB;EAC1C;EACA,aAAa,SAAS,CAAC,CAAC,aAAa,CAAC,EAAE,MAAM;CAChD,GACA,SAAS,CAAC,CAAC,aACL,SAAS,CACjB;CAEA,MAAM,0BAA6C;EAEjD,MAAM,QADI,SACI,CAAA,CAAE;EAChB,MAAM,cAAc,MAAM,YAAY;EAGtC,IADE,OAAO,MAAM,kBAAkB,cAAc,MAAM,cAAc,MAAM,YACzD;GACd,MAAM,eACJ,OAAO,MAAM,iBAAiB,aAC1B,MAAM,aAAa,IACnB,eAAe,uBACb,IAAI,IAAI,CAAC,WAAW,CAAC,oBACrB,IAAI,IAAS;GACrB,IAAI,iBAAiB,OACnB,OAAO,MAAM,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,OAAO,KAAK,GAAG,CAAC;GAEtE,OAAO,MAAM,KAAK,YAAY,CAAC,CAAC,IAAI,MAAM;EAC5C;EACA,OAAO,eAAe,OAAO,OAAO,WAAW,IAAI;CACrD;CAKA,yBACQ,CAAC,SAAS,GAAG,kBAAkB,CAAC,IACrC,CAAC,IAAI,UAAU;EACd,IAAI,CAAC,IAAI;EACT,IAAI,MAAM,QAAQ,IAAI,GAAG;GACvB,MAAM,WAAW,IAAI,IAAI,IAAI;GAC7B,KAAK,MAAM,UAAU,GAAG,SACtB,OAAO,WAAW,SAAS,IAAI,OAAO,KAAK;EAE/C,OAAO,IAAI,GAAG,UAAU,MACtB,GAAG,QAAQ;CAEf,CACF;CAGA,0BAA0B;EACxB,MAAM,cAAiC,CAAC;EAExC,MAAM,IAAI,SAAS;EACnB,MAAM,KAAK,SAAS;EACpB,IAAI,CAAC,IAAI;EAET,MAAM,OAAO,GAAG;EAChB,IAAI,CAAC,MAAM;EAEX,MAAM,oBAAoB;GAExB,MAAM,aAAa,EAAE,MAAM,WAAW,CAAC,CAAC,YAAY;GACpD,EAAE,MAAM,eAAe,UAAU;EACnC;EAEA,KAAK,iBAAiB,SAAS,WAAW;EAE1C,YAAY,WAAW;GACrB,KAAK,oBAAoB,SAAS,WAAW;EAC/C,CAAC;EAED,aAAa;GACX,KAAK,MAAM,KAAK,aAAa,EAAE;EACjC;CACF,CAAC;CAED,OAAO;EACL,IAAI,iBAAiB;GACnB,OAAO;IACL,OAAO;KACL,GAAG;KACH,UAAU;KACV,KAAK;KACL,MAAM;IACR;IACA,eAAe;IACf,oBAAoB;IACpB,iCAAiC;GACnC;EACF;EACA,IAAI,cAAc;GAChB,MAAM,IAAI,SAAS;GACnB,MAAM,QAAQ,EAAE;GAChB,MAAM,cAAc,MAAM,YAAY;GACtC,MAAM,eACJ,OAAO,MAAM,iBAAiB,aAC1B,MAAM,aAAa,IACnB,eAAe,uBACb,IAAI,IAAI,CAAC,WAAW,CAAC,oBACrB,IAAI,IAAS;GACrB,MAAM,qBAAqB,EAAE,sBAAsB;GACnD,MAAM,aACJ,OAAO,MAAM,kBAAkB,cAAc,MAAM,cAAc,MAAM;GACzE,MAAM,gBACJ,iBAAiB,QACb,MAAM,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,OAAO,KAAK,GAAG,CAAC,IAC7D,MAAM,KAAK,YAAY,CAAC,CAAC,IAAI,MAAM;GACzC,MAAM,2BAA2B,MAAa;IAC5C,MAAM,SAAS,EAAE;IACjB,IAAI,YAAY;KACd,IAAI,OAAO,MAAM,oBAAoB,YACnC,MAAM,gBAAgB,MAAM,KAAK,OAAO,eAAe,CAAC,CAAC,KAAK,MAAM,EAAE,KAAY,CAAC;UAC9E;MACL,MAAM,QAAQ,OAAO,gBAAgB,EAAE,EAAE;MACzC,MAAM,eAAgB,SAAS,IAAmB;KACpD;IACF,OACE,MAAM,eAAe,OAAO,KAAY;GAE5C;GAEA,OAAO;IACL,MAAM,OAA0B;KAC9B,gBAAgB,MAAM,KAAA,CAAS;IACjC;IACA,UAAU;IACV,cAAc,EAAE;IAChB,UAAU,EAAE,cAAc,MAAM;IAChC,UAAU,cAAc,KAAA;IACxB,MAAM,EAAE;IACR,MAAM,EAAE;IAER,UAAU,uBAAuB,YAAY,EAAE;IAC/C,OAAO,aAAa,gBAAgB,eAAe,OAAO,OAAO,WAAW,IAAI;IAEhF,UAAU;IACV,SAAS;IACT,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,SAAS;KACT,aAAa;KACb,QAAQ;KACR,QAAQ;KACR,QAAQ;KACR,SAAS;KACT,kBAAkB;IACpB;GACF;EACF;EACA,IAAI,aAAa;GACf,MAAM,IAAI,SAAS;GACnB,MAAM,QAAQ,EAAE;GAChB,MAAM,cAAc,MAAM,YAAY;GAKtC,MAAM,gBAJqB,EAAE,sBAAsB,YAIP,YAAY,EAAE;GAE1D,OAAO;IACL,MAAM,eAAe,SAAS;IAC9B,MAAM,EAAE;IACR,MAAM,EAAE;IACR,OAAO,eAAe,OAAO,OAAO,WAAW,IAAI;IACnD,UAAU,EAAE,cAAc,MAAM;IAChC,UAAU,eAAe,EAAE,aAAa,KAAA;IACxC,OAAO,eAAe,EAAE,SAAS,OAAO,IAAI,KAAA;GAC9C;EACF;CACF;AACF;;;;;AA2BA,SAAgB,aAAgB,OAA0C;CACxE,MAAM,EAAE,gBAAgB,aAAa,eAAe,mBAAmB;EACrE,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,OAAO;GACT,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,OAAO;GACT,OAAO,MAAM;EACf;EACA,IAAI,qBAAqB;GACvB,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;CACF,CAAC;CAED,MAAM,mBAAmB,MAAM,MAAM,WAAW;CAChD,MAAM,oBAAoB,MAAM,MAAM,YAAY;CAClD,MAAM,qBACJ,OAAO,MAAM,MAAM,iBAAiB,aAChC,MAAM,MAAM,aAAa,IACzB,YAAY,KAAK,uBACf,IAAI,IAAI,CAAC,YAAY,CAAQ,CAAC,oBAC9B,IAAI,IAAS;CACrB,MAAM,mBACJ,OAAO,MAAM,MAAM,kBAAkB,cAAc,MAAM,MAAM,cAAc,MAAM;CACrF,MAAM,uBAAuB,WAAW,CAAC,CAAC;CAC1C,MAAM,0BAA6C;EACjD,IAAI,WAAW,GAAG;GAChB,MAAM,OAAO,aAAa;GAC1B,IAAI,SAAS,OACX,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,KAAK,GAAG;GAExD,MAAM,SAAS,MAAM,KAAK,IAAgB;GAC1C,OAAO,OAAO,WAAW,IAAI,CAAC,IAAI,IAAI;EACxC;EACA,OAAO,CAAC,YAAY,CAAC;CACvB;CAKA,OACEA,gBAAAA,MAAAA;EACE,IAAA,OAAA;GAAM,OAAA,eAAe,KAAK;EAAG;EAC7B,IAAA,WAAA;GACEC,OAAAA,gBAAAA,MAAAA;IAAM,IAAA,OAAA;KAAM,OAAA,MAAM;IAAI;IAAtB,IAAA,WAAA;KACEC,OAAAA,gBAAAA,KAAAA;MAAK,IAAA,OAAA;OAAM,OAAA,kBAAkB;MAAC;MAA9BA,WACI,iBAAU;OAAmE,IAAA,SAAA,eAAA,OAAA;OAAxD,OAAA,QAAA,CAAA,YAAA,EAAY,IAAA,QAAA;QAAO,OAAA,SAAS,OAAO,OAAO,KAAK,IAAI;OAAE,EAAA,CAAA,GAAA,KAAA;OAAhE,mBAAmE;OAAnE,OAAA;MAAmE,EAAA,CAAA;KAC5E,CAAA;IACD;;EACR;EARF,IAAA,WAAA;GAUE,IAAA,OAAA,eAAA,MA0BK;GAzBH,IAAA,QAAA,KAAA;;GAwBO,IAAA,CAAA,OAAA,SAAA,cAAA,MAAA,WAAA;GAtBL,IAAA,QAAA,MAAA;GAAA,IAAA,QAYEC,MAAAA,WAZF;GAqBQ,IAAA,CAAA,OAAA,UAAA,cAAA,MAAA,WAAA;GArBR,IAAA,SAAA,MAAA;GAqBQ,IAAA,CAAA,QAAA,UAAA,cAAA,OAAA,WAAA;GAxBH,OAAA,MAAA,CAAA,gBAAA,EAAgB,eAAA,0BAAA,CAAA,GAAA,IAAA;GACvB,OAAA,aACE;IAAC,OAAA,MAAM;GAAK,GADdC,OAAAA,KAwBO;GArBC,OAAA,OAAA,CAAA,aAAA,EACJ,IAAA,QAAA;IACE,OAAA,WAAW,IACP,aAAa,MAAM,QACjB,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,OAAO,KAAK,GAAG,CAAC,IACvD,MAAM,KAAK,aAAa,CAAa,CAAC,CAAC,IAAI,MAAM,IACnD,YAAY,KAAK,OACf,OAAO,YAAY,CAAC,IACpB;GACR,EAAA,CAAA,GAAA,IAAA;GAVF,OAAA,OAeEC,gBAAAA,KAAAA;IAAK,IAAA,OAAA;KAAM,OAAA,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,SAAS,KAAK,SAAS,MAAM;IAAC;IAA1EA,WACI,gBAAS;KAAyD,IAAA,SAAA,eAAA,OAAA;KAAzD,OAAA,cAAiC;MAAC,OAAA,KAAK;KAAS,CAAS;KAAjD,aAAO,OAAO,KAAK,GAAG,IAAtB,QAAA;MAAuB,YAAA,QAAA,SAAA,GAAA;;KAA/B,OAAA;IAAyD,EAAA,CAAA;GACjE,CAAA,GAjBPC,OAAAA,MAqBQ;GArBR,OAAA,OAkBEC,gBAAAA,MAAAA;IAAM,IAAA,OAAA;KAAMC,OAAAA,WAAAA;MAAe,OAAA,eAAA,MAAM;KAAc,CAAA,CAAC,CAAD,KAAT,MAAM;IAAI;IAAhD,IAAA,WAAA;KACEC,OAAAA,gBAAAA,KAAAA;MAAK,IAAA,OAAA;OAAM,OAAA,kBAAkB;MAAC;MAA9BA,WAAkC,iBAAU;OAA6B,IAAA,SAAA,eAAA,OAAA;OAArB,YAAA,QAAA,SAAO,SAAS,EAAE;OAA1B,OAAA;MAA6B,EAAA,CAAA;KAAO,CAAA;IAC5E;GApBRH,CAAAA,GAAAA,QAAAA,MAqBQ;GAxBZ,mBA0BK;GApCP,OAUEI;EA2BI;;AAEV"}

package/dist/_chunk/select.jsx

@@ -1,13 +1,39 @@
-import { t as createPress } from "./createPress.jsx";
-import { i as mergeProps$1 } from "./env.jsx";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/HiddenSelect.tsx
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/select/useSelect.ts
+import { t as mergeProps } from "./mergeProps.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { t as access } from "./reactivity.jsx";
+import { v as nodeContains } from "./dom.jsx";
+import { t as createPress } from "./createPress.jsx";
 import { t as createFocusRing } from "./createFocusRing.jsx";
 import { createId } from "../ssr/index.jsx";
-import { t as createLabel } from "./createLabel.jsx";
-import { t as createTypeSelect } from "./createTypeSelect.jsx";
 import { t as createFormValidation } from "./createFormValidation.jsx";
-import { For, createEffect, onCleanup } from "solid-js";
+import { t as createField } from "./createField.jsx";
+import { t as createTypeSelect } from "./createTypeSelect.jsx";
+import { n as visuallyHiddenStyles } from "./createVisuallyHidden.jsx";
+import { For, Show, createRenderEffect, createSignal, createTrackedEffect } from "solid-js";
 //#region src/select/createSelect.ts
 /**
 * Provides the behavior and accessibility implementation for a select component.
@@ -27,28 +53,42 @@ function createSelect(props, state, _ref) {
 	const buttonId = `${id}-button`;
 	const listBoxId = `${id}-listbox`;
 	const valueId = `${id}-value`;
-	const descriptionId = `${id}-description`;
-	const errorMessageId = `${id}-error`;
 	const domProps = () => filterDOMProps(getProps(), { labelable: true });
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		selectData.set(state, { id });
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			selectData.delete(state);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	const { labelProps, fieldProps } = createLabel({
+	const field = createField({
 		get id() {
 			return buttonId;
 		},
 		get label() {
 			return getProps().label;
 		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage;
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
 		get "aria-label"() {
 			return getProps()["aria-label"];
 		},
 		get "aria-labelledby"() {
 			return getProps()["aria-labelledby"];
 		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
 		labelElementType: "span"
 	});
 	const { isFocusVisible, focusProps } = createFocusRing({ get autoFocus() {
@@ -156,12 +196,10 @@ function createSelect(props, state, _ref) {
 					if (lastKey != null) state.setSelectedKey(lastKey);
 				}
 				break;
-			case "Escape":
-				if (state.isOpen()) {
-					e.preventDefault();
-					state.close();
-				}
-				break;
+			case "Escape": if (state.isOpen()) {
+				e.preventDefault();
+				state.close();
+			}
 		}
 	};
 	const handleFocus = (e) => {
@@ -177,13 +215,14 @@ function createSelect(props, state, _ref) {
 	};
 	return {
 		get labelProps() {
-			return labelProps;
+			return field.labelProps;
 		},
 		get triggerProps() {
 			const p = getProps();
 			const isOpen = state.isOpen();
 			const isDisabled = p.isDisabled ?? state.isDisabled;
-			const baseProps = mergeProps$1(domProps(), pressProps, focusProps, fieldProps, {
+			const fieldProps = field.fieldProps;
+			const baseProps = mergeProps(domProps(), pressProps, focusProps, fieldProps, {
 				id: buttonId,
 				type: "button",
 				tabIndex: isDisabled ? void 0 : 0,
@@ -192,8 +231,11 @@ function createSelect(props, state, _ref) {
 				"aria-controls": isOpen ? listBoxId : void 0,
 				"aria-disabled": isDisabled || void 0,
 				"aria-required": p.isRequired || void 0,
-				"aria-describedby": p["aria-describedby"] || void 0,
-				"aria-labelledby": fieldProps["aria-labelledby"] ? [valueId, fieldProps["aria-labelledby"]].filter(Boolean).join(" ") : void 0,
+				"aria-labelledby": [
+					valueId,
+					fieldProps["aria-labelledby"],
+					fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : void 0
+				].filter(Boolean).join(" "),
 				onKeyDown,
 				onFocus: handleFocus,
 				onBlur: handleBlur,
@@ -201,7 +243,7 @@ function createSelect(props, state, _ref) {
 				"data-disabled": isDisabled || void 0,
 				"data-focus-visible": isFocusVisible() || void 0
 			});
-			if (!p.disallowTypeAhead) return mergeProps$1(baseProps, typeSelectProps);
+			if (!p.disallowTypeAhead) return mergeProps(baseProps, typeSelectProps);
 			return baseProps;
 		},
 		get valueProps() {
@@ -209,14 +251,15 @@ function createSelect(props, state, _ref) {
 		},
 		isPressed,
 		get menuProps() {
+			const fieldProps = field.fieldProps;
 			return {
 				id: listBoxId,
 				role: "listbox",
-				"aria-labelledby": fieldProps["aria-labelledby"] ?? buttonId,
-				"aria-multiselectable": state.selectionMode() === "multiple" ? true : void 0,
+				"aria-labelledby": [fieldProps["aria-labelledby"], fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : void 0].filter(Boolean).join(" "),
+				"aria-multiselectable": state.selectionMode() === "multiple" ? "true" : void 0,
 				tabIndex: -1,
 				onBlur: (e) => {
-					if (e.currentTarget?.contains(e.relatedTarget)) return;
+					if (nodeContains(e.currentTarget, e.relatedTarget)) return;
 					getProps().onBlur?.(e);
 					getProps().onFocusChange?.(false);
 					state.setFocused(false);
@@ -224,10 +267,10 @@ function createSelect(props, state, _ref) {
 			};
 		},
 		get descriptionProps() {
-			return { id: descriptionId };
+			return field.descriptionProps;
 		},
 		get errorMessageProps() {
-			return { id: errorMessageId };
+			return field.errorMessageProps;
 		},
 		isFocused,
 		isFocusVisible: () => isFocused() && isFocusVisible(),
@@ -239,7 +282,7 @@ function createSelect(props, state, _ref) {
 //#region src/select/createHiddenSelect.tsx
 /**
 * Provides a hidden native select element for form integration.
-* Based on @react-aria/select useHiddenSelect.
+* Ported from packages/react-aria/src/select/HiddenSelect.tsx.
 */
 /**
 * Provides the accessibility implementation for a hidden select.
@@ -247,47 +290,87 @@ function createSelect(props, state, _ref) {
 */
 function createHiddenSelect(props) {
 	const getProps = () => access(props);
-	let selectRef;
-	createEffect(() => {
+	const [selectEl, setSelectEl] = createSignal();
+	const assignSelectRef = (el) => {
+		setSelectEl(el);
+	};
+	createFormValidation({
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		focus: () => getProps().triggerRef?.()?.focus()
+	}, getProps().state, () => selectEl());
+	const nativeSelectValue = () => {
+		const state = getProps().state;
+		const selectedKey = state.selectedKey();
+		if (typeof state.selectionMode === "function" && state.selectionMode() === "multiple") {
+			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+			if (selectedKeys === "all") return Array.from(state.collection()).map((item) => String(item.key));
+			return Array.from(selectedKeys).map(String);
+		}
+		return selectedKey != null ? String(selectedKey) : "";
+	};
+	createRenderEffect(() => [selectEl(), nativeSelectValue()], ([el, next]) => {
+		if (!el) return;
+		if (Array.isArray(next)) {
+			const selected = new Set(next);
+			for (const option of el.options) option.selected = selected.has(option.value);
+		} else if (el.value !== next) el.value = next;
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const p = getProps();
-		if (!selectRef) return;
-		const form = selectRef.form;
+		const el = selectEl();
+		if (!el) return;
+		const form = el.form;
 		if (!form) return;
 		const handleReset = () => {
 			const defaultKey = p.state.collection().getFirstKey();
 			p.state.setSelectedKey(defaultKey);
 		};
 		form.addEventListener("reset", handleReset);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			form.removeEventListener("reset", handleReset);
 		});
-	});
-	createEffect(() => {
-		const p = getProps();
-		if (!selectRef || p.validationBehavior !== "native" || !p.validationState) return;
-		createFormValidation({
-			validationBehavior: p.validationBehavior,
-			focus: () => p.triggerRef?.()?.focus()
-		}, p.validationState, () => selectRef);
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return {
 		get containerProps() {
 			return {
-				"aria-hidden": true,
-				"data-a11y-ignore": "aria-hidden-focus"
+				style: {
+					...visuallyHiddenStyles,
+					position: "fixed",
+					top: 0,
+					left: 0
+				},
+				"aria-hidden": "true",
+				"data-a11y-ignore": "aria-hidden-focus",
+				"data-react-aria-prevent-focus": true
 			};
 		},
 		get selectProps() {
 			const p = getProps();
 			const state = p.state;
 			const selectedKey = state.selectedKey();
-			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? new Set([selectedKey]) : /* @__PURE__ */ new Set();
+			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
 			const validationBehavior = p.validationBehavior ?? "aria";
 			const isMultiple = typeof state.selectionMode === "function" && state.selectionMode() === "multiple";
 			const multipleValue = selectedKeys === "all" ? Array.from(state.collection()).map((item) => String(item.key)) : Array.from(selectedKeys).map(String);
+			const applyNativeSelectChange = (e) => {
+				const target = e.target;
+				if (isMultiple) {
+					if (typeof state.setSelectedKeys === "function") state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value));
+					else {
+						const first = target.selectedOptions[0]?.value;
+						state.setSelectedKey(first ?? null);
+					}
+				} else state.setSelectedKey(target.value);
+			};
 			return {
 				ref: (el) => {
-					selectRef = el;
+					assignSelectRef(el ?? void 0);
 				},
 				tabIndex: -1,
 				autoComplete: p.autoComplete,
@@ -297,15 +380,8 @@ function createHiddenSelect(props) {
 				form: p.form,
 				required: validationBehavior === "native" && p.isRequired,
 				value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : "",
-				onChange: (e) => {
-					const target = e.target;
-					if (isMultiple) if (typeof state.setSelectedKeys === "function") state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value));
-					else {
-						const first = target.selectedOptions[0]?.value;
-						state.setSelectedKey(first ?? null);
-					}
-					else state.setSelectedKey(target.value);
-				},
+				onChange: applyNativeSelectChange,
+				onInput: applyNativeSelectChange,
 				style: {
 					position: "absolute",
 					top: 0,
@@ -344,7 +420,7 @@ function createHiddenSelect(props) {
 * This is useful on mobile devices where native select behavior is preferred.
 */
 function HiddenSelect(props) {
-	const { containerProps, selectProps } = createHiddenSelect({
+	const { containerProps, selectProps, inputProps } = createHiddenSelect({
 		get state() {
 			return props.state;
 		},
@@ -368,28 +444,44 @@ function HiddenSelect(props) {
 		},
 		get triggerRef() {
 			return props.triggerRef;
-		},
-		get validationState() {
-			return props.validationState;
 		}
 	});
 	const collection = () => props.state.collection();
 	const selectedKey = () => props.state.selectedKey();
-	const selectedKeys = () => typeof props.state.selectedKeys === "function" ? props.state.selectedKeys() : selectedKey() != null ? new Set([selectedKey()]) : /* @__PURE__ */ new Set();
+	const selectedKeys = () => typeof props.state.selectedKeys === "function" ? props.state.selectedKeys() : selectedKey() != null ? /* @__PURE__ */ new Set([selectedKey()]) : /* @__PURE__ */ new Set();
 	const isMultiple = () => typeof props.state.selectionMode === "function" && props.state.selectionMode() === "multiple";
-	return <div {...containerProps}>
-      <label>
-        {props.label}
-        <select {...selectProps}>
-          <option />
-          <For each={Array.from(collection())}>
-            {(item) => <option value={String(item.key)} selected={isMultiple() ? selectedKeys() === "all" ? true : selectedKeys().has(item.key) : item.key === selectedKey()}>
-                {item.textValue}
-              </option>}
+	const collectionSize = () => collection().size;
+	const hiddenInputValues = () => {
+		if (isMultiple()) {
+			const keys = selectedKeys();
+			if (keys === "all") return Array.from(collection()).map((item) => item.key);
+			const listed = Array.from(keys);
+			return listed.length === 0 ? [null] : listed;
+		}
+		return [selectedKey()];
+	};
+	return <Show when={collectionSize() <= 300} fallback={<Show when={props.name}>
+          <For each={hiddenInputValues()}>
+            {(value) => <input {...inputProps} value={value != null ? String(value) : ""} />}
           </For>
-        </select>
-      </label>
-    </div>;
+        </Show>}>
+      <div {...containerProps} data-testid="hidden-select-container">
+        <label>
+          {props.label}
+          <select {...selectProps} value={isMultiple() ? selectedKeys() === "all" ? Array.from(collection()).map((item) => String(item.key)) : Array.from(selectedKeys()).map(String) : selectedKey() != null ? String(selectedKey()) : ""}>
+            <option value="" label={"\xA0"}>
+              {"\xA0"}
+            </option>
+            <For each={Array.from(collection()).filter((item) => item.type === "item")}>
+              {(item) => <option value={String(item.key)}>{item.textValue}</option>}
+            </For>
+            <Show when={collectionSize() === 0 && props.name}>
+              <For each={hiddenInputValues()}>{(value) => <option value={value ?? ""} />}</For>
+            </Show>
+          </select>
+        </label>
+      </div>
+    </Show>;
 }
 //#endregion
 export { getSelectData as i, createHiddenSelect as n, createSelect as r, HiddenSelect as t };