@economic/taco 0.0.1-alpha.2 → 0.0.3-alpha.0

package/dist/esm/src/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport { PopoverHTMLProps, PopoverStateReturn, usePopoverState } from 'reakit/Popover';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    popover: PopoverStateReturn & { container: PopoverHTMLProps };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        readOnly,\n        value,\n        ...props\n    }: ComboboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const popover = usePopoverState({ gutter: 4, placement: 'bottom-start' });\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !inline || (inline && inputValue !== convertToInputValue(value));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!popover.visible) {\n                popover.show();\n            }\n        } else {\n            popover.hide();\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (popover.visible) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [popover.visible]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!popover.visible && inputValue && data.length)) {\n            popover.show();\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                popover.hide();\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                popover.hide();\n                return;\n            }\n\n            case keycode('up'):\n            case keycode('down'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (popover.visible) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !popover.visible) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                popover.show();\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        popover.hide();\n    };\n\n    const combobox = {\n        'aria-expanded': popover.visible,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue || '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        popover: {\n            ...popover,\n            visible: !data.length ? false : popover.visible,\n            container: {\n                tabIndex: -1,\n                'aria-label': ariaLabel,\n                'aria-labelledby': ariaLabelledBy,\n                unstable_initialFocusRef: inputRef,\n            },\n        },\n    };\n};\n"],"names":["convertToInputValue","value","String","useCombobox","ref","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","readOnly","props","inputRef","useProxiedRef","listRef","React","popover","usePopoverState","gutter","placement","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","visible","show","hide","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","container","unstable_initialFocusRef"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { v4 as uuid } from 'uuid';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        readOnly,\n        value,\n        ...props\n    }: ComboboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !inline || (inline && inputValue !== convertToInputValue(value));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange && event.target.value !== value) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        switch (event.keyCode) {\n            case keycode('backspace'): {\n                return;\n            }\n\n            case keycode('escape'): {\n                event.preventDefault();\n                setInputValue(convertToInputValue(value));\n                setOpen(false);\n                return;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n\n                setCurrentValue(currentIndex);\n                setOpen(false);\n                return;\n            }\n\n            case keycode('up'):\n            case keycode('down'):\n            case keycode('home'):\n            case keycode('end'): {\n                if (open) {\n                    event.preventDefault();\n                }\n                break;\n            }\n\n            default:\n        }\n\n        // we aren't focused on the list, so manually forward the keydown event to it\n        if (listRef.current) {\n            listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n        }\n\n        if (inline && !open) {\n            if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n                event.preventDefault();\n                const initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;\n                setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                setOpen(true);\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue || '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["convertToInputValue","value","String","useCombobox","ref","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","inline","onChange","onClick","onKeyDown","readOnly","props","inputRef","useProxiedRef","listRef","React","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","undefined","getIndexFromValue","currentIndex","setCurrentIndex","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","keyCode","keycode","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","id","scrollOnFocus","tabIndex","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/src/components/Dialog/components/Content.js

@@ -1,6 +1,7 @@
 import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { useLocalization } from '../../Provider/Provider.js';
 import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useCurrentDialog } from '../Context.js';
@@ -60,10 +61,9 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     'w-md': dialog.size === 'md',
     'w-lg': dialog.size === 'lg'
   });
-  var containerClassName = cn('yt-dialog bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
+  var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
     'rounded-b-none': !!dialog.elements.extra
-  }, props.className);
-  var overlayClassName = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -81,10 +81,9 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   }
 
   return createElement(Portal, null, createElement(Overlay, {
-    className: overlayClassName
-  }, createElement(Content$1, Object.assign({}, props, {
+    asChild: true
+  }, createElement(Backdrop, null, createElement(Content$1, Object.assign({}, props, {
     className: className,
-    "data-taco": "dialog",
     onEscapeKeyDown: dialog.onClose,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
@@ -94,7 +93,8 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
       top: dialog.draggable ? "calc(50% + " + position.y + "px)" : undefined
     })
   }), createElement("div", {
-    className: containerClassName
+    className: containerClassName,
+    "data-taco": "dialog"
   }, output, dialog.draggable && createElement("div", Object.assign({}, dragHandleProps, {
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
@@ -106,7 +106,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra)));
+  }))), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 export { Close, Content, Footer, Title };

package/dist/esm/src/components/Dialog/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Group } from '../../Group/Group';\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    return <DialogPrimitive.Title {...props} className=\"text-center\" ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div {...props} className=\"mt-8 flex justify-end\" ref={ref}>\n            <Group>{props.children}</Group>\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible description to be announced when the dialog is opened */\n    'aria-describedby': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'yt-dialog bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    const overlayClassName = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'\n    );\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay className={overlayClassName}>\n                <DialogPrimitive.Content\n                    {...props}\n                    className={className}\n                    data-taco=\"dialog\"\n                    onEscapeKeyDown={dialog.onClose}\n                    onInteractOutside={handleInteractOutside}\n                    onCloseAutoFocus={handleCloseAutoFocus}\n                    ref={ref}\n                    style={{\n                        ...props.style,\n                        left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                        top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                    }}\n                >\n                    <div className={containerClassName}>\n                        {output}\n                        {dialog.draggable && (\n                            <div\n                                {...dragHandleProps}\n                                aria-label={texts.dialog.drag}\n                                className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                            />\n                        )}\n                        <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                            <IconButton\n                                appearance=\"discrete\"\n                                aria-label={texts.dialog.close}\n                                className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                icon=\"close\"\n                            />\n                        </DialogPrimitive.Close>\n                    </div>\n                    {dialog.elements.drawer}\n                    {dialog.elements.extra}\n                </DialogPrimitive.Content>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","DialogPrimitive","className","Footer","DialogFooter","Group","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","cn","size","containerClassName","elements","extra","overlayClassName","handleInteractOutside","event","preventDefault","output","drawer","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","IconButton","appearance","icon"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDialog } from '../Context';\nimport { useLocalization } from '../../Provider/Provider';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Group } from '../../Group/Group';\nimport { Backdrop } from '../../Backdrop/Backdrop';\n\nexport type DialogContentRenderProps = {\n    close: () => void;\n    drawer?: {\n        open: boolean;\n        toggle: () => void;\n    };\n};\n\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    return <DialogPrimitive.Title {...props} className=\"text-center\" ref={ref} />;\n});\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div {...props} className=\"mt-8 flex justify-end\" ref={ref}>\n            <Group>{props.children}</Group>\n        </div>\n    );\n});\n\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const dialog = useCurrentDialog();\n\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\n});\n\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible description to be announced when the dialog is opened */\n    'aria-describedby': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\n};\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\n    const { texts } = useLocalization();\n\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\n    // the menu is still open (and mounted) because it is the trigger for the dialog\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus;\n\n    if (menu) {\n        handleCloseAutoFocus = () => menu.close();\n    }\n\n    const className = cn('bg-white rounded mt-16 mx-auto', {\n        'w-128 text-center justify-center': dialog.size === 'dialog',\n        'w-xs': dialog.size === 'xs',\n        'w-sm': dialog.size === 'sm',\n        'w-md': dialog.size === 'md',\n        'w-lg': dialog.size === 'lg',\n    });\n\n    const containerClassName = cn(\n        'bg-white p-6 rounded relative z-[999]',\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\n        {\n            'rounded-b-none': !!dialog.elements.extra,\n        },\n        props.className\n    );\n\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\n    const handleInteractOutside = event => event.preventDefault();\n\n    let output;\n\n    if (typeof props.children === 'function') {\n        output = props.children({ drawer: dialog.drawer, close: dialog.close });\n    } else {\n        output = props.children;\n    }\n\n    return (\n        <DialogPrimitive.Portal>\n            <DialogPrimitive.Overlay asChild>\n                <Backdrop>\n                    <DialogPrimitive.Content\n                        {...props}\n                        className={className}\n                        onEscapeKeyDown={dialog.onClose}\n                        onInteractOutside={handleInteractOutside}\n                        onCloseAutoFocus={handleCloseAutoFocus}\n                        ref={ref}\n                        style={{\n                            ...props.style,\n                            left: dialog.draggable ? `calc(50% + ${position.x}px)` : undefined,\n                            top: dialog.draggable ? `calc(50% + ${position.y}px)` : undefined,\n                        }}\n                    >\n                        <div className={containerClassName} data-taco=\"dialog\">\n                            {output}\n                            {dialog.draggable && (\n                                <div\n                                    {...dragHandleProps}\n                                    aria-label={texts.dialog.drag}\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\n                                />\n                            )}\n                            <DialogPrimitive.Close asChild onClick={dialog.onClose}>\n                                <IconButton\n                                    appearance=\"discrete\"\n                                    aria-label={texts.dialog.close}\n                                    className=\"absolute top-0 right-0 mt-2 mr-2\"\n                                    icon=\"close\"\n                                />\n                            </DialogPrimitive.Close>\n                        </div>\n                        {dialog.elements.drawer}\n                        {dialog.elements.extra}\n                    </DialogPrimitive.Content>\n                </Backdrop>\n            </DialogPrimitive.Overlay>\n        </DialogPrimitive.Portal>\n    );\n});\n"],"names":["Title","React","DialogTitle","props","ref","DialogPrimitive","className","Footer","DialogFooter","Group","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","Content","DialogContent","internalRef","useProxiedRef","useDraggable","position","dragHandleProps","handleProps","useLocalization","texts","menu","useCurrentMenu","handleCloseAutoFocus","close","cn","size","containerClassName","elements","extra","handleInteractOutside","event","preventDefault","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/src/components/Dialog/components/Drawer.js

@@ -7,7 +7,8 @@ var Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
 
   var dialog = useCurrentDialog();
   return createElement(motion.div, Object.assign({}, props, {
-    className: "bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]",
+    className: "absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left",
+    "data-taco": "dialog-drawer",
     "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
     variants: {
       visible: {

package/dist/esm/src/components/Dialog/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IAnBT,CADJ;AAuBH,CA1BqB;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport { useCurrentDialog } from '../Context';\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n>;\n\nexport const Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n\n    return (\n        <motion.div\n            {...props}\n            className=\"absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left\"\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}\n        />\n    );\n});\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","motion","div","className","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate"],"mappings":";;;;IASaA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;AACnC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;AAEA,SACIL,aAAA,CAACM,MAAM,CAACC,GAAR,oBACQL;AACJM,IAAAA,SAAS,EAAC;iBACA;mBACG,oBAACJ,MAAM,CAACK,MAAR,2CAAC,eAAeC,IAAhB;AACbC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,OAAO,EAAE;AACLC,QAAAA,IAAI,EAAE,MADD;AAELC,QAAAA,OAAO,EAAE,OAFJ;AAGLC,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B;AAHP,OADH;AAMNC,MAAAA,MAAM,EAAE;AACJL,QAAAA,IAAI,EAAE,IADF;AAEJE,QAAAA,UAAU,EAAE;AAAEC,UAAAA,IAAI,EAAE,SAAR;AAAmBC,UAAAA,QAAQ,EAAE;AAA7B,SAFR;AAGJE,QAAAA,aAAa,EAAE;AACXL,UAAAA,OAAO,EAAE;AADE;AAHX;AANF;AAcVM,IAAAA,OAAO,EAAE,mBAAAhB,MAAM,CAACK,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;AAC3CP,IAAAA,GAAG,EAAEA;IApBT,CADJ;AAwBH,CA3BqB;;;;"}

package/dist/esm/src/components/Dialog/components/Extra.js

@@ -2,7 +2,8 @@ import { forwardRef, createElement } from 'react';
 
 var Extra = /*#__PURE__*/forwardRef(function (props, ref) {
   return createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset",
+    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    "data-taco": "dialog-extra",
     ref: ref
   }));
 });

package/dist/esm/src/components/Dialog/components/Extra.js.map

@@ -1 +1 @@
-{"version":3,"file":"Extra.js","sources":["../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;AACVD,IAAAA,GAAG,EAAEA;IAHT,CADJ;AAOH,CARoB;;;;"}
+{"version":3,"file":"Extra.js","sources":["../../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Extra = React.forwardRef(function (props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\n    return (\n        <div\n            {...props}\n            className=\"bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left\"\n            data-taco=\"dialog-extra\"\n            ref={ref}\n        />\n    );\n});\n"],"names":["Extra","React","props","ref","className"],"mappings":";;IAIaA,KAAK,gBAAGC,UAAA,CAAiB,UAAUC,KAAV,EAAmCC,GAAnC;AAClC,SACIF,aAAA,MAAA,oBACQC;AACJE,IAAAA,SAAS,EAAC;iBACA;AACVD,IAAAA,GAAG,EAAEA;IAJT,CADJ;AAQH,CAToB;;;;"}

package/dist/esm/src/components/Input/util.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 var getInputClasses = function getInputClasses(props) {
   var _cn;
 
-  return cn('bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled
   }, _cn[getStateClasses(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
@@ -29,19 +29,19 @@ var getStateClasses = function getStateClasses(value) {
 var getButtonStateClasses = function getButtonStateClasses(value) {
   switch (value) {
     case 'success':
-      return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
 
     case 'error':
-      return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
 
     case 'warning':
-      return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
     case 'information':
-      return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 
     default:
-      return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
   }
 };
 

package/dist/esm/src/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green focus:border-green-light focus:yt-focus-green peer-focus:border-green-light peer-focus:peer-active:border-green-dark';\n\n        case 'error':\n            return 'border-red focus:border-red-light focus:yt-focus-red peer-focus:border-red-light peer-focus:peer-active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,4LADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,mIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,6GAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,0GAAP;;AAEJ;AACI,aAAO,+GAAP;AAdR;AAgBH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\nimport { State } from '../../types';\n\nexport const getInputClasses = props => {\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center',\n        {\n            'cursor-not-allowed text-black bg-grey': props.readOnly,\n            'border-grey text-opacity-25 cursor-not-allowed': props.disabled,\n            [getStateClasses(props.state)]: !props.disabled,\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,\n        }\n    );\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';\n\n        case 'error':\n            return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';\n\n        case 'warning':\n            return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';\n\n        case 'information':\n            return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n\n        default:\n            return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';\n    }\n};\n\nexport const getButtonStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'success':\n            return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';\n\n        case 'error':\n            return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';\n\n        case 'warning':\n            return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';\n\n        case 'information':\n            return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n\n        default:\n            return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';\n    }\n};\n"],"names":["getInputClasses","props","cn","readOnly","disabled","getStateClasses","state","highlighted","value","getButtonStateClasses"],"mappings":";;IAGaA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;;;AAChC,SAAOC,EAAE,CACL,iMADK;AAGD,6CAAyCD,KAAK,CAACE,QAH9C;AAID,sDAAkDF,KAAK,CAACG;AAJvD,SAKAC,eAAe,CAACJ,KAAK,CAACK,KAAP,CALf,IAK+B,CAACL,KAAK,CAACG,QALtC,MAMD,4BANC,IAM6BH,KAAK,CAACM,WAAN,IAAqBN,KAAK,CAACG,QANxD,MAOD,0BAPC,IAO2BH,KAAK,CAACM,WAAN,IAAqB,CAACN,KAAK,CAACG,QAPvD,OAAT;AAUH;IAEYC,eAAe,GAAG,SAAlBA,eAAkB,CAACG,KAAD;AAC3B,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,4IAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,kIAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,yHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,+HAAP;;AAEJ;AACI,aAAO,qIAAP;AAdR;AAgBH;IAEYC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACD,KAAD;AACjC,UAAQA,KAAR;AACI,SAAK,SAAL;AACI,aAAO,uIAAP;;AAEJ,SAAK,OAAL;AACI,aAAO,6HAAP;;AAEJ,SAAK,SAAL;AACI,aAAO,gHAAP;;AAEJ,SAAK,aAAL;AACI,aAAO,8GAAP;;AAEJ;AACI,aAAO,mHAAP;AAdR;AAgBH;;;;"}

package/dist/esm/src/components/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { ScrollableList } from './ScrollableList.js';
@@ -15,10 +15,18 @@ var Listbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useListbox.list,
       input = _useListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px)'
+      /* (6 * option height) + listbox border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
     type: "text"
   })));
 });
@@ -30,10 +38,18 @@ var MultiListbox = /*#__PURE__*/forwardRef(function Listbox(props, ref) {
       list = _useMultiListbox.list,
       input = _useMultiListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return createElement("span", {
+    "data-taco": "listbox",
     className: className
-  }, createElement(ScrollableList, Object.assign({}, list)), createElement("input", Object.assign({}, input, {
+  }, createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px + 2px)'
+      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
+
+    })
+  })), createElement("input", Object.assign({}, input, {
+    className: "hidden",
     type: "text"
   })));
 });

package/dist/esm/src/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport './Listbox.css';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('yt-listbox', externalClassName);\n\n    return (\n        <span className={className}>\n            <ScrollableList {...list} />\n            <input {...input} type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAyDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAXsB;IAaVC,YAAY,gBAAGZ,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBY,eAAe,CAACR,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,YAAD,EAAeN,iBAAf,CAApB;AAEA,SACIH,aAAA,OAAA;AAAMI,IAAAA,SAAS,EAAEA;GAAjB,EACIJ,aAAA,CAACU,cAAD,oBAAoBH,KAApB,CADJ,EAEIP,aAAA,QAAA,oBAAWQ;AAAOG,IAAAA,IAAI,EAAC;IAAvB,CAFJ,CADJ;AAMH,CAX2B;;;;"}
+{"version":3,"file":"Listbox.js","sources":["../../../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { State } from '../../types';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /** State will change the style of the listbox */\n        state?: State;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox","React","props","ref","externalClassName","className","otherProps","useListbox","list","input","cn","ScrollableList","style","maxHeight","type","MultiListbox","useMultiListbox"],"mappings":";;;;;;;;;IAwDaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACpC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,oBAAwBK,UAAU,CAACD,UAAD,EAAaH,GAAb,CAAlC;AAAA,MAAQK,IAAR,eAAQA,IAAR;AAAA,MAAcC,KAAd,eAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eAAOJ,IAAI,CAACI,KAAZ;AAAmBC,MAAAA,SAAS,EAAE;AAAoB;;AAAlD;IAFT,CADJ,EAKIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CALJ,CADJ;AASH,CAdsB;IAgBVC,YAAY,gBAAGd,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;AACzC,MAAmBC,iBAAnB,GAAwDF,KAAxD,CAAQG,SAAR;AAAA,MAAyCC,UAAzC,iCAAwDJ,KAAxD;;AACA,yBAAwBc,eAAe,CAACV,UAAD,EAAaH,GAAb,CAAvC;AAAA,MAAQK,IAAR,oBAAQA,IAAR;AAAA,MAAcC,KAAd,oBAAcA,KAAd;;AACA,MAAMJ,SAAS,GAAGK,EAAE,CAAC,sCAAD,EAAyCN,iBAAzC,CAApB;AAEA,SACIH,aAAA,OAAA;iBAAgB;AAAUI,IAAAA,SAAS,EAAEA;GAArC,EACIJ,aAAA,CAACU,cAAD,oBACQH;AACJI,IAAAA,KAAK,eACEJ,IAAI,CAACI,KADP;AAEDC,MAAAA,SAAS,EAAE;AAA0B;;AAFpC;IAFT,CADJ,EAQIZ,aAAA,QAAA,oBAAWQ;AAAOJ,IAAAA,SAAS,EAAC;AAASS,IAAAA,IAAI,EAAC;IAA1C,CARJ,CADJ;AAYH,CAjB2B;;;;"}

package/dist/esm/src/components/Listbox/ScrollableList.js

@@ -118,7 +118,9 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
 
   var list = _extends({}, otherProps, {
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
     disabled: disabled,
     id: id,
@@ -136,7 +138,7 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
       children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
         'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
       }),
       disabled: option.disabled,
@@ -163,13 +165,13 @@ var ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, ref)
         optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
     return createElement("li", Object.assign({}, optionProps), icon, createElement("span", {
-      className: "flex-grow text-left truncate"
+      className: "flex-grow truncate text-left"
     }, children), multiselect && createElement(Checkbox, {
       checked: optionProps['aria-selected'],
       onChange: function onChange() {
         return null;
       },
-      className: "ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px"
+      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
     }));
   }) : createElement("li", {
     className: "yt-list__empty"

package/dist/esm/src/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /** State will change the style of the scrollable list */\n    state?: State;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {\n                'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n            }),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow text-left truncate\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { getNextIndexFromKeycode } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Provider';\nimport { State } from '../../types';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /** State will change the style of the scrollable list */\n    state?: State;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        state,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useProxiedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKeycode","keyCode","length","disabled","ScrollableList","React","props","ref","loading","setCurrentIndex","onChange","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useProxiedRef","itemRefs","map","useLocalization","texts","useListScrollTo","scrollTo","handleKeyDown","undefined","preventDefault","persist","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","list","className","cn","getInputClasses","role","tabIndex","options","option","depth","path","split","String","children","text","hasChildren","icon","key","style","paddingLeft","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

package/dist/esm/src/components/Navigation/Navigation.js

@@ -122,6 +122,7 @@ var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(prop
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });

package/dist/esm/src/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport './Navigation.css';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        React.Children.toArray(props.children)\n            .filter(child => !!child)\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\n                if (child.props.fixed) {\n                    scrollableAreas.push(child);\n                } else {\n                    const x = scrollableAreas[scrollableAreas.length - 1];\n                    if (Array.isArray(x)) {\n                        x.push(child);\n                    } else {\n                        scrollableAreas.push([child]);\n                    }\n                }\n            });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}\n        >\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}\n                    >\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport './Navigation.css';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        React.Children.toArray(props.children)\n            .filter(child => !!child)\n            .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\n                if (child.props.fixed) {\n                    scrollableAreas.push(child);\n                } else {\n                    const x = scrollableAreas[scrollableAreas.length - 1];\n                    if (Array.isArray(x)) {\n                        x.push(child);\n                    } else {\n                        scrollableAreas.push([child]);\n                    }\n                }\n            });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}\n        >\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}\n                    >\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}

package/dist/esm/src/components/Pagination/Pagination.js

@@ -52,6 +52,7 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
   var className = cn('inline-flex relative justify-between items-center', props.className);
   return createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "pagination",
     ref: ref
   }), showPageSize && createElement("span", {
     className: "mr-4"