npm - @fabio.caffarello/react-design-system - Versions diffs - 3.12.0 → 4.0.0 - Mend

@fabio.caffarello/react-design-system 3.12.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist/granular/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/granular/ui/components/Autocomplete/Autocomplete.js CHANGED Viewed

@@ -1,133 +1,150 @@
 "use client";
-import { jsxs as Y, jsx as h } from "react/jsx-runtime";
-import { forwardRef as Z, useId as _, useState as w, useRef as p, useEffect as v } from "react";
-import M from "../../primitives/Input/Input.js";
-import { Loader2 as C, ChevronDown as B } from "lucide-react";
-import P from "./AutocompleteList.js";
-const ee = Z(
+import { jsxs as ee, jsx as x } from "react/jsx-runtime";
+import { forwardRef as te, useId as re, useState as g, useRef as k, useEffect as d } from "react";
+import ne from "../../primitives/Input/Input.js";
+import { Loader2 as oe, ChevronDown as se } from "lucide-react";
+import ie from "./AutocompleteList.js";
+import { mergeRefs as le } from "../../utils/mergeRefs.js";
+const ae = te(
   function({
-    options: u,
-    value: O,
-    defaultValue: R,
+    options: a,
+    value: $,
+    defaultValue: F,
     onChange: s,
-    onSelect: b,
-    placeholder: K = "Type to search...",
-    loading: I = !1,
-    disabled: L = !1,
-    emptyMessage: V = "No options found",
-    debounceMs: S = 300,
-    filterOptions: g,
-    className: $ = "",
-    inputClassName: q = "",
-    size: H = "md",
-    label: k,
-    "aria-label": y,
-    "aria-labelledby": i,
-    id: D
-  }, U) {
-    const z = _(), x = D != null ? D : z, [G, T] = w(
-      typeof R == "string" ? R : ""
-    ), [c, l] = w(!1), [r, o] = w(-1), [f, a] = w(""), d = p(null), F = p(null), A = p(null), E = p(null), N = O !== void 0, m = N ? O : G, n = f.trim() ? g ? g(u, f) : u.filter(
-      (e) => e.label.toLowerCase().includes(f.toLowerCase())
-    ) : u, J = n.length > 0, Q = (e) => {
+    onSelect: y,
+    placeholder: z = "Type to search...",
+    loading: D = !1,
+    disabled: G = !1,
+    emptyMessage: j = "No options found",
+    debounceMs: J = 300,
+    filterOptions: H,
+    className: Q = "",
+    inputClassName: W = "",
+    size: X = "md",
+    label: A,
+    "aria-label": O,
+    "aria-labelledby": m,
+    id: R
+  }, Y) {
+    const Z = re(), E = R != null ? R : Z, N = `${E}-listbox`, [_, K] = g(
+      typeof F == "string" ? F : ""
+    ), [c, i] = g(!1), [r, l] = g(-1), [p, u] = g(""), h = k(null), L = k(null), v = k(null), f = k(null), V = $ !== void 0, w = V ? $ : _, n = p.trim() ? H ? H(a, p) : a.filter(
+      (e) => e.label.toLowerCase().includes(p.toLowerCase())
+    ) : a, M = n.length > 0, B = (e) => {
       const t = e.target.value;
-      a(t), N || T(t), s == null || s(t), E.current && clearTimeout(E.current), E.current = setTimeout(() => {
-        l(!0), o(-1);
-      }, S);
-    }, j = (e) => {
+      u(t), V || K(t), s == null || s(t), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        i(!0), l(-1);
+      }, J);
+    }, S = (e) => {
       var t;
-      e.disabled || (N || T(e.value), a(e.label), l(!1), o(-1), s == null || s(e.value), b == null || b(e), (t = F.current) == null || t.focus());
-    }, W = (e) => {
+      e.disabled || (V || K(e.value), u(e.label), i(!1), l(-1), s == null || s(e.value), y == null || y(e), (t = L.current) == null || t.focus());
+    }, q = (e, t) => {
+      const o = n.length;
+      if (o === 0) return -1;
+      const I = e < 0 ? t === 1 ? -1 : 0 : e;
+      for (let T = 1; T <= o; T++) {
+        const U = ((I + t * T) % o + o) % o;
+        if (!n[U].disabled) return U;
+      }
+      return e;
+    }, C = (e) => {
       if (!c || n.length === 0) {
-        (e.key === "ArrowDown" || e.key === "Enter") && l(!0);
+        (e.key === "ArrowDown" || e.key === "Enter") && i(!0);
         return;
       }
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), o(
-            (t) => t < n.length - 1 ? t + 1 : 0
-          );
+          e.preventDefault(), l((t) => q(t, 1));
           break;
         case "ArrowUp":
-          e.preventDefault(), o(
-            (t) => t > 0 ? t - 1 : n.length - 1
-          );
+          e.preventDefault(), l((t) => q(t, -1));
           break;
         case "Enter":
-          e.preventDefault(), r >= 0 && r < n.length && j(n[r]);
+          e.preventDefault(), r >= 0 && r < n.length && S(n[r]);
           break;
         case "Escape":
-          e.preventDefault(), l(!1), o(-1);
+          e.preventDefault(), i(!1), l(-1);
           break;
       }
     };
-    v(() => {
+    d(() => {
       if (!c) return;
       const e = (t) => {
-        d.current && !d.current.contains(t.target) && (l(!1), o(-1));
+        var I;
+        const o = t.target;
+        h.current && !h.current.contains(o) && !((I = v.current) != null && I.contains(o)) && (i(!1), l(-1));
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [c]), v(() => {
-      if (r >= 0 && A.current) {
-        const e = A.current.querySelectorAll('[role="option"]');
+    }, [c]), d(() => () => {
+      f.current && clearTimeout(f.current);
+    }, []), d(() => {
+      if (r >= 0 && v.current) {
+        const e = v.current.querySelectorAll('[role="option"]');
         e[r] && typeof e[r].scrollIntoView == "function" && e[r].scrollIntoView({
           block: "nearest",
           behavior: "smooth"
         });
       }
-    }, [r]), v(() => {
-      if (m) {
-        const e = u.find((t) => t.value === m);
-        a(e ? e.label : m);
+    }, [r]), d(() => {
+      if (w) {
+        const e = a.find((t) => t.value === w);
+        u(e ? e.label : w);
       } else
-        a("");
-    }, [m, u]), v(() => {
-    }, [k, y, i, x]);
-    const X = c && (J || I || V);
-    return /* @__PURE__ */ Y("div", { ref: d, className: `relative ${$}`, children: [
-      /* @__PURE__ */ h(
-        M,
+        u("");
+    }, [w, a]), d(() => {
+    }, [A, O, m, E]);
+    const b = c && (M || D || !!j), P = b && r >= 0 && r < n.length ? `${N}-option-${r}` : void 0;
+    return /* @__PURE__ */ ee("div", { ref: h, className: `relative ${Q}`, children: [
+      /* @__PURE__ */ x(
+        ne,
         {
-          ref: F || U,
-          id: x,
-          label: k,
-          "aria-label": y,
-          "aria-labelledby": i,
-          value: f,
-          onChange: Q,
-          onKeyDown: W,
-          onFocus: () => l(!0),
-          placeholder: K,
-          disabled: L,
-          size: H,
-          rightIcon: I ? /* @__PURE__ */ h(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ h(
-            B,
+          ref: le(L, Y),
+          id: E,
+          label: A,
+          "aria-label": O,
+          "aria-labelledby": m,
+          role: "combobox",
+          "aria-expanded": b,
+          "aria-controls": b ? N : void 0,
+          "aria-haspopup": "listbox",
+          "aria-autocomplete": "list",
+          "aria-activedescendant": P,
+          value: p,
+          onChange: B,
+          onKeyDown: C,
+          onFocus: () => i(!0),
+          placeholder: z,
+          disabled: G,
+          size: X,
+          rightIcon: D ? /* @__PURE__ */ x(oe, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ x(
+            se,
             {
               className: `h-4 w-4 transition-transform ${c ? "rotate-180" : ""}`
             }
           ),
-          className: q
+          className: W
         }
       ),
-      X && /* @__PURE__ */ h(
-        P,
+      b && /* @__PURE__ */ x(
+        ie,
         {
-          ref: A,
+          ref: v,
+          id: N,
           options: n,
           highlightedIndex: r,
-          onSelect: j,
-          loading: I,
-          emptyMessage: V,
-          containerRef: d,
-          "aria-labelledby": i,
-          "aria-label": i ? void 0 : y || k
+          onSelect: S,
+          loading: D,
+          emptyMessage: j,
+          containerRef: h,
+          "aria-labelledby": m,
+          "aria-label": m ? void 0 : O || A
         }
       )
     ] });
   }
 );
-ee.displayName = "Autocomplete";
+ae.displayName = "Autocomplete";
 export {
-  ee as default
+  ae as default
 };
 //# sourceMappingURL=Autocomplete.js.map

package/dist/granular/ui/components/Autocomplete/Autocomplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Autocomplete.js","sources":["../../../../../src/ui/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useEffect, useId, forwardRef } from \"react\";\nimport Input from \"../../primitives/Input/Input\";\nimport { ChevronDown, Loader2 } from \"lucide-react\";\nimport AutocompleteList from \"./AutocompleteList\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteProps {\n options: AutocompleteOptionType[];\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n onSelect?: (option: AutocompleteOptionType) => void;\n placeholder?: string;\n loading?: boolean;\n disabled?: boolean;\n emptyMessage?: string;\n debounceMs?: number;\n filterOptions?: (\n options: AutocompleteOptionType[],\n searchValue: string,\n ) => AutocompleteOptionType[];\n className?: string;\n inputClassName?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n /*\n Visible label rendered above the input via the `Input` primitive's\n * `label` API, which wires `<label htmlFor>` to the inner `<input>`.\n * Provides the accessible name axe `aria-input-field-name` requires.\n /\n label?: string;\n /\n Invisible accessible name. Use when the input has no visible label\n * (e.g. a tightly-packed toolbar combobox). One of `label`,\n * `aria-label`, or `aria-labelledby` MUST be present — without any,\n * the input has no programmatic name and axe `aria-input-field-name`\n * (serious) flags it. A dev-only warning fires when all are missing.\n /\n \"aria-label\"?: string;\n /\n Override path: point at an id the consumer manages externally.\n /\n \"aria-labelledby\"?: string;\n id?: string;\n}\n\n/\n Autocomplete Component\n \n An input component with autocomplete suggestions.\n * Supports keyboard navigation, loading states, and custom filtering.\n \n @example\n * ```tsx\n * <Autocomplete\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' },\n * ]}\n * onSelect={(option) => console.log(option)}\n * />\n * ```\n */\nconst Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n onSelect,\n placeholder = \"Type to search...\",\n loading = false,\n disabled = false,\n emptyMessage = \"No options found\",\n debounceMs = 300,\n filterOptions,\n className = \"\",\n inputClassName = \"\",\n size = \"md\",\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id: idProp,\n },\n ref,\n ) {\n const autoId = useId();\n const inputId = idProp ?? autoId;\n const [internalValue, setInternalValue] = useState<string>(\n typeof defaultValue === \"string\" ? defaultValue : \"\",\n );\n const [isOpen, setIsOpen] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const debounceTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Filter options\n const getFilteredOptions = (): AutocompleteOptionType[] => {\n if (!searchValue.trim()) {\n return options;\n }\n\n if (filterOptions) {\n return filterOptions(options, searchValue);\n }\n\n // Default filter: case-insensitive search in label\n return options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n );\n };\n\n const filteredOptions = getFilteredOptions();\n const hasOptions = filteredOptions.length > 0;\n\n // Handle input change\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setSearchValue(newValue);\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n\n // Debounce search\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n\n debounceTimerRef.current = setTimeout(() => {\n setIsOpen(true);\n setHighlightedIndex(-1);\n }, debounceMs);\n };\n\n // Handle option select\n const handleSelect = (option: AutocompleteOptionType) => {\n if (option.disabled) return;\n\n if (!isControlled) {\n setInternalValue(option.value);\n }\n\n setSearchValue(option.label);\n setIsOpen(false);\n setHighlightedIndex(-1);\n onChange?.(option.value);\n onSelect?.(option);\n inputRef.current?.focus();\n };\n\n // Handle keyboard navigation\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (!isOpen \|\| filteredOptions.length === 0) {\n if (e.key === \"ArrowDown\" \|\| e.key === \"Enter\") {\n setIsOpen(true);\n }\n return;\n }\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setHighlightedIndex((prev) =>\n prev < filteredOptions.length - 1 ? prev + 1 : 0,\n );\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setHighlightedIndex((prev) =>\n prev > 0 ? prev - 1 : filteredOptions.length - 1,\n );\n break;\n case \"Enter\":\n e.preventDefault();\n if (\n highlightedIndex >= 0 &&\n highlightedIndex < filteredOptions.length\n ) {\n handleSelect(filteredOptions[highlightedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n setIsOpen(false);\n setHighlightedIndex(-1);\n break;\n }\n };\n\n // Close on click outside\n useEffect(() => {\n if (!isOpen) return;\n\n const handleClickOutside = (e: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(e.target as Node)\n ) {\n setIsOpen(false);\n setHighlightedIndex(-1);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n // Scroll highlighted item into view\n useEffect(() => {\n if (highlightedIndex >= 0 && listRef.current) {\n const items = listRef.current.querySelectorAll('[role=\"option\"]');\n if (\n items[highlightedIndex] &&\n typeof items[highlightedIndex].scrollIntoView === \"function\"\n ) {\n items[highlightedIndex].scrollIntoView({\n block: \"nearest\",\n behavior: \"smooth\",\n });\n }\n }\n }, [highlightedIndex]);\n\n // Sync search value with current value\n useEffect(() => {\n if (currentValue) {\n const option = options.find((opt) => opt.value === currentValue);\n if (option) {\n setSearchValue(option.label);\n } else {\n setSearchValue(currentValue);\n }\n } else {\n setSearchValue(\"\");\n }\n }, [currentValue, options]);\n\n // Dev-only accessible-name warning. Same four-path shape as the\n // Textarea 6c guard: label / aria-label / aria-labelledby / external\n // `<label htmlFor={id}>`. Without any source, axe\n // `aria-input-field-name` (serious) flags the input. Silent in\n // production.\n useEffect(() => {\n if (!import.meta.env.DEV) return;\n if (label \|\| ariaLabel \|\| ariaLabelledBy) return;\n const externalLabel =\n typeof document !== \"undefined\"\n ? document.querySelector(`label[for=\"${CSS.escape(inputId)}\"]`)\n : null;\n if (externalLabel) return;\n console.warn(\n \"[Autocomplete] Missing accessible name. Provide a `label` prop, `aria-label`, `aria-labelledby`, or pair an external `<label htmlFor={id}>` with the same `id`.\",\n );\n }, [label, ariaLabel, ariaLabelledBy, inputId]);\n\n const shouldShowList = isOpen && (hasOptions \|\| loading \|\| emptyMessage);\n\n return (\n <div ref={containerRef} className={`relative ${className}`}>\n <Input\n ref={inputRef \|\| ref}\n id={inputId}\n label={label}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n value={searchValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsOpen(true)}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n rightIcon={\n loading ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <ChevronDown\n className={`h-4 w-4 transition-transform ${\n isOpen ? \"rotate-180\" : \"\"\n }`}\n />\n )\n }\n className={inputClassName}\n />\n\n {shouldShowList && (\n <AutocompleteList\n ref={listRef}\n options={filteredOptions}\n highlightedIndex={highlightedIndex}\n onSelect={handleSelect}\n loading={loading}\n emptyMessage={emptyMessage}\n containerRef={containerRef}\n // Cascade the same accessible-name source the consumer\n // provided for the input to the listbox portal — keeps\n // axe `aria-input-field-name` satisfied on the listbox\n // without making the consumer re-state the name.\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabelledBy ? undefined : ariaLabel \|\| label}\n />\n )}\n </div>\n );\n },\n);\n\nAutocomplete.displayName = \"Autocomplete\";\n\nexport default Autocomplete;\n"],"names":["Autocomplete","forwardRef","options","controlledValue","defaultValue","onChange","onSelect","placeholder","loading","disabled","emptyMessage","debounceMs","filterOptions","className","inputClassName","size","label","ariaLabel","ariaLabelledBy","idProp","ref","autoId","useId","inputId","internalValue","setInternalValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchValue","setSearchValue","containerRef","useRef","inputRef","listRef","debounceTimerRef","isControlled","currentValue","filteredOptions","option","hasOptions","handleInputChange","newValue","handleSelect","_a","handleKeyDown","prev","useEffect","handleClickOutside","e","items","opt","shouldShowList","jsx","Input","Loader2","ChevronDown","AutocompleteList"],"mappings":";;;;;;AAgEA,MAAMA,KAAeC;AAAA,EACnB,SACE;AAAA,IACE,SAAAC;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,YAAAC,IAAa;AAAA,IACb,eAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,IAAIC;AAAA,EAAA,GAENC,GACA;AACA,UAAMC,IAASC,EAAA,GACTC,IAAUJ,KAAA,OAAAA,IAAUE,GACpB,CAACG,GAAeC,CAAgB,IAAIC;AAAA,MACxC,OAAOtB,KAAiB,WAAWA,IAAe;AAAA,IAAA,GAE9C,CAACuB,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAkBC,CAAmB,IAAIJ,EAAS,EAAE,GACrD,CAACK,GAAaC,CAAc,IAAIN,EAAS,EAAE,GAC3CO,IAAeC,EAAuB,IAAI,GAC1CC,IAAWD,EAAyB,IAAI,GACxCE,IAAUF,EAAuB,IAAI,GACrCG,IAAmBH,EAA6C,IAAI,GAEpEI,IAAenC,MAAoB,QACnCoC,IAAeD,IAAenC,IAAkBqB,GAkBhDgB,IAdCT,EAAY,SAIbnB,IACKA,EAAcV,GAAS6B,CAAW,IAIpC7B,EAAQ;AAAA,MAAO,CAACuC,MACrBA,EAAO,MAAM,cAAc,SAASV,EAAY,YAAA,CAAa;AAAA,IAAA,IATtD7B,GAcLwC,IAAaF,EAAgB,SAAS,GAGtCG,IAAoB,CAAC,MAA2C;AACpE,YAAMC,IAAW,EAAE,OAAO;AAC1B,MAAAZ,EAAeY,CAAQ,GAElBN,KACHb,EAAiBmB,CAAQ,GAG3BvC,KAAA,QAAAA,EAAWuC,IAGPP,EAAiB,WACnB,aAAaA,EAAiB,OAAO,GAGvCA,EAAiB,UAAU,WAAW,MAAM;AAC1C,QAAAT,EAAU,EAAI,GACdE,EAAoB,EAAE;AAAA,MACxB,GAAGnB,CAAU;AAAA,IACf,GAGMkC,IAAe,CAACJ,MAAmC;;AACvD,MAAIA,EAAO,aAENH,KACHb,EAAiBgB,EAAO,KAAK,GAG/BT,EAAeS,EAAO,KAAK,GAC3Bb,EAAU,EAAK,GACfE,EAAoB,EAAE,GACtBzB,KAAA,QAAAA,EAAWoC,EAAO,QAClBnC,KAAA,QAAAA,EAAWmC,KACXK,IAAAX,EAAS,YAAT,QAAAW,EAAkB;AAAA,IACpB,GAGMC,IAAgB,CAAC,MAA6C;AAClE,UAAI,CAACpB,KAAUa,EAAgB,WAAW,GAAG;AAC3C,SAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,YACrCZ,EAAU,EAAI;AAEhB;AAAA,MACF;AAEA,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,YAAE,eAAA,GACFE;AAAA,YAAoB,CAACkB,MACnBA,IAAOR,EAAgB,SAAS,IAAIQ,IAAO,IAAI;AAAA,UAAA;AAEjD;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACFlB;AAAA,YAAoB,CAACkB,MACnBA,IAAO,IAAIA,IAAO,IAAIR,EAAgB,SAAS;AAAA,UAAA;AAEjD;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GAEAX,KAAoB,KACpBA,IAAmBW,EAAgB,UAEnCK,EAAaL,EAAgBX,CAAgB,CAAC;AAEhD;AAAA,QACF,KAAK;AACH,YAAE,eAAA,GACFD,EAAU,EAAK,GACfE,EAAoB,EAAE;AACtB;AAAA,MAAA;AAAA,IAEN;AAGA,IAAAmB,EAAU,MAAM;AACd,UAAI,CAACtB,EAAQ;AAEb,YAAMuB,IAAqB,CAACC,MAAkB;AAC5C,QACElB,EAAa,WACb,CAACA,EAAa,QAAQ,SAASkB,EAAE,MAAc,MAE/CvB,EAAU,EAAK,GACfE,EAAoB,EAAE;AAAA,MAE1B;AAEA,sBAAS,iBAAiB,aAAaoB,CAAkB,GAClD,MACL,SAAS,oBAAoB,aAAaA,CAAkB;AAAA,IAChE,GAAG,CAACvB,CAAM,CAAC,GAGXsB,EAAU,MAAM;AACd,UAAIpB,KAAoB,KAAKO,EAAQ,SAAS;AAC5C,cAAMgB,IAAQhB,EAAQ,QAAQ,iBAAiB,iBAAiB;AAChE,QACEgB,EAAMvB,CAAgB,KACtB,OAAOuB,EAAMvB,CAAgB,EAAE,kBAAmB,cAElDuB,EAAMvB,CAAgB,EAAE,eAAe;AAAA,UACrC,OAAO;AAAA,UACP,UAAU;AAAA,QAAA,CACX;AAAA,MAEL;AAAA,IACF,GAAG,CAACA,CAAgB,CAAC,GAGrBoB,EAAU,MAAM;AACd,UAAIV,GAAc;AAChB,cAAME,IAASvC,EAAQ,KAAK,CAACmD,MAAQA,EAAI,UAAUd,CAAY;AAC/D,QACEP,EADES,IACaA,EAAO,QAEPF,CAFY;AAAA,MAI/B;AACE,QAAAP,EAAe,EAAE;AAAA,IAErB,GAAG,CAACO,GAAcrC,CAAO,CAAC,GAO1B+C,EAAU,MAAM;AAAA,IAWhB,GAAG,CAACjC,GAAOC,GAAWC,GAAgBK,CAAO,CAAC;AAE9C,UAAM+B,IAAiB3B,MAAWe,KAAclC,KAAWE;AAE3D,6BACG,OAAA,EAAI,KAAKuB,GAAc,WAAW,YAAYpB,CAAS,IACtD,UAAA;AAAA,MAAA,gBAAA0C;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAKrB,KAAYf;AAAA,UACjB,IAAIG;AAAA,UACJ,OAAAP;AAAA,UACA,cAAYC;AAAA,UACZ,mBAAiBC;AAAA,UACjB,OAAOa;AAAA,UACP,UAAUY;AAAA,UACV,WAAWI;AAAA,UACX,SAAS,MAAMnB,EAAU,EAAI;AAAA,UAC7B,aAAArB;AAAA,UACA,UAAAE;AAAA,UACA,MAAAM;AAAA,UACA,WACEP,IACE,gBAAA+C,EAACE,GAAA,EAAQ,WAAU,uBAAA,CAAuB,IAE1C,gBAAAF;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,WAAW,gCACT/B,IAAS,eAAe,EAC1B;AAAA,YAAA;AAAA,UAAA;AAAA,UAIN,WAAWb;AAAA,QAAA;AAAA,MAAA;AAAA,MAGZwC,KACC,gBAAAC;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,KAAKvB;AAAA,UACL,SAASI;AAAA,UACT,kBAAAX;AAAA,UACA,UAAUgB;AAAA,UACV,SAAArC;AAAA,UACA,cAAAE;AAAA,UACA,cAAAuB;AAAA,UAKA,mBAAiBf;AAAA,UACjB,cAAYA,IAAiB,SAAYD,KAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IACxD,GAEJ;AAAA,EAEJ;AACF;AAEAhB,GAAa,cAAc;"}
1	+ {"version":3,"file":"Autocomplete.js","sources":["../../../../../src/ui/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useEffect, useId, forwardRef } from \"react\";\nimport Input from \"../../primitives/Input/Input\";\nimport { mergeRefs } from \"../../utils\";\nimport { ChevronDown, Loader2 } from \"lucide-react\";\nimport AutocompleteList from \"./AutocompleteList\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteProps {\n options: AutocompleteOptionType[];\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n onSelect?: (option: AutocompleteOptionType) => void;\n placeholder?: string;\n loading?: boolean;\n disabled?: boolean;\n emptyMessage?: string;\n debounceMs?: number;\n filterOptions?: (\n options: AutocompleteOptionType[],\n searchValue: string,\n ) => AutocompleteOptionType[];\n className?: string;\n inputClassName?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n /*\n Visible label rendered above the input via the `Input` primitive's\n * `label` API, which wires `<label htmlFor>` to the inner `<input>`.\n * Provides the accessible name axe `aria-input-field-name` requires.\n /\n label?: string;\n /\n Invisible accessible name. Use when the input has no visible label\n * (e.g. a tightly-packed toolbar combobox). One of `label`,\n * `aria-label`, or `aria-labelledby` MUST be present — without any,\n * the input has no programmatic name and axe `aria-input-field-name`\n * (serious) flags it. A dev-only warning fires when all are missing.\n /\n \"aria-label\"?: string;\n /\n Override path: point at an id the consumer manages externally.\n /\n \"aria-labelledby\"?: string;\n id?: string;\n}\n\n/\n Autocomplete Component\n \n An input component with autocomplete suggestions.\n * Supports keyboard navigation, loading states, and custom filtering.\n \n @example\n * ```tsx\n * <Autocomplete\n * options={[\n * { value: '1', label: 'Option 1' },\n * { value: '2', label: 'Option 2' },\n * ]}\n * onSelect={(option) => console.log(option)}\n * />\n * ```\n /\nconst Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n onSelect,\n placeholder = \"Type to search...\",\n loading = false,\n disabled = false,\n emptyMessage = \"No options found\",\n debounceMs = 300,\n filterOptions,\n className = \"\",\n inputClassName = \"\",\n size = \"md\",\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id: idProp,\n },\n ref,\n ) {\n const autoId = useId();\n const inputId = idProp ?? autoId;\n const listboxId = `${inputId}-listbox`;\n const [internalValue, setInternalValue] = useState<string>(\n typeof defaultValue === \"string\" ? defaultValue : \"\",\n );\n const [isOpen, setIsOpen] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState(-1);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const debounceTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const isControlled = controlledValue !== undefined;\n const currentValue = isControlled ? controlledValue : internalValue;\n\n // Filter options\n const getFilteredOptions = (): AutocompleteOptionType[] => {\n if (!searchValue.trim()) {\n return options;\n }\n\n if (filterOptions) {\n return filterOptions(options, searchValue);\n }\n\n // Default filter: case-insensitive search in label\n return options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n );\n };\n\n const filteredOptions = getFilteredOptions();\n const hasOptions = filteredOptions.length > 0;\n\n // Handle input change\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setSearchValue(newValue);\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n\n // Debounce search\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n\n debounceTimerRef.current = setTimeout(() => {\n setIsOpen(true);\n setHighlightedIndex(-1);\n }, debounceMs);\n };\n\n // Handle option select\n const handleSelect = (option: AutocompleteOptionType) => {\n if (option.disabled) return;\n\n if (!isControlled) {\n setInternalValue(option.value);\n }\n\n setSearchValue(option.label);\n setIsOpen(false);\n setHighlightedIndex(-1);\n onChange?.(option.value);\n onSelect?.(option);\n inputRef.current?.focus();\n };\n\n // Next/previous ENABLED option index, wrapping, skipping disabled\n // options (arrow nav previously landed on disabled options where\n // Enter then did nothing — a dead keypress).\n const moveHighlight = (prev: number, dir: 1 \| -1): number => {\n const n = filteredOptions.length;\n if (n === 0) return -1;\n const start = prev < 0 ? (dir === 1 ? -1 : 0) : prev;\n for (let i = 1; i <= n; i++) {\n const idx = (((start + dir i) % n) + n) % n;\n if (!filteredOptions[idx].disabled) return idx;\n }\n return prev;\n };\n\n // Handle keyboard navigation\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (!isOpen \|\| filteredOptions.length === 0) {\n if (e.key === \"ArrowDown\" \|\| e.key === \"Enter\") {\n setIsOpen(true);\n }\n return;\n }\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setHighlightedIndex((prev) => moveHighlight(prev, 1));\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setHighlightedIndex((prev) => moveHighlight(prev, -1));\n break;\n case \"Enter\":\n e.preventDefault();\n if (\n highlightedIndex >= 0 &&\n highlightedIndex < filteredOptions.length\n ) {\n handleSelect(filteredOptions[highlightedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n setIsOpen(false);\n setHighlightedIndex(-1);\n break;\n }\n };\n\n // Close on click outside\n useEffect(() => {\n if (!isOpen) return;\n\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as Node;\n // The list is portalled to document.body, so it is NOT inside\n // containerRef — without the listRef check, a mousedown on an\n // option closed the list before its click fired, losing the\n // selection.\n if (\n containerRef.current &&\n !containerRef.current.contains(target) &&\n !listRef.current?.contains(target)\n ) {\n setIsOpen(false);\n setHighlightedIndex(-1);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n // Clear any pending debounce timer on unmount (avoids a state update\n // on an unmounted component / a dangling timer).\n useEffect(() => {\n return () => {\n if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);\n };\n }, []);\n\n // Scroll highlighted item into view\n useEffect(() => {\n if (highlightedIndex >= 0 && listRef.current) {\n const items = listRef.current.querySelectorAll('[role=\"option\"]');\n if (\n items[highlightedIndex] &&\n typeof items[highlightedIndex].scrollIntoView === \"function\"\n ) {\n items[highlightedIndex].scrollIntoView({\n block: \"nearest\",\n behavior: \"smooth\",\n });\n }\n }\n }, [highlightedIndex]);\n\n // Sync search value with current value\n useEffect(() => {\n if (currentValue) {\n const option = options.find((opt) => opt.value === currentValue);\n if (option) {\n setSearchValue(option.label);\n } else {\n setSearchValue(currentValue);\n }\n } else {\n setSearchValue(\"\");\n }\n }, [currentValue, options]);\n\n // Dev-only accessible-name warning. Same four-path shape as the\n // Textarea 6c guard: label / aria-label / aria-labelledby / external\n // `<label htmlFor={id}>`. Without any source, axe\n // `aria-input-field-name` (serious) flags the input. Silent in\n // production.\n useEffect(() => {\n if (!import.meta.env.DEV) return;\n if (label \|\| ariaLabel \|\| ariaLabelledBy) return;\n const externalLabel =\n typeof document !== \"undefined\"\n ? document.querySelector(`label[for=\"${CSS.escape(inputId)}\"]`)\n : null;\n if (externalLabel) return;\n console.warn(\n \"[Autocomplete] Missing accessible name. Provide a `label` prop, `aria-label`, `aria-labelledby`, or pair an external `<label htmlFor={id}>` with the same `id`.\",\n );\n }, [label, ariaLabel, ariaLabelledBy, inputId]);\n\n const shouldShowList =\n isOpen && (hasOptions \|\| loading \|\| Boolean(emptyMessage));\n const activeOptionId =\n shouldShowList &&\n highlightedIndex >= 0 &&\n highlightedIndex < filteredOptions.length\n ? `${listboxId}-option-${highlightedIndex}`\n : undefined;\n\n return (\n <div ref={containerRef} className={`relative ${className}`}>\n <Input\n ref={mergeRefs(inputRef, ref)}\n id={inputId}\n label={label}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n role=\"combobox\"\n aria-expanded={shouldShowList}\n aria-controls={shouldShowList ? listboxId : undefined}\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-activedescendant={activeOptionId}\n value={searchValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={() => setIsOpen(true)}\n placeholder={placeholder}\n disabled={disabled}\n size={size}\n rightIcon={\n loading ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <ChevronDown\n className={`h-4 w-4 transition-transform ${\n isOpen ? \"rotate-180\" : \"\"\n }`}\n />\n )\n }\n className={inputClassName}\n />\n\n {shouldShowList && (\n <AutocompleteList\n ref={listRef}\n id={listboxId}\n options={filteredOptions}\n highlightedIndex={highlightedIndex}\n onSelect={handleSelect}\n loading={loading}\n emptyMessage={emptyMessage}\n containerRef={containerRef}\n // Cascade the same accessible-name source the consumer\n // provided for the input to the listbox portal — keeps\n // axe `aria-input-field-name` satisfied on the listbox\n // without making the consumer re-state the name.\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabelledBy ? undefined : ariaLabel \|\| label}\n />\n )}\n </div>\n );\n },\n);\n\nAutocomplete.displayName = \"Autocomplete\";\n\nexport default Autocomplete;\n"],"names":["Autocomplete","forwardRef","options","controlledValue","defaultValue","onChange","onSelect","placeholder","loading","disabled","emptyMessage","debounceMs","filterOptions","className","inputClassName","size","label","ariaLabel","ariaLabelledBy","idProp","ref","autoId","useId","inputId","listboxId","internalValue","setInternalValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchValue","setSearchValue","containerRef","useRef","inputRef","listRef","debounceTimerRef","isControlled","currentValue","filteredOptions","option","hasOptions","handleInputChange","newValue","handleSelect","_a","moveHighlight","prev","dir","n","start","i","idx","handleKeyDown","useEffect","handleClickOutside","e","target","items","opt","shouldShowList","activeOptionId","jsx","Input","mergeRefs","Loader2","ChevronDown","AutocompleteList"],"mappings":"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"}

package/dist/granular/ui/components/Autocomplete/AutocompleteList.js CHANGED Viewed

@@ -1,51 +1,55 @@
 "use client";
-import { jsx as e, jsxs as v, Fragment as y } from "react/jsx-runtime";
-import { forwardRef as $, useState as C, useEffect as A } from "react";
-import { createPortal as N } from "react-dom";
-import { getRadiusClass as L } from "../../tokens/radius.js";
-import { getShadowClass as S } from "../../tokens/shadows.js";
-import { getZIndexClass as j } from "../../tokens/z-index.js";
+import { jsx as e, jsxs as y, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as A, useState as N, useEffect as L } from "react";
+import { createPortal as S } from "react-dom";
+import { getRadiusClass as j } from "../../tokens/radius.js";
+import { getShadowClass as P } from "../../tokens/shadows.js";
+import { getZIndexClass as k } from "../../tokens/z-index.js";
 import { getSpacingClass as o } from "../../tokens/spacing.js";
-import P from "./AutocompleteOption.js";
-const k = $(
+import D from "./AutocompleteOption.js";
+const E = A(
   function({
-    options: i,
-    highlightedIndex: d,
-    onSelect: m,
-    loading: n = !1,
-    emptyMessage: c = "No options found",
+    options: a,
+    highlightedIndex: c,
+    onSelect: p,
+    loading: f = !1,
+    emptyMessage: u = "No options found",
     containerRef: l,
-    showSelectAll: p = !1,
-    allSelected: s = !1,
-    onSelectAll: f,
-    onDeselectAll: u,
-    "aria-label": x,
-    "aria-labelledby": a
-  }, g) {
-    const [r, h] = C({ top: 0, left: 0, width: 0 });
-    A(() => {
+    showSelectAll: b = !1,
+    allSelected: d = !1,
+    onSelectAll: g,
+    onDeselectAll: h,
+    id: r,
+    selectedValues: i,
+    "aria-label": v,
+    "aria-labelledby": m
+  }, x) {
+    const [s, w] = N({ top: 0, left: 0, width: 0 });
+    L(() => {
       if (l.current) {
         const t = l.current.getBoundingClientRect();
-        h({
+        w({
           top: t.bottom + window.scrollY + 4,
           left: t.left + window.scrollX,
           width: t.width
         });
       }
     }, [l]);
-    const b = /* @__PURE__ */ e(
+    const $ = /* @__PURE__ */ e(
       "div",
       {
-        ref: g,
+        ref: x,
+        id: r,
         role: "listbox",
-        "aria-label": a ? void 0 : x,
-        "aria-labelledby": a,
+        "aria-multiselectable": i ? !0 : void 0,
+        "aria-label": m ? void 0 : v,
+        "aria-labelledby": m,
         className: `
           absolute
-          ${j("popover")}
+          ${k("popover")}
           bg-surface-overlay
-          ${L("md")}
-          ${S("lg")}
+          ${j("md")}
+          ${P("lg")}
           border
           border-line-default
           max-h-60
@@ -53,13 +57,15 @@ const k = $(
           ${o("xs", "py")}
         `,
         style: {
-          top: `${r.top}px`,
-          left: `${r.left}px`,
-          width: `${r.width}px`
+          top: `${s.top}px`,
+          left: `${s.left}px`,
+          width: `${s.width}px`
         },
-        children: n ? /* @__PURE__ */ e(
+        children: f ? /* @__PURE__ */ e(
           "div",
           {
+            role: "status",
+            "aria-live": "polite",
             className: `
               ${o("md", "p")}
               text-sm
@@ -68,19 +74,21 @@ const k = $(
             `,
             children: "Loading..."
           }
-        ) : i.length === 0 ? /* @__PURE__ */ e(
+        ) : a.length === 0 ? /* @__PURE__ */ e(
           "div",
           {
+            role: "status",
+            "aria-live": "polite",
             className: `
               ${o("md", "p")}
               text-sm
               text-fg-tertiary
               text-center
             `,
-            children: c
+            children: u
           }
-        ) : /* @__PURE__ */ v(y, { children: [
-          p && /* @__PURE__ */ e(
+        ) : /* @__PURE__ */ y(C, { children: [
+          b && /* @__PURE__ */ e(
             "div",
             {
               className: `
@@ -93,27 +101,29 @@ const k = $(
                   border-b
                   border-line-default
                 `,
-              onClick: s ? u : f,
-              children: s ? "Deselect All" : "Select All"
+              onClick: d ? h : g,
+              children: d ? "Deselect All" : "Select All"
             }
           ),
-          i.map((t, w) => /* @__PURE__ */ e(
-            P,
+          a.map((t, n) => /* @__PURE__ */ e(
+            D,
             {
+              id: r ? `${r}-option-${n}` : void 0,
               option: t,
-              isHighlighted: w === d,
-              onSelect: m
+              isHighlighted: n === c,
+              selected: i ? i.includes(t.value) : void 0,
+              onSelect: p
             },
             t.value
           ))
         ] })
       }
     );
-    return typeof window != "undefined" ? N(b, document.body) : null;
+    return typeof window != "undefined" ? S($, document.body) : null;
   }
 );
-k.displayName = "AutocompleteList";
+E.displayName = "AutocompleteList";
 export {
-  k as default
+  E as default
 };
 //# sourceMappingURL=AutocompleteList.js.map

package/dist/granular/ui/components/Autocomplete/AutocompleteList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteList.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteList.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport AutocompleteOption from \"./AutocompleteOption\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteListProps {\n options: AutocompleteOptionType[];\n highlightedIndex: number;\n onSelect: (option: AutocompleteOptionType) => void;\n loading?: boolean;\n emptyMessage?: string;\n containerRef: React.RefObject<HTMLDivElement \| null>;\n showSelectAll?: boolean;\n allSelected?: boolean;\n onSelectAll?: () => void;\n onDeselectAll?: () => void;\n /*\n Accessible name for the listbox. axe `aria-input-field-name`\n * (serious) flags a `role=\"listbox\"` portal without `aria-label` /\n * `aria-labelledby` / `title`. The Autocomplete / MultiSelect parent\n * cascades whatever accessible-name source the consumer provided\n * (label string, aria-label, or external id) so the listbox inherits\n * the same name as the input it dropdowns from.\n /\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\n/\n AutocompleteList Component\n \n The list container for autocomplete options.\n * Renders in a portal and positions itself below the input.\n */\nconst AutocompleteList = forwardRef<HTMLDivElement, AutocompleteListProps>(\n function AutocompleteList(\n {\n options,\n highlightedIndex,\n onSelect,\n loading = false,\n emptyMessage = \"No options found\",\n containerRef,\n showSelectAll = false,\n allSelected = false,\n onSelectAll,\n onDeselectAll,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) {\n const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n\n // Calculate position\n useEffect(() => {\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + window.scrollY + 4,\n left: rect.left + window.scrollX,\n width: rect.width,\n });\n }\n }, [containerRef]);\n\n const listContent = (\n <div\n ref={ref}\n role=\"listbox\"\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={`\n absolute\n ${getZIndexClass(\"popover\")}\n bg-surface-overlay\n ${getRadiusClass(\"md\")}\n ${getShadowClass(\"lg\")}\n border\n border-line-default\n max-h-60\n overflow-y-auto\n ${getSpacingClass(\"xs\", \"py\")}\n `}\n style={{\n top: `${position.top}px`,\n left: `${position.left}px`,\n width: `${position.width}px`,\n }}\n >\n {loading ? (\n <div\n className={`\n ${getSpacingClass(\"md\", \"p\")}\n text-sm\n text-fg-tertiary\n text-center\n `}\n >\n Loading...\n </div>\n ) : options.length === 0 ? (\n <div\n className={`\n ${getSpacingClass(\"md\", \"p\")}\n text-sm\n text-fg-tertiary\n text-center\n `}\n >\n {emptyMessage}\n </div>\n ) : (\n <>\n {showSelectAll && (\n <div\n className={`\n ${getSpacingClass(\"sm\", \"px\")}\n ${getSpacingClass(\"sm\", \"py\")}\n text-sm\n font-medium\n cursor-pointer\n hover:bg-surface-hover\n border-b\n border-line-default\n `}\n onClick={allSelected ? onDeselectAll : onSelectAll}\n >\n {allSelected ? \"Deselect All\" : \"Select All\"}\n </div>\n )}\n {options.map((option, index) => (\n <AutocompleteOption\n key={option.value}\n option={option}\n isHighlighted={index === highlightedIndex}\n onSelect={onSelect}\n />\n ))}\n </>\n )}\n </div>\n );\n\n return typeof window !== \"undefined\"\n ? createPortal(listContent, document.body)\n : null;\n },\n);\n\nAutocompleteList.displayName = \"AutocompleteList\";\n\nexport default AutocompleteList;\n"],"names":["AutocompleteList","forwardRef","options","highlightedIndex","onSelect","loading","emptyMessage","containerRef","showSelectAll","allSelected","onSelectAll","onDeselectAll","ariaLabel","ariaLabelledBy","ref","position","setPosition","useState","useEffect","rect","listContent","jsx","getZIndexClass","getRadiusClass","getShadowClass","getSpacingClass","jsxs","Fragment","option","index","AutocompleteOption","createPortal"],"mappings":";;;;;;;;;~~AAwCA~~,MAAMA,IAAmBC;AAAA,EACvB,SACE;AAAA,IACE,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,EAAA,GAErBC,GACA;AACA,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,CAAG;AAGtE,IAAAC,EAAU,MAAM;AACd,~~UAAIX~~,EAAa,SAAS;AACxB,~~cAAMY~~,~~IAAOZ~~,EAAa,QAAQ,sBAAA;AAClC,~~QAAAS~~,EAAY;AAAA,UACV,KAAKG,EAAK,SAAS,OAAO,UAAU;AAAA,UACpC,MAAMA,EAAK,OAAO,OAAO;AAAA,UACzB,OAAOA,EAAK;AAAA,QAAA,CACb;AAAA,MACH;AAAA,IACF,GAAG,~~CAACZ~~,CAAY,CAAC;AAEjB,~~UAAMa~~,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAP;AAAA,QACA,MAAK;AAAA,QACL,~~cAAYD~~,IAAiB,SAAYD;AAAA,QACzC,mBAAiBC;AAAA,QACjB,WAAW;AAAA;AAAA,YAEPS,EAAe,SAAS,CAAC;AAAA;AAAA,YAEzBC,EAAe,IAAI,CAAC;AAAA,YACpBC,EAAe,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKpBC,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA,QAE/B,OAAO;AAAA,UACL,KAAK,GAAGV,EAAS,GAAG;AAAA,UACpB,MAAM,GAAGA,EAAS,IAAI;AAAA,UACtB,OAAO,GAAGA,EAAS,KAAK;AAAA,QAAA;AAAA,QAGzB,~~UAAAV~~,IACC,~~gBAAAgB~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,gBACPI,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,UAAA;AAAA,UAAA;AAAA,QAAA,~~IAGCvB~~,EAAQ,WAAW,IACrB,~~gBAAAmB~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,gBACPI,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAM7B,~~UAAAnB~~;AAAA,UAAA;AAAA,QAAA,IAGH,~~gBAAAoB~~,EAAAC,GAAA,EACG,UAAA;AAAA,~~UAAAnB~~,KACC,~~gBAAAa~~;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,oBACPI,EAAgB,MAAM,IAAI,CAAC;AAAA,oBAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQ/B,~~SAAShB~~,IAAcE,IAAgBD;AAAA,cAEtC,cAAc,iBAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnCR,EAAQ,IAAI,~~CAAC0B~~,GAAQC,MACpB,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cAEC,~~QAAAF~~;AAAA,cACA,eAAeC,~~MAAU1B~~;AAAA,cACzB,~~UAAAC~~;AAAA,YAAA;AAAA,~~YAHKwB~~,EAAO;AAAA,UAAA,~~CAKf~~;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAKN,WAAO,OAAO,UAAW,cACrBG,EAAaX,GAAa,SAAS,IAAI,IACvC;AAAA,EACN;AACF;~~AAEApB~~,EAAiB,cAAc;"}
1	+ {"version":3,"file":"AutocompleteList.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteList.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport AutocompleteOption from \"./AutocompleteOption\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteListProps {\n options: AutocompleteOptionType[];\n highlightedIndex: number;\n onSelect: (option: AutocompleteOptionType) => void;\n loading?: boolean;\n emptyMessage?: string;\n containerRef: React.RefObject<HTMLDivElement \| null>;\n showSelectAll?: boolean;\n allSelected?: boolean;\n onSelectAll?: () => void;\n onDeselectAll?: () => void;\n /** listbox id; option ids are derived as `${id}-option-${index}`. /\n id?: string;\n /* Multi-select: values currently selected, to drive aria-selected. /\n selectedValues?: string[];\n /\n Accessible name for the listbox. axe `aria-input-field-name`\n * (serious) flags a `role=\"listbox\"` portal without `aria-label` /\n * `aria-labelledby` / `title`. The Autocomplete / MultiSelect parent\n * cascades whatever accessible-name source the consumer provided\n * (label string, aria-label, or external id) so the listbox inherits\n * the same name as the input it dropdowns from.\n /\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\n/\n AutocompleteList Component\n \n The list container for autocomplete options.\n * Renders in a portal and positions itself below the input.\n */\nconst AutocompleteList = forwardRef<HTMLDivElement, AutocompleteListProps>(\n function AutocompleteList(\n {\n options,\n highlightedIndex,\n onSelect,\n loading = false,\n emptyMessage = \"No options found\",\n containerRef,\n showSelectAll = false,\n allSelected = false,\n onSelectAll,\n onDeselectAll,\n id,\n selectedValues,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) {\n const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n\n // Calculate position\n useEffect(() => {\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n setPosition({\n top: rect.bottom + window.scrollY + 4,\n left: rect.left + window.scrollX,\n width: rect.width,\n });\n }\n }, [containerRef]);\n\n const listContent = (\n <div\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-multiselectable={selectedValues ? true : undefined}\n aria-label={ariaLabelledBy ? undefined : ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={`\n absolute\n ${getZIndexClass(\"popover\")}\n bg-surface-overlay\n ${getRadiusClass(\"md\")}\n ${getShadowClass(\"lg\")}\n border\n border-line-default\n max-h-60\n overflow-y-auto\n ${getSpacingClass(\"xs\", \"py\")}\n `}\n style={{\n top: `${position.top}px`,\n left: `${position.left}px`,\n width: `${position.width}px`,\n }}\n >\n {loading ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={`\n ${getSpacingClass(\"md\", \"p\")}\n text-sm\n text-fg-tertiary\n text-center\n `}\n >\n Loading...\n </div>\n ) : options.length === 0 ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className={`\n ${getSpacingClass(\"md\", \"p\")}\n text-sm\n text-fg-tertiary\n text-center\n `}\n >\n {emptyMessage}\n </div>\n ) : (\n <>\n {showSelectAll && (\n <div\n className={`\n ${getSpacingClass(\"sm\", \"px\")}\n ${getSpacingClass(\"sm\", \"py\")}\n text-sm\n font-medium\n cursor-pointer\n hover:bg-surface-hover\n border-b\n border-line-default\n `}\n onClick={allSelected ? onDeselectAll : onSelectAll}\n >\n {allSelected ? \"Deselect All\" : \"Select All\"}\n </div>\n )}\n {options.map((option, index) => (\n <AutocompleteOption\n key={option.value}\n id={id ? `${id}-option-${index}` : undefined}\n option={option}\n isHighlighted={index === highlightedIndex}\n selected={\n selectedValues\n ? selectedValues.includes(option.value)\n : undefined\n }\n onSelect={onSelect}\n />\n ))}\n </>\n )}\n </div>\n );\n\n return typeof window !== \"undefined\"\n ? createPortal(listContent, document.body)\n : null;\n },\n);\n\nAutocompleteList.displayName = \"AutocompleteList\";\n\nexport default AutocompleteList;\n"],"names":["AutocompleteList","forwardRef","options","highlightedIndex","onSelect","loading","emptyMessage","containerRef","showSelectAll","allSelected","onSelectAll","onDeselectAll","id","selectedValues","ariaLabel","ariaLabelledBy","ref","position","setPosition","useState","useEffect","rect","listContent","jsx","getZIndexClass","getRadiusClass","getShadowClass","getSpacingClass","jsxs","Fragment","option","index","AutocompleteOption","createPortal"],"mappings":"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"}

package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js CHANGED Viewed

@@ -1,42 +1,43 @@
 "use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { getSpacingClass as s } from "../../tokens/spacing.js";
-const n = i(
-  function({ option: e, isHighlighted: a, onSelect: l }, c) {
-    const o = () => {
-      e.disabled || l(e);
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { getSpacingClass as r } from "../../tokens/spacing.js";
+const p = m(
+  function({ option: a, isHighlighted: s, onSelect: o, id: i, selected: e }, c) {
+    const t = () => {
+      a.disabled || o(a);
     };
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ n(
       "div",
       {
         ref: c,
+        id: i,
         role: "option",
-        "aria-selected": a,
-        "aria-disabled": e.disabled,
-        onClick: o,
+        "aria-selected": e != null ? e : s,
+        "aria-disabled": a.disabled,
+        onClick: t,
         className: `
           flex
           items-center
-          ${s("sm", "gap")}
-          ${s("sm", "px")}
-          ${s("sm", "py")}
+          ${r("sm", "gap")}
+          ${r("sm", "px")}
+          ${r("sm", "py")}
           text-sm
           cursor-pointer
           transition-colors
-          ${a ? "bg-surface-active" : ""}
-          ${e.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover"}
+          ${s ? "bg-surface-active" : ""}
+          ${a.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover"}
         `,
         children: [
-          e.icon && /* @__PURE__ */ r("span", { className: "flex-shrink-0", children: e.icon }),
-          /* @__PURE__ */ r("span", { className: "flex-1", children: e.label })
+          a.icon && /* @__PURE__ */ l("span", { className: "flex-shrink-0", children: a.icon }),
+          /* @__PURE__ */ l("span", { className: "flex-1", children: a.label })
         ]
       }
     );
   }
 );
-n.displayName = "AutocompleteOption";
+p.displayName = "AutocompleteOption";
 export {
-  n as default
+  p as default
 };
 //# sourceMappingURL=AutocompleteOption.js.map

package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteOption.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteOption.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface AutocompleteOptionType {\n value: string;\n label: string;\n disabled?: boolean;\n icon?: ReactNode;\n group?: string;\n}\n\nexport interface AutocompleteOptionProps {\n option: AutocompleteOptionType;\n isHighlighted: boolean;\n onSelect: (option: AutocompleteOptionType) => void;\n}\n\n/*\n AutocompleteOption Component\n \n A single option in the autocomplete list.\n */\nconst AutocompleteOption = forwardRef<HTMLDivElement, AutocompleteOptionProps>(\n function AutocompleteOption({ option, isHighlighted, onSelect }, ref) {\n const handleClick = () => {\n if (!option.disabled) {\n onSelect(option);\n }\n };\n\n return (\n <div\n ref={ref}\n role=\"option\"\n aria-selected={isHighlighted}\n aria-disabled={option.disabled}\n onClick={handleClick}\n className={`\n flex\n items-center\n ${getSpacingClass(\"sm\", \"gap\")}\n ${getSpacingClass(\"sm\", \"px\")}\n ${getSpacingClass(\"sm\", \"py\")}\n text-sm\n cursor-pointer\n transition-colors\n ${isHighlighted ? \"bg-surface-active\" : \"\"}\n ${option.disabled ? \"opacity-50 cursor-not-allowed\" : \"hover:bg-surface-hover\"}\n `}\n >\n {option.icon && <span className=\"flex-shrink-0\">{option.icon}</span>}\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n },\n);\n\nAutocompleteOption.displayName = \"AutocompleteOption\";\n\nexport default AutocompleteOption;\n"],"names":["AutocompleteOption","forwardRef","option","isHighlighted","onSelect","ref","handleClick","jsxs","getSpacingClass","jsx"],"mappings":";;;;~~AAwBA~~,MAAMA,IAAqBC;AAAA,EACzB,~~SAA4B~~,EAAE,QAAAC,GAAQ,eAAAC,GAAe,UAAAC,EAAA,~~GAAYC~~,~~GAAK~~;~~AACpE~~,UAAMC,IAAc,MAAM;AACxB,~~MAAKJ~~,EAAO,YACVE,EAASF,CAAM;AAAA,IAEnB;AAEA,WACE,~~gBAAAK~~;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,MAAK;AAAA,QACL,~~iBAAeF~~;AAAA,~~QACf~~,iBAAeD,EAAO;AAAA,QACtB,~~SAASI~~;AAAA,QACT,WAAW;AAAA;AAAA;AAAA,YAGPE,EAAgB,MAAM,KAAK,CAAC;AAAA,YAC5BA,EAAgB,MAAM,IAAI,CAAC;AAAA,YAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,~~YAI3BL~~,IAAgB,sBAAsB,EAAE;AAAA,YACxCD,EAAO,WAAW,kCAAkC,wBAAwB;AAAA;AAAA,QAG/E,UAAA;AAAA,UAAAA,EAAO,QAAQ,~~gBAAAO~~,EAAC,QAAA,EAAK,WAAU,iBAAiB,YAAO,MAAK;AAAA,UAC7D,gBAAAA,EAAC,QAAA,EAAK,WAAU,UAAU,YAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;~~AAEAT~~,EAAmB,cAAc;"}
1	+ {"version":3,"file":"AutocompleteOption.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteOption.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface AutocompleteOptionType {\n value: string;\n label: string;\n disabled?: boolean;\n icon?: ReactNode;\n group?: string;\n}\n\nexport interface AutocompleteOptionProps {\n option: AutocompleteOptionType;\n isHighlighted: boolean;\n onSelect: (option: AutocompleteOptionType) => void;\n /** Stable id so the combobox input can point aria-activedescendant here. /\n id?: string;\n /\n Selection state for multi-select usage. When provided it drives\n * aria-selected; otherwise aria-selected reflects the highlight (the\n * single-select activedescendant model).\n /\n selected?: boolean;\n}\n\n/\n AutocompleteOption Component\n \n A single option in the autocomplete list.\n */\nconst AutocompleteOption = forwardRef<HTMLDivElement, AutocompleteOptionProps>(\n function AutocompleteOption(\n { option, isHighlighted, onSelect, id, selected },\n ref,\n ) {\n const handleClick = () => {\n if (!option.disabled) {\n onSelect(option);\n }\n };\n\n return (\n <div\n ref={ref}\n id={id}\n role=\"option\"\n aria-selected={selected ?? isHighlighted}\n aria-disabled={option.disabled}\n onClick={handleClick}\n className={`\n flex\n items-center\n ${getSpacingClass(\"sm\", \"gap\")}\n ${getSpacingClass(\"sm\", \"px\")}\n ${getSpacingClass(\"sm\", \"py\")}\n text-sm\n cursor-pointer\n transition-colors\n ${isHighlighted ? \"bg-surface-active\" : \"\"}\n ${option.disabled ? \"opacity-50 cursor-not-allowed\" : \"hover:bg-surface-hover\"}\n `}\n >\n {option.icon && <span className=\"flex-shrink-0\">{option.icon}</span>}\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n },\n);\n\nAutocompleteOption.displayName = \"AutocompleteOption\";\n\nexport default AutocompleteOption;\n"],"names":["AutocompleteOption","forwardRef","option","isHighlighted","onSelect","id","selected","ref","handleClick","jsxs","getSpacingClass","jsx"],"mappings":";;;;AAgCA,MAAMA,IAAqBC;AAAA,EACzB,SACE,EAAE,QAAAC,GAAQ,eAAAC,GAAe,UAAAC,GAAU,IAAAC,GAAI,UAAAC,EAAA,GACvCC,GACA;AACA,UAAMC,IAAc,MAAM;AACxB,MAAKN,EAAO,YACVE,EAASF,CAAM;AAAA,IAEnB;AAEA,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,IAAAF;AAAA,QACA,MAAK;AAAA,QACL,iBAAeC,KAAA,OAAAA,IAAYH;AAAA,QAC3B,iBAAeD,EAAO;AAAA,QACtB,SAASM;AAAA,QACT,WAAW;AAAA;AAAA;AAAA,YAGPE,EAAgB,MAAM,KAAK,CAAC;AAAA,YAC5BA,EAAgB,MAAM,IAAI,CAAC;AAAA,YAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,YAI3BP,IAAgB,sBAAsB,EAAE;AAAA,YACxCD,EAAO,WAAW,kCAAkC,wBAAwB;AAAA;AAAA,QAG/E,UAAA;AAAA,UAAAA,EAAO,QAAQ,gBAAAS,EAAC,QAAA,EAAK,WAAU,iBAAiB,YAAO,MAAK;AAAA,UAC7D,gBAAAA,EAAC,QAAA,EAAK,WAAU,UAAU,YAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEAX,EAAmB,cAAc;"}