@konstructio/ui 0.1.2-alpha.20 → 0.1.2-alpha.21

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

@@ -1,5 +1,5 @@
-import { jsxs as x, jsx as a } from "react/jsx-runtime";
-import { forwardRef as X, useId as Y, useRef as T, useImperativeHandle as Z, useMemo as B, useEffect as z } from "react";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { forwardRef as X, useId as Y, useRef as T, useImperativeHandle as Z, useMemo as B, useEffect as L } from "react";
 import { Loading as ee } from "../../Loading/Loading.js";
 import { Typography as te } from "../../Typography/Typography.js";
 import { cn as c } from "../../../utils/index.js";
@@ -28,98 +28,98 @@ const ue = [
   ({
     additionalOptions: _,
     className: $,
-    defaultValue: h,
+    defaultValue: v,
     disabled: r = !1,
     error: m,
     iconClassName: D,
     inputClassName: F,
-    isLoading: j,
-    isRequired: v,
-    label: w,
+    isLoading: z,
+    isRequired: w,
+    label: N,
     labelClassName: M,
     listClassName: A,
     listItemClassName: H,
     listItemSecondRowClassName: P,
     name: i,
     options: o,
-    placeholder: N,
-    searchable: k = !1,
+    placeholder: k,
+    searchable: C = !1,
     onSearchChange: U,
-    showSearchIcon: C,
+    showSearchIcon: g,
     theme: W,
     wrapperClassName: q,
-    onBlur: I,
-    ...b
+    onBlur: j,
+    ...I
   }, G) => {
-    const E = Y(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = oe({
-      ulRef: O,
+    const b = Y(), t = T(null), E = T(null), { wrapperRef: u, wrapperInputRef: O, handleOpen: y } = oe({
+      ulRef: E,
       inputRef: t,
       disabled: r
-    }), { isOpen: p, searchTerm: J, value: l, toggleOpen: K, setValue: y, setSearchTerm: L } = se(), f = i ? `${E}-${i}` : E;
+    }), { isOpen: p, searchTerm: J, value: l, toggleOpen: K, setValue: x, setSearchTerm: R } = se(), f = i ? `${b}-${i}` : b;
     Z(G, () => t.current, [t]);
     const n = B(() => o.find(({ value: e }) => e === l), [o, l]);
-    z(() => {
-      t.current && (t.current.value = l ? n?.value : "");
-    }, [n, l]), z(() => {
-      if (h && !l) {
-        const e = o && o.find((s) => s.value === h);
-        e && y(e.value);
+    L(() => {
+      t.current && (t.current.value = l && n?.value || "");
+    }, [n, l]), L(() => {
+      if (v && !l) {
+        const e = o && o.find((s) => s.value === v);
+        e && x(e.value);
       }
-    }, [h, o, y, l]), z(() => {
+    }, [v, o, x, l]), L(() => {
       const e = new AbortController();
       return u.current?.addEventListener("focusout", (s) => {
         const d = s.relatedTarget;
-        (!d || !u.current?.contains(d)) && (L(""), t.current?.value || I?.());
+        (!d || !u.current?.contains(d)) && (t.current?.value || j?.());
       }), () => {
         e.abort();
       };
-    }, [K, u, L, I, l]);
+    }, [K, u, R, j, l]);
     const Q = (e) => {
       const s = e.target.value;
-      U?.(s), L(s);
+      U?.(s), x(""), R(s || "");
       const d = o.find(
         (S) => S.value.toLocaleLowerCase() === s.toLocaleLowerCase()
       );
-      d && y(d.value);
+      d && x(d.value);
     };
-    return /* @__PURE__ */ x(
+    return /* @__PURE__ */ h(
       "div",
       {
         ref: u,
         className: c("flex flex-col w-full relative", q),
         "data-theme": W,
         children: [
-          w ? /* @__PURE__ */ x(
+          N ? /* @__PURE__ */ h(
             "label",
             {
               id: f,
               className: c(ae({ className: M })),
               htmlFor: f,
-              onClick: () => !r && g(),
+              onClick: () => !r && y(),
               children: [
-                w,
-                v && /* @__PURE__ */ a("span", { className: "text-red-600 ml-1", children: "*" })
+                N,
+                w && /* @__PURE__ */ a("span", { className: "text-red-600 ml-1", children: "*" })
               ]
             }
           ) : null,
-          /* @__PURE__ */ x(
+          /* @__PURE__ */ h(
             "div",
             {
-              ref: R,
+              ref: O,
               id: f,
               className: c(
                 ne({ className: $, hasError: !!m, disabled: r })
               ),
               role: "combobox",
-              onClick: () => !r && g(),
+              onClick: () => !r && y(),
               "aria-expanded": p,
               tabIndex: 0,
               "aria-labelledby": f,
               children: [
-                /* @__PURE__ */ x("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  n?.leftIcon && !C && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: n.leftIcon }),
-                  C && /* @__PURE__ */ a(fe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
-                  k ? /* @__PURE__ */ a(
+                /* @__PURE__ */ h("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  n?.leftIcon && !g && /* @__PURE__ */ a("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: n.leftIcon }),
+                  g && /* @__PURE__ */ a(fe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                  C ? /* @__PURE__ */ a(
                     "input",
                     {
                       ref: t,
@@ -127,20 +127,20 @@ const ue = [
                       value: p ? J : n?.label || "",
                       name: i,
                       onChange: Q,
-                      placeholder: N,
+                      placeholder: k,
                       className: c(re({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!m
                       }),
                       onClick: (e) => {
-                        e.stopPropagation(), r || g();
+                        e.stopPropagation(), r || y();
                       },
-                      "aria-label": w || N,
+                      "aria-label": N || k,
                       "aria-labelledby": f,
-                      required: v,
+                      required: w,
                       autoComplete: "off",
                       autoCapitalize: "words",
                       disabled: r,
-                      ...b
+                      ...I
                     }
                   ) : /* @__PURE__ */ a(
                     te,
@@ -155,11 +155,11 @@ const ue = [
                           "text-slate-400/50 dark:text-slate-50/50": r
                         }
                       ),
-                      children: n?.label || N
+                      children: n?.label || k
                     }
                   )
                 ] }),
-                j ? /* @__PURE__ */ a(ee, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
+                z ? /* @__PURE__ */ a(ee, { className: "w-4 h-4 text-zinc-500 select-none" }) : !g && /* @__PURE__ */ a(
                   ie,
                   {
                     "data-state": p ? "open" : "closed",
@@ -176,7 +176,7 @@ const ue = [
               ]
             }
           ),
-          !k && /* @__PURE__ */ a(
+          !C && /* @__PURE__ */ a(
             "input",
             {
               ref: t,
@@ -184,25 +184,25 @@ const ue = [
               name: i,
               className: "hidden",
               "aria-hidden": "true",
-              required: v,
+              required: w,
               inert: !0,
-              ...b
+              ...I
             }
           ),
           p && /* @__PURE__ */ a(
             le,
             {
-              ref: O,
+              ref: E,
               additionalOptions: _,
               className: A,
               itemClassName: H,
               name: i,
               wrapperRef: u,
-              wrapperInputRef: R,
+              wrapperInputRef: O,
               inputRef: t,
               options: o,
-              isLoading: !!j,
-              searchable: k,
+              isLoading: !!z,
+              searchable: C,
               listItemSecondRowClassName: P
             }
           )

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.1.2-alpha.19",
+  "version": "0.1.2-alpha.20",
   "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.1.2-alpha.20",
+  "version": "0.1.2-alpha.21",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",