@economic/taco 0.0.28-alpha.0 → 0.0.30-alpha.0

package/dist/esm/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { SelectProps } from './Select';\r\nimport { ListboxProps } from '../Listbox/Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\r\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\r\n\r\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\r\n    button: React.ButtonHTMLAttributes<HTMLButtonElement>;\r\n    listbox: ListboxProps;\r\n    input: any;\r\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\r\n    text: string | JSX.Element;\r\n    more?: number;\r\n};\r\n\r\nexport const useSelect = (\r\n    {\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data = [],\r\n        defaultValue,\r\n        disabled,\r\n        emptyValue,\r\n        id: nativeId,\r\n        multiselect,\r\n        onClick,\r\n        onChange,\r\n        readOnly,\r\n        value = emptyValue,\r\n        ...otherProps\r\n    }: SelectProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useSelect => {\r\n    const { texts } = useLocalization();\r\n    const searchData = useFlattenedData(data);\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const [open, setOpen] = React.useState(false);\r\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\r\n    const internalInputRef = React.useRef(null);\r\n    const buttonId = `${id}-button`;\r\n    // support 'escape' resetting to the value that was set when the listbox opened\r\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\r\n\r\n    React.useEffect(() => {\r\n        setLastValue(value);\r\n    }, [open]);\r\n\r\n    React.useEffect(() => {\r\n        if (defaultValue !== undefined && value === undefined) {\r\n            setInputValueByRef(internalInputRef.current, defaultValue);\r\n        }\r\n    }, [defaultValue]);\r\n\r\n    React.useEffect(() => {\r\n        if (value !== undefined) {\r\n            setInputValueByRef(internalInputRef.current, value);\r\n        } else if (data.length && defaultValue === undefined) {\r\n            setInputValueByRef(internalInputRef.current, data[0].value);\r\n        }\r\n    }, []);\r\n\r\n    // event handlers\r\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\r\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\r\n            event.preventDefault();\r\n            setOpen(true);\r\n        }\r\n    };\r\n\r\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\r\n        switch (event.keyCode) {\r\n            case keycode('escape'): {\r\n                event.preventDefault();\r\n                if (lastValue !== undefined) {\r\n                    setInputValueByRef(inputRef.current, lastValue);\r\n                }\r\n\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            case keycode('tab'):\r\n            case keycode('enter'): {\r\n                if (event.keyCode !== keycode('tab')) {\r\n                    event.preventDefault();\r\n                }\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            default:\r\n        }\r\n\r\n        if (otherProps.onKeyDown) {\r\n            otherProps.onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\r\n        event.preventDefault();\r\n        if (!multiselect) {\r\n            setOpen(false);\r\n        }\r\n    };\r\n\r\n    let text: string | JSX.Element = '';\r\n    let more = 0;\r\n\r\n    if (value !== undefined) {\r\n        if (multiselect) {\r\n            const selectedValues = value?.toString().split(',') || [];\r\n\r\n            if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\r\n                text = texts.select.allOptionsSelected;\r\n            } else {\r\n                text = findByValue(searchData, selectedValues[0])?.text ?? '';\r\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\r\n            }\r\n        } else {\r\n            const item = findByValue(searchData, value);\r\n\r\n            if (item) {\r\n                text = item.icon ? (\r\n                    <>\r\n                        {React.cloneElement(item.icon, {\r\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\r\n                        })}\r\n                        {item.text}\r\n                    </>\r\n                ) : (\r\n                    item.text\r\n                );\r\n            }\r\n        }\r\n    }\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        if (onChange) {\r\n            const item = findByValue(searchData, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const indexes = item?.path?.split('.') ?? [];\r\n\r\n            if (indexes.length > 1) {\r\n                // we don't want to map the current item\r\n                indexes.pop();\r\n                // we need to rebuild the path as we map\r\n                let lastPath: string;\r\n\r\n                (event as any).detail.parents = indexes.map(i => {\r\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n                    return sanitizeItem(searchData.find(i => i.path === lastPath));\r\n                });\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n    };\r\n\r\n    const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\r\n        'aria-haspopup': 'listbox' as const,\r\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\r\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\r\n        disabled,\r\n        id: buttonId,\r\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\r\n        type: 'button',\r\n    };\r\n\r\n    const listbox = {\r\n        ...otherProps,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data,\r\n        disabled,\r\n        emptyValue,\r\n        onClick: handleListboxClick,\r\n        onChange: event => {\r\n            setInputValueByRef(internalInputRef.current, event.target?.value);\r\n        },\r\n        onKeyDown: handleListboxKeyDown,\r\n        ref: inputRef,\r\n        value,\r\n        multiselect,\r\n    };\r\n\r\n    const input = {\r\n        onChange: handleInputChange,\r\n        ref: internalInputRef,\r\n        value: value ?? '',\r\n    };\r\n\r\n    return {\r\n        button,\r\n        listbox,\r\n        input,\r\n        popover: {\r\n            open,\r\n            onOpenChange: setOpen,\r\n        },\r\n        text,\r\n        more,\r\n    };\r\n};\r\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","searchData","useFlattenedData","inputRef","useProxiedRef","open","setOpen","React","uuid","internalInputRef","buttonId","lastValue","setLastValue","undefined","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport cn from 'classnames';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { SelectProps } from './Select';\r\nimport { ListboxProps } from '../Listbox/Listbox';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\r\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\r\n\r\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\r\n    button: React.ButtonHTMLAttributes<HTMLButtonElement>;\r\n    listbox: ListboxProps;\r\n    input: any;\r\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\r\n    text: string | JSX.Element;\r\n    more?: number;\r\n};\r\n\r\nexport const useSelect = (\r\n    {\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data = [],\r\n        defaultValue,\r\n        disabled,\r\n        emptyValue,\r\n        id: nativeId,\r\n        multiselect,\r\n        onClick,\r\n        onChange,\r\n        readOnly,\r\n        value = emptyValue,\r\n        ...otherProps\r\n    }: SelectProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useSelect => {\r\n    const { texts } = useLocalization();\r\n    const searchData = useFlattenedData(data);\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const [open, setOpen] = React.useState(false);\r\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\r\n    const internalInputRef = React.useRef(null);\r\n    const buttonId = `${id}-button`;\r\n    // support 'escape' resetting to the value that was set when the listbox opened\r\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\r\n\r\n    React.useEffect(() => {\r\n        setLastValue(value);\r\n    }, [open]);\r\n\r\n    React.useEffect(() => {\r\n        if (defaultValue !== undefined && value === undefined) {\r\n            setInputValueByRef(internalInputRef.current, defaultValue);\r\n        }\r\n    }, [defaultValue]);\r\n\r\n    React.useEffect(() => {\r\n        // If emptyValue is defined, then set emptyValue\r\n        if (emptyValue !== undefined && value === emptyValue) {\r\n            setInputValueByRef(internalInputRef.current, value);\r\n        } else if (value !== undefined && data.some(option => option.value === value)) {\r\n            setInputValueByRef(internalInputRef.current, value);\r\n        } else if (data.length && defaultValue === undefined) {\r\n            setInputValueByRef(internalInputRef.current, data[0].value);\r\n        }\r\n    }, []);\r\n\r\n    // event handlers\r\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\r\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\r\n            event.preventDefault();\r\n            setOpen(true);\r\n        }\r\n    };\r\n\r\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\r\n        switch (event.keyCode) {\r\n            case keycode('escape'): {\r\n                event.preventDefault();\r\n                if (lastValue !== undefined) {\r\n                    setInputValueByRef(inputRef.current, lastValue);\r\n                }\r\n\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            case keycode('tab'):\r\n            case keycode('enter'): {\r\n                if (event.keyCode !== keycode('tab')) {\r\n                    event.preventDefault();\r\n                }\r\n                setOpen(false);\r\n                break;\r\n            }\r\n\r\n            default:\r\n        }\r\n\r\n        if (otherProps.onKeyDown) {\r\n            otherProps.onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\r\n        event.preventDefault();\r\n        if (!multiselect) {\r\n            setOpen(false);\r\n        }\r\n    };\r\n\r\n    let text: string | JSX.Element = '';\r\n    let more = 0;\r\n\r\n    if (value !== undefined) {\r\n        if (multiselect) {\r\n            const selectedValues = value?.toString().split(',') || [];\r\n\r\n            if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\r\n                text = texts.select.allOptionsSelected;\r\n            } else {\r\n                text = findByValue(searchData, selectedValues[0])?.text ?? '';\r\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\r\n            }\r\n        } else {\r\n            const item = findByValue(searchData, value);\r\n\r\n            if (item) {\r\n                text = item.icon ? (\r\n                    <>\r\n                        {React.cloneElement(item.icon, {\r\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\r\n                        })}\r\n                        {item.text}\r\n                    </>\r\n                ) : (\r\n                    item.text\r\n                );\r\n            }\r\n        }\r\n    }\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        if (onChange) {\r\n            const item = findByValue(searchData, event.target.value);\r\n            (event as any).detail = sanitizeItem(item);\r\n\r\n            const indexes = item?.path?.split('.') ?? [];\r\n\r\n            if (indexes.length > 1) {\r\n                // we don't want to map the current item\r\n                indexes.pop();\r\n                // we need to rebuild the path as we map\r\n                let lastPath: string;\r\n\r\n                (event as any).detail.parents = indexes.map(i => {\r\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n                    return sanitizeItem(searchData.find(i => i.path === lastPath));\r\n                });\r\n            }\r\n\r\n            onChange(event);\r\n        }\r\n    };\r\n\r\n    const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\r\n        'aria-haspopup': 'listbox' as const,\r\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\r\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\r\n        disabled,\r\n        id: buttonId,\r\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\r\n        type: 'button',\r\n    };\r\n\r\n    const listbox = {\r\n        ...otherProps,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        data,\r\n        disabled,\r\n        emptyValue,\r\n        onClick: handleListboxClick,\r\n        onChange: event => {\r\n            setInputValueByRef(internalInputRef.current, event.target?.value);\r\n        },\r\n        onKeyDown: handleListboxKeyDown,\r\n        ref: inputRef,\r\n        value,\r\n        multiselect,\r\n    };\r\n\r\n    const input = {\r\n        onChange: handleInputChange,\r\n        ref: internalInputRef,\r\n        value: value ?? '',\r\n    };\r\n\r\n    return {\r\n        button,\r\n        listbox,\r\n        input,\r\n        popover: {\r\n            open,\r\n            onOpenChange: setOpen,\r\n        },\r\n        text,\r\n        more,\r\n    };\r\n};\r\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","searchData","useFlattenedData","inputRef","useProxiedRef","open","setOpen","React","uuid","internalInputRef","buttonId","lastValue","setLastValue","undefined","setInputValueByRef","current","some","option","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Table/components/BaseTable.js

@@ -32,7 +32,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-b border-t-0 border-b-2 font-bold"
+    className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
   }, headerGroup.headers.map((cell, index) => React__default.createElement(Column, {
     key: index,
     index: index,

package/dist/esm/components/Table/components/BaseTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { HeaderGroup } from 'react-table';\r\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\r\nimport { InternalBaseTable } from '../types';\r\nimport './Table.css';\r\nimport { Column } from '../util/renderColumn';\r\n\r\nexport const DefaultEmptyState = (): React.ReactNode => null;\r\n\r\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\r\n    const tableRef = useProxiedRef<HTMLDivElement>(ref);\r\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && tableRef.current) {\r\n            tableRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\r\n\r\n    return (\r\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\r\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\r\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\r\n                    <div\r\n                        key={index}\r\n                        role=\"row\"\r\n                        className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-b border-t-0 border-b-2 font-bold\"\r\n                    >\r\n                        {headerGroup.headers.map((cell: any, index: number) => (\r\n                            <Column key={index} index={index} cell={cell} />\r\n                        ))}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n\r\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\r\n                {children}\r\n            </div>\r\n        </div>\r\n    );\r\n});\r\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;AACtC,QAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;AACA,QAAM;AAAEG,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,cAAc,EAAEC,CAAvC;AAA0CC,IAAAA,YAA1C;AAAwDC,IAAAA,SAAxD;AAAmEC,IAAAA,OAAnE;AAA4E,OAAGC;AAA/E,MAA8FX,KAApG;AAEAF,EAAAA,cAAK,CAACc,SAAN,CAAgB;AACZ,QAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;AAC/BX,MAAAA,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,QAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;AAEA,SACIjB,4BAAA,MAAA,oBAASa;AAAYM,IAAAA,IAAI,EAAC;AAAQF,IAAAA,SAAS,EAAEA;AAAWd,IAAAA,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;AACIuB,IAAAA,GAAG,EAAED;AACLH,IAAAA,IAAI,EAAC;AACLF,IAAAA,SAAS,EAAC;GAHd,EAKKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;AAAQH,IAAAA,GAAG,EAAED;AAAOA,IAAAA,KAAK,EAAEA;AAAOG,IAAAA,IAAI,EAAEA;GAAxC,CADH,CALL,CADH,CADL,CADJ,EAeIzB,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAES;GAArD,EACKL,QADL,CAfJ,CADJ;AAqBH,CAjCwB;;;;"}
+{"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { HeaderGroup } from 'react-table';\r\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\r\nimport { InternalBaseTable } from '../types';\r\nimport './Table.css';\r\nimport { Column } from '../util/renderColumn';\r\n\r\nexport const DefaultEmptyState = (): React.ReactNode => null;\r\n\r\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\r\n    const tableRef = useProxiedRef<HTMLDivElement>(ref);\r\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && tableRef.current) {\r\n            tableRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\r\n\r\n    return (\r\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\r\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\r\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\r\n                    <div\r\n                        key={index}\r\n                        role=\"row\"\r\n                        className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\"\r\n                    >\r\n                        {headerGroup.headers.map((cell: any, index: number) => (\r\n                            <Column key={index} index={index} cell={cell} />\r\n                        ))}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n\r\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\r\n                {children}\r\n            </div>\r\n        </div>\r\n    );\r\n});\r\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;AACtC,QAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;AACA,QAAM;AAAEG,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,cAAc,EAAEC,CAAvC;AAA0CC,IAAAA,YAA1C;AAAwDC,IAAAA,SAAxD;AAAmEC,IAAAA,OAAnE;AAA4E,OAAGC;AAA/E,MAA8FX,KAApG;AAEAF,EAAAA,cAAK,CAACc,SAAN,CAAgB;AACZ,QAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;AAC/BX,MAAAA,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;AACH;AACJ,GAJD,EAIG,EAJH;AAMA,QAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;AAEA,SACIjB,4BAAA,MAAA,oBAASa;AAAYM,IAAAA,IAAI,EAAC;AAAQF,IAAAA,SAAS,EAAEA;AAAWd,IAAAA,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;AACIuB,IAAAA,GAAG,EAAED;AACLH,IAAAA,IAAI,EAAC;AACLF,IAAAA,SAAS,EAAC;GAHd,EAKKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;AAAQH,IAAAA,GAAG,EAAED;AAAOA,IAAAA,KAAK,EAAEA;AAAOG,IAAAA,IAAI,EAAEA;GAAxC,CADH,CALL,CADH,CADL,CADJ,EAeIzB,4BAAA,MAAA;AAAKmB,IAAAA,IAAI,EAAC;AAAWF,IAAAA,SAAS,EAAC;AAAiBd,IAAAA,GAAG,EAAES;GAArD,EACKL,QADL,CAfJ,CADJ;AAqBH,CAjCwB;;;;"}

package/dist/esm/components/Textarea/Textarea.js

@@ -6,8 +6,8 @@ const Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
   const {
     defaultValue: _,
     highlighted,
+    invalid,
     onKeyDown,
-    state,
     ...otherProps
   } = props;
   const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll

package/dist/esm/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { State } from '../../types';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /** State will change the style of the textarea **/\r\n    state?: State;\r\n    /** Value of the textarea */\r\n    value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n    const { defaultValue: _, highlighted, onKeyDown, state, ...otherProps } = props;\r\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","onKeyDown","state","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAcaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,QAAM;AAAEC,IAAAA,YAAY,EAAEC,CAAhB;AAAmBC,IAAAA,WAAnB;AAAgCC,IAAAA,SAAhC;AAA2CC,IAAAA,KAA3C;AAAkD,OAAGC;AAArD,MAAoEP,KAA1E;AACA,QAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACW,SAAzE,CAArB;AAGA;AACA;;AACA,QAAMC,aAAa,GAAIC,KAAD;AAClB,QAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;AAC7CD,MAAAA,KAAK,CAACE,cAAN;AACA,YAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;AACAN,MAAAA,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;AACAH,MAAAA,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;AACH;;AAED,QAAIjB,SAAJ,EAAe;AACXA,MAAAA,SAAS,CAACQ,KAAD,CAAT;AACH;AACJ,GAXD;;AAaA,SAAOd,aAAA,WAAA,oBAAcQ;AAAYI,IAAAA,SAAS,EAAEH;iBAAsB;AAAWH,IAAAA,SAAS,EAAEO;AAAeX,IAAAA,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n    /** Value of the textarea */\r\n    value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\r\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAaaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,QAAM;AAAEC,IAAAA,YAAY,EAAEC,CAAhB;AAAmBC,IAAAA,WAAnB;AAAgCC,IAAAA,OAAhC;AAAyCC,IAAAA,SAAzC;AAAoD,OAAGC;AAAvD,MAAsEP,KAA5E;AACA,QAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACW,SAAzE,CAArB;AAGA;AACA;;AACA,QAAMC,aAAa,GAAIC,KAAD;AAClB,QAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;AAC7CD,MAAAA,KAAK,CAACE,cAAN;AACA,YAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;AACAN,MAAAA,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;AACAH,MAAAA,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;AACH;;AAED,QAAIhB,SAAJ,EAAe;AACXA,MAAAA,SAAS,CAACO,KAAD,CAAT;AACH;AACJ,GAXD;;AAaA,SAAOd,aAAA,WAAA,oBAAcQ;AAAYI,IAAAA,SAAS,EAAEH;iBAAsB;AAAWF,IAAAA,SAAS,EAAEM;AAAeX,IAAAA,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}

package/dist/esm/index.css

@@ -136,6 +136,25 @@
         -webkit-appearance: none;
     }
 
+    table.yt-table {
+        @apply focus:yt-focus flex flex-col focus:rounded-sm;
+    }
+    table.yt-table thead.yt-table__head tr.yt-table__row {
+        @apply border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold;
+    }
+
+    table.yt-table thead.yt-table__head tr.yt-table__row th.yt-table__cell {
+        @apply text-grey-darkest flex flex-1 justify-center truncate p-2 text-center align-middle hover:text-black;
+    }
+
+    table.yt-table tbody.yt-table__body tr.yt-table__row {
+        @apply border-grey-light hover:bg-grey-light flex min-h-[2.5rem] border-b;
+    }
+
+    table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
+        @apply flex-1 truncate p-2 text-center align-middle;
+    }
+
     [data-radix-portal][aria-hidden] [data-taco='menu'],
     [data-radix-portal][aria-hidden] [data-taco='hanger'] {
         display: none;

package/dist/index.css

@@ -136,6 +136,25 @@
         -webkit-appearance: none;
     }
 
+    table.yt-table {
+        @apply focus:yt-focus flex flex-col focus:rounded-sm;
+    }
+    table.yt-table thead.yt-table__head tr.yt-table__row {
+        @apply border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold;
+    }
+
+    table.yt-table thead.yt-table__head tr.yt-table__row th.yt-table__cell {
+        @apply text-grey-darkest flex flex-1 justify-center truncate p-2 text-center align-middle hover:text-black;
+    }
+
+    table.yt-table tbody.yt-table__body tr.yt-table__row {
+        @apply border-grey-light hover:bg-grey-light flex min-h-[2.5rem] border-b;
+    }
+
+    table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
+        @apply flex-1 truncate p-2 text-center align-middle;
+    }
+
     [data-radix-portal][aria-hidden] [data-taco='menu'],
     [data-radix-portal][aria-hidden] [data-taco='hanger'] {
         display: none;