@brycks/core-front 0.5.0 → 0.6.0

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

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