@trsys-tech/matrix-library 1.1.1-canary.0 → 1.1.3

package/dist/multiselect.es.js

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

package/dist/multiselect.es.js.map

@@ -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 { Status } from \"../status/Status\";\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: \"mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50\",\r\n      secondary: \"mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80\",\r\n      destructive: \"mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80\",\r\n      inverted: \"mtx-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   * *Important: Use a constant Array*\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   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\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    showSelectAll = true,\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 isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\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  const handleInputKeyDown = React.useCallback(\r\n    (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        if (options.get(newOption.value) === undefined) {\r\n          setOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\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        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setOptions(new Map(_options.map(option => [option.value, option])));\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\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.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          type=\"button\"\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n            isWrapped && \"mtx-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=\"!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"mtx-flex mtx-justify-between mtx-items-center mtx-w-full\">\r\n                <div className=\"mtx-flex mtx-flex-wrap mtx-items-center mtx-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                      <Status key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"mtx-h-4 mtx-w-4 mtx-cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"mtx-h-4 mtx-w-4 mtx-mr-2\" />}\r\n                        {option?.label}\r\n                      </Status>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Status className={cn(multiSelectVariants({ variant }))}>\r\n                      {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                      <CircleXmark\r\n                        role=\"button\"\r\n                        className=\"mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Status>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"mtx-flex mtx-items-center mtx-justify-between mtx-gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-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=\"mtx-flex mtx-min-h-5 mtx-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=\"mtx-w-auto mtx-p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"mtx-cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                      selectedValues.length === options.size ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\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=\"mtx-cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                        isSelected ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-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=\"mtx-flex mtx-items-center mtx-justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-6 mtx-h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer mtx-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","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","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","Status","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":"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"}
+{"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 { Status } from \"../status/Status\";\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 } 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: \"mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50\",\r\n      secondary: \"mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80\",\r\n      destructive: \"mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80\",\r\n      inverted: \"mtx-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   * *Important: Use a constant Array*\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   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\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 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    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    showSelectAll = true,\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 isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\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  type MultiSelectOption = MultiSelectProps<T>[\"options\"][number];\r\n  const [addedOptions, setAddedOptions] = React.useState<Map<T, MultiSelectOption>>(new Map());\r\n  const propOptions = React.useMemo(() => new Map<T, MultiSelectOption>(_options.map(option => [option.value, option] as const)), [_options]);\r\n  const options = React.useMemo(() => {\r\n    const mergedOptions = new Map(propOptions);\r\n\r\n    addedOptions.forEach((option, value) => {\r\n      if (!mergedOptions.has(value)) {\r\n        mergedOptions.set(value, option);\r\n      }\r\n    });\r\n\r\n    return mergedOptions;\r\n  }, [addedOptions, propOptions]);\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (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        if (options.get(newOption.value) === undefined) {\r\n          setAddedOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\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        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setAddedOptions(new Map());\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\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          type=\"button\"\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n            isWrapped && \"mtx-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=\"!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"mtx-flex mtx-justify-between mtx-items-center mtx-w-full\">\r\n                <div className=\"mtx-flex mtx-flex-wrap mtx-items-center mtx-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                      <Status key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"mtx-h-4 mtx-w-4 mtx-cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"mtx-h-4 mtx-w-4 mtx-mr-2\" />}\r\n                        {option?.label}\r\n                      </Status>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Status className={cn(multiSelectVariants({ variant }))}>\r\n                      {`+ ${selectedValues.length - maxCount} ${moreText}`}\r\n                      <CircleXmark\r\n                        role=\"button\"\r\n                        className=\"mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Status>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"mtx-flex mtx-items-center mtx-justify-between mtx-gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-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=\"mtx-flex mtx-min-h-5 mtx-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=\"mtx-w-auto mtx-p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"mtx-cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                      selectedValues.length === options.size ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\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=\"mtx-cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                        isSelected ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\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","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","addedOptions","setAddedOptions","propOptions","option","options","mergedOptions","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Status","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","ForwardedMultiSelect"],"mappings":"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"}