@economic/taco 1.12.2 → 1.13.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\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 { Select2OptionValue, Select2Value } 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 } 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 { useChildren } from './hooks/useChildren';\nimport { Color } from '../../utils/colors';\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Provider';\n//import { All } from './components/All';\n\nexport type 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};\n\nexport type Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n    defaultValue?: Select2Value;\n    emptyValue?: Select2OptionValue;\n    disabled?: boolean;\n    highlighted?: boolean;\n    invalid?: boolean;\n    multiple?: boolean;\n    name?: string;\n    onChange?: (value: Select2Value) => void;\n    onCreate?: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n    onDelete?: (value: Select2OptionValue) => Promise<void>;\n    onEdit?: (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void>;\n    readOnly?: boolean;\n    searchable?: boolean;\n    tags?: boolean;\n    value?: Select2Value;\n};\nexport type Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nexport const Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initialChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        searchable = false,\n        tabIndex = 0,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = 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\n    const { allChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\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        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else {\n            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                setOpen(true);\n            }\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    const className = cn('border-grey-dark 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                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={allChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\" type={undefined}>\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        children={allChildren}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}\n                    />\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {searchable ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            <ListboxPrimitive.Root\n                                className=\"flex flex-col gap-0.5\"\n                                customSelector=\":scope > button\"\n                                disabled={disabled}\n                                multiple={multiple}\n                                readOnly={readOnly}\n                                ref={listboxRef}\n                                setValue={setValue}\n                                tabIndex={-1}\n                                value={value}>\n                                {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={allChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === allChildren.length}\n                                    />\n                                ) : null*/}\n                                <Collection>{filteredChildren}</Collection>\n                                {onCreate ? <Create onCreate={onCreate} options={allChildren} /> : null}\n                            </ListboxPrimitive.Root>\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\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};\n"],"names":["Select2","React","forwardRef","props","ref","children","initialChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","searchable","tabIndex","tags","value","prop","otherProps","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","allChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","key","current","dispatchEvent","createCustomKeyboardEvent","className","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","type","Trigger","onKeyDown","align","onOpenAutoFocus","stopPropagation","focus","onCloseAutoFocus","sideOffset","style","minWidth","width","Search","placeholder","select2","searchOrCreate","search","customSelector","Collection","Create","Option","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
+
+const Collection = props => {
+  const {
+    children
+  } = props;
+  if (!children.length) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "text-grey-darkest -mt-0.5 flex h-8 items-center px-2",
+      role: "presentation"
+    }, "No results found...");
+  }
+  return /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className: "flex max-h-[10.25rem] 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 { Select2OptionProps } from './Option';\n\nexport type Select2CollectionProps = {\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Collection = (props: Select2CollectionProps) => {\n    const { children } = props;\n\n    if (!children.length) {\n        return (\n            <div className=\"text-grey-darkest -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                No results found...\n            </div>\n        );\n    }\n\n    return <ScrollArea className=\"flex max-h-[10.25rem] w-full flex-col gap-y-0.5 px-1.5\">{children}</ScrollArea>;\n};\n"],"names":["Collection","props","children","length","React","className","role","ScrollArea"],"mappings":";;;MAQaA,UAAU,GAAIC,KAA6B;EACpD,MAAM;IAAEC;GAAU,GAAGD,KAAK;EAE1B,IAAI,CAACC,QAAQ,CAACC,MAAM,EAAE;IAClB,oBACIC;MAAKC,SAAS,EAAC,sDAAsD;MAACC,IAAI,EAAC;6BAErE;;EAId,oBAAOF,6BAACG,UAAU;IAACF,SAAS,EAAC;KAA0DH,QAAQ,CAAc;AACjH;;;;"}

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 { Color } from '../../../utils/colors';\nimport { Select2OptionValue, Select2Value } from '../types';\nimport { Select2OptionProps } from './Option';\n\nexport type Select2ContextProps = {\n    disabled: boolean;\n    highlighted: boolean;\n    invalid: boolean;\n    listboxRef: React.RefObject<CollectionRef>;\n    multiple: boolean;\n    onCreate?: (text: string, color: Color | undefined) => Promise<Select2OptionProps>;\n    onDelete?: (value: Select2OptionValue) => Promise<void>;\n    onEdit?: (value: Select2OptionValue, text: string, color: Color | undefined) => Promise<void>;\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    tags?: boolean;\n    validationError?: Error;\n    value?: Select2Value;\n};\n\nexport const Select2Context = React.createContext({} as Select2ContextProps);\nexport const useSelect2Context = () => React.useContext(Select2Context);\n"],"names":["Select2Context","React","createContext","useSelect2Context","useContext"],"mappings":";;MA6BaA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAAC,EAAyB;MAC9DC,iBAAiB,GAAG,MAAMF,cAAK,CAACG,UAAU,CAACJ,cAAc;;;;"}

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

@@ -0,0 +1,82 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useLocalization } from '../../Provider/Provider.js';
+import { isAriaSelectionKey } from '../../../utils/aria.js';
+import { Tag } from '../../Tag/Tag.js';
+import { createOptionClassName } from '../utilities.js';
+import { useSelect2Context } from './Context.js';
+import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+
+const getNextColor = options => {
+  const occurences = options.reduce((occurences, option) => {
+    if (option.props.color) {
+      occurences[option.props.color] = occurences[option.props.color] ? occurences[option.props.color] + 1 : 1;
+    }
+    return occurences;
+  }, {});
+  const colors = Object.keys(occurences);
+  if (colors.length) {
+    return colors.sort((a, b) => occurences[b] - occurences[a])[0];
+  }
+  return undefined;
+};
+const Create = props => {
+  const {
+    onCreate: handleCreate,
+    options
+  } = props;
+  const {
+    multiple,
+    searchQuery,
+    setOpen,
+    setSearchQuery,
+    setValidationError,
+    setValue
+  } = 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) {
+    return null;
+  }
+  const handleClick = function () {
+    try {
+      const _temp = _catch(function () {
+        return Promise.resolve(handleCreate(searchQuery, 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('!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", {
+    className: "flex items-center gap-1.5"
+  }, texts.select2.create, /*#__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 'classnames';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Color } from '../../../utils/colors';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Provider';\n\nexport type CreateProps = {\n    onCreate: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n    options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n    const occurences = options.reduce((occurences, option) => {\n        if (option.props.color) {\n            occurences[option.props.color] = occurences[option.props.color] ? occurences[option.props.color] + 1 : 1;\n        }\n        return occurences;\n    }, {});\n\n    const colors = Object.keys(occurences);\n\n    if (colors.length) {\n        return colors.sort((a, b) => occurences[b] - occurences[a])[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);\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","occurences","reduce","option","props","color","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","handleClick","item","value","error","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","onClick","onKeyDown","select2","create","Tag"],"mappings":";;;;;;;;;MAeaA,YAAY,GAAIC,OAAiD;EAC1E,MAAMC,UAAU,GAAGD,OAAO,CAACE,MAAM,CAAC,CAACD,UAAU,EAAEE,MAAM;IACjD,IAAIA,MAAM,CAACC,KAAK,CAACC,KAAK,EAAE;MACpBJ,UAAU,CAACE,MAAM,CAACC,KAAK,CAACC,KAAK,CAAC,GAAGJ,UAAU,CAACE,MAAM,CAACC,KAAK,CAACC,KAAK,CAAC,GAAGJ,UAAU,CAACE,MAAM,CAACC,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;IAE5G,OAAOJ,UAAU;GACpB,EAAE,EAAE,CAAC;EAEN,MAAMK,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACP,UAAU,CAAC;EAEtC,IAAIK,MAAM,CAACG,MAAM,EAAE;IACf,OAAOH,MAAM,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKX,UAAU,CAACW,CAAC,CAAC,GAAGX,UAAU,CAACU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAU;;EAG3E,OAAOE,SAAS;AACpB;MAEaC,MAAM,GAAIV,KAAkB;EACrC,MAAM;IAAEW,QAAQ,EAAEC,YAAY;IAAEhB;GAAS,GAAGI,KAAK;EACjD,MAAM;IAAEa,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,MAAM7B,YAAY,CAACC,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEvE,IAAI,CAACkB,WAAW,EAAE;IACd,OAAO,IAAI;;EAGf,MAAMW,WAAW;IAAA;uCACT;QAAA,uBACmBb,YAAY,CAACE,WAAW,EAAEQ,SAAS,CAAC,iBAAjDI,IAAI;UACVR,QAAQ,CAACQ,IAAI,CAACC,KAAK,CAAC;UAAC,IAEjBd,QAAQ;YACRG,cAAc,CAAC,EAAE,CAAC;;YAElBD,OAAO,CAAC,KAAK,CAAC;;;OAErB,YAAQa,KAAK,EAAE;QACZX,kBAAkB,CAACW,KAAK,CAAC;OAC5B;MAAA;KACJ;MAAA;;;EAED,MAAMC,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,oBACIb;IAAQW,SAAS,EAAEA,SAAS;IAAEG,OAAO,EAAEZ,WAAW;IAAEa,SAAS,EAAET;kBAC3DN;IAAMW,SAAS,EAAC;KACXd,KAAK,CAACmB,OAAO,CAACC,MAAM,eACrBjB,6BAACkB,GAAG;IAACxC,KAAK,EAAEqB,SAAS;IAAEY,SAAS,EAAC;KAC5BpB,WAAW,CACV,CACH,CACF;AAEjB;;;;"}

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

@@ -0,0 +1,189 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import { Button } from '../../Button/Button.js';
+import { useLocalization } from '../../Provider/Provider.js';
+import { Input } from '../../Input/Input.js';
+import { Popover } from '../../Popover/Popover.js';
+import { Field } from '../../Field/Field.js';
+import { Group } from '../../Group/Group.js';
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
+import { colors } from '../../../utils/colors.js';
+import { useSelect2Context } from './Context.js';
+import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+
+const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(colors);
+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 => {
+    if (event.key !== 'Escape') {
+      event.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Portal, null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute h-screen w-screen"
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, {
+    onCloseAutoFocus: handleCloseAutoFocus,
+    onInteractOutside: handleInteractOutside,
+    onClick: event => event.stopPropagation(),
+    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-darkest 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', colors[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 'classnames';\nimport * as RadioGroup from '@radix-ui/react-radio-group';\nimport { Color, colors } from '../../../utils/colors';\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/Provider';\n\nconst AVAILABLE_COLORS = Object.keys(colors);\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);\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        if (event.key !== 'Escape') {\n            event.stopPropagation();\n        }\n    };\n\n    return (\n        <Popover {...popoverProps}>\n            <Popover.Portal>\n                <>\n                    {/* This invisible backdrop prevents clicks outside the Edit popover from also closing the Select2 popover */}\n                    <div className=\"absolute h-screen w-screen\" />\n                    <Popover.Content\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        onInteractOutside={handleInteractOutside}\n                        onClick={event => event.stopPropagation()}\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-darkest 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                </>\n            </Popover.Portal>\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('flex h-6 w-6 cursor-pointer items-center justify-center rounded', colors[availableColor])}\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":["AVAILABLE_COLORS","Object","keys","colors","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","handleDelete","error","preventDefault","current","focus","handleCloseAutoFocus","handleInteractOutside","preventKeyDownPropagation","Popover","Portal","className","Content","onCloseAutoFocus","onInteractOutside","onClick","placement","tabIndex","Field","cn","invalid","message","Input","onChange","onKeyDown","Colours","onChangeColor","Group","Button","select2","cancel","appearance","save","Icon","delete","RadioGroup","chooseColor","onValueChange","map","availableColor","onFocus","asChild"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import cn from 'classnames';
+import '../../../primitives/Listbox2/components/Root.js';
+import '../../../primitives/Listbox2/components/Option.js';
+import { Group as Group$1 } from '../../../primitives/Listbox2/components/Group.js';
+import '../../../primitives/Listbox2/components/Title.js';
+import { createCollectionClassName } from '../utilities.js';
+
+const Group = /*#__PURE__*/React__default.forwardRef(function Select2Group(props, ref) {
+  const className = cn(createCollectionClassName(), props.className);
+  return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+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 'classnames';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createCollectionClassName } from '../utilities';\n\nexport type Select2GroupProps = ListboxPrimitive.Listbox2GroupProps;\n\nexport const Group = React.forwardRef<HTMLDivElement, Select2GroupProps>(function Select2Group(props, ref) {\n    const className = cn(createCollectionClassName(), props.className);\n    return <ListboxPrimitive.Group {...props} className={className} ref={ref} />;\n});\n"],"names":["Group","React","forwardRef","Select2Group","props","ref","className","cn","createCollectionClassName","ListboxPrimitive"],"mappings":";;;;;;;;MAOaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAoC,SAASC,YAAY,CAACC,KAAK,EAAEC,GAAG;EACrG,MAAMC,SAAS,GAAGC,EAAE,CAACC,yBAAyB,EAAE,EAAEJ,KAAK,CAACE,SAAS,CAAC;EAClE,oBAAOL,6BAACQ,OAAsB,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChF,CAAC;;;;"}

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

@@ -0,0 +1,93 @@
+import React__default from 'react';
+import cn from 'classnames';
+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 } 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,
+    icon,
+    ...otherProps
+  } = props;
+  const className = createOptionClassName();
+  const {
+    onDelete,
+    onEdit,
+    listboxRef,
+    multiple,
+    ref: selectRef,
+    setOpen,
+    tags,
+    value
+  } = useSelect2Context();
+  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 popover = 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: "group-aria-selected:visible pointer-events-none invisible -mx-1 !h-4 !w-4"
+  }) : null, isTag ? /*#__PURE__*/React__default.createElement(Tag, {
+    className: "pointer-events-none",
+    color: color,
+    icon: icon
+  }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon
+  }) : icon : null, children), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
+    rounded: true,
+    icon: "ellipsis-vertical",
+    appearance: "discrete",
+    className: cn('group-aria-current:visible invisible ml-auto -mr-2 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 'classnames';\nimport { Icon, IconName, IconProps } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Color } from '../../../utils/colors';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children'> & {\n    children: string;\n    color?: Color;\n    icon?: React.ReactElement<IconProps> | IconName;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, icon, ...otherProps } = props;\n    const className = createOptionClassName();\n    const { onDelete, onEdit, listboxRef, multiple, ref: selectRef, setOpen, tags, value } = useSelect2Context();\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 popover =\n        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=\"group-aria-selected:visible pointer-events-none invisible -mx-1 !h-4 !w-4\" />\n            ) : null}\n            {isTag ? (\n                <Tag className=\"pointer-events-none\" color={color} icon={icon}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {icon ? typeof icon === 'string' ? <Icon name={icon} /> : icon : null}\n                    {children}\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    rounded\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn('group-aria-current:visible invisible ml-auto -mr-2 focus:!shadow-none group-hover:visible', {\n                        '!visible': isMobileDevice(window?.navigator),\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","icon","otherProps","className","createOptionClassName","onDelete","onEdit","listboxRef","multiple","selectRef","setOpen","tags","value","useSelect2Context","hasValue","Array","isArray","length","undefined","isTag","handleClick","current","focus","handleKeyDown","event","isAriaSelectionKey","key","popover","popoverProps","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","IconButton","rounded","appearance","cn","isMobileDevice","window","navigator","stopPropagation","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import React__default from 'react';
+import cn from 'classnames';
+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 {
+    ...otherProps
+  } = props;
+  const {
+    listboxRef,
+    searchQuery,
+    setSearchQuery,
+    setValidationError,
+    validationError
+  } = 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;
+    }
+    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 'classnames';\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\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError } = 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        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","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAa,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAiB,GAAGC,iBAAiB,EAAE;EAE5G,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIH,eAAe,EAAE;MACjBD,kBAAkB,CAACK,SAAS,CAAC;;IAGjCN,cAAc,CAACK,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;IAGJ,IAAIC,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA;MACnFL,KAAK,CAACO,cAAc,EAAE;;MAEtBd,UAAU,aAAVA,UAAU,8CAAVA,UAAU,CAAEe,OAAO,wDAAnB,oBAAqBC,aAAa,CAACC,yBAAyB,CAACV,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIb,6BAACwB,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAChB;KAAiB,CAAC;IACzEiB,OAAO,EAAE,CAAC,CAACjB,eAAe;IAC1BkB,OAAO,EAAElB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEkB;kBAC1B5B,6BAAC6B,KAAK,oBACExB,UAAU;;IAEdyB,SAAS;IACTH,OAAO,EAAE,CAAC,CAACjB,eAAe;IAC1BqB,QAAQ,EAAEnB,YAAY;IACtBoB,SAAS,EAAEf,aAAa;IACxBb,GAAG,EAAEA,GAAG;IACRY,KAAK,EAAET;KACT,CACE;AAEhB,CAAC;;;;"}

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

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import cn from 'classnames';
+import '../../../primitives/Listbox2/components/Root.js';
+import '../../../primitives/Listbox2/components/Option.js';
+import '../../../primitives/Listbox2/components/Group.js';
+import { Title as Title$1 } from '../../../primitives/Listbox2/components/Title.js';
+
+const Title = /*#__PURE__*/React__default.forwardRef(function Select2Title(props, ref) {
+  const className = cn('flex items-center text-xs pl-2 h-8', props.className);
+  return /*#__PURE__*/React__default.createElement(Title$1, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+export { Title };
+//# sourceMappingURL=Title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../../../../../../../../src/components/Select2/components/Title.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\n\nexport type Select2TitleProps = ListboxPrimitive.Listbox2TitleProps;\n\nexport const Title = React.forwardRef<HTMLDivElement, Select2TitleProps>(function Select2Title(props, ref) {\n    const className = cn('flex items-center text-xs pl-2 h-8', props.className);\n    return <ListboxPrimitive.Title {...props} className={className} ref={ref} />;\n});\n"],"names":["Title","React","forwardRef","Select2Title","props","ref","className","cn","ListboxPrimitive"],"mappings":";;;;;;;MAMaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAoC,SAASC,YAAY,CAACC,KAAK,EAAEC,GAAG;EACrG,MAAMC,SAAS,GAAGC,EAAE,CAAC,oCAAoC,EAAEH,KAAK,CAACE,SAAS,CAAC;EAC3E,oBAAOL,6BAACO,OAAsB,oBAAKJ,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChF,CAAC;;;;"}