@konstructio/ui 0.1.2-alpha.34 → 0.1.2-alpha.35

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

@@ -1,24 +1,24 @@
 import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { forwardRef as Y, useId as Z, useRef as C, useMemo as ee, useImperativeHandle as te, useEffect as ae } from "react";
-import { Loading as re } from "../../Loading/Loading.js";
-import { Typography as ne } from "../../Typography/Typography.js";
-import { cn as s } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as se, dropdownVariants as le } from "../Dropdown.variants.js";
-import { useDropdown as ie } from "../hooks/useDropdown.js";
-import { List as ce } from "./List/List.js";
-import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
-import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
+import { forwardRef as Z, useId as ee, useRef as C, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
+import { L as ne } from "../../../loader-H82RiE-I.js";
+import { Typography as se } from "../../Typography/Typography.js";
+import { cn as o } from "../../../utils/index.js";
+import { labelVariants as oe, inputVariants as le, dropdownVariants as ie } from "../Dropdown.variants.js";
+import { useDropdown as ce } from "../hooks/useDropdown.js";
+import { List as pe } from "./List/List.js";
+import { c as ue } from "../../../createLucideIcon-D4r5Phnh.js";
+import { C as me } from "../../../chevron-up-DrQr2Fwd.js";
 import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
-const me = [
+const de = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], de = pe("search", me), je = Y(
+], xe = ue("search", de), be = Z(
   ({
     additionalOptions: V,
     className: O,
     defaultValue: x,
     disabled: a = !1,
-    error: f,
+    error: m,
     iconClassName: R,
     inputClassName: F,
     isLoading: k,
@@ -28,9 +28,9 @@ const me = [
     listClassName: D,
     listItemClassName: E,
     listItemSecondRowClassName: M,
-    name: m,
+    name: f,
     placeholder: N,
-    searchable: g = !1,
+    searchable: y = !1,
     showSearchIcon: w,
     theme: W,
     wrapperClassName: _,
@@ -38,52 +38,53 @@ const me = [
     onFetchMoreOptions: H,
     onBlur: P,
     onSearchChange: U,
-    ...y
-  }, q) => {
-    const I = Z(), l = C(null), L = C(null), A = C(0), {
+    noOptionsText: q,
+    ...g
+  }, A) => {
+    const I = ee(), l = C(null), L = C(null), B = C(0), {
       isOpen: i,
-      searchTerm: B,
-      value: o,
+      searchTerm: G,
+      value: s,
       options: n,
       setValue: c,
-      setSearchTerm: G,
-      setCanFilter: J,
-      toggleOpen: K
-    } = fe(), e = ee(() => n.find(({ value: r }) => r === o), [n, o]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: z } = ie({
+      setSearchTerm: J,
+      setCanFilter: K,
+      toggleOpen: Q
+    } = fe(), e = te(() => n.find(({ value: r }) => r === s), [n, s]), { wrapperRef: S, wrapperInputRef: j, handleOpen: b } = ce({
       ulRef: L,
       inputRef: l,
       disabled: a,
       internalValue: e,
       onBlur: P
-    }), p = m ? `${I}-${m}` : I;
-    te(q, () => l.current, [l]), ae(() => {
-      if (x && !o) {
+    }), p = f ? `${I}-${f}` : I;
+    ae(A, () => l.current, [l]), re(() => {
+      if (x && !s) {
         const r = n && n.find((u) => u.value === x);
         r && c(r.value);
       }
-    }, [x, n, c, o]);
-    const S = (r) => {
+    }, [x, n, c, s]);
+    const X = (r) => {
       const u = r.target.value;
-      J(!0), c(""), G(u ?? ""), U?.(u);
-      const b = n.find(
-        (X) => X.value.toLocaleLowerCase() === u.toLocaleLowerCase()
+      K(!0), c(""), J(u ?? ""), U?.(u);
+      const z = n.find(
+        (Y) => Y.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
-      c(b ? b.value : e?.value ?? "");
+      c(z ? z.value : e?.value ?? "");
     };
     return /* @__PURE__ */ d(
       "div",
       {
-        ref: Q,
-        className: s("flex flex-col w-full relative", _),
+        ref: S,
+        className: o("flex flex-col w-full relative", _),
         "data-theme": W,
         children: [
           v ? /* @__PURE__ */ d(
             "label",
             {
               id: p,
-              className: s(oe({ className: T })),
+              className: o(oe({ className: T })),
               htmlFor: p,
-              onClick: () => !a && z(),
+              onClick: () => !a && b(),
               children: [
                 v,
                 h && /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" })
@@ -95,30 +96,30 @@ const me = [
             {
               ref: j,
               id: p,
-              className: s(
-                le({ className: O, hasError: !!f, disabled: a })
+              className: o(
+                ie({ className: O, hasError: !!m, disabled: a })
               ),
               role: "combobox",
-              onClick: () => !a && K(!i),
+              onClick: () => !a && Q(!i),
               "aria-expanded": i,
-              tabIndex: A.current,
+              tabIndex: B.current,
               "aria-labelledby": p,
               children: [
                 /* @__PURE__ */ d("div", { className: "flex gap-2.5 items-center flex-1", children: [
                   e?.leftIcon && !w && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
-                  w && /* @__PURE__ */ t(de, { 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" }),
-                  g ? /* @__PURE__ */ t(
+                  w && /* @__PURE__ */ t(xe, { 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" }),
+                  y ? /* @__PURE__ */ t(
                     "input",
                     {
                       type: "text",
-                      value: i ? B : e?.label ?? o ?? "",
-                      onChange: S,
+                      value: i ? G : e?.label ?? s ?? "",
+                      onChange: X,
                       placeholder: N,
-                      className: s(se({ className: F }), {
-                        "text-red-700 placeholder:text-red-700": !!f
+                      className: o(le({ className: F }), {
+                        "text-red-700 placeholder:text-red-700": !!m
                       }),
                       onClick: (r) => {
-                        r.stopPropagation(), a || z();
+                        r.stopPropagation(), a || b();
                       },
                       "aria-label": v || N,
                       "aria-labelledby": p,
@@ -127,16 +128,16 @@ const me = [
                       autoCapitalize: "words",
                       disabled: a,
                       tabIndex: -1,
-                      ...y
+                      ...g
                     }
                   ) : /* @__PURE__ */ t(
-                    ne,
+                    se,
                     {
                       variant: "body2",
-                      className: s(
+                      className: o(
                         "flex-1 text-zinc-400 text-sm dark:text-slate-400",
                         {
-                          "text-red-700": !!f,
+                          "text-red-700": !!m,
                           "select-none": !e,
                           "text-slate-800 dark:text-slate-50": e,
                           "text-slate-400/50 dark:text-slate-50/50": a
@@ -146,15 +147,15 @@ const me = [
                     }
                   )
                 ] }),
-                k ? /* @__PURE__ */ t(re, { className: "w-4 h-4 text-zinc-500 select-none" }) : !w && /* @__PURE__ */ t(
-                  ue,
+                k ? /* @__PURE__ */ t(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !w && /* @__PURE__ */ t(
+                  me,
                   {
                     "data-state": i ? "open" : "closed",
-                    className: s(
+                    className: o(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
                       R,
                       {
-                        "text-red-700": !!f,
+                        "text-red-700": !!m,
                         "text-slate-400/50 dark:group-focus-within:text-zinc-500": a
                       }
                     )
@@ -168,31 +169,32 @@ const me = [
             {
               ref: l,
               type: "text",
-              name: m,
+              name: f,
               className: "hidden",
               "aria-hidden": "true",
               required: h,
               inert: !0,
-              defaultValue: e?.value ?? o ?? void 0,
-              ...y
+              defaultValue: e?.value ?? s ?? void 0,
+              ...g
             }
           ),
           i && /* @__PURE__ */ t(
-            ce,
+            pe,
             {
               ref: L,
               additionalOptions: V,
               className: D,
               itemClassName: E,
-              name: m,
+              name: f,
               wrapperInputRef: j,
               inputRef: l,
               options: n,
               isLoading: !!k,
-              searchable: g,
+              searchable: y,
               listItemSecondRowClassName: M,
               isInfiniteScrollEnabled: $,
-              onFetchMoreOptions: H
+              onFetchMoreOptions: H,
+              noOptionsText: q
             }
           )
         ]
@@ -201,5 +203,5 @@ const me = [
   }
 );
 export {
-  je as Wrapper
+  be as Wrapper
 };