@economic/taco 2.14.0 → 2.14.1

package/dist/components/Field/Field.d.ts

@@ -5,7 +5,7 @@ export declare type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
     children: React.ReactNode;
     /**	Changes the style to indicate the element is disabled */
     disabled?: boolean;
-    error?: boolean;
+    invalid?: boolean;
     warning?: boolean;
     /**
      * Text displayed below the children of Field.
@@ -18,7 +18,7 @@ export declare const Field: React.ForwardRefExoticComponent<React.LabelHTMLAttri
     children: React.ReactNode;
     /**	Changes the style to indicate the element is disabled */
     disabled?: boolean | undefined;
-    error?: boolean | undefined;
+    invalid?: boolean | undefined;
     warning?: boolean | undefined;
     /**
      * Text displayed below the children of Field.

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

@@ -5,7 +5,7 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
   const {
     disabled,
     children,
-    error = false,
+    invalid = false,
     warning = false,
     message,
     ...otherProps
@@ -14,9 +14,9 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
     'text-grey-300': disabled
   }, props.className);
   const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-700': !error && !warning,
-    'text-red-500': error,
-    'text-yellow-700': warning && !error,
+    'text-grey-700': !invalid && !warning,
+    'text-red-500': invalid,
+    'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
   return /*#__PURE__*/createElement("label", Object.assign({}, otherProps, {
@@ -25,7 +25,7 @@ const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
     ref: ref
   }), children, message && /*#__PURE__*/createElement("span", {
     className: messageClassName,
-    role: error ? 'alert' : undefined
+    role: invalid ? 'alert' : undefined
   }, message));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an error state */\n    error?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, error = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-grey-700': !error && !warning,\n        'text-red-500': error,\n        'text-yellow-700': warning && !error,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={error ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","error","warning","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAqBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK,GAAG,KAAK;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC5F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEP;GACpB,EACDF,KAAK,CAACQ,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CAAC,iEAAiE,EAAE;IAC3F,eAAe,EAAE,CAACL,KAAK,IAAI,CAACC,OAAO;IACnC,cAAc,EAAED,KAAK;IACrB,iBAAiB,EAAEC,OAAO,IAAI,CAACD,KAAK;IACpC,YAAY,EAAEF;GACjB,CAAC;EAEF,oBACIH,yCAAWQ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACP,GAAG,EAAEA;MAC/DE,QAAQ,EACRG,OAAO,iBACJP;IAAMS,SAAS,EAAEE,gBAAgB;IAAEC,IAAI,EAAEP,KAAK,GAAG,OAAO,GAAGQ;KACtDN,OAAO,CAEf,CACG;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport './Field.css';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-grey-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <span className={messageClassName} role={invalid ? 'alert' : undefined}>\n                    {message}\n                </span>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","disabled","children","invalid","warning","message","otherProps","className","cn","messageClassName","role","undefined"],"mappings":";;;MAqBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEP;GACpB,EACDF,KAAK,CAACQ,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CAAC,iEAAiE,EAAE;IAC3F,eAAe,EAAE,CAACL,OAAO,IAAI,CAACC,OAAO;IACrC,cAAc,EAAED,OAAO;IACvB,iBAAiB,EAAEC,OAAO,IAAI,CAACD,OAAO;IACtC,YAAY,EAAEF;GACjB,CAAC;EAEF,oBACIH,yCAAWQ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACP,GAAG,EAAEA;MAC/DE,QAAQ,EACRG,OAAO,iBACJP;IAAMS,SAAS,EAAEE,gBAAgB;IAAEC,IAAI,EAAEP,OAAO,GAAG,OAAO,GAAGQ;KACxDN,OAAO,CAEf,CACG;AAEhB,CAAC;;;;"}

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

@@ -136,7 +136,7 @@ const EditPopover = props => {
     className: cn('!min-h-fit', {
       '!pb-0': !validationError
     }),
-    error: !!validationError,
+    invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
   }, /*#__PURE__*/React__default.createElement(Input, {
     invalid: !!validationError,

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

@@ -1 +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 { 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                                        error={!!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","message","Input","invalid","onChange","Colours","onChangeColor","Group","Button","select2","cancel","appearance","save","Icon","delete","RadioGroup","chooseColor","onValueChange","AVAILABLE_COLORS","map","availableColor","getSubtleColorShadeClasses","onFocus","asChild"],"mappings":"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"}
+{"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 { 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":"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"}

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

@@ -46,7 +46,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
     className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
       '!pb-0': !validationError
     }),
-    error: !!validationError,
+    invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
     "aria-hidden": true,

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

@@ -1 +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, 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            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            error={!!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","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","error","message","Input","autoFocus","invalid","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,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;MACd;;IAGJ,IAAIS,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,oBACId,6BAAC0B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,KAAK,EAAE,CAAC,CAACnB,eAAe;IACxBoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B9B,6BAAC+B,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTC,OAAO,EAAE,CAAC,CAACvB,eAAe;IAC1BwB,QAAQ,EAAErB,YAAY;IACtBsB,SAAS,EAAEjB,aAAa;IACxBd,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
+{"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, 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            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","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":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,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;MACd;;IAGJ,IAAIS,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,oBACId,6BAAC0B,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;kBAC1B9B,6BAAC+B,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBd,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}

package/dist/taco.cjs.development.js

@@ -6788,7 +6788,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   const {
     disabled,
     children,
-    error = false,
+    invalid = false,
     warning = false,
     message,
     ...otherProps
@@ -6797,9 +6797,9 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-grey-300': disabled
   }, props.className);
   const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-700': !error && !warning,
-    'text-red-500': error,
-    'text-yellow-700': warning && !error,
+    'text-grey-700': !invalid && !warning,
+    'text-red-500': invalid,
+    'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
@@ -6808,7 +6808,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     ref: ref
   }), children, message && /*#__PURE__*/React.createElement("span", {
     className: messageClassName,
-    role: error ? 'alert' : undefined
+    role: invalid ? 'alert' : undefined
   }, message));
 });
 
@@ -9695,7 +9695,7 @@ const EditPopover = props => {
     className: cn('!min-h-fit', {
       '!pb-0': !validationError
     }),
-    error: !!validationError,
+    invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
   }, /*#__PURE__*/React__default.createElement(Input, {
     invalid: !!validationError,
@@ -10249,7 +10249,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
       '!pb-0': !validationError
     }),
-    error: !!validationError,
+    invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
     "aria-hidden": true,