@konstructio/ui 0.0.12-alpha.15 → 0.0.12-alpha.16

package/dist/components/Dropdown/Dropdown.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { DropdownProvider as t } from "./contexts/dropdown.provider.js";
-import { Wrapper as d } from "./components/Wrapper.js";
-const c = i(({ onChange: o, value: p, ...m }, f) => /* @__PURE__ */ r(t, { onChange: o, value: p, children: /* @__PURE__ */ r(d, { ref: f, ...m }) }));
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { DropdownProvider as d } from "./contexts/dropdown.provider.js";
+import { Wrapper as e } from "./components/Wrapper.js";
+const x = t(({ onChange: p, value: m, name: r, ...f }, i) => /* @__PURE__ */ o(d, { onChange: p, value: m, name: r, children: /* @__PURE__ */ o(e, { name: r, ref: i, ...f }) }));
 export {
-  c as Dropdown
+  x as Dropdown
 };

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

@@ -1,13 +1,13 @@
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import { useRef as p, useCallback as s } from "react";
-import { cn as d } from "../../../../utils/index.js";
-import { listItemVariants as u } from "./ListItem.variants.js";
+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(
     (t) => {
-      n(t), r(!1);
+      n(t.value), r(!1);
     },
     [n, r]
   ), i = s(
@@ -21,7 +21,7 @@ const g = ({ theme: a, ...e }) => {
     {
       ref: c,
       role: "option",
-      className: d(u({ theme: a })),
+      className: u(d({ theme: a })),
       tabIndex: 0,
       onClick: () => l(e),
       onKeyDown: (t) => i(t, e),

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

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

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

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

package/dist/index.d.ts

@@ -142,15 +142,16 @@ export declare const Divider: FunctionComponent<HTMLAttributes<HTMLDivElement>>;
 export declare const Dropdown: FC<DropdownProps>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-    onChange?: ({ target: { value } }: {
+    onChange?: ({ target: { value, name }, }: {
         target: {
-            value: Option_3;
+            value: string;
+            name: string;
         };
     }) => void;
     label?: string;
     options: Option_3[];
     labelClassName?: string;
-    value?: Option_3;
+    value?: string;
     isLoading?: boolean;
 }
 

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.14",
+  "version": "0.0.12-alpha.15",
   "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.15",
+  "version": "0.0.12-alpha.16",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",