feat(select): beta, including changeset

Author: thejackshelton

.changeset/tidy-coats-admire.md

@@ -0,0 +1,28 @@
+---
+'@qwik-ui/headless': patch
+---
+
+## Select component hits beta!
+
+## Features
+
+- Accessible as a button that shows a list, following web a11y standards.
+- Support for single selection.
+- Controlled or uncontrolled.
+- Disabled option support.
+- Stop focus management via the Tab key.
+- Grouped options support.
+- Looping support.
+- Support for custom scroll behavior.
+- Listbox UI is placed above everything else. (SelectPopover)
+- Custom Positioning (SelectPopover)
+- Option selection and focus management by typing (typeahead).
+- Keyboard support for option navigation via arrow keys and focus management.
+- Automatic focus management for first and last options.
+- Supports a custom placeholder.
+
+## Roadmap
+
+- Opt-in native form support via a visually hidden select.
+- RTL support.
+- Multiple Selection and its respective keyboard interactions.

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

@@ -0,0 +1,42 @@
+/*!
+ * Portions of this file are based on code from react-spectrum.
+ * Apache License Version 2.0, Copyright 2020 Adobe.
+ *
+ * Credits to the React Spectrum team:
+ * https://github.com/adobe/react-spectrum/blob/5c1920e50d4b2b80c826ca91aff55c97350bf9f9/packages/@react-aria/select/src/HiddenSelect.tsx
+ */
+
+import { PropsOf, component$ } from '@builder.io/qwik';
+
+export interface 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'>;
+
+  /** HTML form input name. */
+  name?: string;
+
+  /** Sets the disabled state of the select and input. */
+  disabled?: boolean;
+}
+
+// export function useHiddenSelect(props: AriaHiddenSelectProps) {
+//   const { autoComplete, name, disabled } = props;
+// }
+
+export const HiddenSelect = component$((props: AriaHiddenSelectProps) => {
+  const { name, disabled } = props;
+
+  return (
+    <>
+      <div>
+        <input />
+      </div>
+      {name && <input type="hidden" name={name} disabled={disabled} />}
+    </>
+  );
+});