@brycks/core-front 0.3.6 → 0.6.0

package/dist/components/form/Combobox/Combobox.js

@@ -1,338 +1,262 @@
-import { jsxs as v, jsx as o, Fragment as ke } from "react/jsx-runtime";
-import { forwardRef as we, useState as g, useRef as j, useMemo as X, useEffect as I, useCallback as L } from "react";
-import { createPortal as xe } from "react-dom";
-import { cx as Se } from "../../../utils/styles.js";
-import { useId as Ce } from "../../../hooks/useId.js";
-import { durations as w, easings as x } from "../../../design-system/tokens/motion.js";
-import { iconSizes as B, componentPaddingX as E, componentHeights as P, componentGap as $e } from "../../../design-system/primitives/sizing.js";
-import { fontSizes as R } from "../../../design-system/tokens/typography.js";
-import { spacing as d } from "../../../design-system/tokens/spacing.js";
-const ze = {
-  sm: { height: P.sm, fontSize: R.base - 1, padding: E.sm, iconSize: B.sm },
-  md: { height: P.md, fontSize: R.base, padding: E.md, iconSize: B.md },
-  lg: { height: P.lg, fontSize: R.md, padding: E.lg, iconSize: B.lg }
-}, Ie = (S, f) => {
-  const c = f.toLowerCase();
-  return S.label.toLowerCase().includes(c) || S.value.toLowerCase().includes(c) || (S.description?.toLowerCase().includes(c) ?? !1);
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as ne, useState as k, useRef as D, useMemo as j, useEffect as C, useCallback as N } from "react";
+import { createPortal as se } from "react-dom";
+import { cx as g } from "../../../utils/styles.js";
+import { useId as ce } from "../../../hooks/useId.js";
+import { spacing as ie } from "../../../design-system/tokens/spacing.js";
+const ae = (v, b) => {
+  const a = b.toLowerCase();
+  return v.label.toLowerCase().includes(a) || v.value.toLowerCase().includes(a) || (v.description?.toLowerCase().includes(a) ?? !1);
 };
-function Le() {
-  return /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function le() {
+  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Ee() {
-  return /* @__PURE__ */ o("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4 4l6 6M10 4l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+function de() {
+  return /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M4 4l6 6M10 4l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const Re = we(function({
-  options: f,
-  value: c,
-  defaultValue: G = null,
-  onChange: W,
-  onInputChange: F,
-  placeholder: U = "Select or search...",
-  size: T = "md",
-  disabled: b = !1,
-  isInvalid: A = !1,
-  required: J = !1,
-  clearable: Q = !0,
-  "aria-label": Y,
-  "aria-labelledby": Z,
-  filterFn: N = Ie,
-  emptyText: _ = "No options found",
-  creatable: M = !1,
-  onCreate: O,
-  createLabel: ee = (m) => `Create "${m}"`,
-  clearLabel: re = "Clear selection",
-  listboxLabel: te = "Options",
-  className: oe,
-  testId: ne
-}, C) {
-  const m = Ce("combobox-listbox"), [ae, se] = g(G), [a, y] = g(""), [r, p] = g(!1), [n, s] = g(-1), [q, H] = g(!1), $ = j(null), z = j(null), K = j(null), i = c !== void 0 ? c : ae, h = ze[T], l = X(
-    () => f.find((e) => e.value === i),
-    [f, i]
-  ), u = X(() => a ? f.filter((e) => N(e, a)) : f, [f, a, N]);
-  I(() => {
-    !r && l ? y(l.label) : !r && !i && y("");
-  }, [r, l, i]);
-  const k = L(
+const be = ne(function({
+  options: b,
+  value: a,
+  defaultValue: S = null,
+  onChange: M,
+  onInputChange: R,
+  placeholder: A = "Select or search...",
+  size: z = "md",
+  disabled: w = !1,
+  isInvalid: $ = !1,
+  required: F = !1,
+  clearable: K = !0,
+  "aria-label": B,
+  "aria-labelledby": V,
+  filterFn: O = ae,
+  emptyText: q = "No options found",
+  isLoading: P = !1,
+  loadingText: T = "Loading…",
+  creatable: L = !1,
+  onCreate: I,
+  createLabel: U = (p) => `Create "${p}"`,
+  clearLabel: X = "Clear selection",
+  listboxLabel: Y = "Options",
+  className: G,
+  testId: H
+}, y) {
+  const p = ce("combobox-listbox"), [J, Q] = k(S), [s, f] = k(""), [o, u] = k(!1), [n, c] = k(-1), _ = D(null), x = D(null), W = D(null), l = a !== void 0 ? a : J, i = j(
+    () => b.find((e) => e.value === l),
+    [b, l]
+  ), d = j(() => s ? b.filter((e) => O(e, s)) : b, [b, s, O]);
+  C(() => {
+    !o && i ? f(i.label) : !o && !l && f("");
+  }, [o, i, l]);
+  const h = N(
     (e) => {
-      c === void 0 && se(e), W?.(e), p(!1), s(-1), z.current?.focus();
+      a === void 0 && Q(e), M?.(e), u(!1), c(-1), x.current?.focus();
     },
-    [c, W]
-  ), ie = L(
+    [a, M]
+  ), Z = N(
     (e) => {
-      const t = e.target.value;
-      y(t), F?.(t), r || p(!0), s(0);
+      const r = e.target.value;
+      f(r), R?.(r), o || u(!0), c(0);
     },
-    [r, F]
-  ), le = L(
+    [o, R]
+  ), ee = N(
     (e) => {
-      e.stopPropagation(), k(null), y(""), z.current?.focus();
+      e.stopPropagation(), h(null), f(""), x.current?.focus();
     },
-    [k]
-  ), de = L(
+    [h]
+  ), oe = N(
     (e) => {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), r ? s((t) => Math.min(t + 1, u.length - 1)) : (p(!0), s(0));
+          e.preventDefault(), o ? c((r) => Math.min(r + 1, d.length - 1)) : (u(!0), c(0));
           break;
         case "ArrowUp":
-          e.preventDefault(), r && s((t) => Math.max(t - 1, 0));
+          e.preventDefault(), o && c((r) => Math.max(r - 1, 0));
           break;
         case "Enter":
-          e.preventDefault(), r && n >= 0 && u[n] ? u[n].disabled || k(u[n].value) : M && a && u.length === 0 && O?.(a);
+          e.preventDefault(), o && n >= 0 && d[n] ? d[n].disabled || h(d[n].value) : L && s && d.length === 0 && I?.(s);
           break;
         case "Escape":
-          e.preventDefault(), p(!1), s(-1), l && y(l.label);
+          e.preventDefault(), u(!1), c(-1), i && f(i.label);
           break;
         case "Tab":
-          r && (p(!1), s(-1));
+          o && (u(!1), c(-1));
           break;
       }
     },
-    [r, n, u, k, M, a, O, l]
+    [o, n, d, h, L, s, I, i]
   );
-  I(() => {
-    if (!r) return;
-    const e = (t) => {
-      $.current?.contains(t.target) || (p(!1), s(-1), l && y(l.label));
+  C(() => {
+    if (!o) return;
+    const e = (r) => {
+      _.current?.contains(r.target) || (u(!1), c(-1), i && f(i.label));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [r, l]), I(() => {
-    if (!r || n < 0) return;
-    K.current?.children[n]?.scrollIntoView({ block: "nearest" });
-  }, [r, n]);
-  const [D, ce] = g({ top: 0, left: 0, width: 0 });
-  I(() => {
-    if (!r || !$.current) return;
+  }, [o, i]), C(() => {
+    if (!o || n < 0) return;
+    W.current?.children[n]?.scrollIntoView({ block: "nearest" });
+  }, [o, n]);
+  const [E, te] = k({ top: 0, left: 0, width: 0 });
+  C(() => {
+    if (!o || !_.current) return;
     const e = () => {
-      const t = $.current.getBoundingClientRect();
-      ce({
-        top: t.bottom + window.scrollY + d[1],
-        left: t.left + window.scrollX,
-        width: t.width
+      const r = _.current.getBoundingClientRect();
+      te({
+        top: r.bottom + window.scrollY + ie[1],
+        left: r.left + window.scrollX,
+        width: r.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [r]);
-  const ue = {
-    position: "relative",
-    display: "inline-flex",
-    width: "100%"
-  }, fe = {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    height: h.height,
-    backgroundColor: b ? "var(--brycks-background-muted)" : "var(--brycks-background-default)",
-    border: `1px solid ${A ? "var(--brycks-error-default)" : q ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
-    borderRadius: "var(--brycks-radius-md)",
-    transition: `all ${w.fast}ms ${x.easeOut}`,
-    cursor: b ? "not-allowed" : "text",
-    boxShadow: q ? "var(--brycks-focus-ring)" : void 0
-  }, be = {
-    flex: 1,
-    height: "100%",
-    padding: `0 ${h.padding}px`,
-    paddingRight: d[10],
-    fontSize: h.fontSize,
-    color: b ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: "transparent",
-    border: "none",
-    outline: "none",
-    cursor: b ? "not-allowed" : "text"
-  }, pe = {
-    position: "absolute",
-    right: h.padding,
-    display: "flex",
-    alignItems: "center",
-    gap: d[1],
-    pointerEvents: "none"
-  }, me = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: d[5],
-    height: d[5],
-    color: "var(--brycks-foreground-muted)",
-    cursor: "pointer",
-    borderRadius: "var(--brycks-radius-sm)",
-    transition: `all ${w.fast}ms ${x.easeOut}`,
-    pointerEvents: "auto"
-  }, ye = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "var(--brycks-foreground-muted)",
-    transform: r ? "rotate(180deg)" : "rotate(0)",
-    transition: `transform ${w.fast}ms ${x.easeOut}`
-  }, he = {
-    position: "absolute",
-    top: D.top,
-    left: D.left,
-    width: D.width,
-    maxHeight: 300,
-    overflowY: "auto",
-    backgroundColor: "var(--brycks-background-elevated)",
-    border: "1px solid var(--brycks-border-default)",
-    borderRadius: "var(--brycks-radius-lg)",
-    boxShadow: "var(--brycks-shadow-lg)",
-    zIndex: "var(--brycks-z-dropdown)",
-    padding: d[1],
-    animation: `brycks-dropdown-in ${w.quick}ms ${x.easeOut}`
-  }, V = (e, t, ge) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: $e.md,
-    padding: `${d[2]}px ${E.sm}px`,
-    fontSize: h.fontSize,
-    color: t ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: e ? "var(--brycks-background-muted)" : ge ? "var(--brycks-primary-muted)" : "transparent",
-    borderRadius: "var(--brycks-radius-md)",
-    cursor: t ? "not-allowed" : "pointer",
-    transition: `background-color ${w.fast}ms ${x.easeOut}`
-  }), ve = {
-    padding: `${d[4]}px ${d[3]}px`,
-    fontSize: h.fontSize,
-    color: "var(--brycks-foreground-muted)",
-    textAlign: "center"
+  }, [o]);
+  const re = {
+    top: E.top,
+    left: E.left,
+    width: E.width
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ m(
     "div",
     {
-      ref: $,
-      className: Se("brycks-combobox", `brycks-combobox--${T}`, oe),
-      style: ue,
-      "data-testid": ne,
+      ref: _,
+      className: g("brycks-combobox", `brycks-combobox--${z}`, G),
+      "data-testid": H,
       children: [
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ m(
           "div",
           {
-            style: fe,
-            onClick: () => !b && z.current?.focus(),
+            className: g(
+              "brycks-combobox__wrapper",
+              $ && "brycks-combobox__wrapper--invalid",
+              w && "brycks-combobox__wrapper--disabled"
+            ),
+            onClick: () => !w && x.current?.focus(),
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ t(
                 "input",
                 {
                   ref: (e) => {
-                    z.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+                    x.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
                   },
                   type: "text",
                   role: "combobox",
-                  "aria-expanded": r,
+                  "aria-expanded": o,
                   "aria-haspopup": "listbox",
                   "aria-autocomplete": "list",
-                  "aria-controls": r ? m : void 0,
-                  "aria-activedescendant": r && n >= 0 ? `${m}-option-${n}` : void 0,
-                  "aria-invalid": A,
-                  "aria-required": J,
-                  "aria-label": Y,
-                  "aria-labelledby": Z,
-                  value: a,
-                  placeholder: U,
-                  disabled: b,
-                  style: be,
-                  onChange: ie,
-                  onKeyDown: de,
+                  "aria-controls": o ? p : void 0,
+                  "aria-activedescendant": o && n >= 0 ? `${p}-option-${n}` : void 0,
+                  "aria-invalid": $,
+                  "aria-required": F,
+                  "aria-label": B,
+                  "aria-labelledby": V,
+                  value: s,
+                  placeholder: A,
+                  disabled: w,
+                  className: "brycks-combobox__input",
+                  onChange: Z,
+                  onKeyDown: oe,
                   onFocus: () => {
-                    H(!0), p(!0);
-                  },
-                  onBlur: () => H(!1)
+                    u(!0);
+                  }
                 }
               ),
-              /* @__PURE__ */ v("div", { style: pe, children: [
-                Q && i && !b && /* @__PURE__ */ o(
+              /* @__PURE__ */ m("div", { className: "brycks-combobox__icons", children: [
+                K && l && !w && /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    "aria-label": re,
-                    style: me,
-                    onClick: le,
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", e.currentTarget.style.color = "var(--brycks-foreground-default)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.backgroundColor = "transparent", e.currentTarget.style.color = "var(--brycks-foreground-muted)";
-                    },
-                    children: /* @__PURE__ */ o(Ee, {})
+                    "aria-label": X,
+                    className: "brycks-combobox__clear",
+                    onClick: ee,
+                    children: /* @__PURE__ */ t(de, {})
                   }
                 ),
-                /* @__PURE__ */ o("span", { style: ye, children: /* @__PURE__ */ o(Le, {}) })
+                /* @__PURE__ */ t("span", { className: g("brycks-combobox__chevron", o && "brycks-combobox__chevron--open"), children: /* @__PURE__ */ t(le, {}) })
               ] })
             ]
           }
         ),
-        r && xe(
-          /* @__PURE__ */ v(ke, { children: [
-            /* @__PURE__ */ o("style", { children: `
-                @keyframes brycks-dropdown-in {
-                  from { opacity: 0; transform: translateY(-4px); }
-                  to { opacity: 1; transform: translateY(0); }
-                }
-              ` }),
-            /* @__PURE__ */ o(
-              "ul",
-              {
-                ref: K,
-                id: m,
-                role: "listbox",
-                "aria-label": Y || te,
-                style: he,
-                children: u.length > 0 ? u.map((e, t) => /* @__PURE__ */ v(
-                  "li",
+        o && se(
+          /* @__PURE__ */ t(
+            "ul",
+            {
+              ref: W,
+              id: p,
+              role: "listbox",
+              "aria-label": B || Y,
+              "aria-busy": P || void 0,
+              className: "brycks-combobox__dropdown",
+              style: re,
+              children: P ? /* @__PURE__ */ t("li", { className: "brycks-combobox__empty", role: "status", "aria-live": "polite", children: /* @__PURE__ */ m("span", { className: "brycks-combobox__loading", children: [
+                /* @__PURE__ */ m(
+                  "svg",
                   {
-                    id: `${m}-option-${t}`,
-                    role: "option",
-                    "aria-selected": e.value === i,
-                    "aria-disabled": e.disabled,
-                    style: V(t === n, !!e.disabled, e.value === i),
-                    onClick: () => !e.disabled && k(e.value),
-                    onMouseEnter: () => s(t),
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    className: "brycks-animate-spin",
+                    "aria-hidden": "true",
                     children: [
-                      e.icon && /* @__PURE__ */ o("span", { style: { flexShrink: 0 }, children: e.icon }),
-                      /* @__PURE__ */ v("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ o("div", { style: { fontWeight: e.value === i ? 500 : 400 }, children: e.label }),
-                        e.description && /* @__PURE__ */ o("div", { style: { fontSize: R.sm, color: "var(--brycks-foreground-muted)" }, children: e.description })
-                      ] }),
-                      e.value === i && /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ o(
-                        "path",
-                        {
-                          d: "M3 8l3 3 7-7",
-                          stroke: "var(--brycks-primary-default)",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ) })
+                      /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.2" }),
+                      /* @__PURE__ */ t("path", { d: "M12 2C6.47715 2 2 6.47715 2 12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
                     ]
-                  },
-                  e.value
-                )) : /* @__PURE__ */ o("li", { style: ve, children: M && a ? /* @__PURE__ */ o(
-                  "button",
-                  {
-                    type: "button",
-                    style: {
-                      ...V(!0, !1, !1),
-                      width: "100%",
-                      border: "none",
-                      cursor: "pointer"
-                    },
-                    onClick: () => O?.(a),
-                    children: ee(a)
                   }
-                ) : _ })
-              }
-            )
-          ] }),
+                ),
+                T
+              ] }) }) : d.length > 0 ? d.map((e, r) => /* @__PURE__ */ m(
+                "li",
+                {
+                  id: `${p}-option-${r}`,
+                  role: "option",
+                  "aria-selected": e.value === l,
+                  "aria-disabled": e.disabled,
+                  className: g(
+                    "brycks-combobox__option",
+                    e.value === l && "brycks-combobox__option--selected",
+                    r === n && "brycks-combobox__option--active",
+                    e.disabled && "brycks-combobox__option--disabled"
+                  ),
+                  onClick: () => !e.disabled && h(e.value),
+                  onMouseEnter: () => c(r),
+                  children: [
+                    e.icon && /* @__PURE__ */ t("span", { className: "brycks-combobox__option-icon", children: e.icon }),
+                    /* @__PURE__ */ m("div", { className: "brycks-combobox__option-body", children: [
+                      /* @__PURE__ */ t("div", { className: "brycks-combobox__option-label", children: e.label }),
+                      e.description && /* @__PURE__ */ t("div", { className: "brycks-combobox__option-description", children: e.description })
+                    ] }),
+                    e.value === l && /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "brycks-combobox__option-check", children: /* @__PURE__ */ t(
+                      "path",
+                      {
+                        d: "M3 8l3 3 7-7",
+                        stroke: "var(--brycks-primary-default)",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) })
+                  ]
+                },
+                e.value
+              )) : /* @__PURE__ */ t("li", { className: "brycks-combobox__empty", children: L && s ? /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "brycks-combobox__option brycks-combobox__option--active brycks-combobox__option--create",
+                  onClick: () => I?.(s),
+                  children: U(s)
+                }
+              ) : q })
+            }
+          ),
           document.body
         )
       ]
     }
   );
 });
-Re.displayName = "Combobox";
+be.displayName = "Combobox";
 export {
-  Re as Combobox
+  be as Combobox
 };
 //# sourceMappingURL=Combobox.js.map