@trsys-tech/matrix-library 0.4.7 → 0.4.8

package/dist/combobox.es.js

@@ -1,11 +1,11 @@
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import o, { useRef as R, useEffect as _ } from "react";
-import { ChevronDown as A, XMark as B, Check as O } from "@trsys-tech/matrix-icons";
+import o, { useRef as _, useEffect as A } from "react";
+import { ChevronDown as B, XMark as O, Check as T } from "@trsys-tech/matrix-icons";
 import { cn as v } from "./utils.es.js";
-import { Button as T } from "./button.es.js";
-import { Popover as G, PopoverTrigger as M, PopoverContent as X } from "./popover.es.js";
-import { Command as q, CommandInput as z, CommandList as H, CommandEmpty as J, CommandItem as h, CommandGroup as Q } from "./command.es.js";
-const re = ({
+import { Button as G } from "./button.es.js";
+import { Popover as M, PopoverTrigger as X, PopoverContent as q } from "./popover.es.js";
+import { Command as z, CommandInput as H, CommandList as J, CommandEmpty as Q, CommandItem as h, CommandGroup as U } from "./command.es.js";
+const ae = ({
   onValueChange: t,
   options: c,
   value: u,
@@ -20,36 +20,37 @@ const re = ({
   loadingText: N = "Loading...",
   emptyOptionsText: P = "No Items",
   showSearchInput: p = !0,
-  ...L
+  modalPopover: L,
+  ...D
 }) => {
-  const [m, l] = o.useState(!1), f = R(null), [r, i] = o.useState(u), D = o.useCallback(
+  const [m, l] = o.useState(!1), f = _(null), [r, i] = o.useState(u), E = o.useCallback(
     (e) => {
       e.key === "Enter" ? l(!0) : e.key === "Backspace" && !e.currentTarget.value && (i(r), t?.(r), s && l(!1));
     },
     [r, t, s]
-  ), E = o.useCallback(
+  ), S = o.useCallback(
     (e) => {
       i(e), t?.(e), s && l(!1);
     },
     [t, s]
-  ), S = o.useCallback(
+  ), j = o.useCallback(
     (e) => {
       e.stopPropagation(), t?.(void 0), i(void 0);
     },
     [t]
-  ), j = o.useCallback((e, F, K = [""]) => K.join("").toLocaleLowerCase().includes(F.toLocaleLowerCase()) ? 1 : 0, []), I = o.useCallback(
+  ), I = o.useCallback((e, K, R = [""]) => R.join("").toLocaleLowerCase().includes(K.toLocaleLowerCase()) ? 1 : 0, []), F = o.useCallback(
     (e) => {
       p || (e.preventDefault(), f.current?.focus());
     },
     [p]
   );
-  _(() => {
+  A(() => {
     i(u);
   }, [u]);
   const b = r === void 0 || r === "";
-  return /* @__PURE__ */ n(G, { open: m, onOpenChange: l, children: [
-    /* @__PURE__ */ a(M, { asChild: !0, children: /* @__PURE__ */ n(
-      T,
+  return /* @__PURE__ */ n(M, { open: m, onOpenChange: l, modal: L, children: [
+    /* @__PURE__ */ a(X, { asChild: !0, children: /* @__PURE__ */ n(
+      G,
       {
         variant: "text",
         role: "combobox",
@@ -64,50 +65,50 @@ const re = ({
         loading: d,
         disabled: w,
         endIcon: /* @__PURE__ */ a(
-          A,
+          B,
           {
             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"
           }
         ),
-        ...L,
+        ...D,
         children: [
           /* @__PURE__ */ a("span", { className: "text-start text-ellipsis whitespace-nowrap overflow-hidden flex-1 max-w-[calc(100%-24px)]", children: b ? d ? N : y : c.find((e) => e.value === r)?.label }),
           g && r !== void 0 && r !== null ? /* @__PURE__ */ a(
             "span",
             {
-              onClick: S,
+              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(B, {})
+              children: /* @__PURE__ */ a(O, {})
             }
           ) : null
         ]
       }
     ) }),
-    /* @__PURE__ */ a(X, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: I, children: /* @__PURE__ */ n(
-      q,
+    /* @__PURE__ */ a(q, { className: "w-auto p-0", align: "start", onEscapeKeyDown: () => l(!1), onOpenAutoFocus: F, children: /* @__PURE__ */ n(
+      z,
       {
         className: "w-[--radix-popper-anchor-width] focus-visible:outline-none",
-        filter: j,
+        filter: I,
         defaultValue: r != null ? String(r) : void 0,
         ref: f,
         children: [
-          p && /* @__PURE__ */ a(z, { placeholder: C, onKeyDown: D }),
-          /* @__PURE__ */ n(H, { children: [
-            !d && /* @__PURE__ */ a(J, { children: k }),
+          p && /* @__PURE__ */ a(H, { placeholder: C, onKeyDown: E }),
+          /* @__PURE__ */ n(J, { children: [
+            !d && /* @__PURE__ */ a(Q, { children: k }),
             !d && !c.length ? /* @__PURE__ */ a(h, { value: "8fdcaeb67c8ad943c80fe54c3b1059b700d9254389a38a4a1fc39a6eee7564623", disabled: !0, children: P }) : null,
-            /* @__PURE__ */ a(Q, { children: c.map((e) => /* @__PURE__ */ n(
+            /* @__PURE__ */ a(U, { children: c.map((e) => /* @__PURE__ */ n(
               h,
               {
                 value: e.value,
                 keywords: [e.label],
-                onSelect: E,
+                onSelect: S,
                 children: [
                   e.label,
-                  /* @__PURE__ */ a(O, { className: v("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
+                  /* @__PURE__ */ a(T, { className: v("ml-auto", r === e.value ? "opacity-100" : "opacity-0") })
                 ]
               },
               String(e.value)
@@ -119,6 +120,6 @@ const re = ({
   ] });
 };
 export {
-  re as Combobox
+  ae 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, 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 }[];\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  ...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  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>\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-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 [&_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)]\">\r\n            {!showPlaceholder ? options.find(option => option.value === currentSelectedValue)?.label : loading ? loadingText : placeholder}\r\n          </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={[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","props","isPopoverOpen","setIsPopoverOpen","React","commandRef","useRef","currentSelectedValue","setCurrentSelectedValue","handleInputKeyDown","event","handleSelect","currentValue","handleClear","handleFilter","search","keywords","handleOpenAutoFocus","useEffect","showPlaceholder","jsxs","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","option","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, { useEffect, 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 }[];\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  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-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 [&_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)]\">\r\n            {!showPlaceholder ? options.find(option => option.value === currentSelectedValue)?.label : loading ? loadingText : placeholder}\r\n          </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={[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","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ChevronDown","option","XMark","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandItem","CommandGroup","Check"],"mappings":"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"}

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

@@ -76,6 +76,6 @@ type ComboboxProps<T extends string | number> = React.HTMLAttributes<HTMLButtonE
      */
     clearable?: boolean;
 };
-declare const Combobox: <T extends string | number>({ onValueChange, options, value, className, clearable, closeOnSelect, loading, disabled, placeholder, searchText, noResultsText, loadingText, emptyOptionsText, showSearchInput, ...props }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Combobox: <T extends string | number>({ onValueChange, options, value, className, clearable, closeOnSelect, loading, disabled, placeholder, searchText, noResultsText, loadingText, emptyOptionsText, showSearchInput, modalPopover, ...props }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export { Combobox, type ComboboxProps };
 //# sourceMappingURL=Combobox.d.ts.map

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,KAA4B,MAAM,OAAO,CAAC;AAQjD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,EAAE,CAAC;IAEvC;;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,+LAgBxC,aAAa,CAAC,CAAC,CAAC,4CAmIlB,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,KAA4B,MAAM,OAAO,CAAC;AAQjD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACxF;;;;;OAKG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAA;KAAE,EAAE,CAAC;IAEvC;;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,4CAmIlB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,CAAC"}

package/package.json

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