@astralui/core 0.1.12 → 0.1.14

package/dist/index.d.cts

@@ -68,7 +68,7 @@ interface AstralSelectOption {
     label: string;
 }
 /** Astral select with optional search/create/clear - combobox. */
-declare function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable }: {
+declare function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable, id, ariaLabel, ariaLabelledBy, clearLabel }: {
     value: string | null;
     onChange: (value: string) => void;
     options: AstralSelectOption[];
@@ -79,6 +79,14 @@ declare function AstralSelect({ value, onChange, options, placeholder, disabled,
     noResults?: string;
     clearable?: boolean;
     creatable?: boolean;
+    /** Put this on the trigger so a visible <label htmlFor> can name it. */
+    id?: string;
+    /** Name the control when there is no visible label to point at. */
+    ariaLabel?: string;
+    /** Id of the visible label element naming this control. */
+    ariaLabelledBy?: string;
+    /** Accessible name for the clear button on a `clearable` select. */
+    clearLabel?: string;
 }): react.JSX.Element;
 interface AstralMenuItem {
     key?: string;
@@ -140,8 +148,11 @@ interface Props {
     style?: CSSProperties;
     disabled?: boolean;
     'aria-label'?: string;
+    /** So a visible <label htmlFor> can name it. aria-label names the control
+     *  too, but only htmlFor also makes clicking the label focus it. */
+    id?: string;
 }
-declare function DateInput({ type, value, onChange, min, max, className, style, disabled, 'aria-label': ariaLabel }: Props): react.JSX.Element;
+declare function DateInput({ type, value, onChange, min, max, className, style, disabled, id, 'aria-label': ariaLabel }: Props): react.JSX.Element;
 
 declare function Spinner({ size, className, style }: {
     size?: number;

package/dist/index.d.ts

@@ -68,7 +68,7 @@ interface AstralSelectOption {
     label: string;
 }
 /** Astral select with optional search/create/clear - combobox. */
-declare function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable }: {
+declare function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable, id, ariaLabel, ariaLabelledBy, clearLabel }: {
     value: string | null;
     onChange: (value: string) => void;
     options: AstralSelectOption[];
@@ -79,6 +79,14 @@ declare function AstralSelect({ value, onChange, options, placeholder, disabled,
     noResults?: string;
     clearable?: boolean;
     creatable?: boolean;
+    /** Put this on the trigger so a visible <label htmlFor> can name it. */
+    id?: string;
+    /** Name the control when there is no visible label to point at. */
+    ariaLabel?: string;
+    /** Id of the visible label element naming this control. */
+    ariaLabelledBy?: string;
+    /** Accessible name for the clear button on a `clearable` select. */
+    clearLabel?: string;
 }): react.JSX.Element;
 interface AstralMenuItem {
     key?: string;
@@ -140,8 +148,11 @@ interface Props {
     style?: CSSProperties;
     disabled?: boolean;
     'aria-label'?: string;
+    /** So a visible <label htmlFor> can name it. aria-label names the control
+     *  too, but only htmlFor also makes clicking the label focus it. */
+    id?: string;
 }
-declare function DateInput({ type, value, onChange, min, max, className, style, disabled, 'aria-label': ariaLabel }: Props): react.JSX.Element;
+declare function DateInput({ type, value, onChange, min, max, className, style, disabled, id, 'aria-label': ariaLabel }: Props): react.JSX.Element;
 
 declare function Spinner({ size, className, style }: {
     size?: number;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef, useSyncExternalStore, useLayoutEffect } from 'react';
+import { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef, useId, useSyncExternalStore, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import chroma from 'chroma-js';
 import { createPortal } from 'react-dom';
@@ -361,11 +361,16 @@ function AstralPinInput({ length = 6, value, onChange, autoFocus }) {
     i
   )) });
 }
-function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable }) {
+function AstralSelect({ value, onChange, options, placeholder, disabled, searchable, searchPlaceholder, noResults, clearable, creatable, id, ariaLabel, ariaLabelledBy, clearLabel = "Clear selection" }) {
   const [open, setOpen] = useState(false);
   const [q, setQ] = useState("");
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const reactId = useId();
+  const baseId = id ?? `au-select-${reactId}`;
+  const listboxId = `${baseId}-listbox`;
+  const optionId = (i) => `${baseId}-opt-${i}`;
   const [pos, setPos] = useState(null);
   const reposition = useCallback(() => {
     const el = triggerRef.current;
@@ -381,7 +386,10 @@ function AstralSelect({ value, onChange, options, placeholder, disabled, searcha
     });
   }, []);
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      setActiveIndex(-1);
+      return;
+    }
     reposition();
     const onScroll = () => reposition();
     const onResize = () => setOpen(false);
@@ -404,28 +412,116 @@ function AstralSelect({ value, onChange, options, placeholder, disabled, searcha
   const display = selected ? selected.label : value ?? "";
   const filtered = searchable && q.trim() ? options.filter((o) => o.label.toLowerCase().includes(q.trim().toLowerCase())) : options;
   const showCreate = !!creatable && !!q.trim() && !options.some((o) => o.label.toLowerCase() === q.trim().toLowerCase());
+  const rows = [...filtered.map((o) => o.value), ...showCreate ? [q.trim()] : []];
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    const el = menuRef.current?.querySelector(`#${CSS.escape(optionId(activeIndex))}`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex, baseId]);
+  const commit = (index) => {
+    const picked = rows[index];
+    if (picked == null) return;
+    onChange(picked);
+    setOpen(false);
+    setQ("");
+    triggerRef.current?.focus();
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    const key = e.key;
+    if (!open) {
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+        e.preventDefault();
+        setOpen(true);
+        setActiveIndex(0);
+      }
+      return;
+    }
+    if (key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(false);
+      setQ("");
+      triggerRef.current?.focus();
+    } else if (key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => rows.length ? (i + 1) % rows.length : -1);
+    } else if (key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => rows.length ? i <= 0 ? rows.length - 1 : i - 1 : -1);
+    } else if (key === "Home") {
+      e.preventDefault();
+      setActiveIndex(rows.length ? 0 : -1);
+    } else if (key === "End") {
+      e.preventDefault();
+      setActiveIndex(rows.length - 1);
+    } else if (key === "Enter") {
+      e.preventDefault();
+      commit(activeIndex >= 0 ? activeIndex : 0);
+    } else if (key === "Tab") {
+      setOpen(false);
+      setQ("");
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "au-select", children: [
-    /* @__PURE__ */ jsxs("button", { ref: triggerRef, type: "button", className: "au-input au-select-trigger", disabled, onClick: () => setOpen((o) => !o), children: [
-      /* @__PURE__ */ jsx("span", { className: hasValue ? "" : "ph", children: hasValue ? display : placeholder }),
-      clearable && hasValue ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "au-select-caret au-select-clear",
-          role: "button",
-          tabIndex: -1,
-          onClick: (e) => {
-            e.stopPropagation();
-            onChange("");
-          },
-          children: /* @__PURE__ */ jsx(IconX, { size: 14 })
-        }
-      ) : /* @__PURE__ */ jsx(IconChevronDown, { size: 15, className: "au-select-caret" })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        id: baseId,
+        type: "button",
+        className: "au-input au-select-trigger",
+        disabled,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && !searchable && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: hasValue ? "" : "ph", children: hasValue ? display : placeholder }),
+          clearable && hasValue ? (
+            // Was a <span role="button" tabIndex={-1}>: announced as a button and
+            // reachable by nobody, so a keyboard user could not clear the field.
+            // It is a real button now, and it stops the click bubbling to the
+            // trigger so clearing does not also open the menu.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "au-select-caret au-select-clear",
+                role: "button",
+                tabIndex: 0,
+                "aria-label": clearLabel,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange("");
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onChange("");
+                  }
+                },
+                children: /* @__PURE__ */ jsx(IconX, { size: 14 })
+              }
+            )
+          ) : /* @__PURE__ */ jsx(IconChevronDown, { size: 15, className: "au-select-caret" })
+        ]
+      }
+    ),
     open && !disabled && pos && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
         {
           ref: menuRef,
+          id: listboxId,
+          role: "listbox",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy,
           className: "au-select-menu",
           style: { left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width, maxHeight: pos.maxHeight },
           children: [
@@ -435,35 +531,43 @@ function AstralSelect({ value, onChange, options, placeholder, disabled, searcha
                 autoFocus: true,
                 className: "au-select-search",
                 placeholder: searchPlaceholder,
+                "aria-label": searchPlaceholder,
+                "aria-controls": listboxId,
+                role: "combobox",
+                "aria-expanded": true,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : void 0,
                 value: q,
-                onChange: (e) => setQ(e.currentTarget.value)
+                onChange: (e) => {
+                  setQ(e.currentTarget.value);
+                  setActiveIndex(0);
+                },
+                onKeyDown
               }
             ),
             filtered.length === 0 && !showCreate && /* @__PURE__ */ jsx("div", { className: "au-select-empty", children: noResults }),
-            filtered.map((o) => /* @__PURE__ */ jsx(
-              "button",
+            filtered.map((o, i) => /* @__PURE__ */ jsx(
+              "div",
               {
-                type: "button",
-                className: `au-select-opt${o.value === value ? " on" : ""}`,
-                onClick: () => {
-                  onChange(o.value);
-                  setOpen(false);
-                  setQ("");
-                },
+                id: optionId(i),
+                role: "option",
+                "aria-selected": o.value === value,
+                className: `au-select-opt${o.value === value ? " on" : ""}${i === activeIndex ? " active" : ""}`,
+                onMouseEnter: () => setActiveIndex(i),
+                onClick: () => commit(i),
                 children: o.label
               },
               o.value
             )),
             showCreate && /* @__PURE__ */ jsxs(
-              "button",
+              "div",
               {
-                type: "button",
-                className: "au-select-opt au-select-create",
-                onClick: () => {
-                  onChange(q.trim());
-                  setOpen(false);
-                  setQ("");
-                },
+                id: optionId(filtered.length),
+                role: "option",
+                "aria-selected": false,
+                className: `au-select-opt au-select-create${filtered.length === activeIndex ? " active" : ""}`,
+                onMouseEnter: () => setActiveIndex(filtered.length),
+                onClick: () => commit(filtered.length),
                 children: [
                   "+ ",
                   q.trim()
@@ -653,7 +757,7 @@ function dateTimeToInputStr(d) {
   if (!d || isNaN(d.getTime())) return "";
   return `${dateToInputStr(d)}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
 }
-function DateInput({ type = "date", value, onChange, min, max, className, style, disabled, "aria-label": ariaLabel }) {
+function DateInput({ type = "date", value, onChange, min, max, className, style, disabled, id, "aria-label": ariaLabel }) {
   const isTime = type === "datetime-local";
   const fmt = isTime ? dateTimeToInputStr : dateToInputStr;
   const [s, setS] = useState(() => fmt(value));
@@ -682,6 +786,7 @@ function DateInput({ type = "date", value, onChange, min, max, className, style,
       className,
       style,
       disabled,
+      id,
       "aria-label": ariaLabel,
       value: s,
       min: min ? fmt(min) : void 0,