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

package/dist/combobox.es.js

@@ -1,114 +1,110 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import t, { useRef as A, useEffect as B, useMemo as M } from "react";
-import { XMark as O, ChevronDown as G, Check as T } from "@trsys-tech/matrix-icons";
-import { cn as x } from "./utils.es.js";
-import { Button as X } from "./button.es.js";
-import { Popover as q, PopoverTrigger as z, PopoverContent as H } from "./popover.es.js";
-import { Command as J, CommandInput as Q, CommandList as U, CommandEmpty as W, CommandItem as w, CommandGroup as Y } from "./command.es.js";
-const oe = ({
-  onValueChange: o,
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import a, { useRef as _, useMemo as A } from "react";
+import { XMark as B, ChevronDown as M, Check as O } from "@trsys-tech/matrix-icons";
+import { cn as h } from "./utils.es.js";
+import { Button as S } from "./button.es.js";
+import { Popover as G, PopoverTrigger as T, PopoverContent as X } from "./popover.es.js";
+import { Command as q, CommandInput as z, CommandList as H, CommandEmpty as J, CommandItem as x, CommandGroup as Q } from "./command.es.js";
+const re = ({
+  onValueChange: t,
   options: d,
-  value: m,
-  className: y,
-  clearable: g = !1,
+  value: r,
+  className: w,
+  clearable: y = !1,
   closeOnSelect: i = !0,
   loading: n,
-  disabled: C,
-  placeholder: p = "Select an option",
-  searchText: k = "Search...",
-  noResultsText: N = "No results found",
-  loadingText: b = "Loading...",
-  emptyOptionsText: P = "No Items",
-  showSearchInput: f = !0,
-  modalPopover: L,
-  ...D
+  disabled: v,
+  placeholder: u = "Select an option",
+  searchText: g = "Search...",
+  noResultsText: C = "No results found",
+  loadingText: p = "Loading...",
+  emptyOptionsText: k = "No Items",
+  showSearchInput: m = !0,
+  modalPopover: N,
+  ...P
 }) => {
-  const [v, l] = t.useState(!1), h = A(null), [r, c] = t.useState(m), E = t.useCallback(
+  const [f, s] = a.useState(!1), b = _(null), L = a.useCallback(
     (e) => {
-      e.key === "Enter" ? l(!0) : e.key === "Backspace" && !e.currentTarget.value && (c(r), o?.(r), i && l(!1));
+      e.key === "Enter" ? s(!0) : e.key === "Backspace" && !e.currentTarget.value && (t?.(r), i && s(!1));
     },
-    [r, o, i]
-  ), S = t.useCallback(
+    [t, i, r]
+  ), D = a.useCallback(
     (e) => {
-      c(e), o?.(e), i && l(!1);
+      t?.(e), i && s(!1);
     },
-    [o, i]
-  ), j = t.useCallback(
+    [t, i]
+  ), j = a.useCallback(
     (e) => {
-      e.stopPropagation(), o?.(void 0), c(void 0);
+      e.stopPropagation(), t?.(void 0);
     },
-    [o]
-  ), I = t.useCallback((e, R, _ = [""]) => _.join("").toLocaleLowerCase().includes(R.toLocaleLowerCase()) ? 1 : 0, []), F = t.useCallback(
+    [t]
+  ), E = a.useCallback((e, K, R = [""]) => R.join("").toLocaleLowerCase().includes(K.toLocaleLowerCase()) ? 1 : 0, []), I = a.useCallback(
     (e) => {
-      f || (e.preventDefault(), h.current?.focus());
+      m || (e.preventDefault(), b.current?.focus());
     },
-    [f]
-  );
-  B(() => {
-    c(m);
-  }, [m]);
-  const u = r === void 0 || r === "", K = M(() => u && n ? b : u ? p : d.find((e) => e.value === r)?.label || p, [u, r, d, p, n, b]);
-  return /* @__PURE__ */ s(q, { open: v, onOpenChange: l, modal: L, children: [
-    /* @__PURE__ */ a(z, { asChild: !0, children: /* @__PURE__ */ s(
-      X,
+    [m]
+  ), c = r === void 0 || r === "", F = A(() => c && n ? p : c ? u : d.find((e) => e.value === r)?.label || u, [c, r, d, u, n, p]);
+  return /* @__PURE__ */ l(G, { open: f, onOpenChange: s, modal: N, children: [
+    /* @__PURE__ */ o(T, { asChild: !0, children: /* @__PURE__ */ l(
+      S,
       {
         variant: "text",
         role: "combobox",
         type: "button",
-        "aria-expanded": v,
-        className: x(
+        "aria-expanded": f,
+        className: h(
           "group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300",
-          y
+          w
         ),
         "data-value": r,
-        "data-placeholder": u ? "" : void 0,
+        "data-placeholder": c ? "" : void 0,
         loading: n,
-        disabled: C,
-        endIcon: /* @__PURE__ */ a(
-          G,
+        disabled: v,
+        endIcon: /* @__PURE__ */ o(
+          M,
           {
             role: "button",
             "aria-label": "Expand dropdown",
             className: "!h-4.5 !w-4.5 cursor-pointer group-data-[state=open]:rotate-180 transition-transform ms-auto"
           }
         ),
-        ...D,
+        ...P,
         children: [
-          /* @__PURE__ */ a("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: K }),
-          g && r !== void 0 && r !== null ? /* @__PURE__ */ a(
+          /* @__PURE__ */ o("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: F }),
+          y && r !== void 0 && r !== null ? /* @__PURE__ */ o(
             "span",
             {
               onClick: j,
               className: "p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5",
               role: "button",
               "aria-label": "Clear selection",
-              children: /* @__PURE__ */ a(O, {})
+              children: /* @__PURE__ */ o(B, {})
             }
           ) : null
         ]
       }
     ) }),
-    /* @__PURE__ */ a(H, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: F, children: /* @__PURE__ */ s(
-      J,
+    /* @__PURE__ */ o(X, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => s(!1), onOpenAutoFocus: I, children: /* @__PURE__ */ l(
+      q,
       {
         className: "w-[--radix-popper-anchor-width] focus-visible:outline-none",
-        filter: I,
+        filter: E,
         defaultValue: r != null ? String(r) : void 0,
-        ref: h,
+        ref: b,
         children: [
-          f && /* @__PURE__ */ a(Q, { placeholder: k, onKeyDown: E }),
-          /* @__PURE__ */ s(U, { children: [
-            !n && /* @__PURE__ */ a(W, { children: N }),
-            !n && !d.length ? /* @__PURE__ */ a(w, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: P }) : null,
-            /* @__PURE__ */ a(Y, { children: d.map((e) => /* @__PURE__ */ s(
-              w,
+          m && /* @__PURE__ */ o(z, { placeholder: g, onKeyDown: L }),
+          /* @__PURE__ */ l(H, { children: [
+            !n && /* @__PURE__ */ o(J, { children: C }),
+            !n && !d.length ? /* @__PURE__ */ o(x, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: k }) : null,
+            /* @__PURE__ */ o(Q, { children: d.map((e) => /* @__PURE__ */ l(
+              x,
               {
                 value: e.value,
                 keywords: "keyword" in e ? [e.keyword] : [e.label],
-                onSelect: S,
+                onSelect: D,
                 children: [
                   e.label,
-                  /* @__PURE__ */ a(T, { className: x("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
+                  /* @__PURE__ */ o(O, { className: h("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
                 ]
               },
               String(e.value)
@@ -120,6 +116,6 @@ const oe = ({
   ] });
 };
 export {
-  oe as Combobox
+  re as Combobox
 };
 //# sourceMappingURL=combobox.es.js.map

package/dist/combobox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useMemo, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n  /**\r\n   * The options to display in the combobox.\r\n   * Each option should have a label and a value.\r\n   * The label is what is displayed in the combobox.\r\n   * The value is what is returned when the option is selected.\r\n   */\r\n  options: ({ label: string; value: T } | { label: React.ReactElement; value: T; keyword: string })[];\r\n\r\n  /**\r\n   * The value of the combobox.\r\n   */\r\n  value?: T;\r\n\r\n  /**\r\n   * A function that is called when the value of the combobox changes.\r\n   */\r\n  onValueChange?: (value: T) => void;\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * @default \"Select an option\"\r\n   */\r\n  placeholder?: string;\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\r\n   * @default false\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * The text to display in the search input.\r\n   * @default \"Search...\"\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * The text to display when no results are found.\r\n   * @default \"No results found\"\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * Whether the popover should close when an option is selected.\r\n   * @default true\r\n   */\r\n  closeOnSelect?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is loading.\r\n   * @default false\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The text to display when the combobox is loading.\r\n   * @default \"Loading...\"\r\n   */\r\n  loadingText?: string;\r\n\r\n  /**\r\n   * The text to display when there are no options.\r\n   * @default \"No Items\"\r\n   */\r\n  emptyOptionsText?: string;\r\n\r\n  /**\r\n   * Whether to show the search input.\r\n   * @default true\r\n   */\r\n  showSearchInput?: boolean;\r\n\r\n  /**\r\n   * Whether to show the clear button.\r\n   * @default false\r\n   */\r\n  clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n  onValueChange,\r\n  options,\r\n  value,\r\n  className,\r\n  clearable = false,\r\n  closeOnSelect = true,\r\n  loading,\r\n  disabled,\r\n  placeholder = \"Select an option\",\r\n  searchText = \"Search...\",\r\n  noResultsText = \"No results found\",\r\n  loadingText = \"Loading...\",\r\n  emptyOptionsText = \"No Items\",\r\n  showSearchInput = true,\r\n  modalPopover,\r\n  ...props\r\n}: ComboboxProps<T>) => {\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n  const [currentSelectedValue, setCurrentSelectedValue] = React.useState<T | undefined>(value);\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (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        setCurrentSelectedValue(currentSelectedValue);\r\n        onValueChange?.(currentSelectedValue!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [currentSelectedValue, onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\r\n      setCurrentSelectedValue(currentValue);\r\n      onValueChange?.(currentValue);\r\n      if (closeOnSelect) setIsPopoverOpen(false);\r\n    },\r\n    [onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleClear = React.useCallback(\r\n    (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onValueChange?.(undefined as unknown as T);\r\n      setCurrentSelectedValue(undefined);\r\n    },\r\n    [onValueChange],\r\n  );\r\n\r\n  const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n    return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n  }, []);\r\n\r\n  // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n  const handleOpenAutoFocus = React.useCallback(\r\n    (e: Event) => {\r\n      if (!showSearchInput) {\r\n        e.preventDefault();\r\n        commandRef.current?.focus();\r\n      }\r\n    },\r\n    [showSearchInput],\r\n  );\r\n\r\n  useEffect(() => {\r\n    setCurrentSelectedValue(value);\r\n  }, [value]);\r\n\r\n  const showPlaceholder = currentSelectedValue === undefined || currentSelectedValue === \"\";\r\n\r\n  const label = useMemo(() => {\r\n    if (showPlaceholder && loading) return loadingText;\r\n    if (showPlaceholder) return placeholder;\r\n    return options.find(option => option.value === currentSelectedValue)?.label || placeholder;\r\n  }, [showPlaceholder, currentSelectedValue, options, placeholder, loading, loadingText]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          role=\"combobox\"\r\n          type=\"button\"\r\n          aria-expanded={isPopoverOpen}\r\n          className={cn(\r\n            \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-value={currentSelectedValue}\r\n          data-placeholder={showPlaceholder ? \"\" : undefined}\r\n          loading={loading}\r\n          disabled={disabled}\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 ms-auto\"\r\n            />\r\n          }\r\n          {...props}\r\n        >\r\n          <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">{label}</span>\r\n          {clearable && currentSelectedValue !== undefined && currentSelectedValue !== null ? (\r\n            <span\r\n              onClick={handleClear}\r\n              className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n              role=\"button\"\r\n              aria-label=\"Clear selection\"\r\n            >\r\n              <XMark />\r\n            </span>\r\n          ) : null}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n        <Command\r\n          className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n          filter={handleFilter}\r\n          defaultValue={currentSelectedValue !== undefined && currentSelectedValue !== null ? String(currentSelectedValue) : undefined} // highlight selected value on open\r\n          ref={commandRef}\r\n        >\r\n          {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n          <CommandList>\r\n            {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n            {!loading && !options.length ? (\r\n              <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n                {emptyOptionsText}\r\n              </CommandItem>\r\n            ) : null}\r\n            <CommandGroup>\r\n              {options.map(option => (\r\n                <CommandItem\r\n                  key={String(option.value)}\r\n                  value={option.value}\r\n                  keywords={\"keyword\" in option ? [option.keyword] : [option.label]}\r\n                  onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n                >\r\n                  {option.label}\r\n                  <Check className={cn(\"ml-auto\", currentSelectedValue === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                </CommandItem>\r\n              ))}\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","label","useMemo","option","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}
+{"version":3,"file":"combobox.es.js","sources":["../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useMemo, useRef } from \"react\";\r\nimport { Check, ChevronDown, XMark } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../command/Command\";\r\n\r\ntype ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonElement> & {\r\n  /**\r\n   * The options to display in the combobox.\r\n   * Each option should have a label and a value.\r\n   * The label is what is displayed in the combobox.\r\n   * The value is what is returned when the option is selected.\r\n   */\r\n  options: ({ label: string; value: T } | { label: React.ReactElement; value: T; keyword: string })[];\r\n\r\n  /**\r\n   * The value of the combobox.\r\n   */\r\n  value?: T;\r\n\r\n  /**\r\n   * A function that is called when the value of the combobox changes.\r\n   */\r\n  onValueChange?: (value: T) => void;\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * @default \"Select an option\"\r\n   */\r\n  placeholder?: string;\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\r\n   * @default false\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * The text to display in the search input.\r\n   * @default \"Search...\"\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * The text to display when no results are found.\r\n   * @default \"No results found\"\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * Whether the popover should close when an option is selected.\r\n   * @default true\r\n   */\r\n  closeOnSelect?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is loading.\r\n   * @default false\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Whether the combobox is disabled.\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The text to display when the combobox is loading.\r\n   * @default \"Loading...\"\r\n   */\r\n  loadingText?: string;\r\n\r\n  /**\r\n   * The text to display when there are no options.\r\n   * @default \"No Items\"\r\n   */\r\n  emptyOptionsText?: string;\r\n\r\n  /**\r\n   * Whether to show the search input.\r\n   * @default true\r\n   */\r\n  showSearchInput?: boolean;\r\n\r\n  /**\r\n   * Whether to show the clear button.\r\n   * @default false\r\n   */\r\n  clearable?: boolean;\r\n};\r\n\r\nconst Combobox = <T extends string | number>({\r\n  onValueChange,\r\n  options,\r\n  value,\r\n  className,\r\n  clearable = false,\r\n  closeOnSelect = true,\r\n  loading,\r\n  disabled,\r\n  placeholder = \"Select an option\",\r\n  searchText = \"Search...\",\r\n  noResultsText = \"No results found\",\r\n  loadingText = \"Loading...\",\r\n  emptyOptionsText = \"No Items\",\r\n  showSearchInput = true,\r\n  modalPopover,\r\n  ...props\r\n}: ComboboxProps<T>) => {\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const commandRef = useRef<HTMLDivElement>(null);\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (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        onValueChange?.(value!);\r\n        if (closeOnSelect) setIsPopoverOpen(false);\r\n      }\r\n    },\r\n    [onValueChange, closeOnSelect, value],\r\n  );\r\n\r\n  const handleSelect = React.useCallback(\r\n    (currentValue: T) => {\r\n      onValueChange?.(currentValue);\r\n      if (closeOnSelect) setIsPopoverOpen(false);\r\n    },\r\n    [onValueChange, closeOnSelect],\r\n  );\r\n\r\n  const handleClear = React.useCallback(\r\n    (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onValueChange?.(undefined as unknown as T);\r\n    },\r\n    [onValueChange],\r\n  );\r\n\r\n  const handleFilter = React.useCallback((value: string, search: string, keywords: string[] = [\"\"]) => {\r\n    return keywords.join(\"\").toLocaleLowerCase().includes(search.toLocaleLowerCase()) ? 1 : 0;\r\n  }, []);\r\n\r\n  // when search input is not shown, we need to focus on the command manually to enable keyboard navigation\r\n  const handleOpenAutoFocus = React.useCallback(\r\n    (e: Event) => {\r\n      if (!showSearchInput) {\r\n        e.preventDefault();\r\n        commandRef.current?.focus();\r\n      }\r\n    },\r\n    [showSearchInput],\r\n  );\r\n\r\n  const showPlaceholder = value === undefined || value === \"\";\r\n\r\n  const label = useMemo(() => {\r\n    if (showPlaceholder && loading) return loadingText;\r\n    if (showPlaceholder) return placeholder;\r\n    return options.find(option => option.value === value)?.label || placeholder;\r\n  }, [showPlaceholder, value, options, placeholder, loading, loadingText]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          variant=\"text\"\r\n          role=\"combobox\"\r\n          type=\"button\"\r\n          aria-expanded={isPopoverOpen}\r\n          className={cn(\r\n            \"group flex h-8 w-full items-center justify-between whitespace-nowrap overflow-hidden rounded-sm border border-input bg-transparent px-3 py-1.5 text-xs 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 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-value={value}\r\n          data-placeholder={showPlaceholder ? \"\" : undefined}\r\n          loading={loading}\r\n          disabled={disabled}\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 ms-auto\"\r\n            />\r\n          }\r\n          {...props}\r\n        >\r\n          <span className=\"text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]\">{label}</span>\r\n          {clearable && value !== undefined && value !== null ? (\r\n            <span\r\n              onClick={handleClear}\r\n              className=\"p-0 rounded-sm text-xs font-normal transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:bg-muted disabled:text-gray-500 text-primary hover:bg-primary-50 focus:bg-transparent focus:ring active:bg-primary-50 active:text-primary-700 [&>svg]:h-4.5 [&>svg]:w-4.5\"\r\n              role=\"button\"\r\n              aria-label=\"Clear selection\"\r\n            >\r\n              <XMark />\r\n            </span>\r\n          ) : null}\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)} onOpenAutoFocus={handleOpenAutoFocus}>\r\n        <Command\r\n          className=\"w-[--radix-popper-anchor-width] focus-visible:outline-none\"\r\n          filter={handleFilter}\r\n          defaultValue={value !== undefined && value !== null ? String(value) : undefined} // highlight selected value on open\r\n          ref={commandRef}\r\n        >\r\n          {showSearchInput && <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} />}\r\n          <CommandList>\r\n            {!loading && <CommandEmpty>{noResultsText}</CommandEmpty>}\r\n            {!loading && !options.length ? (\r\n              <CommandItem value=\"8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623\" disabled>\r\n                {emptyOptionsText}\r\n              </CommandItem>\r\n            ) : null}\r\n            <CommandGroup>\r\n              {options.map(option => (\r\n                <CommandItem\r\n                  key={String(option.value)}\r\n                  value={option.value}\r\n                  keywords={\"keyword\" in option ? [option.keyword] : [option.label]}\r\n                  onSelect={handleSelect as React.ComponentProps<typeof CommandItem>[\"onSelect\"]}\r\n                >\r\n                  {option.label}\r\n                  <Check className={cn(\"ml-auto\", value === option.value ? \"opacity-100\" : \"opacity-0\")} />\r\n                </CommandItem>\r\n              ))}\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\nexport { Combobox, type ComboboxProps };\r\n"],"names":["Combobox","onValueChange","options","value","className","clearable","closeOnSelect","loading","disabled","placeholder","searchText","noResultsText","loadingText","emptyOptionsText","showSearchInput","modalPopover","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","showPlaceholder","label","useMemo","option","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}

package/dist/components/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAQ1D,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAEpG;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,6MAiBxC,aAAa,CAAC,CAAC,CAAC,4CAuIlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAEpG;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,GAAG,MAAM,6MAiBxC,aAAa,CAAC,CAAC,CAAC,4CA8HlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

package/dist/components/data-grid/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/DataGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/DataGrid.tsx"],"names":[],"mappings":"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"}

package/dist/components/form-multi-select/FormMultiSelect.d.ts

@@ -1,11 +1,11 @@
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { FormItem } from '../form/Form';
-import { MultiSelect, MultiSelectProps } from '../multi-select/MultiSelect';
+import { MultiSelect } from '../multi-select/MultiSelect';
 type FormMultiSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & React.ComponentProps<typeof FormItem> & {
     label: string;
     loading?: boolean;
     loadingText?: string;
-    options: MultiSelectProps<string | number>["options"];
+    options: React.ComponentPropsWithoutRef<typeof MultiSelect>["options"];
     placeholder?: string;
     required?: boolean;
     readOnly?: boolean;

package/dist/components/form-multi-select/FormMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/form-multi-select/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,KAAK,oBAAoB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,UAAU,CAC/F,CAAC;QACF,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;KAC3G,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,mCACvF,oBAAoB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAwDjD,CAAC;AACF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/form-multi-select/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,KAAK,oBAAoB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE;QACV,gBAAgB,CAAC,EAAE,IAAI,CACrB,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,UAAU,CAC/F,CAAC;QACF,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;KAC3G,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,mCACvF,oBAAoB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAwDjD,CAAC;AACF,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,CAAC"}

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

@@ -62,6 +62,8 @@ interface MultiSelectProps<T extends string | number> extends Omit<React.ButtonH
     /**
      * An array of option objects to be displayed in the multi-select component.
      * Each option object has a label, value, and an optional icon.
+     *
+     * *Important: Use a constant Array*
      */
     options: {
         /** The text to display for the option. */
@@ -114,6 +116,10 @@ interface MultiSelectProps<T extends string | number> extends Omit<React.ButtonH
      * Text to display on the close button when the multi-select component is open.
      */
     closeText?: string;
+    /**
+     * Whether to show the select all option or not
+     */
+    showSelectAll?: boolean;
     /**
      * Text to display on the select all button when the multi-select component is open.
      */

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

@@ -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,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"}
+{"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;;;;;OAKG;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,OAAO,CAAC;IAExB;;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;AAqQD,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/datagrid.es.js

@@ -151,11 +151,11 @@ const ie = ({ className: o, ...s }) => {
   }), e?.addEventListener("selectionChanged", () => {
     u(e.getSelectedNodes().length);
   }), () => {
-    e?.removeEventListener("pinnedRowDataChanged", () => {
+    e?.isDestroyed() || (e?.removeEventListener("pinnedRowDataChanged", () => {
       l(e.getPinnedTopRowCount());
     }), e?.removeEventListener("selectionChanged", () => {
       u(e.getSelectedNodes().length);
-    });
+    }));
   }), [e]), /* @__PURE__ */ r(
     E,
     {

package/dist/datagrid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, HTMLAttributes, useMemo } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz, AllCommunityModule, ModuleRegistry, Theme } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\n// Register all Community features\r\n// Todo: Register only the required features\r\nModuleRegistry.registerModules([AllCommunityModule]);\r\n\r\nconst dataGridDefaultTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n  headerBackgroundColor: \"hsl(var(--primary-50))\",\r\n  backgroundColor: \"hsl(var(--gray-0))\",\r\n  accentColor: \"hsl(var(--primary-300))\",\r\n  foregroundColor: \"hsl(var(--text-500))\",\r\n  cellTextColor: \"hsl(var(--text-500))\",\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = Omit<AgGridReactProps, \"theme\"> & {\r\n  theme?: Theme;\r\n};\r\n\r\nconst DataGridContent = forwardRef<AgGridReact, DataGridContentProps>(\r\n  ({ theme: propTheme, onGridReady, quickFilterText: quickFilterTextProps, rowData: rowDataProps, containerStyle, ...props }, ref) => {\r\n    const context = React.useContext(DataGridContext);\r\n\r\n    if (!context) {\r\n      throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n    }\r\n    const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n    const theme = useMemo(() => {\r\n      return dataGridDefaultTheme.withParams({\r\n        headerHeight: 40,\r\n        wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n      });\r\n    }, [actionbarExists]);\r\n\r\n    const handleGridReady = (e: GridReadyEvent) => {\r\n      setApi(e.api);\r\n      onGridReady?.(e);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      setRowData(rowDataProps);\r\n    }, [rowDataProps, setRowData]);\r\n\r\n    React.useEffect(() => {\r\n      if (quickFilterTextProps !== undefined) {\r\n        setQuickFilterText(quickFilterTextProps ?? \"\");\r\n      }\r\n    }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n    return (\r\n      <AgGridReact\r\n        gridId={gridId}\r\n        theme={propTheme ?? theme}\r\n        rowData={rowData}\r\n        quickFilterText={quickFilterText}\r\n        onGridReady={handleGridReady}\r\n        containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n        {...props}\r\n        ref={ref}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nDataGridContent.displayName = \"DataGridContent\";\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = HTMLAttributes<HTMLDivElement> & {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false, className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"max-w-60\", className)} {...props}>\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  onRefresh: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, onRefresh, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    onRefresh();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n  dataGridDefaultTheme,\r\n};\r\n"],"names":["ModuleRegistry","AllCommunityModule","dataGridDefaultTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","forwardRef","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","ref","theme","useMemo","handleGridReady","e","AgGridReact","DataGridActionBar","className","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","onRefresh","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":"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"}
+{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, HTMLAttributes, useMemo } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz, AllCommunityModule, ModuleRegistry, Theme } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\n// Register all Community features\r\n// Todo: Register only the required features\r\nModuleRegistry.registerModules([AllCommunityModule]);\r\n\r\nconst dataGridDefaultTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n  headerBackgroundColor: \"hsl(var(--primary-50))\",\r\n  backgroundColor: \"hsl(var(--gray-0))\",\r\n  accentColor: \"hsl(var(--primary-300))\",\r\n  foregroundColor: \"hsl(var(--text-500))\",\r\n  cellTextColor: \"hsl(var(--text-500))\",\r\n});\r\n\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\ntype DataGridProps = {\r\n  children: React.ReactNode;\r\n};\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\ntype DataGridContentProps = Omit<AgGridReactProps, \"theme\"> & {\r\n  theme?: Theme;\r\n};\r\n\r\nconst DataGridContent = forwardRef<AgGridReact, DataGridContentProps>(\r\n  ({ theme: propTheme, onGridReady, quickFilterText: quickFilterTextProps, rowData: rowDataProps, containerStyle, ...props }, ref) => {\r\n    const context = React.useContext(DataGridContext);\r\n\r\n    if (!context) {\r\n      throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n    }\r\n    const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight } = context;\r\n\r\n    const theme = useMemo(() => {\r\n      return dataGridDefaultTheme.withParams({\r\n        headerHeight: 40,\r\n        wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n      });\r\n    }, [actionbarExists]);\r\n\r\n    const handleGridReady = (e: GridReadyEvent) => {\r\n      setApi(e.api);\r\n      onGridReady?.(e);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      setRowData(rowDataProps);\r\n    }, [rowDataProps, setRowData]);\r\n\r\n    React.useEffect(() => {\r\n      if (quickFilterTextProps !== undefined) {\r\n        setQuickFilterText(quickFilterTextProps ?? \"\");\r\n      }\r\n    }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n    return (\r\n      <AgGridReact\r\n        gridId={gridId}\r\n        theme={propTheme ?? theme}\r\n        rowData={rowData}\r\n        quickFilterText={quickFilterText}\r\n        onGridReady={handleGridReady}\r\n        containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n        {...props}\r\n        ref={ref}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nDataGridContent.displayName = \"DataGridContent\";\r\n\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype SearchActionProps = HTMLAttributes<HTMLDivElement> & {\r\n  defaultOpen?: boolean;\r\n};\r\n\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false, className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  }, [isSearchInputOpen]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"max-w-60\", className)} {...props}>\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\ntype FreezeActionProps = ButtonProps & {\r\n  freezeText?: string;\r\n  unFreezeText?: string;\r\n};\r\n\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, rowData } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      // Pin the selected rows\r\n      api.setGridOption(\r\n        \"pinnedTopRowData\",\r\n        selectedRows.map(row => row.data),\r\n      );\r\n\r\n      // Get current row data\r\n      const allData = api.getRenderedNodes();\r\n      // Filter out pinned rows from the main data\r\n      const updatedNodes = allData.filter(row => !selectedRows.some(pinnedRow => pinnedRow.id === row.id));\r\n\r\n      // Update the grid with the filtered data\r\n      api.setGridOption(\r\n        \"rowData\",\r\n        updatedNodes.map(node => node.data),\r\n      );\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    if (!api) return;\r\n    api.setGridOption(\"pinnedTopRowData\", []);\r\n    api.setGridOption(\"rowData\", rowData);\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      if (api?.isDestroyed()) return;\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  onRefresh: () => void;\r\n};\r\n\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, onRefresh, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    onRefresh();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  onDelete: () => void;\r\n};\r\n\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  children: React.ReactNode;\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n  dataGridDefaultTheme,\r\n};\r\n"],"names":["ModuleRegistry","AllCommunityModule","dataGridDefaultTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","forwardRef","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","ref","theme","useMemo","handleGridReady","e","AgGridReact","DataGridActionBar","className","cn","SearchAction","defaultOpen","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","row","updatedNodes","pinnedRow","node","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","onRefresh","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":";;;;;;;;;;;AAgBAA,EAAe,gBAAgB,CAACC,CAAkB,CAAC;AAEnD,MAAMC,IAAuBC,EAAY,WAAW;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AACjB,CAAC,GAgBKC,IAAkBC,EAAM,cAAsC,IAAI,GAElEC,KAAc,MAAM;AACxB,QAAMC,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAGhE,SAAOA;AACT,GAMMC,KAAoC,CAAC,EAAE,UAAAC,QAAe;AAC1D,QAAMC,IAASL,EAAM,MAAA,GACf,CAACM,GAAKC,CAAM,IAAIP,EAAM,SAAyB,IAAI,GACnD,CAACQ,GAASC,CAAU,IAAIT,EAAM,SAAmC,CAAA,CAAE,GACnE,CAACU,GAAiBC,CAAkB,IAAIX,EAAM,SAAS,CAAC,GAExD,CAACY,GAAiBC,CAAkB,IAAIb,EAAM,SAAS,EAAE,GACzD,CAACc,GAAiBC,CAAkB,IAAIf,EAAM,SAAS,EAAK;AAClE,SACE,gBAAAgB;AAAA,IAACjB,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO;AAAA,QACL,KAAAO;AAAA,QACA,QAAAC;AAAA,QACA,SAAAC;AAAA,QACA,YAAAC;AAAA,QACA,QAAAJ;AAAA,QACA,iBAAAO;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAL;AAAA,QACA,oBAAAC;AAAA,MAAA;AAAA,MAGD,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP,GAMMa,IAAkBC;AAAA,EACtB,CAAC,EAAE,OAAOC,GAAW,aAAAC,GAAa,iBAAiBC,GAAsB,SAASC,GAAc,gBAAAC,GAAgB,GAAGC,EAAA,GAASC,MAAQ;AAClI,UAAMvB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,QAAI,CAACG;AACH,YAAM,IAAI,MAAM,kDAAkD;AAEpE,UAAM,EAAE,SAAAM,GAAS,YAAAC,GAAY,iBAAAK,GAAiB,QAAAP,GAAQ,oBAAAM,GAAoB,iBAAAD,GAAiB,QAAAP,GAAQ,iBAAAK,EAAA,IAAoBR,GAEjHwB,IAAQC,EAAQ,MACb9B,EAAqB,WAAW;AAAA,MACrC,cAAc;AAAA,MACd,qBAAqBiB,IAAkB,oBAAoB;AAAA,IAAA,CAC5D,GACA,CAACA,CAAe,CAAC,GAEdc,IAAkB,CAACC,MAAsB;AAC7C,MAAAtB,EAAOsB,EAAE,GAAG,GACZT,IAAcS,CAAC;AAAA,IACjB;AAEA7B,WAAAA,EAAM,UAAU,MAAM;AACpB,MAAAS,EAAWa,CAAY;AAAA,IACzB,GAAG,CAACA,GAAcb,CAAU,CAAC,GAE7BT,EAAM,UAAU,MAAM;AACpB,MAAIqB,MAAyB,UAC3BR,EAAmBQ,KAAwB,EAAE;AAAA,IAEjD,GAAG,CAACA,GAAsBR,CAAkB,CAAC,GAG3C,gBAAAG;AAAA,MAACc;AAAA,MAAA;AAAA,QACC,QAAAzB;AAAA,QACA,OAAOc,KAAaO;AAAA,QACpB,SAAAlB;AAAA,QACA,iBAAAI;AAAA,QACA,aAAagB;AAAA,QACb,gBAAgB,EAAE,QAAQ,eAAelB,CAAe,OAAO,GAAGa,EAAA;AAAA,QACjE,GAAGC;AAAA,QACJ,KAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAR,EAAgB,cAAc;AAI9B,MAAMc,KAAsD,CAAC,EAAE,WAAAC,GAAW,GAAGR,QAAY;AACvF,QAAMtB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,oDAAoD;AAEtE,QAAMuB,IAAMzB,EAAM,OAA8B,IAAI,GAC9C,EAAE,oBAAAe,GAAoB,oBAAAJ,EAAA,IAAuBT,GAC7C,EAAE,UAAAE,MAAaoB;AAErBxB,SAAAA,EAAM,UAAU,OACde,EAAmB,EAAI,GAChB,MAAMA,EAAmB,EAAK,IACpC,CAACA,CAAkB,CAAC,GAEvBf,EAAM,UAAU,MAAM;AACpB,IAAIyB,EAAI,WACNd,EAAmBc,EAAI,QAAQ,YAAY;AAAA,EAE/C,GAAG,CAACd,CAAkB,CAAC,GAGrB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWiB;AAAA,QACT;AAAA,QACAD;AAAA,MAAA;AAAA,MAEF,KAAAP;AAAA,MAEC,UAAArB;AAAA,IAAA;AAAA,EAAA;AAGP,GAMM8B,KAA4C,CAAC,EAAE,aAAAC,IAAc,IAAO,WAAAH,GAAW,GAAGR,QAAY;AAClG,QAAMtB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAM,EAAE,iBAAAU,GAAiB,oBAAAC,EAAA,IAAuBX,GAE1C,CAACkC,GAAmBC,CAAoB,IAAIrC,EAAM,SAASmC,CAAW,GACtE,CAACG,GAAWC,CAAY,IAAIvC,EAAM,SAAS,EAAK,GAChDwC,IAAWxC,EAAM,OAAgC,IAAI,GAErDyC,IAAc,MAAM;AACxB,IAAAvC,EAAQ,mBAAmB,EAAE,GACzBsC,EAAS,WACXA,EAAS,QAAQ,MAAA;AAAA,EAErB,GAEME,IAAa,MAAM;AACvB,IAAAL,EAAqB,EAAI;AAAA,EAC3B;AAEArC,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAIoC,KAAqBI,GAAU,WACjCA,EAAS,QAAQ,MAAA;AAAA,EAErB,GAAG,CAACJ,CAAiB,CAAC;AAEtB,QAAMO,IAAc,MAAM;AACxB,IAAAJ,EAAa,EAAI,GACjBrC,EAAQ,mBAAmB,EAAE,GAC7B,WAAW,MAAM;AACf,MAAAmC,EAAqB,EAAK,GAC1BE,EAAa,EAAK;AAAA,IACpB,GAAG,GAAG;AAAA,EACR;AAEA,SACE,gBAAAvB,EAAC,OAAA,EAAI,WAAWiB,EAAG,YAAYD,CAAS,GAAI,GAAGR,GAC5C,UAAAY,KAAqBE,IACpB,gBAAAtB;AAAA,IAAC4B;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,WAAWP,EAAG,kBAAkBG,KAAqB,CAACE,IAAY,uBAAuB,IAAIA,KAAa,qBAAqB;AAAA,MAC/H,UAAU,CAAAT,MAAKhB,EAAmBgB,EAAE,OAAO,KAAK;AAAA,MAChD,OAAOjB;AAAA,MACP,gBACE,gBAAAI,EAAC6B,GAAA,EAAW,SAAQ,WAAU,WAAU,kCAAiC,SAASF,GAChF,UAAA,gBAAA3B,EAAC8B,GAAA,EAAU,WAAU,WAAU,GACjC;AAAA,MAEF,cACElC,KACE,gBAAAI,EAAC6B,GAAA,EAAW,SAAQ,WAAU,WAAU,kCAAiC,SAASJ,GAChF,UAAA,gBAAAzB,EAAC+B,GAAA,EAAY,WAAU,WAAU,EAAA,CACnC;AAAA,IAAA;AAAA,EAAA,IAKN,gBAAA/B,EAAC6B,GAAA,EAAW,SAAQ,WAAU,WAAU,qBAAoB,SAASH,GACnE,UAAA,gBAAA1B,EAAC8B,GAAA,EAAU,WAAU,UAAA,CAAU,GACjC,GAEJ;AAEJ,GAOME,KAA4C,CAAC,EAAE,YAAAC,GAAY,cAAAC,GAAc,SAAAC,GAAS,UAAAC,GAAU,GAAG5B,QAAY;AAC/G,QAAMtB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAM,CAACmD,GAAgBC,CAAiB,IAAItD,EAAM,SAAS,CAAC,GACtD,CAACuD,GAAmBC,CAAoB,IAAIxD,EAAM,SAAS,CAAC,GAE5D,EAAE,KAAAM,GAAK,SAAAE,EAAA,IAAYN,GAEnBuD,IAAa,MAAM;AACvB,QAAI,CAACnD,EAAK;AAGV,UAAMoD,IAAepD,EAAI,iBAAA;AAEzB,QAAIoD,EAAa,SAAS,GAAG;AAE3B,MAAApD,EAAI;AAAA,QACF;AAAA,QACAoD,EAAa,IAAI,CAAAC,MAAOA,EAAI,IAAI;AAAA,MAAA;AAMlC,YAAMC,IAFUtD,EAAI,iBAAA,EAES,OAAO,CAAAqD,MAAO,CAACD,EAAa,KAAK,CAAAG,MAAaA,EAAU,OAAOF,EAAI,EAAE,CAAC;AAGnG,MAAArD,EAAI;AAAA,QACF;AAAA,QACAsD,EAAa,IAAI,CAAAE,MAAQA,EAAK,IAAI;AAAA,MAAA;AAAA,IAEtC;AAAA,EACF,GAEMC,IAAe,MAAM;AACzB,IAAKzD,MACLA,EAAI,cAAc,oBAAoB,EAAE,GACxCA,EAAI,cAAc,WAAWE,CAAO;AAAA,EACtC,GAEMwD,IAAiB,CAACnC,MAA2C;AACjE,IAAIvB,MACsBA,EAAI,qBAAA,IACN,IACpByD,EAAA,IAEAN,EAAA,IAGJN,IAAUtB,CAAC;AAAA,EACb;AAEA7B,SAAAA,EAAM,UAAU,OACdM,GAAK,iBAAiB,wBAAwB,MAAM;AAClD,IAAAgD,EAAkBhD,EAAI,sBAAsB;AAAA,EAC9C,CAAC,GAEDA,GAAK,iBAAiB,oBAAoB,MAAM;AAC9C,IAAAkD,EAAqBlD,EAAI,iBAAA,EAAmB,MAAM;AAAA,EACpD,CAAC,GAEM,MAAM;AACX,IAAIA,GAAK,kBACTA,GAAK,oBAAoB,wBAAwB,MAAM;AACrD,MAAAgD,EAAkBhD,EAAI,sBAAsB;AAAA,IAC9C,CAAC,GAEDA,GAAK,oBAAoB,oBAAoB,MAAM;AACjD,MAAAkD,EAAqBlD,EAAI,iBAAA,EAAmB,MAAM;AAAA,IACpD,CAAC;AAAA,EACH,IACC,CAACA,CAAG,CAAC,GAGN,gBAAAU;AAAA,IAACiD;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAASD;AAAA,MACT,WAAW,gBAAAhD,EAACkD,GAAA,EAAU,WAAU,cAAA,CAAc;AAAA,MAC9C,UAAW,CAACb,KAAkB,CAACE,KAAsBH;AAAA,MACpD,GAAG5B;AAAA,MAEH,UAAA6B,IAAkBH,KAAgB,aAAeD,KAAc;AAAA,IAAA;AAAA,EAAA;AAGtE,GAIMkB,KAA0C,CAAC,EAAE,UAAA/D,GAAU,WAAA4B,GAAW,SAAAmB,GAAS,GAAG3B,QAAY;AAC9F,QAAMtB,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAGhE,QAAMkE,IAAc,CAACvC,MAA2C;AAC9D,IAAI3B,EAAQ,QACVA,EAAQ,IAAI,cAAc,aAAa,OAAO,GAE9C,WAAW,MAAM;AACf,YAAMmE,IAAU,SAAS,cAAc,eAAenE,EAAQ,SAAS,IAAI,GAErEoE,IAAO;AAAA,UADE,SAAS,KAEf,SAAS;AAAA,UAChBD,EAAQ,SAAS;AAAA;AAEnB,MAAAE,EAAUD,CAAI,GACdpE,GAAS,KAAK,cAAc,aAAa,MAAS;AAAA,IACpD,CAAC,IAEHiD,IAAUtB,CAAC;AAAA,EACb;AAEA,2BACGgB,GAAA,EAAW,SAAQ,WAAU,WAAWZ,EAAG,iBAAiBD,CAAS,GAAG,SAASoC,GAAc,GAAG5C,GAChG,UAAApB,uBAAaoE,GAAA,EAAM,WAAU,WAAU,GAC1C;AAEJ,GAMMC,KAA8C,CAAC,EAAE,WAAAzC,GAAW,WAAA0C,GAAW,UAAAtE,GAAU,SAAAuE,GAAS,GAAGnD,QAAY;AAG7G,MAAI,CAFYxB,EAAM,WAAWD,CAAe;AAG9C,UAAM,IAAI,MAAM,gDAAgD;AAGlE,QAAM6E,IAAgB,MAAM;AAC1B,IAAAF,EAAA;AAAA,EACF;AAEA,SACE,gBAAA1D;AAAA,IAAC6B;AAAA,IAAA;AAAA,MACC,WAAWZ,EAAG,iBAAiB0C,KAAW,2BAA2B3C,CAAS;AAAA,MAC9E,SAAQ;AAAA,MACR,SAAS4C;AAAA,MACT,UAAUD;AAAA,MACT,GAAGnD;AAAA,MAEH,UAAApB,uBAAayE,GAAA,EAAQ,WAAW5C,EAAG,eAAe0C,KAAW,cAAc,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAGrF,GAMMG,KAA4C,CAAC,EAAE,UAAAC,GAAU,UAAA3E,GAAU,GAAGoB,QAMxE,gBAAAR,EAACiD,GAAA,EAAO,SAAQ,UAAS,SALN,MAAM;AACzB,EAAAc,EAAA;AACF,GAGkD,WAAW,gBAAA/D,EAACgE,GAAA,EAAS,WAAU,cAAA,CAAc,GAAK,GAAGxD,GAClG,UAAApB,GACH,GAYE6E,KAA4C,CAAC,EAAE,UAAA7E,GAAU,WAAA8E,GAAW,WAAAlD,GAAW,GAAGR,0BAEnF2D,GAAA,EAAS,GAAID,GAAW,gBAAgB,CAAA,GACvC,UAAA;AAAA,EAAA,gBAAAlE,EAACoE,GAAA,EAAgB,GAAIF,GAAW,gBAAgB,CAAA,GAC9C,UAAA,gBAAAlE,EAACqE,GAAA,EAAgB,WAAU,2BAAA,CAA2B,EAAA,CACxD;AAAA,EACA,gBAAArE,EAACsE,GAAA,EAAe,OAAM,OAAM,WAAWrD,EAAG,QAAQD,CAAS,GAAI,GAAGR,GAC/D,UAAApB,EAAA,CACH;AAAA,GACF;"}

package/dist/formmultiselect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"formmultiselect.es.js","sources":["../src/components/form-multi-select/FormMultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { MultiSelect, MultiSelectProps } from \"../multi-select/MultiSelect\";\r\n\r\ntype FormMultiSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    options: MultiSelectProps<string | number>[\"options\"];\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      multiSelectProps?: Omit<\r\n        React.ComponentProps<typeof MultiSelect>,\r\n        \"onValueChange\" | \"value\" | \"options\" | \"loading\" | \"loadingText\" | \"placeholder\" | \"disabled\"\r\n      >;\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n    };\r\n  };\r\n\r\nconst FormMultiSelect = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormMultiSelectProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    defaultValue,\r\n    disabled,\r\n    readOnly,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl>\r\n              <MultiSelect\r\n                aria-required={required}\r\n                options={options}\r\n                onValueChange={field.onChange}\r\n                onBlur={field.onBlur}\r\n                placeholder={placeholder}\r\n                value={field.value}\r\n                loading={loading}\r\n                loadingText={loadingText}\r\n                disabled={disabled || readOnly}\r\n                {...(slotProps?.multiSelectProps ?? {})}\r\n              />\r\n            </FormControl>\r\n\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormMultiSelect, type FormMultiSelectProps };\r\n"],"names":["FormMultiSelect","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","options","loading","loadingText","placeholder","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","MultiSelect","FormMessage"],"mappings":";;;AA6BA,MAAMA,IAAkB,CACtBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf;AAEJ,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAW,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAL;AAAA,UACAM,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EACC,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,iBAAeT;AAAA,YACf,SAAAL;AAAA,YACA,eAAeS,EAAM;AAAA,YACrB,QAAQA,EAAM;AAAA,YACd,aAAAN;AAAA,YACA,OAAOM,EAAM;AAAA,YACb,SAAAR;AAAA,YACA,aAAAC;AAAA,YACA,UAAUP,KAAYC;AAAA,YACrB,GAAIQ,GAAW,oBAAoB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEzC;AAAA,0BAECW,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"formmultiselect.es.js","sources":["../src/components/form-multi-select/FormMultiSelect.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { MultiSelect } from \"../multi-select/MultiSelect\";\r\n\r\ntype FormMultiSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<\r\n  ControllerProps<TFieldValues, TName>,\r\n  \"render\"\r\n> &\r\n  React.ComponentProps<typeof FormItem> & {\r\n    label: string;\r\n    loading?: boolean;\r\n    loadingText?: string;\r\n    options: React.ComponentPropsWithoutRef<typeof MultiSelect>[\"options\"];\r\n    placeholder?: string;\r\n    required?: boolean;\r\n    readOnly?: boolean;\r\n    slotProps?: {\r\n      multiSelectProps?: Omit<\r\n        React.ComponentProps<typeof MultiSelect>,\r\n        \"onValueChange\" | \"value\" | \"options\" | \"loading\" | \"loadingText\" | \"placeholder\" | \"disabled\"\r\n      >;\r\n      formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n      formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n    };\r\n  };\r\n\r\nconst FormMultiSelect = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(\r\n  props: FormMultiSelectProps<TFieldValues, TName>,\r\n) => {\r\n  const {\r\n    name,\r\n    control,\r\n    defaultValue,\r\n    disabled,\r\n    readOnly,\r\n    rules,\r\n    shouldUnregister,\r\n    label,\r\n    options,\r\n    loading,\r\n    loadingText,\r\n    placeholder,\r\n    slotProps,\r\n    required,\r\n    ...formItemProps\r\n  } = props;\r\n\r\n  return (\r\n    <FormField\r\n      control={control}\r\n      name={name}\r\n      defaultValue={defaultValue}\r\n      disabled={disabled}\r\n      rules={rules}\r\n      shouldUnregister={shouldUnregister}\r\n      render={({ field }) => {\r\n        return (\r\n          <FormItem {...formItemProps}>\r\n            <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n              {label}\r\n              {required && <span className=\"text-danger text-sm leading-4\">*</span>}\r\n            </FormLabel>\r\n            <FormControl>\r\n              <MultiSelect\r\n                aria-required={required}\r\n                options={options}\r\n                onValueChange={field.onChange}\r\n                onBlur={field.onBlur}\r\n                placeholder={placeholder}\r\n                value={field.value}\r\n                loading={loading}\r\n                loadingText={loadingText}\r\n                disabled={disabled || readOnly}\r\n                {...(slotProps?.multiSelectProps ?? {})}\r\n              />\r\n            </FormControl>\r\n\r\n            <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n          </FormItem>\r\n        );\r\n      }}\r\n    />\r\n  );\r\n};\r\nexport { FormMultiSelect, type FormMultiSelectProps };\r\n"],"names":["FormMultiSelect","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","options","loading","loadingText","placeholder","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","MultiSelect","FormMessage"],"mappings":";;;AA6BA,MAAMA,IAAkB,CACtBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf;AAEJ,SACE,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAf;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAW,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAL;AAAA,UACAM,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,IAAA,CAAC;AAAA,QAAA,GAChE;AAAA,0BACCM,GAAA,EACC,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,iBAAeT;AAAA,YACf,SAAAL;AAAA,YACA,eAAeS,EAAM;AAAA,YACrB,QAAQA,EAAM;AAAA,YACd,aAAAN;AAAA,YACA,OAAOM,EAAM;AAAA,YACb,SAAAR;AAAA,YACA,aAAAC;AAAA,YACA,UAAUP,KAAYC;AAAA,YACrB,GAAIQ,GAAW,oBAAoB,CAAA;AAAA,UAAC;AAAA,QAAA,GAEzC;AAAA,0BAECW,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/multiselect.es.js

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

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