@economic/taco 2.37.2 → 2.39.0

package/dist/components/OverflowGroup/OverflowGroup.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { ButtonProps } from '../Button/Button';
 export declare const OverflowGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     moreButton?: ((moreButtonText: string) => React.ReactElement<ButtonProps>) | undefined;
+    wrapChild?: true | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Select2Children, Select2CreateHandler, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value } from './types';
+import { Select2Children, Select2CreateHandler, Select2CreateDialogRenderer, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value } from './types';
 import { Select2OptionProps } from './components/Option';
 import { Select2GroupProps } from './components/Group';
 import { Select2TitleProps } from './components/Title';
@@ -59,6 +59,11 @@ declare type Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'child
     tags?: boolean;
     /** Value of the input in select2 */
     value?: Select2Value;
+    /** Create dialog component, if specified, then create button will become always visible in the bottom of options dropdown,
+     * when clicked, it will open create dialog and wait for 'onCreate' handler to be triggered from the dialog */
+    createDialog?: Select2CreateDialogRenderer;
+    /** Create button text */
+    createTriggerText?: string;
 };
 declare type Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {
     Option: React.ForwardRefExoticComponent<Select2OptionProps>;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { CollectionRef } from '../../../primitives/Collection/Collection';
-import { Select2CreateHandler, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value } from '../types';
+import { Select2CreateHandler, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value, Select2CreateDialogRenderer } from '../types';
 import { FontSize } from '../../../types';
 export declare type Select2ContextProps = {
+    createDialog?: Select2CreateDialogRenderer;
+    createTriggerText?: string;
     disabled: boolean;
     highlighted: boolean;
     invalid: boolean;

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { Listbox2OptionValue } from '../../primitives/Listbox2/types';
 import { Color } from '../../types';
+import { DialogProps } from '../Dialog/Dialog';
 import { Select2GroupProps, Select2OptionProps } from './Select2';
 export declare type Select2OptionValue = Listbox2OptionValue;
 export declare type Select2Value = Select2OptionValue | Select2OptionValue[];
 export declare type Select2Children = Array<React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>>;
-export declare type Select2CreateHandler = (text: string, color: Color | undefined) => Promise<Select2OptionProps> | Select2OptionProps;
+export declare type Select2CreateHandler = (item: any, color: Color | undefined) => Promise<Select2OptionProps> | Select2OptionProps;
+export declare type Select2CreateDialogRenderer = (props: Partial<DialogProps>, value: string, onCreate: (optionToCreate: unknown) => Promise<void>) => JSX.Element;
 export declare type Select2DeleteHandler = (value: Select2OptionValue) => Promise<void> | void;
 export declare type Select2EditHandler = (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void> | void;

package/dist/components/Tabs/Tabs.d.ts

@@ -44,6 +44,11 @@ export declare type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {
      * A unique value that associates the content with a trigger.
      */
     id: string;
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 };
 export declare type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */

package/dist/esm/index.css

@@ -1032,7 +1032,7 @@ table[data-taco^='table'] > tbody > tr:not([data-row-selected]):hover > td,
         table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-active] > td,
         table[data-taco^='table'] > tbody > tr:not([data-row-selected])[data-row-group] > td {
             --table-row-actions-shadow: theme(colors.grey.100);
-            @apply bg-grey-100;
+            @apply bg-grey-100 print:bg-white;
         }
 /* search highlighting */
 table[data-taco^='table'] > tbody > tr:not([data-row-selected]) > td[data-cell-highlighted='true'] {
@@ -1240,6 +1240,10 @@ table[data-taco='table3'] td:focus {
     @apply rounded-sm ring-2 ring-inset ring-[#4573D2];
 }
 
+table[data-taco='table3'] [data-taco='checkbox'][data-focus='programmatic']:focus {
+    @apply yt-focus;
+}
+
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='input'],
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='textarea'],
 table[data-taco='table3'][data-table-editing-mode] tbody tr:not([data-row-active='true']):hover td [data-taco='Select2'] {

package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js

@@ -73,7 +73,9 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
     className: cn('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
-    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
+    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hiddenChildren.map((child, index) => props.wrapChild ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      key: index
+    }, child)) : sanitizeButtonPropsForMenuItem(child, index))))),
     ref: buttonRefCallback
   }) : null);
 });

package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <IconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","texts","useLocalization","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","hiddenChildrenCount","length","moreButtonText","header","more","MoreButton","_moreButton","IconButton","icon","cn","map","child","visible","menuProps","Content"],"mappings":"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"}
+{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: (moreButtonText: string) => React.ReactElement<ButtonProps>;\n    wrapChild?: true | undefined;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const { texts } = useLocalization();\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n    const hiddenChildrenCount = hiddenChildren.length;\n    const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';\n\n    const MoreButton = moreButton?.(moreButtonText) ?? <IconButton icon=\"more\" />;\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(MoreButton, {\n                      className: cn('sticky right-0 order-[99]', MoreButton.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>\n                                  {hiddenChildren.map((child, index) =>\n                                      props.wrapChild ? (\n                                          <Menu.Item key={index}>{child}</Menu.Item>\n                                      ) : (\n                                          sanitizeButtonPropsForMenuItem(child, index)\n                                      )\n                                  )}\n                              </Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","texts","useLocalization","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","hiddenChildrenCount","length","moreButtonText","header","more","MoreButton","_moreButton","IconButton","icon","cn","map","child","visible","menuProps","Content","wrapChild"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/Select2.js

@@ -49,6 +49,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly = false,
     tags = false,
     value: prop,
+    createDialog,
+    createTriggerText,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -128,7 +130,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     tags,
     fontSize,
     validationError,
-    value
+    value,
+    createDialog,
+    createTriggerText
   };
   const handleKeyDown = event => {
     var _listboxRef$current;
@@ -213,7 +217,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none"', createCollectionClassName());
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
+  const isInlineCreation = onCreate && !createDialog;
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(Root, {
@@ -244,8 +249,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search, {
-    placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
+  }, flattenedChildren.length > 0 || isInlineCreation ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search, {
+    placeholder: isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
   }), multiple && selectOptions.length > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
@@ -266,7 +271,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   })), /*#__PURE__*/React__default.createElement("span", null, texts.listbox.loading))) : flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
-  }, "No results found...")) : ( /*#__PURE__*/React__default.createElement(Root$1, {
+  }, texts.listbox.empty)) : ( /*#__PURE__*/React__default.createElement(Root$1, {
     className: "flex flex-col gap-0.5",
     customSelector: ":scope > button",
     disabled: disabled,

package/dist/esm/packages/taco/src/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 { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\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, 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 { Button } from '../Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\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};\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: defaultProp,\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        ...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 [tabTriggeredClose, setTabTriggeredClose] = React.useState(false);\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\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    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (isElementInsideTable3OrReport(event.currentTarget)) {\n            return;\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\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    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const handleCloseAutoFocus = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (tabTriggeredClose) {\n            const nextFocussableElement = getNextFocussableElement(internalRef.current);\n\n            if (nextFocussableElement) {\n                // UX requirement: move focus to the next focussable element when tab key is pressed to select the value\n                nextFocussableElement.focus();\n                // Reset the tabTriggeredClose state\n                setTabTriggeredClose(false);\n            }\n        } else {\n            internalRef.current?.focus();\n        }\n    };\n\n    const selectOptions =\n        searchQuery === ''\n            ? flattenedChildren.map(child => child.props.value)\n            : filteredChildren\n                  .map(child =>\n                      isGroup(child)\n                          ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n                          : child.props.value\n                  )\n                  .flatMap(c => c) || [];\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            } else {\n                return texts.select2.selectAll;\n            }\n        } else if (areAllSelected) {\n            return texts.select2.deselectAllResults;\n        } else {\n            return texts.select2.selectAllResults;\n        }\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('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none\"', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        placeholder={placeholder}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <>\n                                    <Search\n                                        placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                        ref={searchRef}\n                                        onTabKeyPress={() => setTabTriggeredClose(true)}\n                                    />\n                                    {multiple && selectOptions.length > 1 && (\n                                        <>\n                                            <Button\n                                                className=\"!justify-start\"\n                                                appearance=\"discrete\"\n                                                onClick={areAllSelected ? deselectAll : selectAll}>\n                                                {selectAllText}\n                                            </Button>\n                                            <div className=\"border-grey-300 mx-3 rounded border-t\" />\n                                        </>\n                                    )}\n                                </>\n                            ) : null}\n                            {loading ? (\n                                <span className={cn('text-grey-700 flex items-center italic', 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 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\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\nconst ControlledHiddenField = props => {\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} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\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};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","fontSize","highlighted","invalid","loading","multiple","name","onChange","onCreate","onDelete","onEdit","placeholder","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","tabTriggeredClose","setTabTriggeredClose","useState","open","setOpen","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","isElementInsideTable3OrReport","currentTarget","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","handleCloseAutoFocus","stopPropagation","nextFocussableElement","getNextFocussableElement","focus","_internalRef$current","selectOptions","map","child","isGroup","Array","isArray","subChild","flatMap","c","areAllSelected","every","option","includes","selectAllText","select2","deselectAll","selectAll","deselectAllResults","selectAllResults","length","preselectedValues","filter","nextValue","subValue","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current2","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","Search","searchOrCreate","search","onTabKeyPress","Button","appearance","onClick","getFontSize","Spinner","delay","FontSizes","small","medium","large","listbox","role","customSelector","Collection","Create","options","ControlledHiddenField","parentRef","Group","Title","isFormControl","useIsFormControl","bubbleValue","String","BubbleSelect","displayName"],"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 { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-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, 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 { Button } from '../Button/Button';\nimport { Spinner } from '../Spinner/Spinner';\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: defaultProp,\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 [tabTriggeredClose, setTabTriggeredClose] = React.useState(false);\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\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 handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (isElementInsideTable3OrReport(event.currentTarget)) {\n            return;\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\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    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const handleCloseAutoFocus = (event: Event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (tabTriggeredClose) {\n            const nextFocussableElement = getNextFocussableElement(internalRef.current);\n\n            if (nextFocussableElement) {\n                // UX requirement: move focus to the next focussable element when tab key is pressed to select the value\n                nextFocussableElement.focus();\n                // Reset the tabTriggeredClose state\n                setTabTriggeredClose(false);\n            }\n        } else {\n            internalRef.current?.focus();\n        }\n    };\n\n    const selectOptions =\n        searchQuery === ''\n            ? flattenedChildren.map(child => child.props.value)\n            : filteredChildren\n                  .map(child =>\n                      isGroup(child)\n                          ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value)\n                          : child.props.value\n                  )\n                  .flatMap(c => c) || [];\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            } else {\n                return texts.select2.selectAll;\n            }\n        } else if (areAllSelected) {\n            return texts.select2.deselectAllResults;\n        } else {\n            return texts.select2.selectAllResults;\n        }\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('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n    const isInlineCreation = onCreate && !createDialog;\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        placeholder={placeholder}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || isInlineCreation ? (\n                                <>\n                                    <Search\n                                        placeholder={isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search}\n                                        ref={searchRef}\n                                        onTabKeyPress={() => setTabTriggeredClose(true)}\n                                    />\n                                    {multiple && selectOptions.length > 1 && (\n                                        <>\n                                            <Button\n                                                className=\"!justify-start\"\n                                                appearance=\"discrete\"\n                                                onClick={areAllSelected ? deselectAll : selectAll}>\n                                                {selectAllText}\n                                            </Button>\n                                            <div className=\"border-grey-300 mx-3 rounded border-t\" />\n                                        </>\n                                    )}\n                                </>\n                            ) : null}\n                            {loading ? (\n                                <span className={cn('text-grey-700 flex items-center italic', 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 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    {texts.listbox.empty}\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\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\nconst ControlledHiddenField = props => {\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} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\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};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","fontSize","highlighted","invalid","loading","multiple","name","onChange","onCreate","onDelete","onEdit","placeholder","readOnly","tags","value","prop","createDialog","createTriggerText","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","tabTriggeredClose","setTabTriggeredClose","useState","open","setOpen","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","isElementInsideTable3OrReport","currentTarget","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","handleCloseAutoFocus","stopPropagation","nextFocussableElement","getNextFocussableElement","focus","_internalRef$current","selectOptions","map","child","isGroup","Array","isArray","subChild","flatMap","c","areAllSelected","every","option","includes","selectAllText","select2","deselectAll","selectAll","deselectAllResults","selectAllResults","length","preselectedValues","filter","nextValue","subValue","cn","createCollectionClassName","isInlineCreation","Select2Context","Provider","PopoverPrimitive","onOpenChange","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current2","onCloseAutoFocus","sideOffset","tabIndex","style","minWidth","width","Search","searchOrCreate","search","onTabKeyPress","Button","appearance","onClick","getFontSize","Spinner","delay","FontSizes","small","medium","large","listbox","role","empty","customSelector","Collection","Create","options","ControlledHiddenField","parentRef","Group","Title","isFormControl","useIsFormControl","bubbleValue","String","BubbleSelect","displayName"],"mappings":"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"}

package/dist/esm/packages/taco/src/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 { Select2CreateHandler, Select2DeleteHandler, Select2EditHandler, Select2OptionValue, Select2Value } from '../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2ContextProps = {\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":["Select2Context","React","createContext","useSelect2Context","useContext"],"mappings":";;MA+BaA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAC,EAAyB;MAC9DC,iBAAiB,GAAGA,MAAMF,cAAK,CAACG,UAAU,CAACJ,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>;\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":["Select2Context","React","createContext","useSelect2Context","useContext"],"mappings":";;MAwCaA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAC,EAAyB;MAC9DC,iBAAiB,GAAGA,MAAMF,cAAK,CAACG,UAAU,CAACJ,cAAc;;;;"}

package/dist/esm/packages/taco/src/components/Select2/components/Create.js

@@ -1,7 +1,9 @@
 import React__default from 'react';
 import cn from 'clsx';
 import { AVAILABLE_COLORS } from '../../../utils/tailwind.js';
+import { Icon } from '../../Icon/Icon.js';
 import { useLocalization } from '../../Provider/Localization.js';
+import { Button } from '../../Button/Button.js';
 import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
 import { isAriaSelectionKey } from '../../../utils/aria.js';
 import { Tag } from '../../Tag/Tag.js';
@@ -39,20 +41,25 @@ const Create = props => {
     setOpen,
     setSearchQuery,
     setValidationError,
-    setValue
+    setValue,
+    createDialog,
+    createTriggerText
   } = useSelect2Context();
   const {
     texts
   } = useLocalization();
   // determine what the next color tag should be based on color occurences
   const nextColor = React__default.useMemo(() => getNextColor(options), [options]);
-  if (!searchQuery) {
+  const onCreateDialogClose = React__default.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  if (!createDialog && !searchQuery) {
     return null;
   }
-  const handleClick = function () {
+  const create = function (value) {
     try {
       const _temp = _catch(function () {
-        return Promise.resolve(handleCreate(searchQuery, nextColor)).then(function (item) {
+        return Promise.resolve(handleCreate(value, nextColor)).then(function (item) {
           setValue(item.value);
           if (multiple) {
             setSearchQuery('');
@@ -73,17 +80,33 @@ const Create = props => {
       event.currentTarget.click();
     }
   };
-  const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());
-  return /*#__PURE__*/React__default.createElement("button", {
-    className: className,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React__default.createElement("span", {
+  const className = cn(createOptionClassName(), {
+    '!w-[calc(100%_-_theme(spacing.3))] ml-1.5': !createDialog,
+    'leading-normal border-grey-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog
+  });
+  const creationOptions = createDialog ? {
+    dialog: props => createDialog({
+      ...props,
+      onClose: onCreateDialogClose
+    }, searchQuery, create)
+  } : {
+    onClick: () => create(searchQuery)
+  };
+  const createText = createTriggerText || texts.select2.create;
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    className: className
+  }, creationOptions, {
+    onKeyDown: handleKeyDown,
+    appearance: createDialog ? 'discrete' : 'default'
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: "flex items-center gap-1.5"
-  }, texts.select2.create, /*#__PURE__*/React__default.createElement(Tag, {
+  }, createDialog ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "text-xs",
+    name: "circle-plus"
+  }), " ", createText)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, createText, /*#__PURE__*/React__default.createElement(Tag, {
     color: nextColor,
     className: "cursor-pointer"
-  }, searchQuery)));
+  }, searchQuery)))));
 };
 
 export { Create, getNextColor };

package/dist/esm/packages/taco/src/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';\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 = {};\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] - occurrences[b])[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 } = 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    if (!searchQuery) {\n        return null;\n    }\n\n    const handleClick = async () => {\n        try {\n            const item = await handleCreate(searchQuery, 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 => {\n        if (isAriaSelectionKey(event)) {\n            event.currentTarget.click();\n        }\n    };\n\n    const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());\n    return (\n        <button className={className} onClick={handleClick} onKeyDown={handleKeyDown}>\n            <span className=\"flex items-center gap-1.5\">\n                {texts.select2.create}\n                <Tag color={nextColor} className=\"cursor-pointer\">\n                    {searchQuery}\n                </Tag>\n            </span>\n        </button>\n    );\n};\n"],"names":["getNextColor","options","occurrences","AVAILABLE_COLORS","filter","color","forEach","reduce","option","props","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","handleClick","Promise","resolve","then","item","value","error","_temp","e","reject","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","onClick","onKeyDown","select2","create","Tag"],"mappings":";;;;;;;;;;MAiBaA,YAAY,GAAIC,OAAiD;EAC1E,IAAIC,WAAW,GAAG,EAAE;EACpBC,gBAAgB,CAACC,MAAM,CAACC,KAAK,IAAIA,KAAK,KAAK,aAAa,CAAC,CAACC,OAAO,CAAED,KAAY;IAC3EH,WAAW,GAAG;MAAE,GAAGA,WAAW;MAAE,CAACG,KAAK,GAAG;KAAG;GAC/C,CAAC;EAEFJ,OAAO,CAACM,MAAM,CAAC,CAACL,WAAW,EAAEM,MAAM;IAC/B,IAAIA,MAAM,CAACC,KAAK,CAACJ,KAAK,EAAE;MACpBH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;IAE/G,OAAOH,WAAW;GACrB,EAAEA,WAAW,CAAC;EAEf,MAAMQ,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACV,WAAW,CAAC;EAEvC,IAAIQ,MAAM,CAACG,MAAM,EAAE;IACf,OAAOH,MAAM,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKd,WAAW,CAACa,CAAC,CAAC,GAAGb,WAAW,CAACc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAU;;EAG7E,OAAOC,SAAS;AACpB;MAEaC,MAAM,GAAIT,KAAkB;EACrC,MAAM;IAAEU,QAAQ,EAAEC,YAAY;IAAEnB;GAAS,GAAGQ,KAAK;EACjD,MAAM;IAAEY,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAU,GAAGC,iBAAiB,EAAE;EAC5G,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMhC,YAAY,CAACC,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEvE,IAAI,CAACqB,WAAW,EAAE;IACd,OAAO,IAAI;;EAGf,MAAMW,WAAW;IAAA;uCACT;QAAA,OAAAC,OAAA,CAAAC,OAAA,CACmBf,YAAY,CAACE,WAAW,EAAEQ,SAAS,CAAC,EAAAM,IAAA,WAAjDC,IAAI;UACVX,QAAQ,CAACW,IAAI,CAACC,KAAK,CAAC;UAAC,IAEjBjB,QAAQ;YACRG,cAAc,CAAC,EAAE,CAAC;;YAElBD,OAAO,CAAC,KAAK,CAAC;;;OAErB,YAAQgB,KAAK,EAAE;QACZd,kBAAkB,CAACc,KAAc,CAAC;OACrC;MAAA,OAAAL,OAAA,CAAAC,OAAA,CAAAK,KAAA,IAAAA,KAAA,CAAAJ,IAAA,GAAAI,KAAA,CAAAJ,IAAA;KACJ,QAAAK,CAAA;MAAA,OAAAP,OAAA,CAAAQ,MAAA,CAAAD,CAAA;;;EAED,MAAME,aAAa,GAAGC,KAAK;IACvB,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3BA,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,SAAS,GAAGC,EAAE,CAAC,2CAA2C,EAAEC,qBAAqB,EAAE,CAAC;EAC1F,oBACInB;IAAQiB,SAAS,EAAEA,SAAS;IAAEG,OAAO,EAAElB,WAAW;IAAEmB,SAAS,EAAET;kBAC3DZ;IAAMiB,SAAS,EAAC;KACXpB,KAAK,CAACyB,OAAO,CAACC,MAAM,eACrBvB,6BAACwB,GAAG;IAAClD,KAAK,EAAEyB,SAAS;IAAEkB,SAAS,EAAC;KAC5B1B,WAAW,CACV,CACH,CACF;AAEjB;;;;"}
+{"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 { Button } from '../../Button/Button';\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 = {};\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] - occurrences[b])[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 => {\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-grey-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog,\n    });\n\n    const creationOptions = createDialog\n        ? {\n              dialog: props => 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        <Button\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        </Button>\n    );\n};\n"],"names":["getNextColor","options","occurrences","AVAILABLE_COLORS","filter","color","forEach","reduce","option","props","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","createDialog","createTriggerText","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","onCreateDialogClose","useCallback","create","value","Promise","resolve","then","item","error","_temp","e","reject","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","creationOptions","dialog","onClose","onClick","createText","select2","Button","onKeyDown","appearance","Icon","name","Tag"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js

@@ -148,7 +148,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   }, output));
 });
 const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerMultiple(props, ref) {
-  var _buttonRef$current;
+  var _buttonRef$current2;
   const {
     children,
     emptyValue: _,
@@ -165,6 +165,11 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   } = useSelect2Context();
   const buttonRef = useMergedRef(ref);
   const valuesAsChildren = values.map(value => children.find(c => c.props.value === value)).filter(c => !!c);
+  const forwardClick = event => {
+    var _buttonRef$current;
+    event.preventDefault();
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.click();
+  };
   let content;
   let {
     className
@@ -172,7 +177,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   if (open) {
     className = cn('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
-      className: "my-1 flex max-h-[5.5rem] flex-col"
+      className: "my-1 flex max-h-[5.5rem] flex-col",
+      onClick: forwardClick
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
@@ -195,7 +201,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, child.props.children)))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
-      key: String(open),
+      onClick: forwardClick,
       valuesAsChildren: valuesAsChildren,
       placeholder: placeholder
     });
@@ -204,7 +210,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className: "relative inline-flex h-fit flex-grow",
     "data-taco": "select2-container",
     style: {
-      width: open ? (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth : undefined
+      width: open ? (_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.offsetWidth : undefined
     }
   }, /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
     className: className,
@@ -212,30 +218,23 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   }), content));
 });
 const MultipleValue = ({
+  onClick,
   valuesAsChildren,
   placeholder
 }) => {
   const {
     disabled,
-    open,
     readOnly,
-    setValue,
     tags
   } = useSelect2Context();
   const [contentRef, setContentRef] = React__default.useState(null);
   const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
-  const createClickHandler = tagValue => event => {
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    if (!disabled && !readOnly) {
-      setValue(tagValue);
-    }
-  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative flex items-center gap-1 overflow-hidden"
+    className: "relative flex w-full items-center gap-1 overflow-hidden",
+    onClick: onClick
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-1 truncate",
-    ref: el => setContentRef(el)
+    className: "flex flex-1 gap-1 truncate",
+    ref: ref => setContentRef(ref)
   }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement(Placeholder, {
     disabled: disabled,
     readOnly: readOnly
@@ -249,7 +248,6 @@ const MultipleValue = ({
       color: tags ? child.props.color : undefined,
       disabled: disabled,
       icon: child.props.prefix,
-      onDelete: open ? createClickHandler(child.props.value) : undefined,
       readOnly: readOnly
     }, child.props.children);
     if (index === boundaryIndex) {