@economic/taco 2.40.0 → 2.40.2

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

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
+
+const Collection = props => {
+  const {
+    children
+  } = props;
+  // max-h-[11.5rem] = is 5.5 options + spacing between them. Option height is 2rem, spacing 0.125. In total it's 11.5.
+  return /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className: "flex max-h-[11.5rem] w-full flex-col gap-y-0.5 px-1.5"
+  }, children);
+};
+
+export { Collection };
+//# sourceMappingURL=Collection.js.map

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

@@ -0,0 +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":["Collection","props","children","React","ScrollArea","className"],"mappings":";;;MASaA,UAAU,GAAIC,KAA6B;EACpD,MAAM;IAAEC;GAAU,GAAGD,KAAK;;EAG1B,oBAAOE,6BAACC,UAAU;IAACC,SAAS,EAAC;KAAyDH,QAAQ,CAAc;AAChH;;;;"}

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

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const Select2Context = /*#__PURE__*/React__default.createContext({});
+const useSelect2Context = () => React__default.useContext(Select2Context);
+
+export { Select2Context, useSelect2Context };
+//# sourceMappingURL=Context.js.map

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

@@ -0,0 +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":["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

@@ -0,0 +1,113 @@
+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';
+import { createOptionClassName } from '../utilities.js';
+import { useSelect2Context } from './Context.js';
+
+const getNextColor = options => {
+  let occurrences = {};
+  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
+    occurrences = {
+      ...occurrences,
+      [color]: 0
+    };
+  });
+  options.reduce((occurrences, option) => {
+    if (option.props.color) {
+      occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
+    }
+    return occurrences;
+  }, occurrences);
+  const colors = Object.keys(occurrences);
+  if (colors.length) {
+    return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
+  }
+  return undefined;
+};
+const Create = props => {
+  const {
+    onCreate: handleCreate,
+    options
+  } = props;
+  const {
+    multiple,
+    searchQuery,
+    setOpen,
+    setSearchQuery,
+    setValidationError,
+    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]);
+  const onCreateDialogClose = React__default.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  if (!createDialog && !searchQuery) {
+    return null;
+  }
+  const create = function (value) {
+    try {
+      const _temp = _catch(function () {
+        return Promise.resolve(handleCreate(value, nextColor)).then(function (item) {
+          setValue(item.value);
+          if (multiple) {
+            setSearchQuery('');
+          } else {
+            setOpen(false);
+          }
+        });
+      }, function (error) {
+        setValidationError(error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleKeyDown = event => {
+    if (isAriaSelectionKey(event)) {
+      event.currentTarget.click();
+    }
+  };
+  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"
+  }, 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)))));
+};
+
+export { Create, getNextColor };
+//# sourceMappingURL=Create.js.map

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

@@ -0,0 +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 { 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/Edit.js

@@ -0,0 +1,197 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind.js';
+import { Icon } from '../../Icon/Icon.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Button } from '../../Button/Button.js';
+import { Input } from '../../Input/Input.js';
+import { Popover } from '../../Popover/Popover.js';
+import { Group } from '../../Group/Group.js';
+import { Field } from '../../Field/Field.js';
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
+import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+import { useSelect2Context } from './Context.js';
+
+const EditPopover = props => {
+  const {
+    color: initialColor,
+    text: initialName,
+    value,
+    ...popoverProps
+  } = props;
+  const ref = React__default.useRef(null);
+  const {
+    onDelete,
+    onEdit,
+    searchRef,
+    ref: selectRef
+  } = useSelect2Context();
+  const {
+    texts
+  } = useLocalization();
+  const [name, setName] = React__default.useState(initialName);
+  const [color, setColor] = React__default.useState(initialColor);
+  const [validationError, setValidationError] = React__default.useState();
+  const handleInputChange = event => {
+    setName(event.target.value);
+    setValidationError(undefined);
+  };
+  const handleInputKeyDown = close => function (event) {
+    try {
+      event.stopPropagation();
+      if (event.key === 'Escape') {
+        close();
+      } else if (event.key === 'Enter') {
+        handleSave(close)(event);
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleDelete = close => function (event) {
+    try {
+      event.stopPropagation();
+      close();
+      const _temp = function () {
+        if (onDelete) {
+          return Promise.resolve(onDelete(value)).then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSave = close => function (event) {
+    try {
+      const _temp3 = function () {
+        if (onEdit && (name !== initialName || color !== initialColor)) {
+          const _temp2 = _catch(function () {
+            return Promise.resolve(onEdit(value, name, color)).then(function () {
+              close();
+            });
+          }, function (error) {
+            var _ref$current;
+            event.preventDefault();
+            event.stopPropagation();
+            setValidationError(error);
+            (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+          });
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
+        } else {
+          close();
+        }
+      }();
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleCloseAutoFocus = event => {
+    event.preventDefault();
+    setName(initialName);
+    setColor(initialColor);
+    setValidationError(undefined);
+    if (searchRef !== null && searchRef !== void 0 && searchRef.current) {
+      var _searchRef$current;
+      (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus();
+    } else {
+      var _selectRef$current;
+      (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.focus();
+    }
+  };
+  const handleInteractOutside = () => {
+    setName(initialName);
+    setColor(initialColor);
+  };
+  const preventKeyDownPropagation = event => {
+    // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.
+    if (event.key === 'Escape' || event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+      return;
+    } else {
+      event.stopPropagation();
+    }
+  };
+  const popoverContentKeyDown = event => {
+    // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,
+    // to avoid 'Tab' key execution on Option component and closing the dropdown.
+    if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+      event.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+    onCloseAutoFocus: handleCloseAutoFocus,
+    onInteractOutside: handleInteractOutside,
+    onClick: event => event.stopPropagation(),
+    onKeyDown: popoverContentKeyDown,
+    placement: "right",
+    tabIndex: -1,
+    className: "focus:!shadow-none"
+  }, ({
+    close
+  }) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-32 flex-col space-y-2"
+  }, onEdit ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+    className: cn('!min-h-fit', {
+      '!pb-0': !validationError
+    }),
+    invalid: !!validationError,
+    message: validationError === null || validationError === void 0 ? void 0 : validationError.message
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    invalid: !!validationError,
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown(close),
+    ref: ref,
+    value: name
+  })), initialColor ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h5", null, "Colours"), /*#__PURE__*/React__default.createElement(Colours, {
+    color: color,
+    onChangeColor: setColor,
+    onKeyDown: preventKeyDownPropagation
+  }))) : null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: close
+  }, texts.select2.cancel), /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "primary",
+    onClick: handleSave(close)
+  }, texts.select2.save)))) : null, onEdit && onDelete ? /*#__PURE__*/React__default.createElement("hr", null) : null, onDelete ? (/*#__PURE__*/React__default.createElement("button", {
+    className: "hover:text-grey-700 flex items-center justify-start gap-1",
+    onClick: handleDelete(close),
+    onKeyDown: preventKeyDownPropagation
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "!h-5 !w-5",
+    name: "delete-permanently"
+  }), " ", texts.select2.delete)) : null)))));
+};
+const Colours = props => {
+  const {
+    color,
+    onChangeColor,
+    onClick,
+    onKeyDown
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Root, {
+    "aria-label": texts.select2.chooseColor,
+    className: "grid grid-cols-4 gap-2 focus:outline-none",
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    onValueChange: color => onChangeColor(color),
+    value: color
+  }, AVAILABLE_COLORS.map(availableColor => (/*#__PURE__*/React__default.createElement(Item, {
+    "aria-label": color,
+    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', getSubtleColorShadeClasses(availableColor)),
+    key: availableColor,
+    onFocus: () => onChangeColor(availableColor),
+    value: availableColor
+  }, /*#__PURE__*/React__default.createElement(Indicator, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick",
+    className: "!h-5 !w-5"
+  }))))));
+};
+
+export { EditPopover };
+//# sourceMappingURL=Edit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Edit.js","sources":["../../../../../../../../src/components/Select2/components/Edit.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as RadioGroup from '@radix-ui/react-radio-group';\nimport { Button } from '../../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 { Group } from '../../Group/Group';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS, getSubtleColorShadeClasses } from '../../../utils/tailwind';\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 => {\n        setName(event.target.value);\n        setValidationError(undefined);\n    };\n\n    const handleInputKeyDown = close => async event => {\n        event.stopPropagation();\n\n        if (event.key === 'Escape') {\n            close();\n        } else if (event.key === 'Enter') {\n            handleSave(close)(event);\n        }\n    };\n\n    const handleDelete = close => async event => {\n        event.stopPropagation();\n        close();\n\n        if (onDelete) {\n            await onDelete(value);\n        }\n    };\n\n    const handleSave = close => async event => {\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 = event => {\n        event.preventDefault();\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 handleInteractOutside = () => {\n        setName(initialName);\n        setColor(initialColor);\n    };\n\n    const preventKeyDownPropagation = event => {\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        } else {\n            event.stopPropagation();\n        }\n    };\n\n    const popoverContentKeyDown = event => {\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}>\n            <Popover.Content\n                onCloseAutoFocus={handleCloseAutoFocus}\n                onInteractOutside={handleInteractOutside}\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\">\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                                    <Group>\n                                        <Button onClick={close}>{texts.select2.cancel}</Button>\n                                        <Button appearance=\"primary\" onClick={handleSave(close)}>\n                                            {texts.select2.save}\n                                        </Button>\n                                    </Group>\n                                </>\n                            ) : null}\n                            {onEdit && onDelete ? <hr /> : null}\n                            {onDelete ? (\n                                <button\n                                    className=\"hover:text-grey-700 flex items-center justify-start gap-1\"\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\nconst Colours = props => {\n    const { color, onChangeColor, onClick, onKeyDown } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <RadioGroup.Root\n            aria-label={texts.select2.chooseColor}\n            className=\"grid grid-cols-4 gap-2 focus:outline-none\"\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            onValueChange={color => onChangeColor(color)}\n            value={color}>\n            {AVAILABLE_COLORS.map((availableColor: string) => (\n                <RadioGroup.Item\n                    aria-label={color}\n                    className={cn(\n                        'flex h-6 w-6 cursor-pointer items-center justify-center rounded',\n                        getSubtleColorShadeClasses(availableColor as Color)\n                    )}\n                    key={availableColor}\n                    onFocus={() => onChangeColor(availableColor)}\n                    value={availableColor}>\n                    <RadioGroup.Indicator asChild>\n                        <Icon name=\"tick\" className=\"!h-5 !w-5\" />\n                    </RadioGroup.Indicator>\n                </RadioGroup.Item>\n            ))}\n        </RadioGroup.Root>\n    );\n};\n"],"names":["EditPopover","props","color","initialColor","text","initialName","value","popoverProps","ref","React","useRef","onDelete","onEdit","searchRef","selectRef","useSelect2Context","texts","useLocalization","name","setName","useState","setColor","validationError","setValidationError","handleInputChange","event","target","undefined","handleInputKeyDown","close","stopPropagation","key","handleSave","Promise","resolve","e","reject","handleDelete","_temp","then","_temp2","_catch","error","_ref$current","preventDefault","current","focus","_temp3","handleCloseAutoFocus","_searchRef$current","_selectRef$current","handleInteractOutside","preventKeyDownPropagation","shiftKey","popoverContentKeyDown","Popover","Content","onCloseAutoFocus","onInteractOutside","onClick","onKeyDown","placement","tabIndex","className","Field","cn","invalid","message","Input","onChange","Colours","onChangeColor","Group","Button","select2","cancel","appearance","save","Icon","delete","RadioGroup","chooseColor","onValueChange","AVAILABLE_COLORS","map","availableColor","getSubtleColorShadeClasses","onFocus","asChild"],"mappings":";;;;;;;;;;;;;;MAqBaA,WAAW,GAAIC,KAAuB;EAC/C,MAAM;IAAEC,KAAK,EAAEC,YAAY;IAAEC,IAAI,EAAEC,WAAW;IAAEC,KAAK;IAAE,GAAGC;GAAc,GAAGN,KAAK;EAChF,MAAMO,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAChD,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,SAAS;IAAEL,GAAG,EAAEM;GAAW,GAAGC,iBAAiB,EAAE;EAC3E,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGV,cAAK,CAACW,QAAQ,CAACf,WAAW,CAAC;EACnD,MAAM,CAACH,KAAK,EAAEmB,QAAQ,CAAC,GAAGZ,cAAK,CAACW,QAAQ,CAACjB,YAAY,CAAC;EACtD,MAAM,CAACmB,eAAe,EAAEC,kBAAkB,CAAC,GAAGd,cAAK,CAACW,QAAQ,EAAqB;EAEjF,MAAMI,iBAAiB,GAAGC,KAAK;IAC3BN,OAAO,CAACM,KAAK,CAACC,MAAM,CAACpB,KAAK,CAAC;IAC3BiB,kBAAkB,CAACI,SAAS,CAAC;GAChC;EAED,MAAMC,kBAAkB,GAAGC,KAAK,cAAUJ,KAAK;IAAA;MAC3CA,KAAK,CAACK,eAAe,EAAE;MAEvB,IAAIL,KAAK,CAACM,GAAG,KAAK,QAAQ,EAAE;QACxBF,KAAK,EAAE;OACV,MAAM,IAAIJ,KAAK,CAACM,GAAG,KAAK,OAAO,EAAE;QAC9BC,UAAU,CAACH,KAAK,CAAC,CAACJ,KAAK,CAAC;;MAC3B,OAAAQ,OAAA,CAAAC,OAAA;KACJ,QAAAC,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAED,MAAME,YAAY,GAAGR,KAAK,cAAUJ,KAAK;IAAA;MACrCA,KAAK,CAACK,eAAe,EAAE;MACvBD,KAAK,EAAE;MAAC,MAAAS,KAAA;QAAA,IAEJ3B,QAAQ;UAAA,OAAAsB,OAAA,CAAAC,OAAA,CACFvB,QAAQ,CAACL,KAAK,CAAC,EAAAiC,IAAA;;;MAAA,OAAAN,OAAA,CAAAC,OAAA,CAAAI,KAAA,IAAAA,KAAA,CAAAC,IAAA,GAAAD,KAAA,CAAAC,IAAA;KAE5B,QAAAJ,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAED,MAAMH,UAAU,GAAGH,KAAK,cAAUJ,KAAK;IAAA;;YAC/Bb,MAAM,KAAKM,IAAI,KAAKb,WAAW,IAAIH,KAAK,KAAKC,YAAY,CAAC;UAAA,MAAAqC,MAAA,GAAAC,MAAA,aACtD;YAAA,OAAAR,OAAA,CAAAC,OAAA,CACMtB,MAAM,CAACN,KAAK,EAAEY,IAAI,EAAEhB,KAAK,CAAC,EAAAqC,IAAA;cAChCV,KAAK,EAAE;;WACV,YAAQa,KAAK,EAAE;YAAA,IAAAC,YAAA;YACZlB,KAAK,CAACmB,cAAc,EAAE;YACtBnB,KAAK,CAACK,eAAe,EAAE;YACvBP,kBAAkB,CAACmB,KAAc,CAAC;YAClC,CAAAC,YAAA,GAAAnC,GAAG,CAACqC,OAAO,cAAAF,YAAA,uBAAXA,YAAA,CAAaG,KAAK,EAAE;WACvB;UAAA,IAAAN,MAAA,IAAAA,MAAA,CAAAD,IAAA,SAAAC,MAAA,CAAAD,IAAA;;UAEDV,KAAK,EAAE;;;MAAC,OAAAI,OAAA,CAAAC,OAAA,CAAAa,MAAA,IAAAA,MAAA,CAAAR,IAAA,GAAAQ,MAAA,CAAAR,IAAA;KAEf,QAAAJ,CAAA;MAAA,OAAAF,OAAA,CAAAG,MAAA,CAAAD,CAAA;;;EAED,MAAMa,oBAAoB,GAAGvB,KAAK;IAC9BA,KAAK,CAACmB,cAAc,EAAE;IACtBzB,OAAO,CAACd,WAAW,CAAC;IACpBgB,QAAQ,CAAClB,YAAY,CAAC;IACtBoB,kBAAkB,CAACI,SAAS,CAAC;IAE7B,IAAId,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEgC,OAAO,EAAE;MAAA,IAAAI,kBAAA;MACpB,CAAAA,kBAAA,GAAApC,SAAS,CAACgC,OAAO,cAAAI,kBAAA,uBAAjBA,kBAAA,CAAmBH,KAAK,EAAE;KAC7B,MAAM;MAAA,IAAAI,kBAAA;MACH,CAAAA,kBAAA,GAAApC,SAAS,CAAC+B,OAAO,cAAAK,kBAAA,uBAAjBA,kBAAA,CAAmBJ,KAAK,EAAE;;GAEjC;EAED,MAAMK,qBAAqB,GAAGA;IAC1BhC,OAAO,CAACd,WAAW,CAAC;IACpBgB,QAAQ,CAAClB,YAAY,CAAC;GACzB;EAED,MAAMiD,yBAAyB,GAAG3B,KAAK;;IAEnC,IAAIA,KAAK,CAACM,GAAG,KAAK,QAAQ,IAAIN,KAAK,CAACM,GAAG,KAAK,KAAK,IAAKN,KAAK,CAACM,GAAG,KAAK,KAAK,IAAIN,KAAK,CAAC4B,QAAS,EAAE;MAC1F;KACH,MAAM;MACH5B,KAAK,CAACK,eAAe,EAAE;;GAE9B;EAED,MAAMwB,qBAAqB,GAAG7B,KAAK;;;IAG/B,IAAIA,KAAK,CAACM,GAAG,KAAK,KAAK,IAAKN,KAAK,CAACM,GAAG,KAAK,KAAK,IAAIN,KAAK,CAAC4B,QAAS,EAAE;MAChE5B,KAAK,CAACK,eAAe,EAAE;;GAE9B;EAED,oBACIrB,6BAAC8C,OAAO,oBAAKhD,YAAY,gBACrBE,6BAAC8C,OAAO,CAACC,OAAO;IACZC,gBAAgB,EAAET,oBAAoB;IACtCU,iBAAiB,EAAEP,qBAAqB;IACxCQ,OAAO,EAAElC,KAAK,IAAIA,KAAK,CAACK,eAAe,EAAE;IACzC8B,SAAS,EAAEN,qBAAqB;IAChCO,SAAS,EAAC,OAAO;IACjBC,QAAQ,EAAE,CAAC,CAAC;IACZC,SAAS,EAAC;KACT,CAAC;IAAElC;GAAO,mBACPpB,yEACIA;IAAKsD,SAAS,EAAC;KACVnD,MAAM,iBACHH,yEACIA,6BAACuD,KAAK;IACFD,SAAS,EAAEE,EAAE,CAAC,YAAY,EAAE;MAAE,OAAO,EAAE,CAAC3C;KAAiB,CAAC;IAC1D4C,OAAO,EAAE,CAAC,CAAC5C,eAAe;IAC1B6C,OAAO,EAAE7C,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAE6C;kBAC1B1D,6BAAC2D,KAAK;IACFF,OAAO,EAAE,CAAC,CAAC5C,eAAe;IAC1B+C,QAAQ,EAAE7C,iBAAiB;IAC3BoC,SAAS,EAAEhC,kBAAkB,CAACC,KAAK,CAAC;IACpCrB,GAAG,EAAEA,GAAG;IACRF,KAAK,EAAEY;IACT,CACE,EACPf,YAAY,iBACTM,yEACIA,mDAAgB,eAChBA,6BAAC6D,OAAO;IACJpE,KAAK,EAAEA,KAAK;IACZqE,aAAa,EAAElD,QAAQ;IACvBuC,SAAS,EAAER;IACb,CACH,IACH,IAAI,eACR3C,6BAAC+D,KAAK,qBACF/D,6BAACgE,MAAM;IAACd,OAAO,EAAE9B;KAAQb,KAAK,CAAC0D,OAAO,CAACC,MAAM,CAAU,eACvDlE,6BAACgE,MAAM;IAACG,UAAU,EAAC,SAAS;IAACjB,OAAO,EAAE3B,UAAU,CAACH,KAAK;KACjDb,KAAK,CAAC0D,OAAO,CAACG,IAAI,CACd,CACL,CACT,IACH,IAAI,EACPjE,MAAM,IAAID,QAAQ,gBAAGF,wCAAM,GAAG,IAAI,EAClCE,QAAQ,iBACLF;IACIsD,SAAS,EAAC,2DAA2D;IACrEJ,OAAO,EAAEtB,YAAY,CAACR,KAAK,CAAC;IAC5B+B,SAAS,EAAER;kBACX3C,6BAACqE,IAAI;IAACf,SAAS,EAAC,WAAW;IAAC7C,IAAI,EAAC;IAAuB,OAAEF,KAAK,CAAC0D,OAAO,CAACK,MAAM,CACzE,IACT,IAAI,CACN,CACP,CACN,CACa,CACZ;AAElB;AAEA,MAAMT,OAAO,GAAGrE,KAAK;EACjB,MAAM;IAAEC,KAAK;IAAEqE,aAAa;IAAEZ,OAAO;IAAEC;GAAW,GAAG3D,KAAK;EAC1D,MAAM;IAAEe;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIR,6BAACuE,IAAe;kBACAhE,KAAK,CAAC0D,OAAO,CAACO,WAAW;IACrClB,SAAS,EAAC,2CAA2C;IACrDJ,OAAO,EAAEA,OAAO;IAChBC,SAAS,EAAEA,SAAS;IACpBsB,aAAa,EAAEhF,KAAK,IAAIqE,aAAa,CAACrE,KAAK,CAAC;IAC5CI,KAAK,EAAEJ;KACNiF,gBAAgB,CAACC,GAAG,CAAEC,cAAsB,kBACzC5E,6BAACuE,IAAe;kBACA9E,KAAK;IACjB6D,SAAS,EAAEE,EAAE,CACT,iEAAiE,EACjEqB,0BAA0B,CAACD,cAAuB,CAAC,CACtD;IACDtD,GAAG,EAAEsD,cAAc;IACnBE,OAAO,EAAEA,MAAMhB,aAAa,CAACc,cAAc,CAAC;IAC5C/E,KAAK,EAAE+E;kBACP5E,6BAACuE,SAAoB;IAACQ,OAAO;kBACzB/E,6BAACqE,IAAI;IAAC5D,IAAI,EAAC,MAAM;IAAC6C,SAAS,EAAC;IAAc,CACvB,CACT,CACrB,CAAC,CACY;AAE1B,CAAC;;;;"}

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

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import cn from 'clsx';
+import '../../../primitives/Listbox2/components/Root.js';
+import '../../../primitives/Listbox2/components/Option.js';
+import { Group as Group$1 } from '../../../primitives/Listbox2/components/Group.js';
+import { Title } from '../../../primitives/Listbox2/components/Title.js';
+import { createCollectionClassName } from '../utilities.js';
+
+const Group = /*#__PURE__*/React__default.forwardRef(function Select2Group(props, ref) {
+  const {
+    children,
+    heading,
+    hasSeparator,
+    ...attributes
+  } = props;
+  const className = cn(createCollectionClassName(), {
+    "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Title, {
+    className: "sticky top-0 bg-white px-2 font-bold leading-8"
+  }, heading), children);
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../../src/components/Select2/components/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createCollectionClassName } from '../utilities';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2GroupProps = Omit<ListboxPrimitive.Listbox2GroupProps, 'children'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n    hasSeparator?: boolean;\n    heading?: string;\n};\n\nexport const Group = React.forwardRef<HTMLDivElement, Select2GroupProps>(function Select2Group(props, ref) {\n    const { children, heading, hasSeparator, ...attributes } = props;\n    const className = cn(\n        createCollectionClassName(),\n        {\n            \"last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px\":\n                hasSeparator && children.length,\n        },\n        props.className\n    );\n\n    return (\n        <ListboxPrimitive.Group {...attributes} className={className} ref={ref}>\n            <ListboxPrimitive.Title className=\"sticky top-0 bg-white px-2 font-bold leading-8\">{heading}</ListboxPrimitive.Title>\n            {children}\n        </ListboxPrimitive.Group>\n    );\n});\n"],"names":["Group","React","forwardRef","Select2Group","props","ref","children","heading","hasSeparator","attributes","className","cn","createCollectionClassName","length","ListboxPrimitive"],"mappings":";;;;;;;;MAYaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAoC,SAASC,YAAYA,CAACC,KAAK,EAAEC,GAAG;EACrG,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAChE,MAAMM,SAAS,GAAGC,EAAE,CAChBC,yBAAyB,EAAE,EAC3B;IACI,+FAA+F,EAC3FJ,YAAY,IAAIF,QAAQ,CAACO;GAChC,EACDT,KAAK,CAACM,SAAS,CAClB;EAED,oBACIT,6BAACa,OAAsB,oBAAKL,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEL,GAAG,EAAEA;mBAC/DJ,6BAACa,KAAsB;IAACJ,SAAS,EAAC;KAAkDH,OAAO,CAA0B,EACpHD,QAAQ,CACY;AAEjC,CAAC;;;;"}

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

@@ -0,0 +1,108 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../Icon/Icon.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { isAriaSelectionKey } from '../../../utils/aria.js';
+import '../../../primitives/Listbox2/components/Root.js';
+import { Option as Option$1 } from '../../../primitives/Listbox2/components/Option.js';
+import '../../../primitives/Listbox2/components/Group.js';
+import '../../../primitives/Listbox2/components/Title.js';
+import { Tag } from '../../Tag/Tag.js';
+import { createOptionClassName, getFontSize } from '../utilities.js';
+import { useSelect2Context } from './Context.js';
+import { EditPopover } from './Edit.js';
+import { isMobileDevice } from '../../../utils/device.js';
+
+const Option = /*#__PURE__*/React__default.forwardRef(function Select2Option(props, ref) {
+  var _window;
+  const {
+    children,
+    color,
+    description,
+    prefix,
+    postfix,
+    className: cName,
+    ...otherProps
+  } = props;
+  const {
+    fontSize,
+    listboxRef,
+    multiple,
+    onDelete,
+    onEdit,
+    ref: selectRef,
+    setOpen,
+    shouldPauseHoverState,
+    tags,
+    value
+  } = useSelect2Context();
+  const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);
+  const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
+  const isTag = tags && !!color;
+  const handleClick = () => {
+    if (!multiple) {
+      setOpen(false);
+    } else {
+      var _selectRef$current;
+      (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.focus();
+    }
+  };
+  const handleKeyDown = event => {
+    if (isAriaSelectionKey(event)) {
+      if (!multiple || event.key === 'Tab') {
+        setOpen(false);
+      }
+    }
+  };
+  const isEmptyOption = children !== '';
+  const popover = isEmptyOption && (onEdit || onDelete) ? popoverProps => {
+    var _props$textValue, _props$textValue2;
+    return /*#__PURE__*/React__default.createElement(EditPopover, Object.assign({}, popoverProps, {
+      color: props.color,
+      key: (_props$textValue = props.textValue) !== null && _props$textValue !== void 0 ? _props$textValue : String(props.children),
+      text: (_props$textValue2 = props.textValue) !== null && _props$textValue2 !== void 0 ? _props$textValue2 : String(props.children),
+      value: props.value
+    }));
+  } : undefined;
+  return /*#__PURE__*/React__default.createElement(Option$1, Object.assign({}, otherProps, {
+    className: className,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }), hasValue ? (/*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick",
+    className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
+  })) : null, isTag ? (/*#__PURE__*/React__default.createElement(Tag, {
+    className: "pointer-events-none my-1",
+    color: color,
+    icon: prefix
+  }, children)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: prefix
+  }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex w-full justify-between"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React__default.createElement("span", null, children), description ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
+  }, description) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "flex flex-col self-center"
+  }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: postfix
+  }) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "ellipsis-vertical",
+    appearance: "discrete",
+    className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
+      '!visible': isMobileDevice((_window = window) === null || _window === void 0 ? void 0 : _window.navigator)
+    }),
+    onClick: event => {
+      var _listboxRef$current;
+      event.stopPropagation();
+      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndex(event.currentTarget.parentElement);
+    },
+    popover: popover,
+    tabIndex: -1
+  })) : null);
+});
+
+export { Option };
+//# sourceMappingURL=Option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName, getFontSize } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    fontSize?: FontSize;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        fontSize,\n        listboxRef,\n        multiple,\n        onDelete,\n        onEdit,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"flex flex-col self-center\">\n                            {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","fontSize","listboxRef","multiple","onDelete","onEdit","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","getFontSize","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":";;;;;;;;;;;;;;;MAwBaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;;EACxG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,WAAW;IAAEC,MAAM;IAAEC,OAAO;IAAEC,SAAS,EAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGT,KAAK;EAChG,MAAM;IACFU,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,QAAQ;IACRC,MAAM;IACNb,GAAG,EAAEc,SAAS;IACdC,OAAO;IACPC,qBAAqB;IACrBC,IAAI;IACJC;GACH,GAAGC,iBAAiB,EAAE;EACvB,MAAMb,SAAS,GAAGc,EAAE,CAACC,qBAAqB,CAACL,qBAAqB,CAAC,EAAEM,WAAW,CAACb,QAAQ,CAAC,EAAEF,KAAK,CAAC;EAEhG,MAAMgB,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACP,KAAK,CAAC,GAAG,CAAC,CAACA,KAAK,CAACQ,MAAM,GAAGR,KAAK,KAAKS,SAAS;EAC5E,MAAMC,KAAK,GAAGX,IAAI,IAAI,CAAC,CAACf,KAAK;EAE7B,MAAM2B,WAAW,GAAGA;IAChB,IAAI,CAAClB,QAAQ,EAAE;MACXI,OAAO,CAAC,KAAK,CAAC;KACjB,MAAM;MAAA,IAAAe,kBAAA;MACH,CAAAA,kBAAA,GAAAhB,SAAS,CAACiB,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;;GAEjC;EAED,MAAMC,aAAa,GAAIC,KAA0B;IAC7C,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3B,IAAI,CAACvB,QAAQ,IAAIuB,KAAK,CAACE,GAAG,KAAK,KAAK,EAAE;QAClCrB,OAAO,CAAC,KAAK,CAAC;;;GAGzB;EAED,MAAMsB,aAAa,GAAGpC,QAAQ,KAAK,EAAE;EAErC,MAAMqC,OAAO,GACTD,aAAa,KAAKxB,MAAM,IAAID,QAAQ,CAAC,GAC/B2B,YAAY;IAAA,IAAAC,gBAAA,EAAAC,iBAAA;IAAA,oBACR7C,6BAAC8C,WAAW,oBACJH,YAAY;MAChBrC,KAAK,EAAEH,KAAK,CAACG,KAAK;MAClBkC,GAAG,GAAAI,gBAAA,GAAEzC,KAAK,CAAC4C,SAAS,cAAAH,gBAAA,cAAAA,gBAAA,GAAII,MAAM,CAAC7C,KAAK,CAACE,QAAQ,CAAC;MAC9C4C,IAAI,GAAAJ,iBAAA,GAAE1C,KAAK,CAAC4C,SAAS,cAAAF,iBAAA,cAAAA,iBAAA,GAAIG,MAAM,CAAC7C,KAAK,CAACE,QAAQ,CAAC;MAC/CiB,KAAK,EAAEnB,KAAK,CAACmB;OACf;GACL,GACDS,SAAS;EAEnB,oBACI/B,6BAACkD,QAAuB,oBAAKtC,UAAU;IAAEF,SAAS,EAAEA,SAAS;IAAEyC,OAAO,EAAElB,WAAW;IAAEmB,SAAS,EAAEf,aAAa;IAAEjC,GAAG,EAAEA;MAC/GuB,QAAQ,iBACL3B,6BAACqD,IAAI;IAACC,IAAI,EAAC,MAAM;IAAC5C,SAAS,EAAC;IAAgF,IAC5G,IAAI,EAEPsB,KAAK,iBACFhC,6BAACuD,GAAG;IAAC7C,SAAS,EAAC,0BAA0B;IAACJ,KAAK,EAAEA,KAAK;IAAEkD,IAAI,EAAEhD;KACzDH,QAAQ,CACP,kBAENL,4DACKQ,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,gBAAGR,6BAACqD,IAAI;IAACC,IAAI,EAAE9C;IAAU,GAAGA,MAAM,GAAG,IAAI,eAC7ER;IAAMU,SAAS,EAAC;kBACZV;IAAMU,SAAS,EAAC;kBACZV,2CAAOK,QAAQ,CAAQ,EACtBE,WAAW,gBAAGP;IAAMU,SAAS,EAAC;KAAwCH,WAAW,CAAQ,GAAG,IAAI,CAC9F,eACPP;IAAMU,SAAS,EAAC;KACXD,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,gBAAGT,6BAACqD,IAAI;IAACC,IAAI,EAAE7C;IAAW,GAAGA,OAAO,GAAG,IAAI,CAC9E,CACJ,CACR,CACN,EACAiC,OAAO,iBACJ1C,6BAACyD,UAAU;IACPD,IAAI,EAAC,mBAAmB;IACxBE,UAAU,EAAC,UAAU;IACrBhD,SAAS,EAAEc,EAAE,CACT,6KAA6K,EAC7K;MACI,UAAU,EAAEmC,cAAc,EAAAC,OAAA,GAACC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,SAAS;KAC/C,CACJ;IACDX,OAAO,EAAEb,KAAK;;MACVA,KAAK,CAACyB,eAAe,EAAE;MACvBjD,UAAU,aAAVA,UAAU,wBAAAkD,mBAAA,GAAVlD,UAAU,CAAEqB,OAAO,cAAA6B,mBAAA,uBAAnBA,mBAAA,CAAqBC,cAAc,CAAC3B,KAAK,CAAC4B,aAAa,CAACC,aAA+B,CAAC;KAC3F;IACDzB,OAAO,EAAEA,OAAO;IAChB0B,QAAQ,EAAE,CAAC;IACb,IACF,IAAI,CACc;AAElC,CAAC;;;;"}

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

@@ -0,0 +1,64 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Input } from '../../Input/Input.js';
+import { createCustomKeyboardEvent } from '../../../utils/input.js';
+import { Field } from '../../Field/Field.js';
+import { isAriaSelectionKey } from '../../../utils/aria.js';
+import { useSelect2Context } from './Context.js';
+
+const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
+  const {
+    onTabKeyPress,
+    ...otherProps
+  } = props;
+  const {
+    listboxRef,
+    searchQuery,
+    setSearchQuery,
+    setValidationError,
+    validationError,
+    setOpen
+  } = useSelect2Context();
+  const handleChange = event => {
+    if (validationError) {
+      setValidationError(undefined);
+    }
+    setSearchQuery(event.target.value);
+  };
+  const handleKeyDown = event => {
+    // space is an aria selection key, so we have to remove it to allow spaces
+    if (event.key === ' ') {
+      return;
+    }
+    // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
+    if (event.key === 'Tab') {
+      setOpen(false);
+      onTabKeyPress();
+    }
+    if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      var _listboxRef$current;
+      event.preventDefault();
+      // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input
+      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
+      return;
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Field, {
+    className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
+      '!pb-0': !validationError
+    }),
+    invalid: !!validationError,
+    message: validationError === null || validationError === void 0 ? void 0 : validationError.message
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
+    "aria-hidden": true,
+    autoFocus: true,
+    invalid: !!validationError,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    value: searchQuery
+  })));
+});
+
+export { Search };
+//# sourceMappingURL=Search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {\n    onTabKeyPress: () => void;\n};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { onTabKeyPress, ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n    const handleChange = event => {\n        if (validationError) {\n            setValidationError(undefined);\n        }\n\n        setSearchQuery(event.target.value);\n    };\n\n    const handleKeyDown = event => {\n        // space is an aria selection key, so we have to remove it to allow spaces\n        if (event.key === ' ') {\n            return;\n        }\n\n        // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n        if (event.key === 'Tab') {\n            setOpen(false);\n            onTabKeyPress();\n        }\n\n        if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n            listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            return;\n        }\n    };\n\n    return (\n        <Field\n            className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n            invalid={!!validationError}\n            message={validationError?.message}>\n            <Input\n                {...otherProps}\n                aria-hidden\n                autoFocus\n                invalid={!!validationError}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                value={searchQuery}\n            />\n        </Field>\n    );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","onTabKeyPress","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAYaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC9C,MAAM;IAAEI,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACdP,aAAa,EAAE;;IAGnB,IAAIgB,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIf,6BAAC2B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B/B,6BAACgC,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBf,GAAG,EAAEA,GAAG;IACRc,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}