anysystem-design 0.0.26 → 0.0.27

package/dist/components/AutoComplete/AutoCompleteBase.d.ts

@@ -14,6 +14,7 @@ export type AutoCompleteBaseProps<ListOption extends SelectOption> = {
     className?: string;
     placeholder?: string;
     onChange?: (value: string | number) => void;
+    onSearch?: (query: string) => void;
     valueField?: ValueField<ListOption>;
 };
 declare const _default: <ListOption extends SelectOption>(props: AutoCompleteBaseProps<ListOption> & {

package/dist/components/AutoComplete/AutoCompleteBase.js

@@ -1,68 +1,71 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import c, { Fragment as p } from "react";
-import { t as y } from "../../bundle-mjs-SHnj3fHy.js";
-import { H as b } from "../../index-BVp57yIc.js";
-import { c as x } from "../../index-CBEJ8A3p.js";
-import { getValue as u } from "../Selectbox/helper.js";
-import { N as w, G as C, H as E, z as N, K as L } from "../../combobox-DcjIgW1K.js";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import c, { Fragment as y } from "react";
+import { t as h } from "../../bundle-mjs-SHnj3fHy.js";
+import { H as x } from "../../index-BVp57yIc.js";
+import { c as w } from "../../index-CBEJ8A3p.js";
+import { getValue as n } from "../Selectbox/helper.js";
+import { N as C, G as E, H as N, z as L, K as H } from "../../combobox-DcjIgW1K.js";
 import { X as S } from "../../transition-6o20faRl.js";
-const H = (t, r) => r.type === "SEARCH" ? {
+const A = (t, r) => r.type === "SEARCH" ? {
   ...t,
   query: r.query,
   filterList: t.list.filter((l) => l.label.toLowerCase().includes(r.query.toLowerCase()))
 } : r.type === "SETVALUE" ? {
   ...t,
   value: r.value,
-  selected: t.list.find((l) => u(l, t.valueField) === r.value) || null
+  selected: t.list.find((l) => n(l, t.valueField) === r.value) || null
 } : r.type === "SETSELECT" ? {
   ...t,
   selected: r.selected,
-  value: u(r.selected, t.valueField) + ""
-} : t, A = ({
+  value: n(r.selected, t.valueField) + ""
+} : t, T = ({
   id: t,
   name: r,
   options: l,
   value: i = "",
   valueField: o = "value",
   onChange: d,
-  placeholder: h
-}, v) => {
-  const [m, s] = c.useReducer(H, {
+  onSearch: f,
+  placeholder: v
+}, g) => {
+  const [m, s] = c.useReducer(A, {
     list: l,
     query: "",
     filterList: l,
     value: i,
     valueField: o,
     selected: l.find((e) => {
-      const n = u(e, o);
-      return i ? n === i : !1;
+      const u = n(e, o);
+      return i ? u === i : !1;
     }) || null
   });
-  return c.useImperativeHandle(v, () => ({
+  return c.useImperativeHandle(g, () => ({
     search: (e) => s({ type: "SEARCH", query: e }),
     setValue: (e) => s({ type: "SETVALUE", value: e })
   })), /* @__PURE__ */ a(
-    w,
+    C,
     {
       value: m.selected,
       onChange: (e) => {
         s({
           type: "SETSELECT",
           selected: e
-        }), d && d(e ? u(e, o) : "");
+        }), d && d(e ? n(e, o) : "");
       },
-      children: /* @__PURE__ */ f("div", { className: "relative", children: [
+      children: /* @__PURE__ */ p("div", { className: "relative", children: [
         /* @__PURE__ */ a(
-          C,
+          E,
           {
-            placeholder: h,
-            onChange: (e) => s({ type: "SEARCH", query: e.target.value }),
+            placeholder: v,
+            onChange: (e) => {
+              s({ type: "SEARCH", query: e.target.value }), f && f(e.target.value);
+            },
             autoComplete: "off",
             displayValue: (e) => (e == null ? void 0 : e.label) || ""
           }
         ),
-        /* @__PURE__ */ a(E, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ a(
-          b,
+        /* @__PURE__ */ a(N, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ a(
+          x,
           {
             className: "h-5 w-5 text-gray-400",
             "aria-hidden": "true"
@@ -82,7 +85,7 @@ const H = (t, r) => r.type === "SEARCH" ? {
         /* @__PURE__ */ a(
           S,
           {
-            as: p,
+            as: y,
             enter: "transition duration-100 ease-out",
             enterFrom: "scale-95 transform opacity-0",
             enterTo: "scale-100 transform opacity-100",
@@ -90,23 +93,23 @@ const H = (t, r) => r.type === "SEARCH" ? {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => s({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ a(N, { className: "absolute z-50 mt-5 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: m.filterList.map((e) => /* @__PURE__ */ a(L, { as: p, value: e, children: ({ selected: n, focus: g }) => /* @__PURE__ */ f(
+            children: /* @__PURE__ */ a(L, { className: "absolute z-50 mt-5 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: m.filterList.map((e) => /* @__PURE__ */ a(H, { as: y, value: e, children: ({ selected: u, focus: b }) => /* @__PURE__ */ p(
               "li",
               {
-                className: y(
+                className: h(
                   "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
-                  (n || g) && "bg-primary-100 dark:bg-gray-700",
+                  (u || b) && "bg-primary-100 dark:bg-gray-700",
                   e.enable === !1 && "cursor-not-allowed opacity-50"
                 ),
                 children: [
                   /* @__PURE__ */ a("span", { className: "pl-5", children: e.label }),
-                  n ? /* @__PURE__ */ a(
+                  u ? /* @__PURE__ */ a(
                     "span",
                     {
-                      className: y(
+                      className: h(
                         "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
                       ),
-                      children: /* @__PURE__ */ a(x, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ a(w, { className: "h-5 w-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ]
@@ -117,7 +120,7 @@ const H = (t, r) => r.type === "SEARCH" ? {
       ] })
     }
   );
-}, U = c.forwardRef(A);
+}, B = c.forwardRef(T);
 export {
-  U as default
+  B as default
 };

package/dist/components/AutoComplete/AutoCompleteMultiple.d.ts

@@ -14,6 +14,7 @@ export type AutoCompleteMultipleProps<ListOption extends SelectOption> = {
     className?: string;
     placeholder?: string;
     onChange?: (value: string[] | number[]) => void;
+    onSearch?: (query: string) => void;
     valueField?: ValueField<ListOption>;
 };
 declare const _default: <ListOption extends SelectOption>(props: AutoCompleteMultipleProps<ListOption> & {

package/dist/components/AutoComplete/AutoCompleteMultiple.js

@@ -1,14 +1,14 @@
 import { jsx as l, jsxs as m } from "react/jsx-runtime";
-import p, { Fragment as h } from "react";
-import { _ as x } from "../../lodash-XYp3qmxI.js";
-import { t as v } from "../../bundle-mjs-SHnj3fHy.js";
-import { H as b } from "../../index-BVp57yIc.js";
-import { c as C } from "../../index-CBEJ8A3p.js";
-import { d as w } from "../../index-DUypCuzD.js";
+import p, { Fragment as v } from "react";
+import { _ as b } from "../../lodash-XYp3qmxI.js";
+import { t as E } from "../../bundle-mjs-SHnj3fHy.js";
+import { H as C } from "../../index-BVp57yIc.js";
+import { c as w } from "../../index-CBEJ8A3p.js";
+import { d as N } from "../../index-DUypCuzD.js";
 import { getValue as o } from "../Selectbox/helper.js";
-import { N, G as S, H as L, z as T, K as q } from "../../combobox-DcjIgW1K.js";
-import { X as A } from "../../transition-6o20faRl.js";
-const R = (r, t) => {
+import { N as L, G as S, H as T, z as q, K as A } from "../../combobox-DcjIgW1K.js";
+import { X as R } from "../../transition-6o20faRl.js";
+const k = (r, t) => {
   if (t.type === "SEARCH")
     return {
       ...r,
@@ -41,17 +41,18 @@ const R = (r, t) => {
     };
   }
   return r;
-}, k = ({
+}, H = ({
   id: r,
   name: t,
   value: a = [],
   options: u,
   valueField: n = "value",
   onChange: f,
-  placeholder: E
-}, g) => {
-  var y;
-  const [s, c] = p.useReducer(R, {
+  onSearch: y,
+  placeholder: g
+}, x) => {
+  var h;
+  const [s, c] = p.useReducer(k, {
     query: "",
     list: u,
     filterList: u,
@@ -59,10 +60,10 @@ const R = (r, t) => {
     valueField: n,
     selected: u.filter((e) => {
       const i = o(e, n);
-      return x.some(a, (d) => d + "" == i + "");
+      return b.some(a, (d) => d + "" == i + "");
     }) || []
   });
-  return p.useImperativeHandle(g, () => ({
+  return p.useImperativeHandle(x, () => ({
     search: (e) => {
       c({ type: "SEARCH", query: e });
     },
@@ -70,7 +71,7 @@ const R = (r, t) => {
       c({ type: "SETVALUE", value: e });
     }
   })), /* @__PURE__ */ l(
-    N,
+    L,
     {
       value: s.selected,
       onChange: (e) => {
@@ -83,22 +84,24 @@ const R = (r, t) => {
       },
       multiple: !0,
       children: /* @__PURE__ */ m("div", { className: "relative flex gap-1", children: [
-        s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "form-control flex gap-1", children: (y = s.selected) == null ? void 0 : y.map((e, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ m("div", { className: "flex rounded bg-indigo-50 p-1", children: [
+        s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "form-control flex gap-1", children: (h = s.selected) == null ? void 0 : h.map((e, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ m("div", { className: "flex rounded bg-indigo-50 p-1", children: [
           /* @__PURE__ */ l("span", { className: "whitespace-nowrap text-xs", children: e.label }),
           /* @__PURE__ */ l(
             "button",
             {
               onClick: () => c({ type: "REMOVESELECT", selected: e }),
-              children: /* @__PURE__ */ l(w, { fontSize: 12, className: "font-bold" })
+              children: /* @__PURE__ */ l(N, { fontSize: 12, className: "font-bold" })
             }
           )
         ] }) }, i)) }),
         /* @__PURE__ */ l(
           S,
           {
-            placeholder: E,
+            placeholder: g,
             value: s.query,
-            onChange: (e) => c({ type: "SEARCH", query: e.target.value }),
+            onChange: (e) => {
+              c({ type: "SEARCH", query: e.target.value }), y && y(e.target.value);
+            },
             onKeyDown: (e) => {
               e.key === "Backspace" && s.query === "" && s.selected.length > 0 && c({
                 type: "REMOVESELECT",
@@ -108,8 +111,8 @@ const R = (r, t) => {
             autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ l(L, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
-          b,
+        /* @__PURE__ */ l(T, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
+          C,
           {
             className: "h-5 w-5 text-gray-400",
             "aria-hidden": "true"
@@ -127,9 +130,9 @@ const R = (r, t) => {
           }
         ),
         /* @__PURE__ */ l(
-          A,
+          R,
           {
-            as: h,
+            as: v,
             enter: "transition duration-100 ease-out",
             enterFrom: "scale-95 transform opacity-0",
             enterTo: "scale-100 transform opacity-100",
@@ -137,10 +140,10 @@ const R = (r, t) => {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => c({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ l(T, { className: "absolute mt-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(q, { as: h, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
+            children: /* @__PURE__ */ l(q, { className: "absolute mt-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(A, { as: v, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
               "li",
               {
-                className: v(
+                className: E(
                   "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
                   (i || d) && "bg-primary-100 dark:bg-gray-700",
                   e.enable === !1 && "cursor-not-allowed opacity-50"
@@ -150,10 +153,10 @@ const R = (r, t) => {
                   i ? /* @__PURE__ */ l(
                     "span",
                     {
-                      className: v(
+                      className: E(
                         "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
                       ),
-                      children: /* @__PURE__ */ l(C, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ l(w, { className: "h-5 w-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ]
@@ -164,7 +167,7 @@ const R = (r, t) => {
       ] })
     }
   );
-}, D = p.forwardRef(k);
+}, G = p.forwardRef(H);
 export {
-  D as default
+  G as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anysystem-design",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",