From 85f90738eeb719edb8ca81c55e2e62ffc736297e Mon Sep 17 00:00:00 2001
From: SJ <suresh@robotpajamas.com>
Date: Tue, 10 Dec 2024 09:08:24 -0500
Subject: [PATCH] Added basic Select component (#16)

---
 src/lib/select/Select.svelte            | 82 +++++++++++++++++++++++++
 src/lib/select/select.dom.test.ts       | 18 ++++++
 src/routes/(main)/nav.svelte            |  2 +-
 src/routes/examples/select/+page.svelte | 28 +++++++++
 4 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/select/Select.svelte
 create mode 100644 src/lib/select/select.dom.test.ts
 create mode 100644 src/routes/examples/select/+page.svelte

diff --git a/src/lib/select/Select.svelte b/src/lib/select/Select.svelte
new file mode 100644
index 0000000..08cb5d6
--- /dev/null
+++ b/src/lib/select/Select.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { type Component, type Snippet } from "svelte";
+  import { useId } from "$lib/internal/hooks/use-id";
+  import { useLabelledBy } from "$lib/label/LabelProvider.svelte";
+  import { useDisabled } from "$lib/internal/DisabledProvider.svelte";
+
+  type Props = {
+    /** The element or component the select should render as. */
+    as?: string | Component;
+    /** Whether or not the select should receive focus when first rendered. */
+    autofocus?: boolean;
+    /** Whether or not the select is disabled. */
+    disabled?: boolean;
+    /** Whether or not the select is invalid. */
+    invalid?: boolean;
+    children?: Snippet<[SnippetProps]>;
+  };
+
+  type SnippetProps = {
+    /** Whether or not the select is in an active or pressed state.*/
+    active?: boolean;
+    /** Whether or not the autofocus prop was set to true. */
+    autofocus?: boolean;
+    /** Whether or not the select is disabled. */
+    disabled?: boolean;
+    /** Whether or not the select is focused. */
+    focus?: boolean;
+    /** Whether or not the select is hovered. */
+    hover?: boolean;
+    /** Whether or not the select is invalid. */
+    invalid?: boolean;
+  };
+
+  let {
+    id = `headlessui-select-${useId()}`,
+    as = "select",
+    autofocus = false,
+    disabled = useDisabled() || false,
+    invalid = false,
+    children,
+    ...theirProps
+  }: Props & Record<string, any> = $props();
+
+  let labelledBy = $derived(useLabelledBy());
+
+  let ourProps = $derived({
+    id,
+    autofocus,
+    disabled,
+    "aria-invalid": invalid, // ? "" : undefined,
+    "aria-labelledby": labelledBy?.[0],
+    // "aria-describedby": describedBy,
+  });
+
+  let snippetProps: SnippetProps = $derived({
+    autofocus,
+    disabled,
+    focus: false,
+    hover: false,
+    invalid,
+  });
+
+  // TODO: Utility function to create this
+  let dataAttributes: DataAttributes<SnippetProps> = $derived({
+    "data-autofocus": autofocus || undefined,
+    "data-disabled": disabled || undefined,
+    "data-focus": invalid || undefined,
+    "data-hover": invalid || undefined,
+    "data-invalid": invalid || undefined,
+  });
+</script>
+
+{#if typeof as === "string"}
+  <svelte:element this={as} {...theirProps} {...ourProps} {...dataAttributes}>
+    {@render children?.(snippetProps)}
+  </svelte:element>
+{:else}
+  {@const AsComponent = as}
+  <AsComponent {...theirProps} {...ourProps} {...dataAttributes}>
+    {@render children?.(snippetProps)}
+  </AsComponent>
+{/if}
diff --git a/src/lib/select/select.dom.test.ts b/src/lib/select/select.dom.test.ts
new file mode 100644
index 0000000..947d1fd
--- /dev/null
+++ b/src/lib/select/select.dom.test.ts
@@ -0,0 +1,18 @@
+import Select from "./Select.svelte";
+import { getInput, getSelect } from "../../test-utils/accessibility-assertions";
+import { focus, type, word } from "../../test-utils/interactions";
+import {
+  commonControlScenarios,
+  commonFormScenarios,
+  commonRenderingScenarios,
+} from "../../test-utils/scenarios.dom";
+
+commonRenderingScenarios(Select, { getElement: getSelect });
+commonControlScenarios(Select);
+commonFormScenarios(Select, {
+  async performUserInteraction(control) {
+    if (control instanceof HTMLSelectElement) {
+        control.value = 'alice'
+      }
+  },
+});
diff --git a/src/routes/(main)/nav.svelte b/src/routes/(main)/nav.svelte
index bcd3b14..c1a84c7 100644
--- a/src/routes/(main)/nav.svelte
+++ b/src/routes/(main)/nav.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  const components = ["button", "checkbox", "fieldset", "input", "switch", "textarea"];
+  const components = ["button", "checkbox", "fieldset", "input", "select", "switch", "textarea"];
 </script>
 
 <nav>
diff --git a/src/routes/examples/select/+page.svelte b/src/routes/examples/select/+page.svelte
new file mode 100644
index 0000000..5031693
--- /dev/null
+++ b/src/routes/examples/select/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  // import Description from "$lib/description/Description.svelte";
+  import Field from "$lib/field/Field.svelte";
+  import Label from "$lib/label/Label.svelte";
+  import Select from "$lib/select/Select.svelte";
+</script>
+
+<div class="w-full max-w-md px-4">
+  <Field>
+    <Label class="text-sm/6 font-medium text-white">Project status</Label>
+    <!-- <Description class="text-sm/6 text-white/50">This will be visible to clients on the project.</Description> -->
+    <div class="relative">
+      <Select
+        class="mt-3 block w-full appearance-none rounded-lg border-none bg-white/5 py-1.5 px-3 text-sm/6 text-white focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25 *:text-black"
+      >
+        <option value="active">Active</option>
+        <option value="paused">Paused</option>
+        <option value="delayed">Delayed</option>
+        <option value="canceled">Canceled</option>
+      </Select>
+
+      <!-- <ChevronDownIcon
+        class="group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60"
+        aria-hidden="true"
+      /> -->
+    </div>
+  </Field>
+</div>