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

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

@@ -1,30 +1,30 @@
 import { jsxs as x, jsx as a } from "react/jsx-runtime";
-import { forwardRef as S, useId as X, useRef as T, useImperativeHandle as Y, useMemo as Z, useEffect as z } from "react";
-import { Loading as B } from "../../Loading/Loading.js";
-import { Typography as ee } from "../../Typography/Typography.js";
+import { forwardRef as X, useId as Y, useRef as T, useImperativeHandle as Z, useMemo as B, useEffect as z } 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";
-import { labelVariants as te, inputVariants as ae, dropdownVariants as re } from "../Dropdown.variants.js";
-import { useDropdown as ne } from "../hooks/useDropdown.js";
-import { List as oe } from "./List/List.js";
+import { labelVariants as ae, inputVariants as re, dropdownVariants as ne } from "../Dropdown.variants.js";
+import { useDropdown as oe } from "../hooks/useDropdown.js";
+import { List as le } from "./List/List.js";
 import { c as V } from "../../../createLucideIcon-DGhJ8Z4k.js";
-import { useDropdownContext as le } from "../contexts/dropdown.hook.js";
+import { useDropdownContext as se } from "../contexts/dropdown.hook.js";
 /**
 * @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const se = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], ce = V("chevron-up", se);
+const ce = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], ie = V("chevron-up", ce);
 /**
 * @license lucide-react v0.548.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const ie = [
+const ue = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], ue = V("search", ie), Ce = S(
+], fe = V("search", ue), ge = X(
   ({
     additionalOptions: _,
     className: $,
@@ -44,19 +44,20 @@ const ie = [
     options: o,
     placeholder: N,
     searchable: k = !1,
+    onSearchChange: U,
     showSearchIcon: C,
-    theme: U,
-    wrapperClassName: W,
+    theme: W,
+    wrapperClassName: q,
     onBlur: I,
     ...b
-  }, q) => {
-    const E = X(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = ne({
+  }, G) => {
+    const E = Y(), t = T(null), O = T(null), { wrapperRef: u, wrapperInputRef: R, handleOpen: g } = oe({
       ulRef: O,
       inputRef: t,
       disabled: r
-    }), { isOpen: p, searchTerm: G, value: l, toggleOpen: J, setValue: y, setSearchTerm: L } = le(), f = i ? `${E}-${i}` : E;
-    Y(q, () => t.current, [t]);
-    const n = Z(() => o.find(({ value: e }) => e === l), [o, l]);
+    }), { isOpen: p, searchTerm: J, value: l, toggleOpen: K, setValue: y, setSearchTerm: L } = se(), f = i ? `${E}-${i}` : E;
+    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(() => {
@@ -72,12 +73,12 @@ const ie = [
       }), () => {
         e.abort();
       };
-    }, [J, u, L, I, l]);
-    const K = (e) => {
+    }, [K, u, L, I, l]);
+    const Q = (e) => {
       const s = e.target.value;
-      L(s);
+      U?.(s), L(s);
       const d = o.find(
-        (Q) => Q.value.toLocaleLowerCase() === s.toLocaleLowerCase()
+        (S) => S.value.toLocaleLowerCase() === s.toLocaleLowerCase()
       );
       d && y(d.value);
     };
@@ -85,14 +86,14 @@ const ie = [
       "div",
       {
         ref: u,
-        className: c("flex flex-col w-full relative", W),
-        "data-theme": U,
+        className: c("flex flex-col w-full relative", q),
+        "data-theme": W,
         children: [
           w ? /* @__PURE__ */ x(
             "label",
             {
               id: f,
-              className: c(te({ className: M })),
+              className: c(ae({ className: M })),
               htmlFor: f,
               onClick: () => !r && g(),
               children: [
@@ -107,7 +108,7 @@ const ie = [
               ref: R,
               id: f,
               className: c(
-                re({ className: $, hasError: !!m, disabled: r })
+                ne({ className: $, hasError: !!m, disabled: r })
               ),
               role: "combobox",
               onClick: () => !r && g(),
@@ -117,17 +118,17 @@ const ie = [
               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(ue, { 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(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(
                     "input",
                     {
                       ref: t,
                       type: "text",
-                      value: p ? G : n?.label || "",
+                      value: p ? J : n?.label || "",
                       name: i,
-                      onChange: K,
+                      onChange: Q,
                       placeholder: N,
-                      className: c(ae({ className: F }), {
+                      className: c(re({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!m
                       }),
                       onClick: (e) => {
@@ -142,7 +143,7 @@ const ie = [
                       ...b
                     }
                   ) : /* @__PURE__ */ a(
-                    ee,
+                    te,
                     {
                       variant: "body2",
                       className: c(
@@ -158,8 +159,8 @@ const ie = [
                     }
                   )
                 ] }),
-                j ? /* @__PURE__ */ a(B, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
-                  ce,
+                j ? /* @__PURE__ */ a(ee, { className: "w-4 h-4 text-zinc-500 select-none" }) : !C && /* @__PURE__ */ a(
+                  ie,
                   {
                     "data-state": p ? "open" : "closed",
                     className: c(
@@ -189,7 +190,7 @@ const ie = [
             }
           ),
           p && /* @__PURE__ */ a(
-            oe,
+            le,
             {
               ref: O,
               additionalOptions: _,
@@ -211,5 +212,5 @@ const ie = [
   }
 );
 export {
-  Ce as Wrapper
+  ge as Wrapper
 };

package/dist/index.d.ts

@@ -239,6 +239,7 @@ declare type DropdownProps = VariantProps<typeof dropdownVariants> & Omit<InputH
     wrapperClassName?: string;
     onBlur?: VoidFunction;
     onChange?: OnChangeFn;
+    onSearchChange?: (searchTerm: string) => void;
 };
 
 declare const dropdownVariants: (props?: ({

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