@trsys-tech/matrix-library 1.0.0-canary.6 → 1.0.0-canary.9

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: \"mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50\",\r\n      secondary: \"mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80\",\r\n      destructive: \"mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80\",\r\n      inverted: \"mtx-inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   *\r\n   * *Important: Use a constant Array*\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: T;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display in the search input.\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n   * Optional, defaults to false.\r\n   */\r\n  addOptionOnSearchNotFound?: boolean;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n  {\r\n    options: _options,\r\n    onValueChange,\r\n    value,\r\n    variant,\r\n    disabled,\r\n    defaultValue = [],\r\n    placeholder = \"Select options\",\r\n    maxCount = 3,\r\n    modalPopover = false,\r\n    // asChild = false,\r\n    className,\r\n    moreText = \"more\",\r\n    clearText = \"Clear\",\r\n    closeText = \"Close\",\r\n    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    showSelectAll = true,\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [searchValue, setSearchValue] = React.useState(\"\");\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n  const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n    new Map(_options.map(option => [option.value, option])),\r\n  );\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n        setIsPopoverOpen(true);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        if (!event.currentTarget.value) return;\r\n        const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n        if (options.get(newOption.value) === undefined) {\r\n          setOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\r\n          onValueChange(newSelectedValues);\r\n          setSearchValue(\"\");\r\n        }\r\n      } else if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setOptions(new Map(_options.map(option => [option.value, option])));\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n  React.useEffect(() => {\r\n    setOptions(new Map(_options.map(option => [option.value, option])));\r\n  }, [_options]);\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (containerRef.current) {\r\n      if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n        setIsWrapped(true);\r\n      } else {\r\n        setIsWrapped(false);\r\n      }\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant=\"text\"\r\n          loading={loading}\r\n          disabled={disabled}\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n            isWrapped && \"mtx-h-auto\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n          endIcon={\r\n            <ChevronDown\r\n              role=\"button\"\r\n              aria-label=\"Expand dropdown\"\r\n              className=\"!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"mtx-flex mtx-justify-between mtx-items-center mtx-w-full\">\r\n                <div className=\"mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-2\" ref={containerRef}>\r\n                  {selectedValues.slice(0, maxCount).map(value => {\r\n                    const option = options.get(value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"mtx-h-4 mtx-w-4 mtx-cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"mtx-h-4 mtx-w-4 mtx-mr-2\" />}\r\n                        {option?.label}\r\n                      </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=\"mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"mtx-flex mtx-items-center mtx-justify-between mtx-gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-cursor-pointer\"\r\n                    onClick={event => {\r\n                      event.stopPropagation();\r\n                      handleClear();\r\n                    }}\r\n                    aria-label=\"Clear\"\r\n                  />\r\n                  <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-5 mtx-h-full\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <>{loading && loadingText ? loadingText : placeholder}</>\r\n            )}\r\n          </>\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"mtx-cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                      selectedValues.length === options.size ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\r\n              {Array.from(options.values()).map(option => {\r\n                const isSelected = selectedValues.includes(option.value);\r\n                return (\r\n                  <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"mtx-cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                        isSelected ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            <CommandSeparator />\r\n            <CommandGroup>\r\n              <div className=\"mtx-flex mtx-items-center mtx-justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-6 mtx-h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer mtx-max-w-full\">\r\n                  {closeText}\r\n                </CommandItem>\r\n              </div>\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","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: \"mtx-flex mtx-gap-1 mtx-items-center mtx-py-0.5 mtx-px-2 mtx-rounded-xl\",\r\n  variants: {\r\n    variant: {\r\n      default: \"mtx-border-none mtx-shadow-none mtx-bg-primary-50 mtx-text-primary hover:mtx-bg-primary-50\",\r\n      secondary: \"mtx-border-foreground/10 mtx-bg-secondary mtx-text-secondary-foreground hover:mtx-bg-secondary/80\",\r\n      destructive: \"mtx-border-transparent mtx-bg-destructive mtx-text-destructive-foreground hover:mtx-bg-destructive/80\",\r\n      inverted: \"mtx-inverted\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"default\",\r\n  },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps<T extends string | number>\r\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"value\" | \"defaultValue\">,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   *\r\n   * *Important: Use a constant Array*\r\n   */\r\n  options: {\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: T;\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n  }[];\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange: (value: T[]) => void;\r\n\r\n  /**\r\n   * selected values in the multi-select component.\r\n   */\r\n  value?: T[];\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: T[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Text to display on the close button when the multi-select component is open.\r\n   */\r\n  closeText?: string;\r\n\r\n  /**\r\n   * Whether to show the select all option or not\r\n   */\r\n  showSelectAll?: boolean;\r\n\r\n  /**\r\n   * Text to display on the select all button when the multi-select component is open.\r\n   */\r\n  selectAllText?: string;\r\n\r\n  /**\r\n   * Text to display in the search input.\r\n   */\r\n  searchText?: string;\r\n\r\n  /**\r\n   * If true, a new option will be added when the user submits a search query if it doesn't already exist.\r\n   * Optional, defaults to false.\r\n   */\r\n  addOptionOnSearchNotFound?: boolean;\r\n\r\n  /**\r\n   * Text to display on the clear button when the multi-select component is open.\r\n   */\r\n  clearText?: string;\r\n\r\n  /**\r\n   * Text to display on the more button when the multi-select component is open.\r\n   */\r\n  moreText?: string;\r\n\r\n  /**\r\n   * Text to display when no results are found in the search input.\r\n   */\r\n  noResultsText?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be in a loading state.\r\n   */\r\n  loading?: boolean;\r\n\r\n  /**\r\n   * Text to display when the multi-select component is in a loading state.\r\n   */\r\n  loadingText?: string;\r\n}\r\n\r\nconst MultiSelect = <T extends string | number>(\r\n  {\r\n    options: _options,\r\n    onValueChange,\r\n    value,\r\n    variant,\r\n    disabled,\r\n    defaultValue = [],\r\n    placeholder = \"Select options\",\r\n    maxCount = 3,\r\n    modalPopover = false,\r\n    // asChild = false,\r\n    className,\r\n    moreText = \"more\",\r\n    clearText = \"Clear\",\r\n    closeText = \"Close\",\r\n    selectAllText = \"Select All\",\r\n    noResultsText = \"No results found.\",\r\n    searchText = \"Search...\",\r\n    addOptionOnSearchNotFound = false,\r\n    showSelectAll = true,\r\n    loading,\r\n    loadingText = \"Loading...\",\r\n    ...props\r\n  }: MultiSelectProps<T>,\r\n  ref: React.ForwardedRef<HTMLButtonElement>,\r\n) => {\r\n  const isControlled = value !== undefined;\r\n  const [internalSelectedValues, setInternalSelectedValues] = React.useState<T[]>(defaultValue);\r\n  const selectedValues = isControlled ? value : internalSelectedValues;\r\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n  const [searchValue, setSearchValue] = React.useState(\"\");\r\n  const [isWrapped, setIsWrapped] = React.useState(false);\r\n  const [options, setOptions] = React.useState<Map<T, MultiSelectProps<T>[\"options\"][number]>>(\r\n    new Map(_options.map(option => [option.value, option])),\r\n  );\r\n\r\n  const handleInputKeyDown = React.useCallback(\r\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (event.key === \"Enter\" && addOptionOnSearchNotFound) {\r\n        setIsPopoverOpen(true);\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        if (!event.currentTarget.value) return;\r\n        const newOption = { value: event.currentTarget.value as T, label: event.currentTarget.value };\r\n        if (options.get(newOption.value) === undefined) {\r\n          setOptions(prev => {\r\n            return new Map(prev).set(newOption.value, newOption);\r\n          });\r\n          const newSelectedValues = [...selectedValues, newOption.value];\r\n          if (!isControlled) {\r\n            setInternalSelectedValues(newSelectedValues);\r\n          }\r\n          onValueChange(newSelectedValues);\r\n          setSearchValue(\"\");\r\n        }\r\n      } else if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        if (!isControlled) {\r\n          setInternalSelectedValues(newSelectedValues);\r\n        }\r\n        onValueChange(newSelectedValues);\r\n      }\r\n    },\r\n    [addOptionOnSearchNotFound, onValueChange, options, selectedValues, isControlled],\r\n  );\r\n\r\n  const toggleOption = React.useCallback(\r\n    (option: T) => {\r\n      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter(value => value !== option) : [...selectedValues, option];\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(newSelectedValues);\r\n      }\r\n      onValueChange(newSelectedValues);\r\n    },\r\n    [onValueChange, selectedValues, isControlled],\r\n  );\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    if (!isControlled) {\r\n      setInternalSelectedValues([]);\r\n    }\r\n    onValueChange([]);\r\n    if (addOptionOnSearchNotFound) {\r\n      setOptions(new Map(_options.map(option => [option.value, option])));\r\n    }\r\n  }, [onValueChange, addOptionOnSearchNotFound, _options, isControlled]);\r\n\r\n  const handleTogglePopover = React.useCallback(() => {\r\n    setIsPopoverOpen(prev => !prev);\r\n  }, []);\r\n\r\n  const clearExtraOptions = React.useCallback(() => {\r\n    const newSelectedValues = selectedValues.slice(0, maxCount);\r\n    if (!isControlled) {\r\n      setInternalSelectedValues(newSelectedValues);\r\n    }\r\n    onValueChange(newSelectedValues);\r\n  }, [maxCount, selectedValues, onValueChange, isControlled]);\r\n\r\n  const toggleAll = React.useCallback(() => {\r\n    if (selectedValues.length === options.size) {\r\n      handleClear();\r\n    } else {\r\n      const allValues = Array.from(options.keys());\r\n      if (!isControlled) {\r\n        setInternalSelectedValues(allValues);\r\n      }\r\n      onValueChange(allValues);\r\n    }\r\n  }, [handleClear, onValueChange, options, selectedValues.length, isControlled]);\r\n\r\n  React.useEffect(() => {\r\n    setOptions(new Map(_options.map(option => [option.value, option])));\r\n  }, [_options]);\r\n\r\n  React.useLayoutEffect(() => {\r\n    if (containerRef.current) {\r\n      if ((containerRef?.current?.firstChild as HTMLElement)?.offsetTop < (containerRef?.current?.lastChild as HTMLElement)?.offsetTop) {\r\n        setIsWrapped(true);\r\n      } else {\r\n        setIsWrapped(false);\r\n      }\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          ref={ref}\r\n          variant=\"text\"\r\n          loading={loading}\r\n          disabled={disabled}\r\n          type=\"button\"\r\n          {...props}\r\n          onClick={handleTogglePopover}\r\n          className={cn(\r\n            \"mtx-group mtx-flex mtx-max-h-14 mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-px-3 mtx-py-1.5 mtx-text-sm mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n            isWrapped && \"mtx-h-auto\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selectedValues.length ? \"\" : undefined}\r\n          endIcon={\r\n            <ChevronDown\r\n              role=\"button\"\r\n              aria-label=\"Expand dropdown\"\r\n              className=\"!mtx-h-4.5 !mtx-w-4.5 mtx-cursor-pointer group-data-[state=open]:mtx-rotate-180 mtx-transition-transform\"\r\n            />\r\n          }\r\n        >\r\n          <>\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"mtx-flex mtx-justify-between mtx-items-center mtx-w-full\">\r\n                <div className=\"mtx-flex mtx-flex-wrap mtx-items-center mtx-gap-2\" ref={containerRef}>\r\n                  {selectedValues.slice(0, maxCount).map(value => {\r\n                    const option = options.get(value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge key={value} className={cn(multiSelectVariants({ variant }), { \"text-gray-400 bg-gray-200\": disabled || loading })}>\r\n                        <XMark\r\n                          className=\"mtx-h-4 mtx-w-4 mtx-cursor-pointer\"\r\n                          onClick={event => {\r\n                            event.stopPropagation();\r\n                            toggleOption(value);\r\n                          }}\r\n                        />\r\n                        {IconComponent && <IconComponent className=\"mtx-h-4 mtx-w-4 mtx-mr-2\" />}\r\n                        {option?.label}\r\n                      </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=\"mtx-ml-2 mtx-h-4.5 mtx-w-4.5 mtx-cursor-pointer\"\r\n                        onClick={event => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                  {loading && loadingText ? loadingText : null}\r\n                </div>\r\n                <div className=\"mtx-flex mtx-items-center mtx-justify-between mtx-gap-1\">\r\n                  <XMark\r\n                    role=\"button\"\r\n                    className=\"mtx-h-5 mtx-w-5 mtx-text-muted-foreground mtx-cursor-pointer\"\r\n                    onClick={event => {\r\n                      event.stopPropagation();\r\n                      handleClear();\r\n                    }}\r\n                    aria-label=\"Clear\"\r\n                  />\r\n                  <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-5 mtx-h-full\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <>{loading && loadingText ? loadingText : placeholder}</>\r\n            )}\r\n          </>\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\" onEscapeKeyDown={() => setIsPopoverOpen(false)}>\r\n        <Command className=\"mtx-w-[--radix-popper-anchor-width] mtx-max-h-[--radix-popper-available-height]\">\r\n          <CommandInput placeholder={searchText} onKeyDown={handleInputKeyDown} value={searchValue} onValueChange={setSearchValue} />\r\n          <CommandList className=\"\">\r\n            <CommandEmpty>{noResultsText}</CommandEmpty>\r\n            <CommandGroup>\r\n              {showSelectAll && (\r\n                <CommandItem key=\"all\" onSelect={toggleAll} className=\"mtx-cursor-pointer\">\r\n                  <div\r\n                    className={cn(\r\n                      \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                      selectedValues.length === options.size ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                    )}\r\n                  >\r\n                    <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                  </div>\r\n                  <span>({selectAllText})</span>\r\n                </CommandItem>\r\n              )}\r\n              {Array.from(options.values()).map(option => {\r\n                const isSelected = selectedValues.includes(option.value);\r\n                return (\r\n                  <CommandItem key={option.value} onSelect={() => toggleOption(option.value)} className=\"mtx-cursor-pointer\">\r\n                    <div\r\n                      className={cn(\r\n                        \"mtx-mr-2 mtx-flex mtx-h-4.5 mtx-w-4.5 mtx-items-center mtx-justify-center mtx-rounded-sm mtx-border mtx-border-primary\",\r\n                        isSelected ? \"mtx-bg-primary mtx-text-primary-foreground\" : \"mtx-opacity-50 [&_svg]:mtx-invisible\",\r\n                      )}\r\n                    >\r\n                      <Check className=\"mtx-h-4.5 mtx-w-4.5\" />\r\n                    </div>\r\n                    {option.icon && <option.icon className=\"mtx-mr-2 mtx-h-4.5 mtx-w-4.5 mtx-text-muted-foreground\" />}\r\n                    <span>{option.label}</span>\r\n                  </CommandItem>\r\n                );\r\n              })}\r\n            </CommandGroup>\r\n            <CommandSeparator />\r\n            <CommandGroup>\r\n              <div className=\"mtx-flex mtx-items-center mtx-justify-between\">\r\n                {selectedValues.length > 0 && (\r\n                  <>\r\n                    <CommandItem onSelect={handleClear} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer\">\r\n                      {clearText}\r\n                    </CommandItem>\r\n                    <Separator orientation=\"vertical\" className=\"mtx-flex mtx-min-h-6 mtx-h-full\" />\r\n                  </>\r\n                )}\r\n                <CommandItem onSelect={() => setIsPopoverOpen(false)} className=\"mtx-flex-1 mtx-justify-center mtx-cursor-pointer mtx-max-w-full\">\r\n                  {closeText}\r\n                </CommandItem>\r\n              </div>\r\n            </CommandGroup>\r\n          </CommandList>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nconst ForwardedMultiSelect = React.forwardRef(MultiSelect) as (<T extends string | number>(\r\n  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLButtonElement> },\r\n) => React.ReactElement) & { displayName?: string };\r\n\r\nForwardedMultiSelect.displayName = \"MultiSelect\";\r\n\r\nexport { ForwardedMultiSelect as MultiSelect, type MultiSelectProps };\r\n"],"names":["multiSelectVariants","tv","MultiSelect","_options","onValueChange","value","variant","disabled","defaultValue","placeholder","maxCount","modalPopover","className","moreText","clearText","closeText","selectAllText","noResultsText","searchText","addOptionOnSearchNotFound","showSelectAll","loading","loadingText","props","ref","isControlled","internalSelectedValues","setInternalSelectedValues","React","selectedValues","isPopoverOpen","setIsPopoverOpen","containerRef","searchValue","setSearchValue","isWrapped","setIsWrapped","options","setOptions","option","handleInputKeyDown","event","newOption","prev","newSelectedValues","toggleOption","handleClear","handleTogglePopover","clearExtraOptions","toggleAll","allValues","Popover","jsx","PopoverTrigger","Button","cn","ChevronDown","jsxs","IconComponent","Badge","XMark","CircleXmark","Separator","Fragment","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","isSelected","CommandSeparator","ForwardedMultiSelect"],"mappings":";;;;;;;;;;AAiBA,MAAMA,IAAsBC,GAAG;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC,GAwHKC,KAAc,CAClB;AAAA,EACE,SAASC;AAAA,EACT,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA;AAAA,EAEf,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,2BAAAC,IAA4B;AAAA,EAC5B,eAAAC,IAAgB;AAAA,EAChB,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAepB,MAAU,QACzB,CAACqB,GAAwBC,CAAyB,IAAIC,EAAM,SAAcpB,CAAY,GACtFqB,IAAiBJ,IAAepB,IAAQqB,GACxC,CAACI,GAAeC,CAAgB,IAAIH,EAAM,SAAS,EAAK,GACxDI,IAAeJ,EAAM,OAAuB,IAAI,GAChD,CAACK,GAAaC,CAAc,IAAIN,EAAM,SAAS,EAAE,GACjD,CAACO,GAAWC,CAAY,IAAIR,EAAM,SAAS,EAAK,GAChD,CAACS,GAASC,CAAU,IAAIV,EAAM;AAAA,IAClC,IAAI,IAAIzB,EAAS,IAAI,CAAAoC,MAAU,CAACA,EAAO,OAAOA,CAAM,CAAC,CAAC;AAAA,EAAA,GAGlDC,IAAqBZ,EAAM;AAAA,IAC/B,CAACa,MAAiD;AAChD,UAAIA,EAAM,QAAQ,WAAWtB,GAA2B;AAItD,YAHAY,EAAiB,EAAI,GACrBU,EAAM,eAAA,GACNA,EAAM,gBAAA,GACF,CAACA,EAAM,cAAc,MAAO;AAChC,cAAMC,IAAY,EAAE,OAAOD,EAAM,cAAc,OAAY,OAAOA,EAAM,cAAc,MAAA;AACtF,YAAIJ,EAAQ,IAAIK,EAAU,KAAK,MAAM,QAAW;AAC9C,UAAAJ,EAAW,CAAAK,MACF,IAAI,IAAIA,CAAI,EAAE,IAAID,EAAU,OAAOA,CAAS,CACpD;AACD,gBAAME,IAAoB,CAAC,GAAGf,GAAgBa,EAAU,KAAK;AAC7D,UAAKjB,KACHE,EAA0BiB,CAAiB,GAE7CxC,EAAcwC,CAAiB,GAC/BV,EAAe,EAAE;AAAA,QACnB;AAAA,MACF,WAAWO,EAAM,QAAQ;AACvB,QAAAV,EAAiB,EAAI;AAAA,eACZU,EAAM,QAAQ,eAAe,CAACA,EAAM,cAAc,OAAO;AAClE,cAAMG,IAAoB,CAAC,GAAGf,CAAc;AAC5C,QAAAe,EAAkB,IAAA,GACbnB,KACHE,EAA0BiB,CAAiB,GAE7CxC,EAAcwC,CAAiB;AAAA,MACjC;AAAA,IACF;AAAA,IACA,CAACzB,GAA2Bf,GAAeiC,GAASR,GAAgBJ,CAAY;AAAA,EAAA,GAG5EoB,IAAejB,EAAM;AAAA,IACzB,CAACW,MAAc;AACb,YAAMK,IAAoBf,EAAe,SAASU,CAAM,IAAIV,EAAe,OAAO,CAAAxB,MAASA,MAAUkC,CAAM,IAAI,CAAC,GAAGV,GAAgBU,CAAM;AACzI,MAAKd,KACHE,EAA0BiB,CAAiB,GAE7CxC,EAAcwC,CAAiB;AAAA,IACjC;AAAA,IACA,CAACxC,GAAeyB,GAAgBJ,CAAY;AAAA,EAAA,GAGxCqB,IAAclB,EAAM,YAAY,MAAM;AAC1C,IAAKH,KACHE,EAA0B,CAAA,CAAE,GAE9BvB,EAAc,CAAA,CAAE,GACZe,KACFmB,EAAW,IAAI,IAAInC,EAAS,IAAI,CAAAoC,MAAU,CAACA,EAAO,OAAOA,CAAM,CAAC,CAAC,CAAC;AAAA,EAEtE,GAAG,CAACnC,GAAee,GAA2BhB,GAAUsB,CAAY,CAAC,GAE/DsB,KAAsBnB,EAAM,YAAY,MAAM;AAClD,IAAAG,EAAiB,CAAAY,MAAQ,CAACA,CAAI;AAAA,EAChC,GAAG,CAAA,CAAE,GAECK,KAAoBpB,EAAM,YAAY,MAAM;AAChD,UAAMgB,IAAoBf,EAAe,MAAM,GAAGnB,CAAQ;AAC1D,IAAKe,KACHE,EAA0BiB,CAAiB,GAE7CxC,EAAcwC,CAAiB;AAAA,EACjC,GAAG,CAAClC,GAAUmB,GAAgBzB,GAAeqB,CAAY,CAAC,GAEpDwB,KAAYrB,EAAM,YAAY,MAAM;AACxC,QAAIC,EAAe,WAAWQ,EAAQ;AACpC,MAAAS,EAAA;AAAA,SACK;AACL,YAAMI,IAAY,MAAM,KAAKb,EAAQ,MAAM;AAC3C,MAAKZ,KACHE,EAA0BuB,CAAS,GAErC9C,EAAc8C,CAAS;AAAA,IACzB;AAAA,EACF,GAAG,CAACJ,GAAa1C,GAAeiC,GAASR,EAAe,QAAQJ,CAAY,CAAC;AAE7E,SAAAG,EAAM,UAAU,MAAM;AACpB,IAAAU,EAAW,IAAI,IAAInC,EAAS,IAAI,CAAAoC,MAAU,CAACA,EAAO,OAAOA,CAAM,CAAC,CAAC,CAAC;AAAA,EACpE,GAAG,CAACpC,CAAQ,CAAC,GAEbyB,EAAM,gBAAgB,MAAM;AAC1B,IAAII,EAAa,YACVA,GAAc,SAAS,YAA4B,YAAaA,GAAc,SAAS,WAA2B,YACrHI,EAAa,EAAI,IAEjBA,EAAa,EAAK;AAAA,EAGxB,GAAG,CAACP,CAAc,CAAC,qBAGhBsB,IAAA,EAAQ,MAAMrB,GAAe,cAAcC,GAAkB,OAAOpB,GACnE,UAAA;AAAA,IAAA,gBAAAyC,EAACC,IAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAA9B;AAAA,QACA,SAAQ;AAAA,QACR,SAAAH;AAAA,QACA,UAAAd;AAAA,QACA,MAAK;AAAA,QACJ,GAAGgB;AAAA,QACJ,SAASwB;AAAA,QACT,WAAWQ;AAAA,UACT;AAAA,UACApB,KAAa;AAAA,UACbvB;AAAA,QAAA;AAAA,QAEF,oBAAmBiB,EAAe,SAAc,SAAL;AAAA,QAC3C,SACE,gBAAAuB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,iCACG,UAAA3B,EAAe,SAAS,IACvB,gBAAA4B,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qDAAoD,KAAKzB,GACrE,UAAA;AAAA,YAAAH,EAAe,MAAM,GAAGnB,CAAQ,EAAE,IAAI,CAAAL,MAAS;AAC9C,oBAAMkC,IAASF,EAAQ,IAAIhC,CAAK,GAC1BqD,IAAgBnB,GAAQ;AAC9B,qBACE,gBAAAkB,EAACE,GAAA,EAAkB,WAAWJ,EAAGvD,EAAoB,EAAE,SAAAM,EAAA,CAAS,GAAG,EAAE,6BAA6BC,KAAYc,EAAA,CAAS,GACrH,UAAA;AAAA,gBAAA,gBAAA+B;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAS,CAAAnB,MAAS;AAChB,sBAAAA,EAAM,gBAAA,GACNI,EAAaxC,CAAK;AAAA,oBACpB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEDqD,KAAiB,gBAAAN,EAACM,GAAA,EAAc,WAAU,2BAAA,CAA2B;AAAA,gBACrEnB,GAAQ;AAAA,cAAA,EAAA,GATClC,CAUZ;AAAA,YAEJ,CAAC;AAAA,YACAwB,EAAe,SAASnB,KACvB,gBAAA+C,EAACE,GAAA,EAAM,WAAWJ,EAAGvD,EAAoB,EAAE,SAAAM,GAAS,CAAC,GAClD,UAAA;AAAA,cAAA,KAAKuB,EAAe,SAASnB,CAAQ,IAAIG,CAAQ;AAAA,cAClD,gBAAAuC;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,SAAS,CAAApB,MAAS;AAChB,oBAAAA,EAAM,gBAAA,GACNO,GAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF,GACF;AAAA,YAED3B,KAAWC,IAAcA,IAAc;AAAA,UAAA,GAC1C;AAAA,UACA,gBAAAmC,EAAC,OAAA,EAAI,WAAU,2DACb,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,CAAAnB,MAAS;AAChB,kBAAAA,EAAM,gBAAA,GACNK,EAAA;AAAA,gBACF;AAAA,gBACA,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,YAEb,gBAAAM,EAACU,GAAA,EAAU,aAAY,YAAW,WAAU,kCAAA,CAAkC;AAAA,UAAA,EAAA,CAChF;AAAA,QAAA,GACF,IAEA,gBAAAV,EAAAW,GAAA,EAAG,UAAA1C,KAAWC,IAAcA,IAAcb,GAAY,EAAA,CAE1D;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAA2C,EAACY,IAAA,EAAe,WAAU,sBAAqB,OAAM,SAAQ,iBAAiB,MAAMjC,EAAiB,EAAK,GACxG,UAAA,gBAAA0B,EAACQ,IAAA,EAAQ,WAAU,mFACjB,UAAA;AAAA,MAAA,gBAAAb,EAACc,IAAA,EAAa,aAAahD,GAAY,WAAWsB,GAAoB,OAAOP,GAAa,eAAeC,EAAA,CAAgB;AAAA,MACzH,gBAAAuB,EAACU,IAAA,EAAY,WAAU,IACrB,UAAA;AAAA,QAAA,gBAAAf,EAACgB,MAAc,UAAAnD,EAAA,CAAc;AAAA,0BAC5BoD,GAAA,EACE,UAAA;AAAA,UAAAjD,KACC,gBAAAqC,EAACa,GAAA,EAAsB,UAAUrB,IAAW,WAAU,sBACpD,UAAA;AAAA,YAAA,gBAAAG;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWG;AAAA,kBACT;AAAA,kBACA1B,EAAe,WAAWQ,EAAQ,OAAO,+CAA+C;AAAA,gBAAA;AAAA,gBAG1F,UAAA,gBAAAe,EAACmB,GAAA,EAAM,WAAU,sBAAA,CAAsB;AAAA,cAAA;AAAA,YAAA;AAAA,8BAExC,QAAA,EAAK,UAAA;AAAA,cAAA;AAAA,cAAEvD;AAAA,cAAc;AAAA,YAAA,EAAA,CAAC;AAAA,UAAA,EAAA,GATR,KAUjB;AAAA,UAED,MAAM,KAAKqB,EAAQ,QAAQ,EAAE,IAAI,CAAAE,MAAU;AAC1C,kBAAMiC,IAAa3C,EAAe,SAASU,EAAO,KAAK;AACvD,mBACE,gBAAAkB,EAACa,KAA+B,UAAU,MAAMzB,EAAaN,EAAO,KAAK,GAAG,WAAU,sBACpF,UAAA;AAAA,cAAA,gBAAAa;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWG;AAAA,oBACT;AAAA,oBACAiB,IAAa,+CAA+C;AAAA,kBAAA;AAAA,kBAG9D,UAAA,gBAAApB,EAACmB,GAAA,EAAM,WAAU,sBAAA,CAAsB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAExChC,EAAO,QAAQ,gBAAAa,EAACb,EAAO,MAAP,EAAY,WAAU,0DAAyD;AAAA,cAChG,gBAAAa,EAAC,QAAA,EAAM,UAAAb,EAAO,MAAA,CAAM;AAAA,YAAA,EAAA,GAVJA,EAAO,KAWzB;AAAA,UAEJ,CAAC;AAAA,QAAA,GACH;AAAA,0BACCkC,IAAA,EAAiB;AAAA,QAClB,gBAAArB,EAACiB,GAAA,EACC,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,iDACZ,UAAA;AAAA,UAAA5B,EAAe,SAAS,KACvB,gBAAA4B,EAAAM,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAX,EAACkB,GAAA,EAAY,UAAUxB,GAAa,WAAU,oDAC3C,UAAAhC,GACH;AAAA,YACA,gBAAAsC,EAACU,GAAA,EAAU,aAAY,YAAW,WAAU,kCAAA,CAAkC;AAAA,UAAA,GAChF;AAAA,UAEF,gBAAAV,EAACkB,KAAY,UAAU,MAAMvC,EAAiB,EAAK,GAAG,WAAU,mEAC7D,UAAAhB,EAAA,CACH;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,GAEM2D,KAAuB9C,EAAM,WAAW1B,EAAW;AAIzDwE,GAAqB,cAAc;"}

package/dist/timepickercontent.es.js

@@ -1,8 +1,8 @@
 import { jsxs as N, jsx as m } from "react/jsx-runtime";
 import { useState as S, useRef as i, useEffect as g } from "react";
 import { cn as c } from "./utils.es.js";
-const w = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (/* @__PURE__ */ new Date()).getMinutes(), ampm: (/* @__PURE__ */ new Date()).getHours() < 12 ? "AM" : "PM" }), k = ({ isOpen: l, time: s, onTimeChange: u, slotsProps: f }) => {
-  const [r, x] = S(s ?? w()), e = i(r), d = i(null), h = i(null), o = 32, n = 8, b = (t) => {
+const b = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (/* @__PURE__ */ new Date()).getMinutes(), ampm: (/* @__PURE__ */ new Date()).getHours() < 12 ? "AM" : "PM" }), k = ({ isOpen: l, time: s, onTimeChange: u, slotsProps: f }) => {
+  const [r, x] = S(s ?? b()), e = i(r), d = i(null), h = i(null), o = 32, n = 8, w = (t) => {
     d?.current?.scrollTo({
       top: t * (o + n),
       behavior: "smooth"
@@ -20,10 +20,10 @@ const w = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (
     e.current = { ...r, ampm: t }, x(e.current), u(e.current);
   };
   return g(() => {
-    l && x(s ?? w());
+    l && x(s ?? b());
   }, [l, s]), g(() => {
     l && setTimeout(() => {
-      b(e.current.hour - 1), y(e.current.minute);
+      w(e.current.hour - 1), y(e.current.minute);
     });
   }, [l]), /* @__PURE__ */ N(
     "div",
@@ -66,6 +66,7 @@ const w = () => ({ hour: (/* @__PURE__ */ new Date()).getHours() % 12, minute: (
               t === r.ampm && "mtx-bg-secondary"
             ),
             onClick: () => M(t),
+            type: "button",
             children: t
           },
           t

package/dist/timepickercontent.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype Time = { hour: number; minute: number; ampm: \"AM\" | \"PM\" };\r\n\r\ntype TimePickerContentProps = {\r\n  time: Time | undefined;\r\n  isOpen: boolean;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n  return { hour: new Date().getHours() % 12, minute: new Date().getMinutes(), ampm: new Date().getHours() < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, onTimeChange, slotsProps }) => {\r\n  const [selectedtime, setSelectedTime] = useState<Time>(time ?? getNow());\r\n  const selectedTimeRef = useRef<Time>(selectedtime);\r\n\r\n  const hourRef = useRef<HTMLDivElement>(null);\r\n  const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n  const itemHeight = 32; // Assuming each item height is 40px\r\n  const marginBetweenItems = 8; // Assuming margin between each item is 8px\r\n\r\n  // Function to scroll to a specific hour\r\n  const scrollToHour = (index: number) => {\r\n    hourRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  // Function to scroll to a specific minute\r\n  const scrollToMinute = (index: number) => {\r\n    minuteRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const handleSethour = (hour: number) => {\r\n    selectedTimeRef.current = { ...selectedtime, hour };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  const handleSetMinute = (minute: number) => {\r\n    selectedTimeRef.current = { ...selectedtime, minute };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n    selectedTimeRef.current = { ...selectedtime, ampm };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      setSelectedTime(time ?? getNow());\r\n    }\r\n  }, [isOpen, time]);\r\n\r\n  useEffect(() => {\r\n    // Center the selected hour/minute on mount\r\n    if (isOpen) {\r\n      setTimeout(() => {\r\n        scrollToHour(selectedTimeRef.current.hour - 1);\r\n        scrollToMinute(selectedTimeRef.current.minute);\r\n      });\r\n    }\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <div\r\n      {...(slotsProps?.content ?? {})}\r\n      className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n    >\r\n      {/* Hour Selector */}\r\n      <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n        {Array.from({ length: 12 }, (_, i) => i).map(hour => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              hour + 1 === selectedtime.hour && \"mtx-bg-secondary\",\r\n            )}\r\n            key={hour + 1}\r\n            onClick={() => handleSethour(hour + 1)}\r\n          >\r\n            {(hour + 1).toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {/* Minute Selector */}\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n        {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              minute === selectedtime.minute && \"mtx-bg-secondary\",\r\n            )}\r\n            key={minute}\r\n            onClick={() => handleSetMinute(minute)}\r\n          >\r\n            {minute.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {/* AM/PM Selector */}\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n        {[\"AM\", \"PM\"].map(ampm => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              ampm === selectedtime.ampm && \"mtx-bg-secondary\",\r\n            )}\r\n            key={ampm}\r\n            onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n          >\r\n            {ampm}\r\n          </button>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","TimePickerContent","isOpen","time","onTimeChange","slotsProps","selectedtime","setSelectedTime","useState","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","scrollToHour","index","scrollToMinute","handleSethour","hour","handleSetMinute","minute","handleSetAMPM","ampm","useEffect","jsxs","cn","jsx","_","i"],"mappings":"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"}
+{"version":3,"file":"timepickercontent.es.js","sources":["../src/components/date-picker/TimePickerContent.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\n\r\ntype Time = { hour: number; minute: number; ampm: \"AM\" | \"PM\" };\r\n\r\ntype TimePickerContentProps = {\r\n  time: Time | undefined;\r\n  isOpen: boolean;\r\n  onTimeChange: (time: Time | undefined) => void;\r\n  slotsProps?: {\r\n    content?: HTMLAttributes<HTMLDivElement>;\r\n  };\r\n};\r\n\r\nconst getNow = (): Time => {\r\n  return { hour: new Date().getHours() % 12, minute: new Date().getMinutes(), ampm: new Date().getHours() < 12 ? \"AM\" : \"PM\" };\r\n};\r\n\r\nconst TimePickerContent: React.FC<TimePickerContentProps> = ({ isOpen, time, onTimeChange, slotsProps }) => {\r\n  const [selectedtime, setSelectedTime] = useState<Time>(time ?? getNow());\r\n  const selectedTimeRef = useRef<Time>(selectedtime);\r\n\r\n  const hourRef = useRef<HTMLDivElement>(null);\r\n  const minuteRef = useRef<HTMLDivElement>(null);\r\n\r\n  const itemHeight = 32; // Assuming each item height is 40px\r\n  const marginBetweenItems = 8; // Assuming margin between each item is 8px\r\n\r\n  // Function to scroll to a specific hour\r\n  const scrollToHour = (index: number) => {\r\n    hourRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  // Function to scroll to a specific minute\r\n  const scrollToMinute = (index: number) => {\r\n    minuteRef?.current?.scrollTo({\r\n      top: index * (itemHeight + marginBetweenItems),\r\n      behavior: \"smooth\",\r\n    });\r\n  };\r\n\r\n  const handleSethour = (hour: number) => {\r\n    selectedTimeRef.current = { ...selectedtime, hour };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  const handleSetMinute = (minute: number) => {\r\n    selectedTimeRef.current = { ...selectedtime, minute };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  const handleSetAMPM = (ampm: \"AM\" | \"PM\") => {\r\n    selectedTimeRef.current = { ...selectedtime, ampm };\r\n    setSelectedTime(selectedTimeRef.current);\r\n    onTimeChange(selectedTimeRef.current);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      setSelectedTime(time ?? getNow());\r\n    }\r\n  }, [isOpen, time]);\r\n\r\n  useEffect(() => {\r\n    // Center the selected hour/minute on mount\r\n    if (isOpen) {\r\n      setTimeout(() => {\r\n        scrollToHour(selectedTimeRef.current.hour - 1);\r\n        scrollToMinute(selectedTimeRef.current.minute);\r\n      });\r\n    }\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <div\r\n      {...(slotsProps?.content ?? {})}\r\n      className={cn(\"mtx-py-2 mtx-px-0 mtx-h-52 mtx-w-full mtx-flex mtx-justify-center mtx-gap-1\", slotsProps?.content?.className)}\r\n    >\r\n      {/* Hour Selector */}\r\n      <div className=\"mtx-w-24 mtx-px-2 mtx-h-full mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={hourRef}>\r\n        {Array.from({ length: 12 }, (_, i) => i).map(hour => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              hour + 1 === selectedtime.hour && \"mtx-bg-secondary\",\r\n            )}\r\n            key={hour + 1}\r\n            onClick={() => handleSethour(hour + 1)}\r\n          >\r\n            {(hour + 1).toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {/* Minute Selector */}\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\" ref={minuteRef}>\r\n        {Array.from({ length: 60 }, (_, i) => i).map(minute => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              minute === selectedtime.minute && \"mtx-bg-secondary\",\r\n            )}\r\n            key={minute}\r\n            onClick={() => handleSetMinute(minute)}\r\n          >\r\n            {minute.toString().padStart(2, \"0\")}\r\n          </button>\r\n        ))}\r\n      </div>\r\n\r\n      {/* AM/PM Selector */}\r\n      <div className=\"mtx-h-full mtx-w-24 mtx-px-2 mtx-relative mtx-overflow-auto mtx-thin-scrollbar\">\r\n        {[\"AM\", \"PM\"].map(ampm => (\r\n          <button\r\n            style={{ height: itemHeight, marginBottom: marginBetweenItems }}\r\n            className={cn(\r\n              \"mtx-w-full mtx-flex mtx-justify-center mtx-items-center mtx-rounded-full mtx-text-xs mtx-font-bold mtx-text-text-400\",\r\n              ampm === selectedtime.ampm && \"mtx-bg-secondary\",\r\n            )}\r\n            key={ampm}\r\n            onClick={() => handleSetAMPM(ampm as \"AM\" | \"PM\")}\r\n            type=\"button\"\r\n          >\r\n            {ampm}\r\n          </button>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\nexport { TimePickerContent, type TimePickerContentProps, type Time };\r\n"],"names":["getNow","TimePickerContent","isOpen","time","onTimeChange","slotsProps","selectedtime","setSelectedTime","useState","selectedTimeRef","useRef","hourRef","minuteRef","itemHeight","marginBetweenItems","scrollToHour","index","scrollToMinute","handleSethour","hour","handleSetMinute","minute","handleSetAMPM","ampm","useEffect","jsxs","cn","jsx","_","i"],"mappings":"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"}

package/package.json

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