@konstructio/ui 0.0.12 → 0.0.13-alpha.2

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,102 +1,136 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as F, useId as L, useRef as N, useImperativeHandle as $, useEffect as f } from "react";
-import { cn as R } from "../../../utils/index.js";
-import "../../../contexts/theme.context.js";
-import { useTheme as A } from "../../../contexts/theme.hook.js";
-import "../../../js.cookie-OLEfuq_g.js";
-import { dropdownVariants as H } from "../Dropdown.variants.js";
-import { useDropdown as U } from "../hooks/useDropdown.js";
-import { useDropdownContext as W } from "../contexts/dropdown.hook.js";
-import "../contexts/dropdown.context.js";
-import { List as q } from "./List/List.js";
-import { C as z } from "../../../chevron-up-CvquEaNg.js";
-const _ = F(
-  ({ theme: g, label: p, placeholder: O, name: o, options: a, defaultValue: c }, j) => {
-    const d = L(), r = N(null), u = N(null), { wrapperRef: n, wrapperInputRef: h, handleOpen: y, handleOpenIfClosed: E } = U({ ulRef: u }), { isOpen: x, value: e, setValue: w, toggleOpen: b } = W(), { theme: T } = A(), v = g ?? T, i = o ? `${d}-${o}` : d;
-    $(j, () => r.current, [r]), f(() => {
-      r.current && (r.current.value = e ? e.value : "");
-    }, [e]), f(() => {
-      if (c) {
-        const s = a.find(
-          (l) => l.value === c
-        );
-        s && w(s);
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { forwardRef as $, useId as A, useRef as R, useImperativeHandle as H, useMemo as M, useEffect as m } from "react";
+import { Loading as U } from "../../Loading/Loading.js";
+import { Typography as O } from "../../Typography/Typography.js";
+import { cn as p } from "../../../utils/index.js";
+import { labelVariants as W, dropdownVariants as B } from "../Dropdown.variants.js";
+import { useDropdown as G } from "../hooks/useDropdown.js";
+import { List as J } from "./List/List.js";
+import { C as K } from "../../../chevron-up-DgLBQCKD.js";
+import { useDropdownContext as P } from "../contexts/dropdown.hook.js";
+const re = $(
+  ({
+    theme: z,
+    label: u,
+    labelClassName: j,
+    placeholder: E,
+    name: s,
+    options: n,
+    required: x,
+    defaultValue: d,
+    isLoading: h
+  }, L) => {
+    const v = A(), a = R(null), b = R(null), { wrapperRef: l, wrapperInputRef: w, handleOpen: k, handleOpenIfClosed: D } = G({ ulRef: b }), { isOpen: N, toggleOpen: g, value: t, setValue: I } = P(), c = s ? `${v}-${s}` : v;
+    H(L, () => a.current, [a]);
+    const e = M(() => n.find(({ value: o }) => o === t), [n, t]);
+    m(() => {
+      a.current && (a.current.value = t ? e == null ? void 0 : e.value : "");
+    }, [e, t]), m(() => {
+      if (d && !t) {
+        const o = n && n.find((i) => i.value === d);
+        o && I(o.value);
       }
-    }, [c, a, w]), f(() => {
-      var l;
-      const s = new AbortController();
-      return (l = n.current) == null || l.addEventListener("focusout", (D) => {
-        var I;
-        const C = D.relatedTarget;
-        (!C || !((I = n.current) != null && I.contains(C))) && b(!1);
+    }, [d, n, I, t]), m(() => {
+      var i;
+      const o = new AbortController();
+      return (i = l.current) == null || i.addEventListener("focusout", (T) => {
+        var C;
+        const y = T.relatedTarget;
+        (!y || !((C = l.current) != null && C.contains(y))) && g(!1);
       }), () => {
-        s.abort();
+        o.abort();
       };
-    }, [b, n]);
-    const k = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ m("div", { ref: n, className: "flex flex-col w-full relative", children: [
-      p ? /* @__PURE__ */ t(
-        "label",
-        {
-          id: i,
-          className: "m-2 cursor-pointer",
-          htmlFor: i,
-          onClick: E,
-          children: p
-        }
-      ) : null,
-      /* @__PURE__ */ m(
-        "div",
-        {
-          ref: h,
-          id: i,
-          className: R(H({ theme: v })),
-          role: "combobox",
-          onClick: y,
-          "aria-expanded": x,
-          tabIndex: 0,
-          "aria-labelledby": i,
-          children: [
-            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ m("span", { className: "flex gap-3 items-center", children: [
-              k(),
-              e.label
-            ] }) : O }),
-            /* @__PURE__ */ t(
-              z,
-              {
-                className: R(
-                  "w-4 h-4 text-inherit transition-all duration-50",
-                  x ? "rotate-0" : "rotate-180"
+    }, [g, l]);
+    const F = () => e != null && e.leftIcon ? /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: l,
+        className: "flex flex-col w-full relative",
+        "data-theme": z,
+        children: [
+          u ? /* @__PURE__ */ f(
+            "label",
+            {
+              id: c,
+              className: p(W({ className: j })),
+              htmlFor: c,
+              onClick: D,
+              children: [
+                u,
+                x ? /* @__PURE__ */ r("span", { className: "text-red-500 ml-1", children: "*" }) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ f(
+            "div",
+            {
+              ref: w,
+              id: c,
+              className: p(B()),
+              role: "combobox",
+              onClick: k,
+              "aria-expanded": N,
+              tabIndex: 0,
+              "aria-labelledby": c,
+              children: [
+                t ? /* @__PURE__ */ f(
+                  O,
+                  {
+                    variant: "body2",
+                    className: "flex gap-3 items-center text-zinc-700 text-base",
+                    children: [
+                      F(),
+                      e == null ? void 0 : e.label
+                    ]
+                  }
+                ) : /* @__PURE__ */ r(
+                  O,
+                  {
+                    variant: "body2",
+                    className: "flex gap-3 items-center text-zinc-700 text-base",
+                    children: E
+                  }
+                ),
+                h ? /* @__PURE__ */ r(U, { className: "w-4 h-4 text-zinc-500" }) : /* @__PURE__ */ r(
+                  K,
+                  {
+                    className: p(
+                      "w-4 h-4 text-zinc-500 transition-all duration-50",
+                      N ? "rotate-0" : "rotate-180"
+                    )
+                  }
                 )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: r,
-          type: "text",
-          name: o,
-          className: "hidden",
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ t(
-        q,
-        {
-          ref: u,
-          name: o,
-          wrapperRef: n,
-          wrapperInputRef: h,
-          options: a,
-          theme: v
-        }
-      )
-    ] });
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: a,
+              type: "text",
+              name: s,
+              className: "hidden",
+              "aria-hidden": "true",
+              required: x
+            }
+          ),
+          /* @__PURE__ */ r(
+            J,
+            {
+              ref: b,
+              name: s,
+              wrapperRef: l,
+              wrapperInputRef: w,
+              options: n,
+              isLoading: !!h
+            }
+          )
+        ]
+      }
+    );
   }
 );
 export {
-  _ as Wrapper
+  re as Wrapper
 };

package/dist/components/Dropdown/contexts/dropdown.context.js

@@ -1,10 +1,10 @@
 import { createContext as e } from "react";
 const t = e({
-  value: null,
   isOpen: !1,
   toggleOpen() {
     throw new Error("toggleOpen function must be overridden");
   },
+  value: void 0,
   setValue() {
     throw new Error("setValue function must be overridden");
   }

package/dist/components/Dropdown/contexts/dropdown.provider.js

@@ -1,18 +1,18 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as i, useCallback as c } from "react";
-import { useToggle as d } from "../../../hooks/useToggle.js";
-import { DropdownContext as f } from "./dropdown.context.js";
-const w = ({ children: t, onChange: o }) => {
-  const [e, s] = d(!1), [l, p] = i(null), m = c(
-    (r) => {
-      o == null || o(r), p(r);
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import { DropdownContext as d } from "./dropdown.context.js";
+import { useToggle as f } from "../../../hooks/useToggle.js";
+const w = ({ children: t, onChange: r, value: e, name: o }) => {
+  const [l, p] = f(!1), s = u(
+    (m) => {
+      r == null || r({ target: { value: m, name: o ?? "" } });
     },
-    [o]
+    [r, o]
   );
-  return /* @__PURE__ */ u(
-    f.Provider,
+  return /* @__PURE__ */ i(
+    d.Provider,
     {
-      value: { value: l, isOpen: e, setValue: m, toggleOpen: s },
+      value: { value: e, isOpen: l, setValue: s, toggleOpen: p },
       children: t
     }
   );

package/dist/components/Dropdown/hooks/useDropdown.js

@@ -1,20 +1,18 @@
 import { useRef as u, useEffect as f, useCallback as p } from "react";
-import { useDropdownContext as w } from "../contexts/dropdown.hook.js";
-import "react/jsx-runtime";
-import "../contexts/dropdown.context.js";
-const k = ({ ulRef: a }) => {
-  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = w();
+import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
+const E = ({ ulRef: i }) => {
+  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = m();
   f(() => {
     var r;
     const n = new AbortController(), s = (t) => {
       t.key === "Escape" && e(!1);
-    }, i = (t) => {
+    }, a = (t) => {
       var d;
       (d = l.current) != null && d.contains(t.target) || e(!1);
     };
     return document.addEventListener("keydown", s, {
       signal: n.signal
-    }), document.addEventListener("mousedown", i, {
+    }), document.addEventListener("mousedown", a, {
       signal: n.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -38,10 +36,10 @@ const k = ({ ulRef: a }) => {
     const n = new AbortController();
     return (s = o.current) == null || s.addEventListener(
       "keydown",
-      (i) => {
+      (a) => {
         var r;
-        if (i.key === "ArrowDown") {
-          const t = (r = a.current) == null ? void 0 : r.querySelector("li");
+        if (a.key === "ArrowDown") {
+          const t = (r = i.current) == null ? void 0 : r.querySelector("li");
           t && t.focus();
         }
       },
@@ -49,17 +47,17 @@ const k = ({ ulRef: a }) => {
     ), () => {
       n.abort();
     };
-  }, [o, a]);
-  const g = p(() => e(!0), [e]), m = p(() => {
+  }, [o, i]);
+  const g = p(() => e(!0), [e]), w = p(() => {
     c || e(!1);
   }, [c, e]);
   return {
     wrapperRef: l,
     wrapperInputRef: o,
     handleOpen: g,
-    handleOpenIfClosed: m
+    handleOpenIfClosed: w
   };
 };
 export {
-  k as useDropdown
+  E as useDropdown
 };

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,25 +1,23 @@
-import { useRef as k, useEffect as a } from "react";
+import { useRef as m, useEffect as a } from "react";
 import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-import "react/jsx-runtime";
-import "../contexts/dropdown.context.js";
-const h = ({
+const w = ({
   ulRef: n,
   wrapperRef: f,
   wrapperInputRef: u
 }) => {
-  const r = k(0), { isOpen: b } = d();
+  const r = m(0), { isOpen: b } = d();
   a(() => {
-    var s, m;
+    var s, g;
     const e = ((s = n.current) == null ? void 0 : s.querySelectorAll("li")) ?? [], c = new AbortController(), i = () => {
       r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
     }, o = () => {
       var t;
       r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, (t = u.current) == null || t.focus());
     };
-    return (m = n.current) == null || m.addEventListener(
+    return (g = n.current) == null || g.addEventListener(
       "keydown",
       (t) => {
-        var g;
+        var k;
         switch (t.preventDefault(), t.key) {
           case "ArrowDown": {
             i();
@@ -30,7 +28,7 @@ const h = ({
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? (g = u.current) == null || g.focus() : o();
+            r.current === 0 ? (k = u.current) == null || k.focus() : o();
             break;
           }
           case "Enter": {
@@ -62,5 +60,5 @@ const h = ({
   }, [b]);
 };
 export {
-  h as useNavigationUlList
+  w as useNavigationUlList
 };