@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Select2/Select2.js

@@ -5,7 +5,7 @@ import { Option } from "./components/Option.js";
 import { Group } from "./components/Group.js";
 import { Title } from "./components/Title.js";
 import { Select2Context } from "./components/Context.js";
-import { createCollectionClassName, getFontSize, filterOption } from "./utilities.js";
+import { createCollectionClassName, FONT_SIZE_CLASSNAME, filterOption } from "./utilities.js";
 import { useMergedRef } from "../../hooks/useMergedRef.js";
 import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
 import { createCustomKeyboardEvent } from "../../utils/input.js";
@@ -25,7 +25,7 @@ import { LegacyButton } from "../LegacyComponents/Button/Button.js";
 import { Spinner } from "../Spinner/Spinner.js";
 import { debounce } from "../../utils/debounce.js";
 import { useControlled } from "../../hooks/useControlled.js";
-import { createListboxValueSetter, Root } from "../../primitives/Listbox2/components/Root.js";
+import { Root, createListboxValueSetter } from "../../primitives/Listbox2/components/Root.js";
 const Select2 = React__default.forwardRef(function Select22(props, ref) {
   const {
     children: initChildren,
@@ -140,7 +140,6 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
     typeahead();
   };
   const handleKeyDown = (event) => {
-    var _a;
     if (open) {
       event.preventDefault();
     } else if (isElementInsideTable3OrReport(event.currentTarget) && isAriaDirectionKey(event)) {
@@ -154,13 +153,12 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
     if (hasSearch && /^[a-z0-9]$/i.test(event.key)) {
       setSearchQuery((prev) => prev + event.key);
     }
-    (_a = listboxRef.current) == null ? void 0 : _a.dispatchEvent(createCustomKeyboardEvent(event));
+    listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event));
   };
   const shouldFocusNextRef = React__default.useRef(void 0);
   const handleHorizontalNavigation = (event) => {
-    var _a, _b;
     if (isElementInsideTable3OrReport(internalRef.current)) {
-      const isTriggeredFromPopover = (_b = (_a = event.currentTarget).contains) == null ? void 0 : _b.call(_a, event.target);
+      const isTriggeredFromPopover = event.currentTarget.contains?.(event.target);
       if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && isTriggeredFromPopover) {
         event.preventDefault();
         event.stopPropagation();
@@ -191,9 +189,8 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
     }
   };
   const handleOpenChange = (open2, details) => {
-    var _a;
     if (!open2 && (details.reason === "outside-press" || details.reason === "focus-out")) {
-      (_a = otherProps.onBlur) == null ? void 0 : _a.call(otherProps, details.event);
+      otherProps.onBlur?.(details.event);
     }
     setOpen(open2);
   };
@@ -238,7 +235,7 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
     }
   };
   const className = cn(
-    "border-gray-300 rounded border bg-white py-1.5 shadow-md ",
+    "rounded border border-gray-300 bg-white py-1.5 shadow-md",
     {
       "focus-within:yt-focus": !hasSearch,
       "outline-none": hasSearch
@@ -277,7 +274,7 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
       Popover.Popup,
       {
         className,
-        style: { minWidth: (dimensions == null ? void 0 : dimensions.width) ? `${dimensions.width}px` : void 0 },
+        style: { minWidth: dimensions?.width ? `${dimensions.width}px` : void 0 },
         initialFocus: hasSearch ? searchRef : true,
         finalFocus: handleFinalFocus,
         onKeyDown: handleHorizontalNavigation,
@@ -298,17 +295,27 @@ const Select2 = React__default.forwardRef(function Select22(props, ref) {
         },
         selectAllText
       ), /* @__PURE__ */ React__default.createElement("div", { className: "mx-3 rounded border-t border-gray-200" }))) : null,
-      loading ? /* @__PURE__ */ React__default.createElement("span", { className: cn("flex items-center italic text-gray-700", fontSize && getFontSize(fontSize)) }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
-        Spinner,
+      loading ? /* @__PURE__ */ React__default.createElement(
+        "span",
         {
-          delay: 0,
-          className: cn("ml-3 mr-2 mt-1.5 h-5 w-5", {
-            "!mt-1 !h-3.5 !w-3.5": fontSize === FontSizes.small,
-            "!h-4 !w-4": fontSize === FontSizes.medium,
-            "!h-5 !w-5": fontSize === FontSizes.large
-          })
-        }
-      )), /* @__PURE__ */ React__default.createElement("span", null, texts.listbox.loading)) : flattenedChildren.length <= 0 && !onCreate ? /* @__PURE__ */ React__default.createElement("div", { className: "-mt-0.5 flex h-8 items-center px-2 text-gray-700", role: "presentation" }, texts.listbox.empty) : /* @__PURE__ */ React__default.createElement(
+          className: cn(
+            "flex items-center italic text-gray-700",
+            fontSize && FONT_SIZE_CLASSNAME[fontSize]
+          )
+        },
+        /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+          Spinner,
+          {
+            delay: 0,
+            className: cn("ml-3 mr-2 mt-1.5 h-5 w-5", {
+              "!mt-1 !h-3.5 !w-3.5": fontSize === FontSizes.small,
+              "!h-4 !w-4": fontSize === FontSizes.medium,
+              "!h-5 !w-5": fontSize === FontSizes.large
+            })
+          }
+        )),
+        /* @__PURE__ */ React__default.createElement("span", null, texts.listbox.loading)
+      ) : flattenedChildren.length <= 0 && !onCreate ? /* @__PURE__ */ React__default.createElement("div", { className: "-mt-0.5 flex h-8 items-center px-2 text-gray-700", role: "presentation" }, texts.listbox.empty) : /* @__PURE__ */ React__default.createElement(
         Root,
         {
           className: "flex flex-col gap-0.5 focus-visible:outline-none",

package/dist/components/Select2/Select2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select2.js","sources":["../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2CreateDialogRenderer,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName, filterOption, getFontSize } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { isGroup, useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\nimport { getNextFocussableElement, isElementInsideTable3OrReport } from '../../utils/dom';\nimport { FontSize, FontSizes } from '../../types';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\nimport { debounce } from '../../utils/debounce';\nimport { useControlled } from '../../hooks/useControlled';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n    selectAll: string;\n    selectAllResults: string;\n    deselectAll: string;\n    deselectAllResults: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    /** Autofocus Select2 when loaded **/\n    autoFocus?: boolean;\n    /** Array of options in Select2 */\n    children: Select2Children;\n    /** Initial value of the input in Select2 */\n    defaultValue?: Select2Value;\n    /** Set what value should have an empty option in Select2 */\n    emptyValue?: Select2OptionValue;\n    /** Whether the Select2 is in a disabled state **/\n    disabled?: boolean;\n    /** Font size of text in Select2 **/\n    fontSize?: FontSize;\n    /** Draws attention to the Select2 by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the Select2 is in an invalid state **/\n    invalid?: boolean;\n    /** Whether the Select2 is loading the data **/\n    loading?: boolean;\n    /** Whether the Select2 allows selecting multiple values **/\n    multiple?: boolean;\n    /** Whether the Select2 is in an invalid state **/\n    name?: string;\n    /** Handler called when user chooses an option from the provided options **/\n    onChange?: (value: Select2Value) => void;\n    /** Handler called when user creates a new option **/\n    onCreate?: Select2CreateHandler;\n    /** Handler called when user deletes an option **/\n    onDelete?: Select2DeleteHandler;\n    /** Handler called when user edits an option **/\n    onEdit?: Select2EditHandler;\n    /** Placeholder showed when nothing is selected **/\n    placeholder?: string;\n    /** Whether the Select2 is in a readonly state **/\n    readOnly?: boolean;\n    required?: boolean;\n    /** Renders select options as tags **/\n    tags?: boolean;\n    /** Value of the input in select2 */\n    value?: Select2Value;\n    /** Create dialog component, if specified, then create button will become always visible in the bottom of options dropdown,\n     * when clicked, it will open create dialog and wait for 'onCreate' handler to be triggered from the dialog */\n    createDialog?: Select2CreateDialogRenderer;\n    /** Create button text */\n    createTriggerText?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue,\n        disabled = false,\n        emptyValue = undefined,\n        fontSize,\n        highlighted = false,\n        invalid = false,\n        loading,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        placeholder,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        createDialog,\n        createTriggerText,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControlled<Select2Value>({\n        // uncontrolled\n        defaultValue,\n        // controlled\n        onChange,\n        value: prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(\n        multiple,\n        _setValue as React.Dispatch<React.SetStateAction<Select2Value | undefined>>\n    );\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        fontSize,\n        validationError,\n        value,\n        createDialog,\n        createTriggerText,\n    };\n\n    const hasInlineCreation = onCreate && !createDialog;\n    const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;\n    const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;\n    const selectOptions =\n        searchQuery === ''\n            ? flattenedChildren.map(child => child.props.value)\n            : filteredChildren.flatMap(child =>\n                  isGroup(child)\n                      ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n                      : child.props.value\n              ) || [];\n\n    // support typeahead functionality when search isn't available\n    const queryTimeoutRef = React.useRef('');\n\n    const typeahead = debounce(function () {\n        if (!queryTimeoutRef.current) {\n            return;\n        }\n\n        const matchedValueIndex = visibleChildren.findIndex(child =>\n            filterOption(child as React.ReactElement<Select2OptionProps>, queryTimeoutRef.current)\n        );\n\n        if (matchedValueIndex > -1 && selectOptions[matchedValueIndex] !== undefined) {\n            setValue(selectOptions[matchedValueIndex]);\n        }\n\n        queryTimeoutRef.current = '';\n    }, 200);\n\n    const setValueIfMatched = (query: string) => {\n        queryTimeoutRef.current = queryTimeoutRef.current + query;\n        typeahead();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (isElementInsideTable3OrReport(event.currentTarget) && isAriaDirectionKey(event)) {\n            return;\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n\n            if (!hasSearch) {\n                setValueIfMatched(event.key);\n            }\n        }\n\n        // Collect the first character when opening with keyboard (when user starts typing while focused on a trigger)\n        if (hasSearch && /^[a-z0-9]$/i.test(event.key)) {\n            setSearchQuery(prev => prev + event.key);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    const shouldFocusNextRef = React.useRef<number | undefined>(undefined);\n\n    const handleHorizontalNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (isElementInsideTable3OrReport(internalRef.current)) {\n            const isTriggeredFromPopover = event.currentTarget.contains?.(event.target as Node);\n\n            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && isTriggeredFromPopover) {\n                event.preventDefault(); // prevents scrolling horizontally in the table on arrow left/right.\n                event.stopPropagation();\n\n                shouldFocusNextRef.current = event.key === 'ArrowLeft' ? -1 : +1;\n                setOpen(false);\n            }\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n            return;\n        }\n\n        if (event.key === 'Tab') {\n            shouldFocusNextRef.current = event.shiftKey ? -1 : +1;\n            setOpen(false);\n            return;\n        }\n\n        // Handle Escape key to close the select without closing the parent dialog\n        if (!hasSearch && event.key === 'Escape') {\n            event.preventDefault();\n            event.stopPropagation();\n            setOpen(false);\n            return;\n        }\n\n        // support typeahead to set the value by typing its text\n        if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {\n            setValueIfMatched(event.key);\n            return;\n        }\n    };\n\n    const handleOpenChange = (open: boolean, details: { reason: string; event: Event }) => {\n        if (!open && (details.reason === 'outside-press' || details.reason === 'focus-out')) {\n            otherProps.onBlur?.(details.event as unknown as React.FocusEvent<HTMLButtonElement>);\n        }\n        setOpen(open);\n    };\n\n    const handleFinalFocus = (closeType: 'mouse' | 'touch' | 'keyboard' | 'pen' | '') => {\n        if (shouldFocusNextRef.current !== undefined) {\n            const el = getNextFocussableElement(internalRef.current, shouldFocusNextRef.current);\n            shouldFocusNextRef.current = undefined;\n            return el || false;\n        }\n        if (closeType === 'mouse' || closeType === 'touch') {\n            // Don't steal focus — the clicked element receives it naturally.\n            return false;\n        }\n        return true;\n    };\n    const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option as string));\n\n    const selectAllText = React.useMemo(() => {\n        if (searchQuery === '') {\n            if (areAllSelected) {\n                return texts.select2.deselectAll;\n            }\n            return texts.select2.selectAll;\n        }\n\n        if (areAllSelected) {\n            return texts.select2.deselectAllResults;\n        }\n\n        return texts.select2.selectAllResults;\n    }, [areAllSelected, searchQuery]);\n\n    const selectAll = () => {\n        if (!Array.isArray(value) || value.length === 0) {\n            setValue(selectOptions);\n        } else {\n            // array of all available options which are not selected\n            const preselectedValues = selectOptions.filter(option => !value.includes(option));\n            setValue([...value, ...preselectedValues]);\n        }\n    };\n\n    const deselectAll = () => {\n        if (searchQuery === '') {\n            setValue([]);\n        } else {\n            const nextValue = Array.isArray(value) && value.filter(subValue => !selectOptions.includes(subValue as string));\n            setValue(nextValue);\n        }\n    };\n\n    const className = cn(\n        'border-gray-300 rounded border bg-white py-1.5 shadow-md ',\n        {\n            'focus-within:yt-focus': !hasSearch,\n            'outline-none': hasSearch,\n        },\n        createCollectionClassName()\n    );\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                <PopoverPrimitive.Trigger\n                    render={\n                        <Trigger\n                            {...otherProps}\n                            aria-haspopup=\"listbox\"\n                            aria-multiselectable={multiple}\n                            data-taco=\"Select2\"\n                            emptyValue={emptyValue}\n                            onKeyDown={handleKeyDown}\n                            placeholder={placeholder}\n                            ref={internalRef}>\n                            {flattenedChildren}\n                        </Trigger>\n                    }\n                />\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        sideOffset={4}\n                        collisionAvoidance={{\n                            side: 'flip',\n                            fallbackAxisSide: 'none',\n                        }}>\n                        <PopoverPrimitive.Popup\n                            className={className}\n                            style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}\n                            initialFocus={hasSearch ? searchRef : true}\n                            finalFocus={handleFinalFocus}\n                            onKeyDown={handleHorizontalNavigation}\n                            tabIndex={-1}>\n                            {hasSearch ? (\n                                <>\n                                    <Search\n                                        placeholder={hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search}\n                                        ref={searchRef}\n                                    />\n                                    {multiple && selectOptions.length > 1 && (\n                                        <>\n                                            <LegacyButton\n                                                className=\"!justify-start\"\n                                                appearance=\"discrete\"\n                                                onClick={areAllSelected ? deselectAll : selectAll}>\n                                                {selectAllText}\n                                            </LegacyButton>\n                                            <div className=\"mx-3 rounded border-t border-gray-200\" />\n                                        </>\n                                    )}\n                                </>\n                            ) : null}\n                            {loading ? (\n                                <span className={cn('flex items-center italic text-gray-700', fontSize && getFontSize(fontSize))}>\n                                    <span>\n                                        <Spinner\n                                            delay={0}\n                                            className={cn('ml-3 mr-2 mt-1.5 h-5 w-5', {\n                                                '!mt-1 !h-3.5 !w-3.5': fontSize === FontSizes.small,\n                                                '!h-4 !w-4': fontSize === FontSizes.medium,\n                                                '!h-5 !w-5': fontSize === FontSizes.large,\n                                            })}\n                                        />\n                                    </span>\n                                    <span>{texts.listbox.loading}</span>\n                                </span>\n                            ) : flattenedChildren.length <= 0 && !onCreate ? (\n                                <div className=\"-mt-0.5 flex h-8 items-center px-2 text-gray-700\" role=\"presentation\">\n                                    {texts.listbox.empty}\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5 focus-visible:outline-none\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    value={value}>\n                                    <Collection>{visibleChildren}</Collection>\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\ntype ControlledHiddenFieldProps = {\n    emptyValue: ListboxPrimitive.Listbox2OptionValue | undefined;\n    multiple: boolean;\n    name: string | undefined;\n    options: Array<any>;\n    parentRef: React.RefObject<HTMLButtonElement>;\n    setValue: (nextValue: any) => void;\n    value: Select2Value | undefined;\n};\n\nconst ControlledHiddenField = (props: ControlledHiddenFieldProps) => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} tabIndex={-1} value={bubbleValue}>\n                {emptyValue === undefined ? null : <option value={emptyValue as string} />}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n    Select2Children,\n};\n"],"names":["React","Select2","ListboxPrimitive.createListboxValueSetter","open","PopoverPrimitive","ListboxPrimitive.Root"],"mappings":"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"}
+{"version":3,"file":"Select2.js","sources":["../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2CreateDialogRenderer,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName, filterOption, FONT_SIZE_CLASSNAME } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { isGroup, useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\nimport { getNextFocussableElement, isElementInsideTable3OrReport } from '../../utils/dom';\nimport { FontSize, FontSizes } from '../../types';\nimport { LegacyButton } from '../LegacyComponents/Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\nimport { debounce } from '../../utils/debounce';\nimport { useControlled } from '../../hooks/useControlled';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n    selectAll: string;\n    selectAllResults: string;\n    deselectAll: string;\n    deselectAllResults: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    /** Autofocus Select2 when loaded **/\n    autoFocus?: boolean;\n    /** Array of options in Select2 */\n    children: Select2Children;\n    /** Initial value of the input in Select2 */\n    defaultValue?: Select2Value;\n    /** Set what value should have an empty option in Select2 */\n    emptyValue?: Select2OptionValue;\n    /** Whether the Select2 is in a disabled state **/\n    disabled?: boolean;\n    /** Font size of text in Select2 **/\n    fontSize?: FontSize;\n    /** Draws attention to the Select2 by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Whether the Select2 is in an invalid state **/\n    invalid?: boolean;\n    /** Whether the Select2 is loading the data **/\n    loading?: boolean;\n    /** Whether the Select2 allows selecting multiple values **/\n    multiple?: boolean;\n    /** Whether the Select2 is in an invalid state **/\n    name?: string;\n    /** Handler called when user chooses an option from the provided options **/\n    onChange?: (value: Select2Value) => void;\n    /** Handler called when user creates a new option **/\n    onCreate?: Select2CreateHandler;\n    /** Handler called when user deletes an option **/\n    onDelete?: Select2DeleteHandler;\n    /** Handler called when user edits an option **/\n    onEdit?: Select2EditHandler;\n    /** Placeholder showed when nothing is selected **/\n    placeholder?: string;\n    /** Whether the Select2 is in a readonly state **/\n    readOnly?: boolean;\n    required?: boolean;\n    /** Renders select options as tags **/\n    tags?: boolean;\n    /** Value of the input in select2 */\n    value?: Select2Value;\n    /** Create dialog component, if specified, then create button will become always visible in the bottom of options dropdown,\n     * when clicked, it will open create dialog and wait for 'onCreate' handler to be triggered from the dialog */\n    createDialog?: Select2CreateDialogRenderer;\n    /** Create button text */\n    createTriggerText?: string;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue,\n        disabled = false,\n        emptyValue = undefined,\n        fontSize,\n        highlighted = false,\n        invalid = false,\n        loading,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        placeholder,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        createDialog,\n        createTriggerText,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControlled<Select2Value>({\n        // uncontrolled\n        defaultValue,\n        // controlled\n        onChange,\n        value: prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(\n        multiple,\n        _setValue as React.Dispatch<React.SetStateAction<Select2Value | undefined>>\n    );\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        fontSize,\n        validationError,\n        value,\n        createDialog,\n        createTriggerText,\n    };\n\n    const hasInlineCreation = onCreate && !createDialog;\n    const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;\n    const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;\n    const selectOptions =\n        searchQuery === ''\n            ? flattenedChildren.map(child => child.props.value)\n            : filteredChildren.flatMap(child =>\n                  isGroup(child)\n                      ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n                      : child.props.value\n              ) || [];\n\n    // support typeahead functionality when search isn't available\n    const queryTimeoutRef = React.useRef('');\n\n    const typeahead = debounce(function () {\n        if (!queryTimeoutRef.current) {\n            return;\n        }\n\n        const matchedValueIndex = visibleChildren.findIndex(child =>\n            filterOption(child as React.ReactElement<Select2OptionProps>, queryTimeoutRef.current)\n        );\n\n        if (matchedValueIndex > -1 && selectOptions[matchedValueIndex] !== undefined) {\n            setValue(selectOptions[matchedValueIndex]);\n        }\n\n        queryTimeoutRef.current = '';\n    }, 200);\n\n    const setValueIfMatched = (query: string) => {\n        queryTimeoutRef.current = queryTimeoutRef.current + query;\n        typeahead();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (isElementInsideTable3OrReport(event.currentTarget) && isAriaDirectionKey(event)) {\n            return;\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n\n            if (!hasSearch) {\n                setValueIfMatched(event.key);\n            }\n        }\n\n        // Collect the first character when opening with keyboard (when user starts typing while focused on a trigger)\n        if (hasSearch && /^[a-z0-9]$/i.test(event.key)) {\n            setSearchQuery(prev => prev + event.key);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    const shouldFocusNextRef = React.useRef<number | undefined>(undefined);\n\n    const handleHorizontalNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (isElementInsideTable3OrReport(internalRef.current)) {\n            const isTriggeredFromPopover = event.currentTarget.contains?.(event.target as Node);\n\n            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && isTriggeredFromPopover) {\n                event.preventDefault(); // prevents scrolling horizontally in the table on arrow left/right.\n                event.stopPropagation();\n\n                shouldFocusNextRef.current = event.key === 'ArrowLeft' ? -1 : +1;\n                setOpen(false);\n            }\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n            return;\n        }\n\n        if (event.key === 'Tab') {\n            shouldFocusNextRef.current = event.shiftKey ? -1 : +1;\n            setOpen(false);\n            return;\n        }\n\n        // Handle Escape key to close the select without closing the parent dialog\n        if (!hasSearch && event.key === 'Escape') {\n            event.preventDefault();\n            event.stopPropagation();\n            setOpen(false);\n            return;\n        }\n\n        // support typeahead to set the value by typing its text\n        if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {\n            setValueIfMatched(event.key);\n            return;\n        }\n    };\n\n    const handleOpenChange = (open: boolean, details: { reason: string; event: Event }) => {\n        if (!open && (details.reason === 'outside-press' || details.reason === 'focus-out')) {\n            otherProps.onBlur?.(details.event as unknown as React.FocusEvent<HTMLButtonElement>);\n        }\n        setOpen(open);\n    };\n\n    const handleFinalFocus = (closeType: 'mouse' | 'touch' | 'keyboard' | 'pen' | '') => {\n        if (shouldFocusNextRef.current !== undefined) {\n            const el = getNextFocussableElement(internalRef.current, shouldFocusNextRef.current);\n            shouldFocusNextRef.current = undefined;\n            return el || false;\n        }\n        if (closeType === 'mouse' || closeType === 'touch') {\n            // Don't steal focus — the clicked element receives it naturally.\n            return false;\n        }\n        return true;\n    };\n    const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option as string));\n\n    const selectAllText = React.useMemo(() => {\n        if (searchQuery === '') {\n            if (areAllSelected) {\n                return texts.select2.deselectAll;\n            }\n            return texts.select2.selectAll;\n        }\n\n        if (areAllSelected) {\n            return texts.select2.deselectAllResults;\n        }\n\n        return texts.select2.selectAllResults;\n    }, [areAllSelected, searchQuery]);\n\n    const selectAll = () => {\n        if (!Array.isArray(value) || value.length === 0) {\n            setValue(selectOptions);\n        } else {\n            // array of all available options which are not selected\n            const preselectedValues = selectOptions.filter(option => !value.includes(option));\n            setValue([...value, ...preselectedValues]);\n        }\n    };\n\n    const deselectAll = () => {\n        if (searchQuery === '') {\n            setValue([]);\n        } else {\n            const nextValue = Array.isArray(value) && value.filter(subValue => !selectOptions.includes(subValue as string));\n            setValue(nextValue);\n        }\n    };\n\n    const className = cn(\n        'rounded border border-gray-300 bg-white py-1.5 shadow-md',\n        {\n            'focus-within:yt-focus': !hasSearch,\n            'outline-none': hasSearch,\n        },\n        createCollectionClassName()\n    );\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                <PopoverPrimitive.Trigger\n                    render={\n                        <Trigger\n                            {...otherProps}\n                            aria-haspopup=\"listbox\"\n                            aria-multiselectable={multiple}\n                            data-taco=\"Select2\"\n                            emptyValue={emptyValue}\n                            onKeyDown={handleKeyDown}\n                            placeholder={placeholder}\n                            ref={internalRef}>\n                            {flattenedChildren}\n                        </Trigger>\n                    }\n                />\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        sideOffset={4}\n                        collisionAvoidance={{\n                            side: 'flip',\n                            fallbackAxisSide: 'none',\n                        }}>\n                        <PopoverPrimitive.Popup\n                            className={className}\n                            style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}\n                            initialFocus={hasSearch ? searchRef : true}\n                            finalFocus={handleFinalFocus}\n                            onKeyDown={handleHorizontalNavigation}\n                            tabIndex={-1}>\n                            {hasSearch ? (\n                                <>\n                                    <Search\n                                        placeholder={hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search}\n                                        ref={searchRef}\n                                    />\n                                    {multiple && selectOptions.length > 1 && (\n                                        <>\n                                            <LegacyButton\n                                                className=\"!justify-start\"\n                                                appearance=\"discrete\"\n                                                onClick={areAllSelected ? deselectAll : selectAll}>\n                                                {selectAllText}\n                                            </LegacyButton>\n                                            <div className=\"mx-3 rounded border-t border-gray-200\" />\n                                        </>\n                                    )}\n                                </>\n                            ) : null}\n                            {loading ? (\n                                <span\n                                    className={cn(\n                                        'flex items-center italic text-gray-700',\n                                        fontSize && FONT_SIZE_CLASSNAME[fontSize]\n                                    )}>\n                                    <span>\n                                        <Spinner\n                                            delay={0}\n                                            className={cn('ml-3 mr-2 mt-1.5 h-5 w-5', {\n                                                '!mt-1 !h-3.5 !w-3.5': fontSize === FontSizes.small,\n                                                '!h-4 !w-4': fontSize === FontSizes.medium,\n                                                '!h-5 !w-5': fontSize === FontSizes.large,\n                                            })}\n                                        />\n                                    </span>\n                                    <span>{texts.listbox.loading}</span>\n                                </span>\n                            ) : flattenedChildren.length <= 0 && !onCreate ? (\n                                <div className=\"-mt-0.5 flex h-8 items-center px-2 text-gray-700\" role=\"presentation\">\n                                    {texts.listbox.empty}\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5 focus-visible:outline-none\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    value={value}>\n                                    <Collection>{visibleChildren}</Collection>\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\ntype ControlledHiddenFieldProps = {\n    emptyValue: ListboxPrimitive.Listbox2OptionValue | undefined;\n    multiple: boolean;\n    name: string | undefined;\n    options: Array<any>;\n    parentRef: React.RefObject<HTMLButtonElement>;\n    setValue: (nextValue: any) => void;\n    value: Select2Value | undefined;\n};\n\nconst ControlledHiddenField = (props: ControlledHiddenFieldProps) => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} tabIndex={-1} value={bubbleValue}>\n                {emptyValue === undefined ? null : <option value={emptyValue as string} />}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n    Select2Children,\n};\n"],"names":["React","Select2","ListboxPrimitive.createListboxValueSetter","open","PopoverPrimitive","ListboxPrimitive.Root"],"mappings":"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"}

package/dist/components/Select2/components/Collection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.cjs","sources":["../../../../src/components/Select2/components/Collection.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { Select2GroupProps } from './Group';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2CollectionProps = {\n    children: Array<React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>>;\n};\n\nexport const Collection = (props: Select2CollectionProps) => {\n    const { children } = props;\n\n    // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.\n    return <ScrollArea className=\"flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5\">{children}</ScrollArea>;\n};\n"],"names":["ScrollArea"],"mappings":";;;;AASa,MAAA,aAAa,CAAC,UAAkC;AACnD,QAAA,EAAE,aAAa;AAGrB,SAAQ,sBAAA,cAAAA,WAAA,YAAA,EAAW,WAAU,wDAAA,GAAyD,QAAS;AACnG;;"}
+{"version":3,"file":"Collection.cjs","sources":["../../../../src/components/Select2/components/Collection.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { Select2GroupProps } from './Group';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2CollectionProps = {\n    children: Array<React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>>;\n};\n\nexport const Collection = (props: Select2CollectionProps) => {\n    const { children } = props;\n\n    // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.\n    return <ScrollArea className=\"flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5\">{children}</ScrollArea>;\n};\n"],"names":["ScrollArea"],"mappings":";;;;AASO,MAAM,aAAa,CAAC,UAAkC;AACzD,QAAM,EAAE,aAAa;AAGrB,SAAO,sBAAA,cAACA,WAAAA,YAAA,EAAW,WAAU,wDAAA,GAAyD,QAAS;AACnG;;"}

package/dist/components/Select2/components/Collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.js","sources":["../../../../src/components/Select2/components/Collection.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { Select2GroupProps } from './Group';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2CollectionProps = {\n    children: Array<React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>>;\n};\n\nexport const Collection = (props: Select2CollectionProps) => {\n    const { children } = props;\n\n    // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.\n    return <ScrollArea className=\"flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5\">{children}</ScrollArea>;\n};\n"],"names":["React"],"mappings":";;AASa,MAAA,aAAa,CAAC,UAAkC;AACnD,QAAA,EAAE,aAAa;AAGrB,SAAQA,+BAAA,cAAA,YAAA,EAAW,WAAU,wDAAA,GAAyD,QAAS;AACnG;"}
+{"version":3,"file":"Collection.js","sources":["../../../../src/components/Select2/components/Collection.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { Select2GroupProps } from './Group';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2CollectionProps = {\n    children: Array<React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>>;\n};\n\nexport const Collection = (props: Select2CollectionProps) => {\n    const { children } = props;\n\n    // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.\n    return <ScrollArea className=\"flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5\">{children}</ScrollArea>;\n};\n"],"names":["React"],"mappings":";;AASO,MAAM,aAAa,CAAC,UAAkC;AACzD,QAAM,EAAE,aAAa;AAGrB,SAAOA,+BAAA,cAAC,YAAA,EAAW,WAAU,wDAAA,GAAyD,QAAS;AACnG;"}

package/dist/components/Select2/components/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport {\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n    Select2CreateDialogRenderer,\n} from '../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2ContextProps = {\n    createDialog?: Select2CreateDialogRenderer;\n    createTriggerText?: string;\n    disabled: boolean;\n    highlighted: boolean;\n    invalid: boolean;\n    listboxRef: React.RefObject<CollectionRef>;\n    multiple: boolean;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    open: boolean;\n    readOnly: boolean;\n    ref: React.RefObject<HTMLButtonElement>;\n    searchQuery: string;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    setOpen: (open: boolean) => void;\n    setSearchQuery: (value: string) => void;\n    setValidationError: (error: Error | undefined) => void;\n    setValue: (value: Select2OptionValue) => void;\n    shouldPauseHoverState: boolean;\n    setShouldPauseHoverState: (pause: boolean) => void;\n    tags?: boolean;\n    validationError?: Error;\n    value?: Select2Value;\n    fontSize?: FontSize;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":[],"mappings":";;;AAwCO,MAAM,iBAAiB,MAAM,cAAc,CAAyB,CAAA;AACpE,MAAM,oBAAoB,MAAM,MAAM,WAAW,cAAc;;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport {\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n    Select2CreateDialogRenderer,\n} from '../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2ContextProps = {\n    createDialog?: Select2CreateDialogRenderer;\n    createTriggerText?: string;\n    disabled: boolean;\n    highlighted: boolean;\n    invalid: boolean;\n    listboxRef: React.RefObject<CollectionRef | null>;\n    multiple: boolean;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    open: boolean;\n    readOnly: boolean;\n    ref: React.RefObject<HTMLButtonElement | null>;\n    searchQuery: string;\n    searchRef?: React.RefObject<HTMLInputElement | null>;\n    setOpen: (open: boolean) => void;\n    setSearchQuery: (value: string) => void;\n    setValidationError: (error: Error | undefined) => void;\n    setValue: (value: Select2OptionValue) => void;\n    shouldPauseHoverState: boolean;\n    setShouldPauseHoverState: (pause: boolean) => void;\n    tags?: boolean;\n    validationError?: Error;\n    value?: Select2Value;\n    fontSize?: FontSize;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":[],"mappings":";;;AAwCO,MAAM,iBAAiB,MAAM,cAAc,CAAA,CAAyB;AACpE,MAAM,oBAAoB,MAAM,MAAM,WAAW,cAAc;;;"}

package/dist/components/Select2/components/Context.d.ts

@@ -8,16 +8,16 @@ export type Select2ContextProps = {
     disabled: boolean;
     highlighted: boolean;
     invalid: boolean;
-    listboxRef: React.RefObject<CollectionRef>;
+    listboxRef: React.RefObject<CollectionRef | null>;
     multiple: boolean;
     onCreate?: Select2CreateHandler;
     onDelete?: Select2DeleteHandler;
     onEdit?: Select2EditHandler;
     open: boolean;
     readOnly: boolean;
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
     searchQuery: string;
-    searchRef?: React.RefObject<HTMLInputElement>;
+    searchRef?: React.RefObject<HTMLInputElement | null>;
     setOpen: (open: boolean) => void;
     setSearchQuery: (value: string) => void;
     setValidationError: (error: Error | undefined) => void;

package/dist/components/Select2/components/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport {\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n    Select2CreateDialogRenderer,\n} from '../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2ContextProps = {\n    createDialog?: Select2CreateDialogRenderer;\n    createTriggerText?: string;\n    disabled: boolean;\n    highlighted: boolean;\n    invalid: boolean;\n    listboxRef: React.RefObject<CollectionRef>;\n    multiple: boolean;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    open: boolean;\n    readOnly: boolean;\n    ref: React.RefObject<HTMLButtonElement>;\n    searchQuery: string;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    setOpen: (open: boolean) => void;\n    setSearchQuery: (value: string) => void;\n    setValidationError: (error: Error | undefined) => void;\n    setValue: (value: Select2OptionValue) => void;\n    shouldPauseHoverState: boolean;\n    setShouldPauseHoverState: (pause: boolean) => void;\n    tags?: boolean;\n    validationError?: Error;\n    value?: Select2Value;\n    fontSize?: FontSize;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":["React"],"mappings":";AAwCO,MAAM,iBAAiBA,eAAM,cAAc,CAAyB,CAAA;AACpE,MAAM,oBAAoB,MAAMA,eAAM,WAAW,cAAc;"}
+{"version":3,"file":"Context.js","sources":["../../../../src/components/Select2/components/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionRef } from '../../../primitives/Collection/Collection';\nimport {\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n    Select2CreateDialogRenderer,\n} from '../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2ContextProps = {\n    createDialog?: Select2CreateDialogRenderer;\n    createTriggerText?: string;\n    disabled: boolean;\n    highlighted: boolean;\n    invalid: boolean;\n    listboxRef: React.RefObject<CollectionRef | null>;\n    multiple: boolean;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    open: boolean;\n    readOnly: boolean;\n    ref: React.RefObject<HTMLButtonElement | null>;\n    searchQuery: string;\n    searchRef?: React.RefObject<HTMLInputElement | null>;\n    setOpen: (open: boolean) => void;\n    setSearchQuery: (value: string) => void;\n    setValidationError: (error: Error | undefined) => void;\n    setValue: (value: Select2OptionValue) => void;\n    shouldPauseHoverState: boolean;\n    setShouldPauseHoverState: (pause: boolean) => void;\n    tags?: boolean;\n    validationError?: Error;\n    value?: Select2Value;\n    fontSize?: FontSize;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":["React"],"mappings":";AAwCO,MAAM,iBAAiBA,eAAM,cAAc,CAAA,CAAyB;AACpE,MAAM,oBAAoB,MAAMA,eAAM,WAAW,cAAc;"}

package/dist/components/Select2/components/Create.cjs

@@ -57,8 +57,8 @@ const Create = (props) => {
     }
   };
   const className = cn(utilities.createOptionClassName(), {
-    "!w-[calc(100%_-_theme(spacing.3))] ml-1.5": !createDialog,
-    "leading-normal border-gray-300 h-9 border-t py-2.5 px-4 !-mb-1.5": !!createDialog
+    "ml-1.5 !w-[calc(100%_-_theme(spacing.3))]": !createDialog,
+    "!-mb-1.5 h-9 border-t border-gray-300 px-4 py-2.5 leading-normal": !!createDialog
   });
   const creationOptions = createDialog ? {
     dialog: (props2) => createDialog({ ...props2, onClose: onCreateDialogClose }, searchQuery, create)

package/dist/components/Select2/components/Create.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Create.cjs","sources":["../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\nimport { Select2CreateHandler } from '../types';\nimport { Icon } from '../../Icon/Icon';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport type CreateProps = {\n    onCreate: Select2CreateHandler;\n    options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n    let occurrences = {} as Record<Color, number>;\n    AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n        occurrences = { ...occurrences, [color]: 0 };\n    });\n\n    options.reduce((occurrences, option) => {\n        if (option.props.color) {\n            occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n        }\n        return occurrences;\n    }, occurrences);\n\n    const colors = Object.keys(occurrences);\n\n    if (colors.length) {\n        return colors.sort((a, b) => occurrences[a as Color] - occurrences[b as Color])[0] as Color;\n    }\n\n    return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n    const { onCreate: handleCreate, options } = props;\n    const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue, createDialog, createTriggerText } =\n        useSelect2Context();\n    const { texts } = useLocalization();\n\n    // determine what the next color tag should be based on color occurences\n    const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n    const onCreateDialogClose = React.useCallback(() => {\n        setOpen(false);\n    }, [setOpen]);\n\n    if (!createDialog && !searchQuery) {\n        return null;\n    }\n\n    const create = async (value?: string | unknown) => {\n        try {\n            const item = await handleCreate(value, nextColor);\n            setValue(item.value);\n\n            if (multiple) {\n                setSearchQuery('');\n            } else {\n                setOpen(false);\n            }\n        } catch (error) {\n            setValidationError(error as Error);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (isAriaSelectionKey(event)) {\n            event.currentTarget.click();\n        }\n    };\n\n    const className = cn(createOptionClassName(), {\n        '!w-[calc(100%_-_theme(spacing.3))] ml-1.5': !createDialog,\n        'leading-normal border-gray-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog,\n    });\n\n    const creationOptions = createDialog\n        ? {\n              dialog: (props: Partial<DialogProps>) =>\n                  createDialog({ ...props, onClose: onCreateDialogClose }, searchQuery, create),\n          }\n        : {\n              onClick: () => create(searchQuery),\n          };\n\n    const createText = createTriggerText || texts.select2.create;\n\n    return (\n        <LegacyButton\n            className={className}\n            {...creationOptions}\n            onKeyDown={handleKeyDown}\n            appearance={createDialog ? 'discrete' : 'default'}>\n            <span className=\"flex items-center gap-1.5\">\n                {createDialog ? (\n                    <>\n                        <Icon className=\"text-xs\" name=\"circle-plus\" /> {createText}\n                    </>\n                ) : (\n                    <>\n                        {createText}\n                        <Tag color={nextColor} className=\"cursor-pointer\">\n                            {searchQuery}\n                        </Tag>\n                    </>\n                )}\n            </span>\n        </LegacyButton>\n    );\n};\n"],"names":["AVAILABLE_COLORS","occurrences","useSelect2Context","useLocalization","isAriaSelectionKey","createOptionClassName","props","LegacyButton","Icon","Tag"],"mappings":";;;;;;;;;;;;AAoBa,MAAA,eAAe,CAAC,YAAyE;AAClG,MAAI,cAAc,CAAC;AACnBA,4BAAiB,OAAO,CAAS,UAAA,UAAU,aAAa,EAAE,QAAQ,CAAC,UAAiB;AAChF,kBAAc,EAAE,GAAG,aAAa,CAAC,KAAK,GAAG,EAAE;AAAA,EAAA,CAC9C;AAEO,UAAA,OAAO,CAACC,cAAa,WAAW;AAChC,QAAA,OAAO,MAAM,OAAO;AACpBA,mBAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAI,IAAI;AAAA,IAAA;AAEvGA,WAAAA;AAAAA,KACR,WAAW;AAER,QAAA,SAAS,OAAO,KAAK,WAAW;AAEtC,MAAI,OAAO,QAAQ;AACf,WAAO,OAAO,KAAK,CAAC,GAAG,MAAM,YAAY,CAAU,IAAI,YAAY,CAAU,CAAC,EAAE,CAAC;AAAA,EAAA;AAG9E,SAAA;AACX;AAEa,MAAA,SAAS,CAAC,UAAuB;AAC1C,QAAM,EAAE,UAAU,cAAc,QAAY,IAAA;AACtC,QAAA,EAAE,UAAU,aAAa,SAAS,gBAAgB,oBAAoB,UAAU,cAAc,kBAAkB,IAClHC,0BAAkB;AAChB,QAAA,EAAE,MAAM,IAAIC,6BAAgB;AAG5B,QAAA,YAAY,MAAM,QAAQ,MAAM,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;AAEhE,QAAA,sBAAsB,MAAM,YAAY,MAAM;AAChD,YAAQ,KAAK;AAAA,EAAA,GACd,CAAC,OAAO,CAAC;AAER,MAAA,CAAC,gBAAgB,CAAC,aAAa;AACxB,WAAA;AAAA,EAAA;AAGL,QAAA,SAAS,OAAO,UAA6B;AAC3C,QAAA;AACA,YAAM,OAAO,MAAM,aAAa,OAAO,SAAS;AAChD,eAAS,KAAK,KAAK;AAEnB,UAAI,UAAU;AACV,uBAAe,EAAE;AAAA,MAAA,OACd;AACH,gBAAQ,KAAK;AAAA,MAAA;AAAA,aAEZ,OAAO;AACZ,yBAAmB,KAAc;AAAA,IAAA;AAAA,EAEzC;AAEM,QAAA,gBAAgB,CAAC,UAAkD;AACjE,QAAAC,KAAAA,mBAAmB,KAAK,GAAG;AAC3B,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,YAAY,GAAGC,UAAAA,yBAAyB;AAAA,IAC1C,6CAA6C,CAAC;AAAA,IAC9C,oEAAoE,CAAC,CAAC;AAAA,EAAA,CACzE;AAED,QAAM,kBAAkB,eAClB;AAAA,IACI,QAAQ,CAACC,WACL,aAAa,EAAE,GAAGA,QAAO,SAAS,uBAAuB,aAAa,MAAM;AAAA,EAAA,IAEpF;AAAA,IACI,SAAS,MAAM,OAAO,WAAW;AAAA,EACrC;AAEA,QAAA,aAAa,qBAAqB,MAAM,QAAQ;AAGlD,SAAA,sBAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,YAAY,eAAe,aAAa;AAAA,IAAA;AAAA,IACxC,sBAAA,cAAC,QAAK,EAAA,WAAU,+BACX,eAEO,sBAAA,cAAA,MAAA,UAAA,MAAA,sBAAA,cAACC,KAAK,MAAA,EAAA,WAAU,WAAU,MAAK,cAAc,CAAA,GAAE,KAAE,UACrD,IAGK,sBAAA,cAAA,MAAA,UAAA,MAAA,YACA,sBAAA,cAAAC,IAAAA,KAAA,EAAI,OAAO,WAAW,WAAU,iBAAA,GAC5B,WACL,CACJ,CAER;AAAA,EACJ;AAER;;;"}
+{"version":3,"file":"Create.cjs","sources":["../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\nimport { Select2CreateHandler } from '../types';\nimport { Icon } from '../../Icon/Icon';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport type CreateProps = {\n    onCreate: Select2CreateHandler;\n    options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n    let occurrences = {} as Record<Color, number>;\n    AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n        occurrences = { ...occurrences, [color]: 0 };\n    });\n\n    options.reduce((occurrences, option) => {\n        if (option.props.color) {\n            occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n        }\n        return occurrences;\n    }, occurrences);\n\n    const colors = Object.keys(occurrences);\n\n    if (colors.length) {\n        return colors.sort((a, b) => occurrences[a as Color] - occurrences[b as Color])[0] as Color;\n    }\n\n    return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n    const { onCreate: handleCreate, options } = props;\n    const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue, createDialog, createTriggerText } =\n        useSelect2Context();\n    const { texts } = useLocalization();\n\n    // determine what the next color tag should be based on color occurences\n    const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n    const onCreateDialogClose = React.useCallback(() => {\n        setOpen(false);\n    }, [setOpen]);\n\n    if (!createDialog && !searchQuery) {\n        return null;\n    }\n\n    const create = async (value?: string | unknown) => {\n        try {\n            const item = await handleCreate(value, nextColor);\n            setValue(item.value);\n\n            if (multiple) {\n                setSearchQuery('');\n            } else {\n                setOpen(false);\n            }\n        } catch (error) {\n            setValidationError(error as Error);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (isAriaSelectionKey(event)) {\n            event.currentTarget.click();\n        }\n    };\n\n    const className = cn(createOptionClassName(), {\n        'ml-1.5 !w-[calc(100%_-_theme(spacing.3))]': !createDialog,\n        '!-mb-1.5 h-9 border-t border-gray-300 px-4 py-2.5 leading-normal': !!createDialog,\n    });\n\n    const creationOptions = createDialog\n        ? {\n              dialog: (props: Partial<DialogProps>) =>\n                  createDialog({ ...props, onClose: onCreateDialogClose }, searchQuery, create),\n          }\n        : {\n              onClick: () => create(searchQuery),\n          };\n\n    const createText = createTriggerText || texts.select2.create;\n\n    return (\n        <LegacyButton\n            className={className}\n            {...creationOptions}\n            onKeyDown={handleKeyDown}\n            appearance={createDialog ? 'discrete' : 'default'}>\n            <span className=\"flex items-center gap-1.5\">\n                {createDialog ? (\n                    <>\n                        <Icon className=\"text-xs\" name=\"circle-plus\" /> {createText}\n                    </>\n                ) : (\n                    <>\n                        {createText}\n                        <Tag color={nextColor} className=\"cursor-pointer\">\n                            {searchQuery}\n                        </Tag>\n                    </>\n                )}\n            </span>\n        </LegacyButton>\n    );\n};\n"],"names":["AVAILABLE_COLORS","occurrences","useSelect2Context","useLocalization","isAriaSelectionKey","createOptionClassName","props","LegacyButton","Icon","Tag"],"mappings":";;;;;;;;;;;;AAoBO,MAAM,eAAe,CAAC,YAAyE;AAClG,MAAI,cAAc,CAAA;AAClBA,4BAAiB,OAAO,CAAA,UAAS,UAAU,aAAa,EAAE,QAAQ,CAAC,UAAiB;AAChF,kBAAc,EAAE,GAAG,aAAa,CAAC,KAAK,GAAG,EAAA;AAAA,EAC7C,CAAC;AAED,UAAQ,OAAO,CAACC,cAAa,WAAW;AACpC,QAAI,OAAO,MAAM,OAAO;AACpBA,mBAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAI,IAAI;AAAA,IAC9G;AACA,WAAOA;AAAAA,EACX,GAAG,WAAW;AAEd,QAAM,SAAS,OAAO,KAAK,WAAW;AAEtC,MAAI,OAAO,QAAQ;AACf,WAAO,OAAO,KAAK,CAAC,GAAG,MAAM,YAAY,CAAU,IAAI,YAAY,CAAU,CAAC,EAAE,CAAC;AAAA,EACrF;AAEA,SAAO;AACX;AAEO,MAAM,SAAS,CAAC,UAAuB;AAC1C,QAAM,EAAE,UAAU,cAAc,QAAA,IAAY;AAC5C,QAAM,EAAE,UAAU,aAAa,SAAS,gBAAgB,oBAAoB,UAAU,cAAc,kBAAA,IAChGC,0BAAA;AACJ,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAGlB,QAAM,YAAY,MAAM,QAAQ,MAAM,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;AAEtE,QAAM,sBAAsB,MAAM,YAAY,MAAM;AAChD,YAAQ,KAAK;AAAA,EACjB,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,gBAAgB,CAAC,aAAa;AAC/B,WAAO;AAAA,EACX;AAEA,QAAM,SAAS,OAAO,UAA6B;AAC/C,QAAI;AACA,YAAM,OAAO,MAAM,aAAa,OAAO,SAAS;AAChD,eAAS,KAAK,KAAK;AAEnB,UAAI,UAAU;AACV,uBAAe,EAAE;AAAA,MACrB,OAAO;AACH,gBAAQ,KAAK;AAAA,MACjB;AAAA,IACJ,SAAS,OAAO;AACZ,yBAAmB,KAAc;AAAA,IACrC;AAAA,EACJ;AAEA,QAAM,gBAAgB,CAAC,UAAkD;AACrE,QAAIC,KAAAA,mBAAmB,KAAK,GAAG;AAC3B,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEA,QAAM,YAAY,GAAGC,UAAAA,yBAAyB;AAAA,IAC1C,6CAA6C,CAAC;AAAA,IAC9C,oEAAoE,CAAC,CAAC;AAAA,EAAA,CACzE;AAED,QAAM,kBAAkB,eAClB;AAAA,IACI,QAAQ,CAACC,WACL,aAAa,EAAE,GAAGA,QAAO,SAAS,uBAAuB,aAAa,MAAM;AAAA,EAAA,IAEpF;AAAA,IACI,SAAS,MAAM,OAAO,WAAW;AAAA,EAAA;AAG3C,QAAM,aAAa,qBAAqB,MAAM,QAAQ;AAEtD,SACI,sBAAA;AAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,YAAY,eAAe,aAAa;AAAA,IAAA;AAAA,IACxC,sBAAA,cAAC,QAAA,EAAK,WAAU,+BACX,eACG,sBAAA,cAAA,MAAA,UAAA,MACI,sBAAA,cAACC,KAAAA,MAAA,EAAK,WAAU,WAAU,MAAK,cAAA,CAAc,GAAE,KAAE,UACrD,IAEA,sBAAA,cAAA,MAAA,UAAA,MACK,YACD,sBAAA,cAACC,IAAAA,KAAA,EAAI,OAAO,WAAW,WAAU,iBAAA,GAC5B,WACL,CACJ,CAER;AAAA,EAAA;AAGZ;;;"}

package/dist/components/Select2/components/Create.js

@@ -55,8 +55,8 @@ const Create = (props) => {
     }
   };
   const className = cn(createOptionClassName(), {
-    "!w-[calc(100%_-_theme(spacing.3))] ml-1.5": !createDialog,
-    "leading-normal border-gray-300 h-9 border-t py-2.5 px-4 !-mb-1.5": !!createDialog
+    "ml-1.5 !w-[calc(100%_-_theme(spacing.3))]": !createDialog,
+    "!-mb-1.5 h-9 border-t border-gray-300 px-4 py-2.5 leading-normal": !!createDialog
   });
   const creationOptions = createDialog ? {
     dialog: (props2) => createDialog({ ...props2, onClose: onCreateDialogClose }, searchQuery, create)

package/dist/components/Select2/components/Create.js.map

@@ -1 +1 @@
-{"version":3,"file":"Create.js","sources":["../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\nimport { Select2CreateHandler } from '../types';\nimport { Icon } from '../../Icon/Icon';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport type CreateProps = {\n    onCreate: Select2CreateHandler;\n    options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n    let occurrences = {} as Record<Color, number>;\n    AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n        occurrences = { ...occurrences, [color]: 0 };\n    });\n\n    options.reduce((occurrences, option) => {\n        if (option.props.color) {\n            occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n        }\n        return occurrences;\n    }, occurrences);\n\n    const colors = Object.keys(occurrences);\n\n    if (colors.length) {\n        return colors.sort((a, b) => occurrences[a as Color] - occurrences[b as Color])[0] as Color;\n    }\n\n    return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n    const { onCreate: handleCreate, options } = props;\n    const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue, createDialog, createTriggerText } =\n        useSelect2Context();\n    const { texts } = useLocalization();\n\n    // determine what the next color tag should be based on color occurences\n    const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n    const onCreateDialogClose = React.useCallback(() => {\n        setOpen(false);\n    }, [setOpen]);\n\n    if (!createDialog && !searchQuery) {\n        return null;\n    }\n\n    const create = async (value?: string | unknown) => {\n        try {\n            const item = await handleCreate(value, nextColor);\n            setValue(item.value);\n\n            if (multiple) {\n                setSearchQuery('');\n            } else {\n                setOpen(false);\n            }\n        } catch (error) {\n            setValidationError(error as Error);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (isAriaSelectionKey(event)) {\n            event.currentTarget.click();\n        }\n    };\n\n    const className = cn(createOptionClassName(), {\n        '!w-[calc(100%_-_theme(spacing.3))] ml-1.5': !createDialog,\n        'leading-normal border-gray-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog,\n    });\n\n    const creationOptions = createDialog\n        ? {\n              dialog: (props: Partial<DialogProps>) =>\n                  createDialog({ ...props, onClose: onCreateDialogClose }, searchQuery, create),\n          }\n        : {\n              onClick: () => create(searchQuery),\n          };\n\n    const createText = createTriggerText || texts.select2.create;\n\n    return (\n        <LegacyButton\n            className={className}\n            {...creationOptions}\n            onKeyDown={handleKeyDown}\n            appearance={createDialog ? 'discrete' : 'default'}>\n            <span className=\"flex items-center gap-1.5\">\n                {createDialog ? (\n                    <>\n                        <Icon className=\"text-xs\" name=\"circle-plus\" /> {createText}\n                    </>\n                ) : (\n                    <>\n                        {createText}\n                        <Tag color={nextColor} className=\"cursor-pointer\">\n                            {searchQuery}\n                        </Tag>\n                    </>\n                )}\n            </span>\n        </LegacyButton>\n    );\n};\n"],"names":["occurrences","React","props"],"mappings":";;;;;;;;;;AAoBa,MAAA,eAAe,CAAC,YAAyE;AAClG,MAAI,cAAc,CAAC;AACnB,mBAAiB,OAAO,CAAS,UAAA,UAAU,aAAa,EAAE,QAAQ,CAAC,UAAiB;AAChF,kBAAc,EAAE,GAAG,aAAa,CAAC,KAAK,GAAG,EAAE;AAAA,EAAA,CAC9C;AAEO,UAAA,OAAO,CAACA,cAAa,WAAW;AAChC,QAAA,OAAO,MAAM,OAAO;AACpBA,mBAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAI,IAAI;AAAA,IAAA;AAEvGA,WAAAA;AAAAA,KACR,WAAW;AAER,QAAA,SAAS,OAAO,KAAK,WAAW;AAEtC,MAAI,OAAO,QAAQ;AACf,WAAO,OAAO,KAAK,CAAC,GAAG,MAAM,YAAY,CAAU,IAAI,YAAY,CAAU,CAAC,EAAE,CAAC;AAAA,EAAA;AAG9E,SAAA;AACX;AAEa,MAAA,SAAS,CAAC,UAAuB;AAC1C,QAAM,EAAE,UAAU,cAAc,QAAY,IAAA;AACtC,QAAA,EAAE,UAAU,aAAa,SAAS,gBAAgB,oBAAoB,UAAU,cAAc,kBAAkB,IAClH,kBAAkB;AAChB,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAG5B,QAAA,YAAYC,eAAM,QAAQ,MAAM,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;AAEhE,QAAA,sBAAsBA,eAAM,YAAY,MAAM;AAChD,YAAQ,KAAK;AAAA,EAAA,GACd,CAAC,OAAO,CAAC;AAER,MAAA,CAAC,gBAAgB,CAAC,aAAa;AACxB,WAAA;AAAA,EAAA;AAGL,QAAA,SAAS,OAAO,UAA6B;AAC3C,QAAA;AACA,YAAM,OAAO,MAAM,aAAa,OAAO,SAAS;AAChD,eAAS,KAAK,KAAK;AAEnB,UAAI,UAAU;AACV,uBAAe,EAAE;AAAA,MAAA,OACd;AACH,gBAAQ,KAAK;AAAA,MAAA;AAAA,aAEZ,OAAO;AACZ,yBAAmB,KAAc;AAAA,IAAA;AAAA,EAEzC;AAEM,QAAA,gBAAgB,CAAC,UAAkD;AACjE,QAAA,mBAAmB,KAAK,GAAG;AAC3B,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,YAAY,GAAG,yBAAyB;AAAA,IAC1C,6CAA6C,CAAC;AAAA,IAC9C,oEAAoE,CAAC,CAAC;AAAA,EAAA,CACzE;AAED,QAAM,kBAAkB,eAClB;AAAA,IACI,QAAQ,CAACC,WACL,aAAa,EAAE,GAAGA,QAAO,SAAS,uBAAuB,aAAa,MAAM;AAAA,EAAA,IAEpF;AAAA,IACI,SAAS,MAAM,OAAO,WAAW;AAAA,EACrC;AAEA,QAAA,aAAa,qBAAqB,MAAM,QAAQ;AAGlD,SAAAD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,YAAY,eAAe,aAAa;AAAA,IAAA;AAAA,IACxCA,+BAAA,cAAC,QAAK,EAAA,WAAU,+BACX,eAEOA,+BAAA,cAAAA,eAAA,UAAA,MAAAA,+BAAA,cAAC,MAAK,EAAA,WAAU,WAAU,MAAK,cAAc,CAAA,GAAE,KAAE,UACrD,IAGKA,+BAAA,cAAAA,eAAA,UAAA,MAAA,YACAA,+BAAA,cAAA,KAAA,EAAI,OAAO,WAAW,WAAU,iBAAA,GAC5B,WACL,CACJ,CAER;AAAA,EACJ;AAER;"}
+{"version":3,"file":"Create.js","sources":["../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\nimport { Select2CreateHandler } from '../types';\nimport { Icon } from '../../Icon/Icon';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport type CreateProps = {\n    onCreate: Select2CreateHandler;\n    options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n    let occurrences = {} as Record<Color, number>;\n    AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n        occurrences = { ...occurrences, [color]: 0 };\n    });\n\n    options.reduce((occurrences, option) => {\n        if (option.props.color) {\n            occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n        }\n        return occurrences;\n    }, occurrences);\n\n    const colors = Object.keys(occurrences);\n\n    if (colors.length) {\n        return colors.sort((a, b) => occurrences[a as Color] - occurrences[b as Color])[0] as Color;\n    }\n\n    return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n    const { onCreate: handleCreate, options } = props;\n    const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue, createDialog, createTriggerText } =\n        useSelect2Context();\n    const { texts } = useLocalization();\n\n    // determine what the next color tag should be based on color occurences\n    const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n    const onCreateDialogClose = React.useCallback(() => {\n        setOpen(false);\n    }, [setOpen]);\n\n    if (!createDialog && !searchQuery) {\n        return null;\n    }\n\n    const create = async (value?: string | unknown) => {\n        try {\n            const item = await handleCreate(value, nextColor);\n            setValue(item.value);\n\n            if (multiple) {\n                setSearchQuery('');\n            } else {\n                setOpen(false);\n            }\n        } catch (error) {\n            setValidationError(error as Error);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (isAriaSelectionKey(event)) {\n            event.currentTarget.click();\n        }\n    };\n\n    const className = cn(createOptionClassName(), {\n        'ml-1.5 !w-[calc(100%_-_theme(spacing.3))]': !createDialog,\n        '!-mb-1.5 h-9 border-t border-gray-300 px-4 py-2.5 leading-normal': !!createDialog,\n    });\n\n    const creationOptions = createDialog\n        ? {\n              dialog: (props: Partial<DialogProps>) =>\n                  createDialog({ ...props, onClose: onCreateDialogClose }, searchQuery, create),\n          }\n        : {\n              onClick: () => create(searchQuery),\n          };\n\n    const createText = createTriggerText || texts.select2.create;\n\n    return (\n        <LegacyButton\n            className={className}\n            {...creationOptions}\n            onKeyDown={handleKeyDown}\n            appearance={createDialog ? 'discrete' : 'default'}>\n            <span className=\"flex items-center gap-1.5\">\n                {createDialog ? (\n                    <>\n                        <Icon className=\"text-xs\" name=\"circle-plus\" /> {createText}\n                    </>\n                ) : (\n                    <>\n                        {createText}\n                        <Tag color={nextColor} className=\"cursor-pointer\">\n                            {searchQuery}\n                        </Tag>\n                    </>\n                )}\n            </span>\n        </LegacyButton>\n    );\n};\n"],"names":["occurrences","React","props"],"mappings":";;;;;;;;;;AAoBO,MAAM,eAAe,CAAC,YAAyE;AAClG,MAAI,cAAc,CAAA;AAClB,mBAAiB,OAAO,CAAA,UAAS,UAAU,aAAa,EAAE,QAAQ,CAAC,UAAiB;AAChF,kBAAc,EAAE,GAAG,aAAa,CAAC,KAAK,GAAG,EAAA;AAAA,EAC7C,CAAC;AAED,UAAQ,OAAO,CAACA,cAAa,WAAW;AACpC,QAAI,OAAO,MAAM,OAAO;AACpBA,mBAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAIA,aAAY,OAAO,MAAM,KAAK,IAAI,IAAI;AAAA,IAC9G;AACA,WAAOA;AAAAA,EACX,GAAG,WAAW;AAEd,QAAM,SAAS,OAAO,KAAK,WAAW;AAEtC,MAAI,OAAO,QAAQ;AACf,WAAO,OAAO,KAAK,CAAC,GAAG,MAAM,YAAY,CAAU,IAAI,YAAY,CAAU,CAAC,EAAE,CAAC;AAAA,EACrF;AAEA,SAAO;AACX;AAEO,MAAM,SAAS,CAAC,UAAuB;AAC1C,QAAM,EAAE,UAAU,cAAc,QAAA,IAAY;AAC5C,QAAM,EAAE,UAAU,aAAa,SAAS,gBAAgB,oBAAoB,UAAU,cAAc,kBAAA,IAChG,kBAAA;AACJ,QAAM,EAAE,MAAA,IAAU,gBAAA;AAGlB,QAAM,YAAYC,eAAM,QAAQ,MAAM,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;AAEtE,QAAM,sBAAsBA,eAAM,YAAY,MAAM;AAChD,YAAQ,KAAK;AAAA,EACjB,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,gBAAgB,CAAC,aAAa;AAC/B,WAAO;AAAA,EACX;AAEA,QAAM,SAAS,OAAO,UAA6B;AAC/C,QAAI;AACA,YAAM,OAAO,MAAM,aAAa,OAAO,SAAS;AAChD,eAAS,KAAK,KAAK;AAEnB,UAAI,UAAU;AACV,uBAAe,EAAE;AAAA,MACrB,OAAO;AACH,gBAAQ,KAAK;AAAA,MACjB;AAAA,IACJ,SAAS,OAAO;AACZ,yBAAmB,KAAc;AAAA,IACrC;AAAA,EACJ;AAEA,QAAM,gBAAgB,CAAC,UAAkD;AACrE,QAAI,mBAAmB,KAAK,GAAG;AAC3B,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,yBAAyB;AAAA,IAC1C,6CAA6C,CAAC;AAAA,IAC9C,oEAAoE,CAAC,CAAC;AAAA,EAAA,CACzE;AAED,QAAM,kBAAkB,eAClB;AAAA,IACI,QAAQ,CAACC,WACL,aAAa,EAAE,GAAGA,QAAO,SAAS,uBAAuB,aAAa,MAAM;AAAA,EAAA,IAEpF;AAAA,IACI,SAAS,MAAM,OAAO,WAAW;AAAA,EAAA;AAG3C,QAAM,aAAa,qBAAqB,MAAM,QAAQ;AAEtD,SACID,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,YAAY,eAAe,aAAa;AAAA,IAAA;AAAA,IACxCA,+BAAA,cAAC,QAAA,EAAK,WAAU,+BACX,eACGA,+BAAA,cAAAA,eAAA,UAAA,MACIA,+BAAA,cAAC,MAAA,EAAK,WAAU,WAAU,MAAK,cAAA,CAAc,GAAE,KAAE,UACrD,IAEAA,+BAAA,cAAAA,eAAA,UAAA,MACK,YACDA,+BAAA,cAAC,KAAA,EAAI,OAAO,WAAW,WAAU,iBAAA,GAC5B,WACL,CACJ,CAER;AAAA,EAAA;AAGZ;"}

package/dist/components/Select2/components/Edit.cjs

@@ -41,7 +41,6 @@ const EditPopover = (props) => {
     }
   };
   const handleSave = (close) => async (event) => {
-    var _a;
     if (onEdit && (name !== initialName || color !== initialColor)) {
       try {
         await onEdit(value, name, color);
@@ -50,21 +49,20 @@ const EditPopover = (props) => {
         event.preventDefault();
         event.stopPropagation();
         setValidationError(error);
-        (_a = ref.current) == null ? void 0 : _a.focus();
+        ref.current?.focus();
       }
     } else {
       close();
     }
   };
   const handleCloseAutoFocus = () => {
-    var _a, _b;
     setName(initialName);
     setColor(initialColor);
     setValidationError(void 0);
-    if (searchRef == null ? void 0 : searchRef.current) {
-      (_a = searchRef.current) == null ? void 0 : _a.focus();
+    if (searchRef?.current) {
+      searchRef.current?.focus();
     } else {
-      (_b = selectRef.current) == null ? void 0 : _b.focus();
+      selectRef.current?.focus();
     }
   };
   const preventKeyDownPropagation = (event) => {
@@ -93,7 +91,7 @@ const EditPopover = (props) => {
       {
         className: cn("!min-h-fit", { "!pb-0": !validationError }),
         invalid: !!validationError,
-        message: validationError == null ? void 0 : validationError.message
+        message: validationError?.message
       },
       /* @__PURE__ */ React.createElement(
         Input.Input,
@@ -157,7 +155,7 @@ const Colours = (props) => {
         {
           className: cn(
             "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
-            tailwind.getSubtleColorShadeClasses(availableColor),
+            tailwind.SUBTLE_COLOR_SHADE_CLASSNAME[availableColor],
             state.isFocusVisible && "ring-2 ring-blue-500"
           )
         },

package/dist/components/Select2/components/Edit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Edit.cjs","sources":["../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Inline } from '../../Inline/Inline';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\nimport { RadioGroup as RadioGroupPrimitive, Radio as RadioPrimitive } from 'react-aria-components';\n\nexport type EditPopoverProps = PopoverProps & {\n    color?: Color;\n    text: string;\n    value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n    const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n    const ref = React.useRef<HTMLInputElement>(null);\n    const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n    const { texts } = useLocalization();\n    const [name, setName] = React.useState(initialName);\n    const [color, setColor] = React.useState(initialColor);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setName(event.target.value);\n        setValidationError(undefined);\n    };\n\n    const handleInputKeyDown = (close: () => void) => async (event: React.KeyboardEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n\n        if (event.key === 'Escape') {\n            close();\n        } else if (event.key === 'Enter') {\n            const fn = handleSave(close);\n            await fn(event);\n        }\n    };\n\n    const handleDelete = (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        close();\n\n        if (onDelete) {\n            await onDelete(value);\n        }\n    };\n\n    const handleSave =\n        (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n            if (onEdit && (name !== initialName || color !== initialColor)) {\n                try {\n                    await onEdit(value, name, color);\n                    close();\n                } catch (error) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setValidationError(error as Error);\n                    ref.current?.focus();\n                }\n            } else {\n                close();\n            }\n        };\n\n    const handleCloseAutoFocus = () => {\n        setName(initialName);\n        setColor(initialColor);\n        setValidationError(undefined);\n\n        if (searchRef?.current) {\n            searchRef.current?.focus();\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const preventKeyDownPropagation = (event: React.KeyboardEvent) => {\n        // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.\n        if (event.key === 'Escape' || event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            return;\n        }\n        event.stopPropagation();\n    };\n\n    const popoverContentKeyDown = (event: React.KeyboardEvent) => {\n        // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,\n        // to avoid 'Tab' key execution on Option component and closing the dropdown.\n        if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} modal={false}>\n            <Popover.Content\n                finalFocus={handleCloseAutoFocus}\n                onClick={event => event.stopPropagation()}\n                onKeyDown={popoverContentKeyDown}\n                placement=\"right\"\n                tabIndex={-1}\n                className=\"focus:!shadow-none\">\n                {({ close }) => (\n                    <>\n                        <div className=\"flex w-32 flex-col space-y-2\" data-taco=\"edit-popover\">\n                            {onEdit ? (\n                                <>\n                                    <Field\n                                        className={cn('!min-h-fit', { '!pb-0': !validationError })}\n                                        invalid={!!validationError}\n                                        message={validationError?.message}>\n                                        <Input\n                                            invalid={!!validationError}\n                                            onChange={handleInputChange}\n                                            onKeyDown={handleInputKeyDown(close)}\n                                            ref={ref}\n                                            value={name}\n                                        />\n                                    </Field>\n                                    {initialColor ? (\n                                        <>\n                                            <h5>Colours</h5>\n                                            <Colours\n                                                color={color}\n                                                onChangeColor={setColor}\n                                                onKeyDown={preventKeyDownPropagation}\n                                            />\n                                        </>\n                                    ) : null}\n                                    <Inline spacing={4} noWrap>\n                                        <LegacyButton onClick={close}>{texts.select2.cancel}</LegacyButton>\n                                        <LegacyButton\n                                            appearance=\"primary\"\n                                            onClick={handleSave(close) as (event: React.MouseEvent<HTMLButtonElement>) => void}>\n                                            {texts.select2.save}\n                                        </LegacyButton>\n                                    </Inline>\n                                </>\n                            ) : null}\n                            {onEdit && onDelete ? <hr /> : null}\n                            {onDelete ? (\n                                <button\n                                    className=\"flex items-center justify-start gap-1 hover:text-gray-700\"\n                                    onClick={handleDelete(close)}\n                                    onKeyDown={preventKeyDownPropagation}>\n                                    <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n                                </button>\n                            ) : null}\n                        </div>\n                    </>\n                )}\n            </Popover.Content>\n        </Popover>\n    );\n};\n\ntype Props = {\n    color: string | undefined;\n    onChangeColor: React.Dispatch<React.SetStateAction<Color | undefined>>;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n};\n\nconst Colours = (props: Props) => {\n    const { color, onChangeColor, onKeyDown } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <RadioGroupPrimitive\n            aria-label={texts.select2.chooseColor}\n            className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n            onChange={(value: string) => onChangeColor(value as Color)}\n            value={color}>\n            {AVAILABLE_COLORS.map((availableColor: Color) => (\n                <RadioPrimitive\n                    key={availableColor}\n                    aria-label={color}\n                    onKeyDown={onKeyDown}\n                    value={availableColor}\n                    data-taco={`${availableColor}-radio`}>\n                    {state => (\n                        <div\n                            className={cn(\n                                'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n                                getSubtleColorShadeClasses(availableColor as Color),\n                                state.isFocusVisible && 'ring-2 ring-blue-500'\n                            )}>\n                            {state.isSelected && <Icon name=\"tick\" className=\"!h-5 !w-5\" />}\n                        </div>\n                    )}\n                </RadioPrimitive>\n            ))}\n        </RadioGroupPrimitive>\n    );\n};\n"],"names":["useSelect2Context","useLocalization","Popover","Field","Input","Inline","LegacyButton","Icon","RadioGroupPrimitive","AVAILABLE_COLORS","RadioPrimitive","getSubtleColorShadeClasses"],"mappings":"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"}
+{"version":3,"file":"Edit.cjs","sources":["../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { Input } from '../../Input/Input';\nimport { Popover, PopoverProps } from '../../Popover/Popover';\nimport { Icon } from '../../Icon/Icon';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { Inline } from '../../Inline/Inline';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, SUBTLE_COLOR_SHADE_CLASSNAME } from '../../../utils/tailwind';\nimport { RadioGroup as RadioGroupPrimitive, Radio as RadioPrimitive } from 'react-aria-components';\n\nexport type EditPopoverProps = PopoverProps & {\n    color?: Color;\n    text: string;\n    value: Select2OptionValue;\n};\n\nexport const EditPopover = (props: EditPopoverProps) => {\n    const { color: initialColor, text: initialName, value, ...popoverProps } = props;\n    const ref = React.useRef<HTMLInputElement>(null);\n    const { onDelete, onEdit, searchRef, ref: selectRef } = useSelect2Context();\n    const { texts } = useLocalization();\n    const [name, setName] = React.useState(initialName);\n    const [color, setColor] = React.useState(initialColor);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setName(event.target.value);\n        setValidationError(undefined);\n    };\n\n    const handleInputKeyDown = (close: () => void) => async (event: React.KeyboardEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n\n        if (event.key === 'Escape') {\n            close();\n        } else if (event.key === 'Enter') {\n            const fn = handleSave(close);\n            await fn(event);\n        }\n    };\n\n    const handleDelete = (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        close();\n\n        if (onDelete) {\n            await onDelete(value);\n        }\n    };\n\n    const handleSave =\n        (close: () => void) => async (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>) => {\n            if (onEdit && (name !== initialName || color !== initialColor)) {\n                try {\n                    await onEdit(value, name, color);\n                    close();\n                } catch (error) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setValidationError(error as Error);\n                    ref.current?.focus();\n                }\n            } else {\n                close();\n            }\n        };\n\n    const handleCloseAutoFocus = () => {\n        setName(initialName);\n        setColor(initialColor);\n        setValidationError(undefined);\n\n        if (searchRef?.current) {\n            searchRef.current?.focus();\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const preventKeyDownPropagation = (event: React.KeyboardEvent) => {\n        // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.\n        if (event.key === 'Escape' || event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            return;\n        }\n        event.stopPropagation();\n    };\n\n    const popoverContentKeyDown = (event: React.KeyboardEvent) => {\n        // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,\n        // to avoid 'Tab' key execution on Option component and closing the dropdown.\n        if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} modal={false}>\n            <Popover.Content\n                finalFocus={handleCloseAutoFocus}\n                onClick={event => event.stopPropagation()}\n                onKeyDown={popoverContentKeyDown}\n                placement=\"right\"\n                tabIndex={-1}\n                className=\"focus:!shadow-none\">\n                {({ close }) => (\n                    <>\n                        <div className=\"flex w-32 flex-col space-y-2\" data-taco=\"edit-popover\">\n                            {onEdit ? (\n                                <>\n                                    <Field\n                                        className={cn('!min-h-fit', { '!pb-0': !validationError })}\n                                        invalid={!!validationError}\n                                        message={validationError?.message}>\n                                        <Input\n                                            invalid={!!validationError}\n                                            onChange={handleInputChange}\n                                            onKeyDown={handleInputKeyDown(close)}\n                                            ref={ref}\n                                            value={name}\n                                        />\n                                    </Field>\n                                    {initialColor ? (\n                                        <>\n                                            <h5>Colours</h5>\n                                            <Colours\n                                                color={color}\n                                                onChangeColor={setColor}\n                                                onKeyDown={preventKeyDownPropagation}\n                                            />\n                                        </>\n                                    ) : null}\n                                    <Inline spacing={4} noWrap>\n                                        <LegacyButton onClick={close}>{texts.select2.cancel}</LegacyButton>\n                                        <LegacyButton\n                                            appearance=\"primary\"\n                                            onClick={handleSave(close) as (event: React.MouseEvent<HTMLButtonElement>) => void}>\n                                            {texts.select2.save}\n                                        </LegacyButton>\n                                    </Inline>\n                                </>\n                            ) : null}\n                            {onEdit && onDelete ? <hr /> : null}\n                            {onDelete ? (\n                                <button\n                                    className=\"flex items-center justify-start gap-1 hover:text-gray-700\"\n                                    onClick={handleDelete(close)}\n                                    onKeyDown={preventKeyDownPropagation}>\n                                    <Icon className=\"!h-5 !w-5\" name=\"delete-permanently\" /> {texts.select2.delete}\n                                </button>\n                            ) : null}\n                        </div>\n                    </>\n                )}\n            </Popover.Content>\n        </Popover>\n    );\n};\n\ntype Props = {\n    color: string | undefined;\n    onChangeColor: React.Dispatch<React.SetStateAction<Color | undefined>>;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n};\n\nconst Colours = (props: Props) => {\n    const { color, onChangeColor, onKeyDown } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <RadioGroupPrimitive\n            aria-label={texts.select2.chooseColor}\n            className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n            onChange={(value: string) => onChangeColor(value as Color)}\n            value={color}>\n            {AVAILABLE_COLORS.map((availableColor: Color) => (\n                <RadioPrimitive\n                    key={availableColor}\n                    aria-label={color}\n                    onKeyDown={onKeyDown}\n                    value={availableColor}\n                    data-taco={`${availableColor}-radio`}>\n                    {state => (\n                        <div\n                            className={cn(\n                                'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n                                SUBTLE_COLOR_SHADE_CLASSNAME[availableColor],\n                                state.isFocusVisible && 'ring-2 ring-blue-500'\n                            )}>\n                            {state.isSelected && <Icon name=\"tick\" className=\"!h-5 !w-5\" />}\n                        </div>\n                    )}\n                </RadioPrimitive>\n            ))}\n        </RadioGroupPrimitive>\n    );\n};\n"],"names":["useSelect2Context","useLocalization","Popover","Field","Input","Inline","LegacyButton","Icon","RadioGroupPrimitive","AVAILABLE_COLORS","RadioPrimitive","SUBTLE_COLOR_SHADE_CLASSNAME"],"mappings":"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"}

package/dist/components/Select2/components/Edit.js

@@ -8,7 +8,7 @@ import { useSelect2Context } from "./Context.js";
 import { Field } from "../../Field/Field.js";
 import { Inline } from "../../Inline/Inline.js";
 import { useLocalization } from "../../Provider/Localization.js";
-import { AVAILABLE_COLORS, getSubtleColorShadeClasses } from "../../../utils/tailwind.js";
+import { AVAILABLE_COLORS, SUBTLE_COLOR_SHADE_CLASSNAME } from "../../../utils/tailwind.js";
 import { RadioGroup, Radio } from "react-aria-components";
 const EditPopover = (props) => {
   const { color: initialColor, text: initialName, value, ...popoverProps } = props;
@@ -39,7 +39,6 @@ const EditPopover = (props) => {
     }
   };
   const handleSave = (close) => async (event) => {
-    var _a;
     if (onEdit && (name !== initialName || color !== initialColor)) {
       try {
         await onEdit(value, name, color);
@@ -48,21 +47,20 @@ const EditPopover = (props) => {
         event.preventDefault();
         event.stopPropagation();
         setValidationError(error);
-        (_a = ref.current) == null ? void 0 : _a.focus();
+        ref.current?.focus();
       }
     } else {
       close();
     }
   };
   const handleCloseAutoFocus = () => {
-    var _a, _b;
     setName(initialName);
     setColor(initialColor);
     setValidationError(void 0);
-    if (searchRef == null ? void 0 : searchRef.current) {
-      (_a = searchRef.current) == null ? void 0 : _a.focus();
+    if (searchRef?.current) {
+      searchRef.current?.focus();
     } else {
-      (_b = selectRef.current) == null ? void 0 : _b.focus();
+      selectRef.current?.focus();
     }
   };
   const preventKeyDownPropagation = (event) => {
@@ -91,7 +89,7 @@ const EditPopover = (props) => {
       {
         className: cn("!min-h-fit", { "!pb-0": !validationError }),
         invalid: !!validationError,
-        message: validationError == null ? void 0 : validationError.message
+        message: validationError?.message
       },
       /* @__PURE__ */ React__default.createElement(
         Input,
@@ -155,7 +153,7 @@ const Colours = (props) => {
         {
           className: cn(
             "flex h-6 w-6 cursor-pointer items-center justify-center rounded",
-            getSubtleColorShadeClasses(availableColor),
+            SUBTLE_COLOR_SHADE_CLASSNAME[availableColor],
             state.isFocusVisible && "ring-2 ring-blue-500"
           )
         },