npm - @trsys-tech/matrix-library - Versions diffs - 0.5.2-alpha.2 → 0.5.2-beta.1 - Mend

@trsys-tech/matrix-library 0.5.2-alpha.2 → 0.5.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/multi-select/MultiSelect.d.ts +9 -0
package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
package/dist/multiselect.es.js +112 -99
package/dist/multiselect.es.js.map +1 -1
package/package.json +1 -1

package/dist/components/multi-select/MultiSelect.d.ts CHANGED Viewed

@@ -118,6 +118,15 @@ interface MultiSelectProps<T extends string | number> extends Omit<React.ButtonH
      * Text to display on the select all button when the multi-select component is open.
      */
     selectAllText?: string;
+    /**
+     * Text to display in the search input.
+     */
+    searchText?: string;
+    /**
+     * If true, a new option will be added when the user submits a search query if it doesn't already exist.
+     * Optional, defaults to false.
+     */
+    addOptionOnSearchNotFound?: boolean;
     /**
      * Text to display on the clear button when the multi-select component is open.
      */

package/dist/components/multi-select/MultiSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;OAGG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;~~AAgOD~~,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}
1	+ {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAU1D;;;GAGG;AACH,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAavB,CAAC;AAEH;;GAEG;AACH,UAAU,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAClD,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,EACnF,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C;;;OAGG;IACH,OAAO,EAAE;QACP,0CAA0C;QAC1C,KAAK,EAAE,MAAM,CAAC;QACd,mDAAmD;QACnD,KAAK,EAAE,CAAC,CAAC;QACT,+DAA+D;QAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACpD,EAAE,CAAC;IAEJ;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IAEZ,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuPD,QAAA,MAAM,oBAAoB,EAAoC,CAAC,CAAC,CAAyB,SAAf,MAAM,GAAG,MAAM,EACvF,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,oBAAoB,IAAI,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

package/dist/multiselect.es.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as r, Fragment as w } from "react/jsx-runtime";
-import * as s from "react";
-import { tv as H } from "tailwind-variants";
-import { XMark as k, CircleXmark as J, ChevronDown as Q, Check as j } from "@trsys-tech/matrix-icons";
-import { cn as d } from "./utils.es.js";
-import { Badge as P } from "./badge.es.js";
-import { Button as U } from "./button.es.js";
-import { Separator as E } from "./separator.es.js";
-import { Popover as Y, PopoverTrigger as Z, PopoverContent as ee } from "./popover.es.js";
-import { Command as re, CommandInput as te, CommandList as ae, CommandEmpty as oe, CommandGroup as I, CommandItem as g, CommandSeparator as se } from "./command.es.js";
-const M = H({
+import { jsxs as s, jsx as r, Fragment as w } from "react/jsx-runtime";
+import * as o from "react";
+import { tv as ee } from "tailwind-variants";
+import { XMark as P, CircleXmark as re, ChevronDown as te, Check as E } from "@trsys-tech/matrix-icons";
+import { cn as u } from "./utils.es.js";
+import { Badge as M } from "./badge.es.js";
+import { Button as ae } from "./button.es.js";
+import { Separator as I } from "./separator.es.js";
+import { Popover as se, PopoverTrigger as oe, PopoverContent as le } from "./popover.es.js";
+import { Command as ne, CommandInput as ce, CommandList as ie, CommandEmpty as de, CommandGroup as O, CommandItem as g, CommandSeparator as ue } from "./command.es.js";
+const V = ee({
   base: "flex gap-1 items-center py-0.5 px-2 rounded-xl",
   variants: {
     variant: {
@@ -21,165 +21,178 @@ const M = H({
   defaultVariants: {
     variant: "default"
   }
-}), le = ({
-  options: n,
+}), me = ({
+  options: b,
   onValueChange: c,
-  value: b,
+  value: y,
   variant: x,
   disabled: N,
-  defaultValue: O = [],
-  placeholder: D = "Select options",
+  defaultValue: D = [],
+  placeholder: T = "Select options",
   maxCount: m = 3,
-  modalPopover: R = !1,
+  modalPopover: A = !1,
   // asChild = false,
-  className: V,
+  className: R,
   moreText: B = "more",
   clearText: K = "Clear",
   closeText: L = "Close",
-  selectAllText: _ = "Select All",
-  noResultsText: A = "No results found.",
+  selectAllText: z = "Select All",
+  noResultsText: F = "No results found.",
+  searchText: W = "Search...",
+  addOptionOnSearchNotFound: X = !1,
   loading: p,
-  loadingText: u = "Loading...",
-  ...F
-}, T) => {
-  const [t, l] = s.useState(O ?? b), [W, i] = s.useState(!1), f = s.useRef(null), [X, S] = s.useState(!1);
-  s.useEffect(() => {
-    l(b ?? []);
-  }, [b]);
-  const $ = (e) => {
-    if (e.key === "Enter")
+  loadingText: f = "Loading...",
+  ...$
+}, G) => {
+  const [t, n] = o.useState(D ?? y), [_, i] = o.useState(!1), h = o.useRef(null), [q, S] = o.useState(""), [H, C] = o.useState(!1), [d, k] = o.useState(
+    new Map(b.map((e) => [e.value, e]))
+  );
+  o.useEffect(() => {
+    k(new Map(b.map((e) => [e.value, e])));
+  }, [b]), o.useEffect(() => {
+    n(y ?? []);
+  }, [y]);
+  const J = (e) => {
+    if (e.key === "Enter" && X) {
+      if (i(!0), e.preventDefault(), e.stopPropagation(), !e.currentTarget.value) return;
+      const a = { value: e.currentTarget.value, label: e.currentTarget.value };
+      if (k((l) => new Map(l).set(a.value, a)), d.get(a.value) === void 0) {
+        const l = [...t, a.value];
+        n(l), c(l), S("");
+      }
+    } else if (e.key === "Enter")
       i(!0);
     else if (e.key === "Backspace" && !e.currentTarget.value) {
-      const o = [...t];
-      o.pop(), l(o), c(o);
+      const a = [...t];
+      a.pop(), n(a), c(a);
     }
-  }, C = (e) => {
-    const o = t.includes(e) ? t.filter((h) => h !== e) : [...t, e];
-    l(o), c(o);
-  }, y = () => {
-    l([]), c([]);
-  }, G = () => {
+  }, j = (e) => {
+    const a = t.includes(e) ? t.filter((l) => l !== e) : [...t, e];
+    n(a), c(a);
+  }, v = () => {
+    n([]), c([]);
+  }, Q = () => {
     i((e) => !e);
-  }, q = () => {
+  }, U = () => {
     const e = t.slice(0, m);
-    l(e), c(e);
-  }, z = () => {
-    if (t.length === n.length)
-      y();
+    n(e), c(e);
+  }, Y = () => {
+    if (t.length === d.size)
+      v();
     else {
-      const e = n.map((o) => o.value);
-      l(e), c(e);
+      const e = Array.from(d.keys());
+      n(e), c(e);
     }
   };
-  return s.useLayoutEffect(() => {
-    f.current && (f?.current?.firstChild?.offsetTop < f?.current?.lastChild?.offsetTop ? S(!0) : S(!1));
-  }, [t]), /* @__PURE__ */ a(Y, { open: W, onOpenChange: i, modal: R, children: [
-    /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ r(
-      U,
+  return o.useLayoutEffect(() => {
+    h.current && (h?.current?.firstChild?.offsetTop < h?.current?.lastChild?.offsetTop ? C(!0) : C(!1));
+  }, [t]), /* @__PURE__ */ s(se, { open: _, onOpenChange: i, modal: A, children: [
+    /* @__PURE__ */ r(oe, { asChild: !0, children: /* @__PURE__ */ r(
+      ae,
       {
-        ref: T,
+        ref: G,
         variant: "text",
         loading: p,
         disabled: N,
-        ...F,
-        onClick: G,
-        className: d(
+        ...$,
+        onClick: Q,
+        className: u(
           "group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          X && "h-auto",
-          V
+          H && "h-auto",
+          R
         ),
         "data-placeholder": t.length ? void 0 : "",
         endIcon: /* @__PURE__ */ r(
-          Q,
+          te,
           {
             role: "button",
             "aria-label": "Expand dropdown",
             className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform"
           }
         ),
-        children: /* @__PURE__ */ r(w, { children: t.length > 0 ? /* @__PURE__ */ a("div", { className: "flex justify-between items-center w-full", children: [
-          /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", ref: f, children: [
+        children: /* @__PURE__ */ r(w, { children: t.length > 0 ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-2", ref: h, children: [
             t.slice(0, m).map((e) => {
-              const o = n.find((v) => v.value === e), h = o?.icon;
-              return /* @__PURE__ */ a(P, { className: d(M({ variant: x }), { "text-gray-400 bg-gray-200": N || p }), children: [
+              const a = d.get(e), l = a?.icon;
+              return /* @__PURE__ */ s(M, { className: u(V({ variant: x }), { "text-gray-400 bg-gray-200": N || p }), children: [
                 /* @__PURE__ */ r(
-                  k,
+                  P,
                   {
                     className: "h-4 w-4 cursor-pointer",
-                    onClick: (v) => {
-                      v.stopPropagation(), C(e);
+                    onClick: (Z) => {
+                      Z.stopPropagation(), j(e);
                     }
                   }
                 ),
-                h && /* @__PURE__ */ r(h, { className: "h-4 w-4 mr-2" }),
-                o?.label
+                l && /* @__PURE__ */ r(l, { className: "h-4 w-4 mr-2" }),
+                a?.label
               ] }, e);
             }),
-            t.length > m && /* @__PURE__ */ a(P, { className: d(M({ variant: x })), children: [
+            t.length > m && /* @__PURE__ */ s(M, { className: u(V({ variant: x })), children: [
               `+ ${t.length - m} ${B}`,
               /* @__PURE__ */ r(
-                J,
+                re,
                 {
                   role: "button",
                   className: "ml-2 h-4.5 w-4.5 cursor-pointer",
                   onClick: (e) => {
-                    e.stopPropagation(), q();
+                    e.stopPropagation(), U();
                   }
                 }
               )
             ] }),
-            p && u ? u : null
+            p && f ? f : null
           ] }),
-          /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-1", children: [
             /* @__PURE__ */ r(
-              k,
+              P,
               {
                 role: "button",
                 className: "h-5 w-5 text-muted-foreground cursor-pointer",
                 onClick: (e) => {
-                  e.stopPropagation(), y();
+                  e.stopPropagation(), v();
                 },
                 "aria-label": "Clear"
               }
             ),
-            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-5 h-full" })
+            /* @__PURE__ */ r(I, { orientation: "vertical", className: "flex min-h-5 h-full" })
           ] })
-        ] }) : /* @__PURE__ */ r(w, { children: p && u ? u : D }) })
+        ] }) : /* @__PURE__ */ r(w, { children: p && f ? f : T }) })
       }
     ) }),
-    /* @__PURE__ */ r(ee, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ a(re, { className: "w-[--radix-popper-anchor-width]", children: [
-      /* @__PURE__ */ r(te, { placeholder: "Search...", onKeyDown: $ }),
-      /* @__PURE__ */ a(ae, { className: "max-h-[--radix-popper-available-height]", children: [
-        /* @__PURE__ */ r(oe, { children: A }),
-        /* @__PURE__ */ a(I, { children: [
-          /* @__PURE__ */ a(g, { onSelect: z, className: "cursor-pointer", children: [
+    /* @__PURE__ */ r(le, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => i(!1), children: /* @__PURE__ */ s(ne, { className: "w-[--radix-popper-anchor-width]", children: [
+      /* @__PURE__ */ r(ce, { placeholder: W, onKeyDown: J, value: q, onValueChange: S }),
+      /* @__PURE__ */ s(ie, { className: "max-h-[--radix-popper-available-height]", children: [
+        /* @__PURE__ */ r(de, { children: F }),
+        /* @__PURE__ */ s(O, { children: [
+          /* @__PURE__ */ s(g, { onSelect: Y, className: "cursor-pointer", children: [
             /* @__PURE__ */ r(
               "div",
               {
-                className: d(
+                className: u(
                   "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                  t.length === n.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  t.length === d.size ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 ),
-                children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
+                children: /* @__PURE__ */ r(E, { className: "h-4.5 w-4.5" })
               }
             ),
-            /* @__PURE__ */ a("span", { children: [
+            /* @__PURE__ */ s("span", { children: [
               "(",
-              _,
+              z,
               ")"
             ] })
           ] }, "all"),
-          n.map((e) => {
-            const o = t.includes(e.value);
-            return /* @__PURE__ */ a(g, { onSelect: () => C(e.value), className: "cursor-pointer", children: [
+          Array.from(d.values()).map((e) => {
+            const a = t.includes(e.value);
+            return /* @__PURE__ */ s(g, { onSelect: () => j(e.value), className: "cursor-pointer", children: [
               /* @__PURE__ */ r(
                 "div",
                 {
-                  className: d(
+                  className: u(
                     "mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary",
-                    o ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    a ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                   ),
-                  children: /* @__PURE__ */ r(j, { className: "h-4.5 w-4.5" })
+                  children: /* @__PURE__ */ r(E, { className: "h-4.5 w-4.5" })
                 }
               ),
               e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4.5 w-4.5 text-muted-foreground" }),
@@ -187,20 +200,20 @@ const M = H({
             ] }, e.value);
           })
         ] }),
-        /* @__PURE__ */ r(se, {}),
-        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-          t.length > 0 && /* @__PURE__ */ a(w, { children: [
-            /* @__PURE__ */ r(g, { onSelect: y, className: "flex-1 justify-center cursor-pointer", children: K }),
-            /* @__PURE__ */ r(E, { orientation: "vertical", className: "flex min-h-6 h-full" })
+        /* @__PURE__ */ r(ue, {}),
+        /* @__PURE__ */ r(O, { children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+          t.length > 0 && /* @__PURE__ */ s(w, { children: [
+            /* @__PURE__ */ r(g, { onSelect: v, className: "flex-1 justify-center cursor-pointer", children: K }),
+            /* @__PURE__ */ r(I, { orientation: "vertical", className: "flex min-h-6 h-full" })
           ] }),
           /* @__PURE__ */ r(g, { onSelect: () => i(!1), className: "flex-1 justify-center cursor-pointer max-w-full", children: L })
         ] }) })
       ] })
     ] }) })
   ] });
-}, ne = s.forwardRef(le);
-ne.displayName = "MultiSelect";
+}, pe = o.forwardRef(me);
+pe.displayName = "MultiSelect";
 export {
-  ne as MultiSelect
+  pe as MultiSelect
 };
 //# sourceMappingURL=multiselect.es.js.map

package/dist/multiselect.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/*\r\n Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n /\r\nconst multiSelectVariants = tv({\r\n base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n variants: {\r\n variant: {\r\n default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/\r\n Props for MultiSelect component\r\n /\r\ninterface MultiSelectProps<T extends string \| number>\r\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" \| \"defaultValue\">,\r\n VariantProps<typeof multiSelectVariants> {\r\n /\r\n An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n /\r\n options: {\r\n /* The text to display for the option. /\r\n label: string;\r\n /* The unique value associated with the option. /\r\n value: T;\r\n /* Optional icon component to display alongside the option. /\r\n icon?: React.ComponentType<{ className?: string }>;\r\n }[];\r\n\r\n /\r\n Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n /\r\n onValueChange: (value: T[]) => void;\r\n\r\n /\r\n selected values in the multi-select component.\r\n /\r\n value?: T[];\r\n\r\n /* The default selected values when the component mounts. /\r\n defaultValue?: T[];\r\n\r\n /\r\n Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n /\r\n placeholder?: string;\r\n\r\n /\r\n Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n /\r\n maxCount?: number;\r\n\r\n /\r\n The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n /\r\n modalPopover?: boolean;\r\n\r\n /\r\n If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n /\r\n asChild?: boolean;\r\n\r\n /\r\n Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n /\r\n className?: string;\r\n\r\n /\r\n Text to display on the close button when the multi-select component is open.\r\n /\r\n closeText?: string;\r\n\r\n /\r\n Text to display on the select all button when the multi-select component is open.\r\n /\r\n selectAllText?: string;\r\n\r\n /\r\n Text to display on the clear button when the multi-select component is open.\r\n /\r\n clearText?: string;\r\n\r\n /\r\n Text to display on the more button when the multi-select component is open.\r\n /\r\n moreText?: string;\r\n\r\n /\r\n Text to display when no results are found in the search input.\r\n /\r\n noResultsText?: string;\r\n\r\n /\r\n If true, the multi-select component will be in a loading state.\r\n /\r\n loading?: boolean;\r\n\r\n /\r\n Text to display when the multi-select component is in a loading state.\r\n */\r\n loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string \| number>(\r\n {\r\n options,\r\n onValueChange,\r\n value,\r\n variant,\r\n disabled,\r\n defaultValue = [],\r\n placeholder = \"Select options\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n // asChild = false,\r\n className,\r\n moreText = \"more\",\r\n clearText = \"Clear\",\r\n closeText = \"Close\",\r\n selectAllText = \"Select All\",\r\n noResultsText = \"No results found.\",\r\n loading,\r\n loadingText = \"Loading...\",\r\n ...props\r\n }: MultiSelectProps<T>,\r\n ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n const [selectedValues, setSelectedValues] = React.useState<T[]>(defaultValue ?? value);\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setSelectedValues(value ?? []);\r\n }, [value]);\r\n\r\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n }\r\n };\r\n\r\n const toggleOption = (option: T) => {\r\n const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n setSelectedValues([]);\r\n onValueChange([]);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen(prev => !prev);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.length) {\r\n handleClear();\r\n } else {\r\n const allValues = options.map(option => option.value);\r\n setSelectedValues(allValues);\r\n onValueChange(allValues);\r\n }\r\n };\r\n\r\n React.useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n setIsWrapped(true);\r\n } else {\r\n setIsWrapped(false);\r\n }\r\n }\r\n }, [selectedValues]);\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n variant=\"text\"\r\n loading={loading}\r\n disabled={disabled}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n isWrapped && \"h-auto\",\r\n className,\r\n )}\r\n data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n />\r\n }\r\n >\r\n <>\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n {selectedValues.slice(0, maxCount).map(value => {\r\n const option = options.find(o => o.value === value);\r\n const IconComponent = option?.icon;\r\n return (\r\n <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled \|\| loading })}>\r\n <XMark\r\n className=\"h-4 w-4 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n {option?.label}\r\n </Badge>\r\n );\r\n })}\r\n {selectedValues.length > maxCount && (\r\n <Badge className={cn(multiSelectVariants({ variant }))}>\r\n {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n <CircleXmark\r\n role=\"button\"\r\n className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n {loading && loadingText ? loadingText : null}\r\n </div>\r\n <div className=\"flex items-center justify-between gap-1\">\r\n <XMark\r\n role=\"button\"\r\n className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n aria-label=\"Clear\"\r\n />\r\n <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <>{loading && loadingText ? loadingText : placeholder}</>\r\n )}\r\n </>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n <Command className=\"w-[--radix-popper-anchor-width]\">\r\n <CommandInput placeholder=\"Search...\" onKeyDown={handleInputKeyDown} />\r\n <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues.length === options.length ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n <span>({selectAllText})</span>\r\n </CommandItem>\r\n {options.map(option => {\r\n const isSelected = selectedValues.includes(option.value);\r\n return (\r\n <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n {clearText}\r\n </CommandItem>\r\n <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n </>\r\n )}\r\n <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n {closeText}\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string \| number>(\r\n props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","isPopoverOpen","setIsPopoverOpen","containerRef","isWrapped","setIsWrapped","handleInputKeyDown","event","newSelectedValues","toggleOption","option","handleClear","handleTogglePopover","prev","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","o","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
1	+ {"version":3,"file":"multiselect.es.js","sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { Check, ChevronDown, CircleXmark, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Badge } from \"../badge/Badge\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Separator } from \"../separator/Separator\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from \"../command/Command\";\r\n\r\n/*\r\n Variants for the multi-select component to handle different styles.\r\n * Uses tailwind-variants (cva) to define different styles based on \"variant\" prop.\r\n /\r\nconst multiSelectVariants = tv({\r\n base: \"flex gap-1 items-center py-0.5 px-2 rounded-xl\",\r\n variants: {\r\n variant: {\r\n default: \"border-none shadow-none bg-primary-50 text-primary hover:bg-primary-50\",\r\n secondary: \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/\r\n Props for MultiSelect component\r\n /\r\ninterface MultiSelectProps<T extends string \| number>\r\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" \| \"defaultValue\">,\r\n VariantProps<typeof multiSelectVariants> {\r\n /\r\n An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n /\r\n options: {\r\n /* The text to display for the option. /\r\n label: string;\r\n /* The unique value associated with the option. /\r\n value: T;\r\n /* Optional icon component to display alongside the option. /\r\n icon?: React.ComponentType<{ className?: string }>;\r\n }[];\r\n\r\n /\r\n Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n /\r\n onValueChange: (value: T[]) => void;\r\n\r\n /\r\n selected values in the multi-select component.\r\n /\r\n value?: T[];\r\n\r\n /* The default selected values when the component mounts. /\r\n defaultValue?: T[];\r\n\r\n /\r\n Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n /\r\n placeholder?: string;\r\n\r\n /\r\n Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n /\r\n maxCount?: number;\r\n\r\n /\r\n The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n /\r\n modalPopover?: boolean;\r\n\r\n /\r\n If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n /\r\n asChild?: boolean;\r\n\r\n /\r\n Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n /\r\n className?: string;\r\n\r\n /\r\n Text to display on the close button when the multi-select component is open.\r\n /\r\n closeText?: string;\r\n\r\n /\r\n Text to display on the select all button when the multi-select component is open.\r\n /\r\n selectAllText?: string;\r\n\r\n /\r\n Text to display in the search input.\r\n /\r\n searchText?: string;\r\n\r\n /\r\n If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n * Optional, defaults to false.\r\n /\r\n addOptionOnSearchNotFound?: boolean;\r\n\r\n /\r\n Text to display on the clear button when the multi-select component is open.\r\n /\r\n clearText?: string;\r\n\r\n /\r\n Text to display on the more button when the multi-select component is open.\r\n /\r\n moreText?: string;\r\n\r\n /\r\n Text to display when no results are found in the search input.\r\n /\r\n noResultsText?: string;\r\n\r\n /\r\n If true, the multi-select component will be in a loading state.\r\n /\r\n loading?: boolean;\r\n\r\n /\r\n Text to display when the multi-select component is in a loading state.\r\n */\r\n loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string \| number>(\r\n {\r\n options: _options,\r\n onValueChange,\r\n value,\r\n variant,\r\n disabled,\r\n defaultValue = [],\r\n placeholder = \"Select options\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n // asChild = false,\r\n className,\r\n moreText = \"more\",\r\n clearText = \"Clear\",\r\n closeText = \"Close\",\r\n selectAllText = \"Select All\",\r\n noResultsText = \"No results found.\",\r\n searchText = \"Search...\",\r\n addOptionOnSearchNotFound = false,\r\n loading,\r\n loadingText = \"Loading...\",\r\n ...props\r\n }: MultiSelectProps<T>,\r\n ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n const [selectedValues, setSelectedValues] = React.useState<T[]>(defaultValue ?? value);\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const [searchValue, setSearchValue] = React.useState(\"\");\r\n const [isWrapped, setIsWrapped] = React.useState(false);\r\n const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n new Map(_options.map(option => [option.value, option])),\r\n );\r\n\r\n React.useEffect(() => {\r\n setOptions(new Map(_options.map(option => [option.value, option])));\r\n }, [_options]);\r\n\r\n React.useEffect(() => {\r\n setSelectedValues(value ?? []);\r\n }, [value]);\r\n\r\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n setIsPopoverOpen(true);\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!event.currentTarget.value) return;\r\n const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n setOptions(prev => new Map(prev).set(newOption.value, newOption));\r\n if (options.get(newOption.value) === undefined) {\r\n const newSelectedValues = [...selectedValues, newOption.value];\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n setSearchValue(\"\");\r\n }\r\n } else if (event.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n }\r\n };\r\n\r\n const toggleOption = (option: T) => {\r\n const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n setSelectedValues([]);\r\n onValueChange([]);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen(prev => !prev);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n setSelectedValues(newSelectedValues);\r\n onValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.size) {\r\n handleClear();\r\n } else {\r\n const allValues = Array.from(options.keys());\r\n setSelectedValues(allValues);\r\n onValueChange(allValues);\r\n }\r\n };\r\n\r\n React.useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n setIsWrapped(true);\r\n } else {\r\n setIsWrapped(false);\r\n }\r\n }\r\n }, [selectedValues]);\r\n\r\n return (\r\n <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n variant=\"text\"\r\n loading={loading}\r\n disabled={disabled}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"group flex max-h-14 h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n isWrapped && \"h-auto\",\r\n className,\r\n )}\r\n data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n endIcon={\r\n <ChevronDown\r\n role=\"button\"\r\n aria-label=\"Expand dropdown\"\r\n className=\"!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform\"\r\n />\r\n }\r\n >\r\n <>\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center gap-2\" ref={containerRef}>\r\n {selectedValues.slice(0, maxCount).map(value => {\r\n const option = options.get(value);\r\n const IconComponent = option?.icon;\r\n return (\r\n <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled \|\| loading })}>\r\n <XMark\r\n className=\"h-4 w-4 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n {IconComponent && <IconComponent className=\"h-4 w-4 mr-2\" />}\r\n {option?.label}\r\n </Badge>\r\n );\r\n })}\r\n {selectedValues.length > maxCount && (\r\n <Badge className={cn(multiSelectVariants({ variant }))}>\r\n {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n <CircleXmark\r\n role=\"button\"\r\n className=\"ml-2 h-4.5 w-4.5 cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n {loading && loadingText ? loadingText : null}\r\n </div>\r\n <div className=\"flex items-center justify-between gap-1\">\r\n <XMark\r\n role=\"button\"\r\n className=\"h-5 w-5 text-muted-foreground cursor-pointer\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n aria-label=\"Clear\"\r\n />\r\n <Separator orientation=\"vertical\" className=\"flex min-h-5 h-full\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <>{loading && loadingText ? loadingText : placeholder}</>\r\n )}\r\n </>\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n <Command className=\"w-[--radix-popper-anchor-width]\">\r\n <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n <CommandList className=\"max-h-[--radix-popper-available-height]\">\r\n <CommandEmpty>{noResultsText}</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem key=\"all\" onSelect={toggleAll} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues.length === options.size ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n <span>({selectAllText})</span>\r\n </CommandItem>\r\n {Array.from(options.values()).map(option => {\r\n const isSelected = selectedValues.includes(option.value);\r\n return (\r\n <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"cursor-pointer\">\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4.5 w-4.5 items-center justify-center rounded-sm border border-primary\",\r\n isSelected ? \"bg-primary text-primary-foreground\" : \"opacity-50 [&_svg]:invisible\",\r\n )}\r\n >\r\n <Check className=\"h-4.5 w-4.5\" />\r\n </div>\r\n {option.icon && <option.icon className=\"mr-2 h-4.5 w-4.5 text-muted-foreground\" />}\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem onSelect={handleClear} className=\"flex-1 justify-center cursor-pointer\">\r\n {clearText}\r\n </CommandItem>\r\n <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\r\n </>\r\n )}\r\n <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"flex-1 justify-center cursor-pointer max-w-full\">\r\n {closeText}\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string \| number>(\r\n props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","loading","loadingText","props","ref","selectedValues","setSelectedValues","React","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@trsys-tech/matrix-library",
   "description": "MatrixUI Library",
   "private": false,
-  "version": "0.5.2-alpha.2",
+  "version": "0.5.2-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",