@konstructio/ui 0.0.12-alpha.19 → 0.0.12-alpha.20

package/dist/components/Dropdown/components/List/List.js

@@ -1,25 +1,51 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as a, useRef as p, useImperativeHandle as u } from "react";
-import { cn as c } from "../../../../utils/index.js";
-import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
-import { ListItem as x } from "../ListItem/ListItem.js";
-import { listVariants as v } from "./List.variants.js";
-import { useDropdownContext as L } from "../../contexts/dropdown.hook.js";
-const j = a(
-  ({ options: i, theme: t, wrapperRef: m, wrapperInputRef: s, name: l }, n) => {
-    const r = p(null), { isOpen: f } = L();
-    return u(n, () => r.current, [r]), d({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c, useRef as d, useImperativeHandle as b } from "react";
+import { cn as v } from "../../../../utils/index.js";
+import { useNavigationUlList as x } from "../../hooks/useNavigationList.js";
+import { ListItem as l } from "../ListItem/ListItem.js";
+import { listVariants as L } from "./List.variants.js";
+import { useDropdownContext as g } from "../../contexts/dropdown.hook.js";
+const y = c(
+  ({ isLoading: s, options: r, theme: o, wrapperRef: a, wrapperInputRef: n, name: m }, f) => {
+    const e = d(null), { isOpen: p } = g();
+    b(f, () => e.current, [e]), x({ ulRef: e, wrapperRef: a, wrapperInputRef: n });
+    const u = r.length === 0;
+    return /* @__PURE__ */ i(
       "ul",
       {
-        ref: r,
-        title: l,
+        ref: e,
+        title: m,
         role: "listbox",
-        className: c(v({ theme: t }), f ? "flex" : "hidden"),
-        children: i.map((o) => /* @__PURE__ */ e(x, { theme: t, ...o }, o.value))
+        className: v(L({ theme: o }), p ? "flex" : "hidden"),
+        children: s ? /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !1,
+            value: "Loading...",
+            label: "Loading..."
+          }
+        ) : u ? /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !1,
+            value: "No options",
+            label: "No options"
+          }
+        ) : r.map((t) => /* @__PURE__ */ i(
+          l,
+          {
+            theme: o,
+            isClickable: !0,
+            ...t
+          },
+          t.value
+        ))
       }
     );
   }
 );
 export {
-  j as List
+  y as List
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,37 +1,41 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useRef as p, useCallback as s } from "react";
-import { cn as u } from "../../../../utils/index.js";
-import { listItemVariants as d } from "./ListItem.variants.js";
-import { Typography as h } from "../../../Typography/Typography.js";
-import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
-const g = ({ theme: a, ...e }) => {
-  const { setValue: n, toggleOpen: r } = x(), c = p(null), l = s(
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { useRef as u, useCallback as s } from "react";
+import { cn as d } from "../../../../utils/index.js";
+import { listItemVariants as h } from "./ListItem.variants.js";
+import { Typography as x } from "../../../Typography/Typography.js";
+import { useDropdownContext as y } from "../../contexts/dropdown.hook.js";
+const j = ({
+  isClickable: a,
+  theme: c,
+  ...e
+}) => {
+  const { setValue: n, toggleOpen: r } = y(), i = u(null), l = s(
     (t) => {
       n(t.value), r(!1);
     },
     [n, r]
-  ), i = s(
-    (t, m) => {
-      t.key === "Enter" && l(m);
+  ), m = s(
+    (t, f) => {
+      t.key === "Enter" && l(f);
     },
     [l]
   );
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "li",
     {
-      ref: c,
+      ref: i,
       role: "option",
-      className: u(d({ theme: a })),
+      className: d(h({ theme: c })),
       tabIndex: 0,
-      onClick: () => l(e),
-      onKeyDown: (t) => i(t, e),
+      onClick: () => a && l(e),
+      onKeyDown: (t) => m(t, e),
       children: [
         e.leftIcon ? /* @__PURE__ */ o("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
-        /* @__PURE__ */ o(h, { variant: "body2", className: "text-zinc-700", children: e.label })
+        /* @__PURE__ */ o(x, { variant: "body2", className: "text-zinc-700", children: e.label })
       ]
     }
   );
 };
 export {
-  g as ListItem
+  j as ListItem
 };

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

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

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.0.12-alpha.18",
+  "version": "0.0.12-alpha.19",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.0.12-alpha.19",
+  "version": "0.0.12-alpha.20",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",