@economic/taco 1.0.8 → 1.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const rowsRef = React.useRef<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef.current) {\n                rowsRef.current.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {\n            rowsRef.current.scrollToItem(rowProps.activeIndex);\n        }\n    }, [rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef.current) {\n            rowsRef.current.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                rowsRef.current = list;\n                            }}\n                        >\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList {...listProps} itemCount={rows.length} ref={rowsRef}>\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","rowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}
+{"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n    const { texts } = useLocalization();\n    const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n    const row = rows[index];\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            setRowHeight(index, ref.current.getBoundingClientRect().height);\n        }\n    }, [rowHeights[index]]);\n\n    if (row) {\n        prepareRow(row, index);\n\n        return (\n            <Row\n                {...rowProps}\n                style={style}\n                key={index}\n                index={index}\n                row={row}\n                instance={instance}\n                headerGroups={tableProps.headerGroups}\n                setRowHeight={setRowHeight}\n                ref={ref}\n            />\n        );\n    }\n\n    return (\n        <div className=\"yt-table__row\" role=\"row\" style={style}>\n            <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n        </div>\n    );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n    const keys = Object.keys(rowHeights);\n    const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n    return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n    props: TableProps<T> & { plugins: PluginHook<{}>[] },\n    ref: React.Ref<TableRef>\n) {\n    const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n    const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n    const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n    // determine heights for windowing calculations\n    const headerRef = React.useRef<HTMLDivElement>(null);\n    const [rowsRef, setRowsRef] = React.useState<any>(null);\n    const tableDimensions = useBoundingClientRectListener(tableRef);\n    const headerDimensions = useBoundingClientRectListener(headerRef);\n    const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n    // variable row height calculations\n    const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n    const rowHeights = React.useRef<Record<string, number>>({});\n    const setRowHeight = React.useCallback((index: number, size: number) => {\n        if (rowHeights.current[index] !== size) {\n            rowHeights.current = {\n                ...rowHeights.current,\n                [index]: size,\n            };\n\n            if (rowsRef) {\n                rowsRef.resetAfterIndex(0);\n            }\n        }\n    }, []);\n    const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n    React.useEffect(() => {\n        if (rowsRef && rowProps.activeIndex !== undefined) {\n            rowsRef.scrollToItem(rowProps.activeIndex, 'start');\n        }\n    }, [rowsRef, rowProps.activeIndex]);\n\n    // trigger recalculation of variable row heights if the data changes\n    React.useEffect(() => {\n        rowHeights.current = {};\n\n        if (rowsRef) {\n            rowsRef.resetAfterIndex(0);\n        }\n    }, [rows.length]);\n\n    const contentHeight = estimatedRowHeight * props.data.length || 0;\n    const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n    const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n    let list;\n\n    const itemData = {\n        rows,\n        setRowHeight,\n        rowProps,\n        tableProps,\n        instance,\n        prepareRow,\n        state,\n        rowHeights: rowHeights.current,\n    };\n\n    if (height && rows.length) {\n        const listProps = {\n            height,\n            itemData,\n            estimatedItemSize: getAverageRowHeight(rowHeights.current),\n            itemSize: getRowHeight,\n            width: '100%',\n        };\n\n        if (loadMore && length) {\n            const isLoaded = (index: number) => !!rows[index];\n\n            list = (\n                <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n                    {({ onItemsRendered, ref }: any) => (\n                        <VariableSizeList\n                            {...listProps}\n                            itemCount={length}\n                            onItemsRendered={onItemsRendered}\n                            ref={list => {\n                                ref(list);\n                                setRowsRef(list);\n                            }}\n                        >\n                            {VariableRow}\n                        </VariableSizeList>\n                    )}\n                </InfiniteLoader>\n            );\n        } else {\n            list = (\n                <VariableSizeList\n                    {...listProps}\n                    itemCount={rows.length}\n                    ref={ref => {\n                        setRowsRef(ref);\n                    }}\n                >\n                    {VariableRow}\n                </VariableSizeList>\n            );\n        }\n    }\n\n    return (\n        <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n            {list ? list : emptyStateRenderer()}\n        </BaseTable>\n    );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","useLocalization","texts","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","height","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","useTable","windowed","state","headerRef","useState","rowsRef","setRowsRef","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}

package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js

@@ -2,13 +2,18 @@ import React__default from 'react';
 import keycode from 'keycode';
 import { getNextIndexFromKeycode } from '../../../utils/hooks/useListKeyboardNavigation.js';
 import { sanitizeRowProps } from '../util.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 
 var useTableKeyboardNavigation = function useTableKeyboardNavigation(props, rows, rowProps, ref) {
   var useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;
 
-  var _React$useState = React__default.useState(useGlobalKeyboardNavigation ? 0 : undefined),
-      activeIndex = _React$useState[0],
-      setActiveIndex = _React$useState[1];
+  var _useControllableState = useControllableState({
+    prop: props.activeIndex,
+    defaultProp: props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,
+    onChange: props.onChangeActiveIndex
+  }),
+      activeIndex = _useControllableState[0],
+      setActiveIndex = _useControllableState[1];
 
   var onKeyDown = function onKeyDown(event) {
     var _document$activeEleme;

package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableKeyboardNavigation.js","sources":["../../../../../src/components/Table/hooks/useTableKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\nimport keycode from 'keycode';\nimport { getNextIndexFromKeycode } from '../../../utils/hooks/useListKeyboardNavigation';\nimport { sanitizeRowProps } from '../util';\nimport { TableProps } from '../types';\n\nexport const useTableKeyboardNavigation = <T extends {}>(\n    props: TableProps<T>,\n    rows: any[],\n    rowProps: any,\n    ref: React.RefObject<HTMLDivElement>\n): [\n    number | undefined,\n    (index: number) => void,\n    (event: React.KeyboardEvent<HTMLElement>) => void,\n    (event: React.FocusEvent<HTMLElement>) => void\n] => {\n    const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>(useGlobalKeyboardNavigation ? 0 : undefined);\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n        const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;\n\n        if (\n            useGlobalKeyboardNavigation &&\n            document.activeElement !== ref.current &&\n            document.activeElement?.getAttribute('type') !== 'search' &&\n            document.activeElement !== document.body\n        ) {\n            return;\n        }\n        // abort key handling if other elements inside table are focused and we don't use global keyboard navigation\n        if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {\n            return;\n        }\n\n        if (activeIndex !== undefined) {\n            const currentRow = rows[activeIndex];\n\n            if (currentRow) {\n                const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);\n\n                if (rowProps.onRowClick && event.keyCode === keycode('enter')) {\n                    event.preventDefault();\n                    rowProps.onRowClick(sanitizedRow);\n                    return;\n                }\n\n                if (currentRow.toggleRowSelected && event.keyCode === keycode('space')) {\n                    event.preventDefault();\n                    currentRow.toggleRowSelected();\n                    return;\n                }\n\n                if (currentRow.toggleRowExpanded) {\n                    if (currentRow.isExpanded && event.keyCode === keycode('left')) {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    } else if (!currentRow.isExpanded && event.keyCode === keycode('right')) {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    }\n                }\n\n                // inline editing\n                if (currentRow.toggleRowEditing) {\n                    if (currentRow.canEdit && !currentRow.isEditing) {\n                        if (rowProps.onRowCreate && event.shiftKey && event.keyCode === keycode('n')) {\n                            event.preventDefault();\n\n                            if (!currentRow.isExpanded) {\n                                currentRow.toggleRowExpanded();\n                            }\n\n                            rowProps.onRowCreate(sanitizedRow, event);\n                            return;\n                        }\n\n                        if (event.keyCode === keycode('e')) {\n                            event.preventDefault();\n                            currentRow.toggleRowEditing();\n                            return;\n                        }\n                    }\n                }\n\n                if (rowProps.onRowEdit && event.keyCode === keycode('e') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowEdit(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowCopy && event.keyCode === keycode('c') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowCopy(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowDelete && event.keyCode === keycode('delete') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowDelete(sanitizedRow, event);\n                    return;\n                }\n            }\n        }\n\n        const nextIndex = getNextIndexFromKeycode(event.keyCode, rows.length, activeIndex);\n\n        if (nextIndex !== undefined) {\n            event.preventDefault();\n            setActiveIndex(nextIndex);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        if (!useGlobalKeyboardNavigation) {\n            onKeyDown(event.nativeEvent);\n        }\n    };\n\n    React.useEffect(() => {\n        if (useGlobalKeyboardNavigation) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n\n        return () => {\n            if (useGlobalKeyboardNavigation) {\n                window.removeEventListener('keydown', onKeyDown);\n            }\n        };\n    }, [onKeyDown]);\n\n    const handleFocus = (): void => {\n        if (activeIndex === undefined && rows.length) {\n            setActiveIndex(0);\n        }\n    };\n\n    return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];\n};\n"],"names":["useTableKeyboardNavigation","props","rows","rowProps","ref","useGlobalKeyboardNavigation","dangerouslyHijackGlobalKeyboardNavigation","React","useState","undefined","activeIndex","setActiveIndex","onKeyDown","event","isModifierKeyPressed","metaKey","ctrlKey","altKey","shiftKey","document","activeElement","current","getAttribute","body","currentRow","sanitizedRow","sanitizeRowProps","rowExpansionRenderer","onRowClick","keyCode","keycode","preventDefault","toggleRowSelected","toggleRowExpanded","isExpanded","toggleRowEditing","canEdit","isEditing","onRowCreate","onRowEdit","onRowCopy","onRowDelete","nextIndex","getNextIndexFromKeycode","length","handleKeyDown","nativeEvent","useEffect","window","addEventListener","removeEventListener","handleFocus"],"mappings":";;;;;IAMaA,0BAA0B,GAAG,SAA7BA,0BAA6B,CACtCC,KADsC,EAEtCC,IAFsC,EAGtCC,QAHsC,EAItCC,GAJsC;AAWtC,MAAMC,2BAA2B,GAAGJ,KAAK,CAACK,yCAA1C;;AACA,wBAAsCC,cAAK,CAACC,QAAN,CAAmCH,2BAA2B,GAAG,CAAH,GAAOI,SAArE,CAAtC;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAEA,MAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD;;;AACd,QAAMC,oBAAoB,GAAGD,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACG,OAAvB,IAAkCH,KAAK,CAACI,MAAxC,IAAkDJ,KAAK,CAACK,QAArF;;AAEA,QACIb,2BAA2B,IAC3Bc,QAAQ,CAACC,aAAT,KAA2BhB,GAAG,CAACiB,OAD/B,IAEA,0BAAAF,QAAQ,CAACC,aAAT,gFAAwBE,YAAxB,CAAqC,MAArC,OAAiD,QAFjD,IAGAH,QAAQ,CAACC,aAAT,KAA2BD,QAAQ,CAACI,IAJxC,EAKE;AACE;AACH;;;AAED,QAAI,CAAClB,2BAAD,IAAgCc,QAAQ,CAACC,aAAT,KAA2BhB,GAAG,CAACiB,OAAnE,EAA4E;AACxE;AACH;;AAED,QAAIX,WAAW,KAAKD,SAApB,EAA+B;AAC3B,UAAMe,UAAU,GAAGtB,IAAI,CAACQ,WAAD,CAAvB;;AAEA,UAAIc,UAAJ,EAAgB;AACZ,YAAMC,YAAY,GAAGC,gBAAgB,CAACF,UAAD,EAAarB,QAAQ,CAACwB,oBAAtB,CAArC;;AAEA,YAAIxB,QAAQ,CAACyB,UAAT,IAAuBf,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAApD,EAA+D;AAC3DjB,UAAAA,KAAK,CAACkB,cAAN;AACA5B,UAAAA,QAAQ,CAACyB,UAAT,CAAoBH,YAApB;AACA;AACH;;AAED,YAAID,UAAU,CAACQ,iBAAX,IAAgCnB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAA7D,EAAwE;AACpEjB,UAAAA,KAAK,CAACkB,cAAN;AACAP,UAAAA,UAAU,CAACQ,iBAAX;AACA;AACH;;AAED,YAAIR,UAAU,CAACS,iBAAf,EAAkC;AAC9B,cAAIT,UAAU,CAACU,UAAX,IAAyBrB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,MAAD,CAAtD,EAAgE;AAC5DjB,YAAAA,KAAK,CAACkB,cAAN;AACAP,YAAAA,UAAU,CAACS,iBAAX;AACA;AACH,WAJD,MAIO,IAAI,CAACT,UAAU,CAACU,UAAZ,IAA0BrB,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAvD,EAAkE;AACrEjB,YAAAA,KAAK,CAACkB,cAAN;AACAP,YAAAA,UAAU,CAACS,iBAAX;AACA;AACH;AACJ,SAzBW;;;AA4BZ,YAAIT,UAAU,CAACW,gBAAf,EAAiC;AAC7B,cAAIX,UAAU,CAACY,OAAX,IAAsB,CAACZ,UAAU,CAACa,SAAtC,EAAiD;AAC7C,gBAAIlC,QAAQ,CAACmC,WAAT,IAAwBzB,KAAK,CAACK,QAA9B,IAA0CL,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,GAAD,CAAvE,EAA8E;AAC1EjB,cAAAA,KAAK,CAACkB,cAAN;;AAEA,kBAAI,CAACP,UAAU,CAACU,UAAhB,EAA4B;AACxBV,gBAAAA,UAAU,CAACS,iBAAX;AACH;;AAED9B,cAAAA,QAAQ,CAACmC,WAAT,CAAqBb,YAArB,EAAmCZ,KAAnC;AACA;AACH;;AAED,gBAAIA,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,GAAD,CAA7B,EAAoC;AAChCjB,cAAAA,KAAK,CAACkB,cAAN;AACAP,cAAAA,UAAU,CAACW,gBAAX;AACA;AACH;AACJ;AACJ;;AAED,YAAIhC,QAAQ,CAACoC,SAAT,IAAsB1B,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,GAAD,CAA/C,IAAwD,CAAChB,oBAA7D,EAAmF;AAC/ED,UAAAA,KAAK,CAACkB,cAAN;AACA5B,UAAAA,QAAQ,CAACoC,SAAT,CAAmBd,YAAnB,EAAiCZ,KAAjC;AACA;AACH;;AAED,YAAIV,QAAQ,CAACqC,SAAT,IAAsB3B,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,GAAD,CAA/C,IAAwD,CAAChB,oBAA7D,EAAmF;AAC/ED,UAAAA,KAAK,CAACkB,cAAN;AACA5B,UAAAA,QAAQ,CAACqC,SAAT,CAAmBf,YAAnB,EAAiCZ,KAAjC;AACA;AACH;;AAED,YAAIV,QAAQ,CAACsC,WAAT,IAAwB5B,KAAK,CAACgB,OAAN,KAAkBC,OAAO,CAAC,QAAD,CAAjD,IAA+D,CAAChB,oBAApE,EAA0F;AACtFD,UAAAA,KAAK,CAACkB,cAAN;AACA5B,UAAAA,QAAQ,CAACsC,WAAT,CAAqBhB,YAArB,EAAmCZ,KAAnC;AACA;AACH;AACJ;AACJ;;AAED,QAAM6B,SAAS,GAAGC,uBAAuB,CAAC9B,KAAK,CAACgB,OAAP,EAAgB3B,IAAI,CAAC0C,MAArB,EAA6BlC,WAA7B,CAAzC;;AAEA,QAAIgC,SAAS,KAAKjC,SAAlB,EAA6B;AACzBI,MAAAA,KAAK,CAACkB,cAAN;AACApB,MAAAA,cAAc,CAAC+B,SAAD,CAAd;AACH;AACJ,GA9FD;;AAgGA,MAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAAChC,KAAD;AAClB,QAAI,CAACR,2BAAL,EAAkC;AAC9BO,MAAAA,SAAS,CAACC,KAAK,CAACiC,WAAP,CAAT;AACH;AACJ,GAJD;;AAMAvC,EAAAA,cAAK,CAACwC,SAAN,CAAgB;AACZ,QAAI1C,2BAAJ,EAAiC;AAC7B2C,MAAAA,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmCrC,SAAnC;AACH;;AAED,WAAO;AACH,UAAIP,2BAAJ,EAAiC;AAC7B2C,QAAAA,MAAM,CAACE,mBAAP,CAA2B,SAA3B,EAAsCtC,SAAtC;AACH;AACJ,KAJD;AAKH,GAVD,EAUG,CAACA,SAAD,CAVH;;AAYA,MAAMuC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAIzC,WAAW,KAAKD,SAAhB,IAA6BP,IAAI,CAAC0C,MAAtC,EAA8C;AAC1CjC,MAAAA,cAAc,CAAC,CAAD,CAAd;AACH;AACJ,GAJD;;AAMA,SAAO,CAACD,WAAD,EAAcC,cAAd,EAA8BkC,aAA9B,EAA6CM,WAA7C,CAAP;AACH;;;;"}
+{"version":3,"file":"useTableKeyboardNavigation.js","sources":["../../../../../src/components/Table/hooks/useTableKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\nimport keycode from 'keycode';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { getNextIndexFromKeycode } from '../../../utils/hooks/useListKeyboardNavigation';\nimport { sanitizeRowProps } from '../util';\nimport { TableProps } from '../types';\n\nexport const useTableKeyboardNavigation = <T extends {}>(\n    props: TableProps<T>,\n    rows: any[],\n    rowProps: any,\n    ref: React.RefObject<HTMLDivElement>\n): [\n    number | undefined,\n    (index: number) => void,\n    (event: React.KeyboardEvent<HTMLElement>) => void,\n    (event: React.FocusEvent<HTMLElement>) => void\n] => {\n    const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;\n\n    const [activeIndex, setActiveIndex] = useControllableState<number | undefined>({\n        prop: props.activeIndex,\n        defaultProp:\n            props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,\n        onChange: props.onChangeActiveIndex,\n    });\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n        const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;\n\n        if (\n            useGlobalKeyboardNavigation &&\n            document.activeElement !== ref.current &&\n            document.activeElement?.getAttribute('type') !== 'search' &&\n            document.activeElement !== document.body\n        ) {\n            return;\n        }\n        // abort key handling if other elements inside table are focused and we don't use global keyboard navigation\n        if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {\n            return;\n        }\n\n        if (activeIndex !== undefined) {\n            const currentRow = rows[activeIndex];\n\n            if (currentRow) {\n                const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);\n\n                if (rowProps.onRowClick && event.keyCode === keycode('enter')) {\n                    event.preventDefault();\n                    rowProps.onRowClick(sanitizedRow);\n                    return;\n                }\n\n                if (currentRow.toggleRowSelected && event.keyCode === keycode('space')) {\n                    event.preventDefault();\n                    currentRow.toggleRowSelected();\n                    return;\n                }\n\n                if (currentRow.toggleRowExpanded) {\n                    if (currentRow.isExpanded && event.keyCode === keycode('left')) {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    } else if (!currentRow.isExpanded && event.keyCode === keycode('right')) {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    }\n                }\n\n                // inline editing\n                if (currentRow.toggleRowEditing) {\n                    if (currentRow.canEdit && !currentRow.isEditing) {\n                        if (rowProps.onRowCreate && event.shiftKey && event.keyCode === keycode('n')) {\n                            event.preventDefault();\n\n                            if (!currentRow.isExpanded) {\n                                currentRow.toggleRowExpanded();\n                            }\n\n                            rowProps.onRowCreate(sanitizedRow, event);\n                            return;\n                        }\n\n                        if (event.keyCode === keycode('e')) {\n                            event.preventDefault();\n                            currentRow.toggleRowEditing();\n                            return;\n                        }\n                    }\n                }\n\n                if (rowProps.onRowEdit && event.keyCode === keycode('e') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowEdit(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowCopy && event.keyCode === keycode('c') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowCopy(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowDelete && event.keyCode === keycode('delete') && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowDelete(sanitizedRow, event);\n                    return;\n                }\n            }\n        }\n\n        const nextIndex = getNextIndexFromKeycode(event.keyCode, rows.length, activeIndex);\n\n        if (nextIndex !== undefined) {\n            event.preventDefault();\n            setActiveIndex(nextIndex);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        if (!useGlobalKeyboardNavigation) {\n            onKeyDown(event.nativeEvent);\n        }\n    };\n\n    React.useEffect(() => {\n        if (useGlobalKeyboardNavigation) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n\n        return () => {\n            if (useGlobalKeyboardNavigation) {\n                window.removeEventListener('keydown', onKeyDown);\n            }\n        };\n    }, [onKeyDown]);\n\n    const handleFocus = (): void => {\n        if (activeIndex === undefined && rows.length) {\n            setActiveIndex(0);\n        }\n    };\n\n    return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];\n};\n"],"names":["useTableKeyboardNavigation","props","rows","rowProps","ref","useGlobalKeyboardNavigation","dangerouslyHijackGlobalKeyboardNavigation","useControllableState","prop","activeIndex","defaultProp","defaultActiveIndex","undefined","onChange","onChangeActiveIndex","setActiveIndex","onKeyDown","event","isModifierKeyPressed","metaKey","ctrlKey","altKey","shiftKey","document","activeElement","current","getAttribute","body","currentRow","sanitizedRow","sanitizeRowProps","rowExpansionRenderer","onRowClick","keyCode","keycode","preventDefault","toggleRowSelected","toggleRowExpanded","isExpanded","toggleRowEditing","canEdit","isEditing","onRowCreate","onRowEdit","onRowCopy","onRowDelete","nextIndex","getNextIndexFromKeycode","length","handleKeyDown","nativeEvent","React","useEffect","window","addEventListener","removeEventListener","handleFocus"],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.js

@@ -41,7 +41,7 @@ var TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
       disabled = props.disabled,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
+  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
   return createElement(Trigger, Object.assign({}, otherProps, {
     className: className,
     disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}\n        >\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey'\n            : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;;;;;IA+DaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,MAAQC,EAAR,GAAyFF,KAAzF,CAAQE,EAAR;AAAA,MAAYC,SAAZ,GAAyFH,KAAzF,CAAYG,SAAZ;AAAA,MAAuBC,QAAvB,GAAyFJ,KAAzF,CAAuBI,QAAvB;AAAA,MAAiCC,QAAjC,GAAyFL,KAAzF,CAAiCK,QAAjC;AAAA,2BAAyFL,KAAzF,CAA2CM,WAA3C;AAAA,MAA2CA,WAA3C,mCAAyD,YAAzD;AAAA,MAA0EC,UAA1E,iCAAyFP,KAAzF;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SADgB,gBAEJH,WAFI,EAGhB;AACI,mBAAeA,WAAW,KAAK;AADnC,GAHgB,EAMhBN,KAAK,CAACQ,SANU,CAApB;AASA,SACIT,aAAA,CAACW,IAAD,oBACQH;AACJC,IAAAA,SAAS,EAAEA;iBACD;AACVG,IAAAA,YAAY,EAAER;AACdS,IAAAA,GAAG,EAAC;AACJC,IAAAA,aAAa,EAAER;AACfC,IAAAA,WAAW,EAAEA;AACbL,IAAAA,GAAG,EAAEA;AACLa,IAAAA,KAAK,EAAEZ;IATX,EAWKE,QAXL,CADJ;AAeH,CA1BmB;AA4BpB,IAAMW,OAAO,gBAAGhB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAkCC,GAAlC;AAC7B,MAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAD,EAAmET,KAAK,CAACQ,SAAzE,CAApB;AAEA,SAAOT,aAAA,CAACW,IAAD,oBAAwBV;AAAOQ,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;IAA1D,CAAP;AACH,CAJe,CAAhB;AAMA,IAAMgB,UAAU,gBAAGlB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;AAChC,MAAQC,EAAR,GAAwCF,KAAxC,CAAQE,EAAR;AAAA,MAAYgB,QAAZ,GAAwClB,KAAxC,CAAYkB,QAAZ;AAAA,MAAyBX,UAAzB,iCAAwCP,KAAxC;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,qFADgB,EAEhBS,QAAQ,GACF,+BADE,GAEF,uIAJU,EAKhBlB,KAAK,CAACQ,SALU,CAApB;AAQA,SACIT,aAAA,CAACW,OAAD,oBACQH;AACJC,IAAAA,SAAS,EAAEA;AACXU,IAAAA,QAAQ,EAAEA;AACVjB,IAAAA,GAAG,EAAEA;AACLkB,IAAAA,KAAK,EAAE;AACHC,MAAAA,UAAU,EAAE;AADT;AAGPN,IAAAA,KAAK,EAAEZ;IARX,CADJ;AAYH,CAtBkB,CAAnB;AAwBA,IAAMmB,UAAU,gBAAGtB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;AAChC,MAAQC,EAAR,GAA8BF,KAA9B,CAAQE,EAAR;AAAA,MAAeK,UAAf,iCAA8BP,KAA9B;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAAD,EAA+BT,KAAK,CAACQ,SAArC,CAApB;AAEA,SAAOT,aAAA,CAACW,OAAD,oBAA2BH;AAAYC,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;AAAKa,IAAAA,KAAK,EAAEZ;IAA9E,CAAP;AACH,CALkB,CAAnB;AAOAJ,IAAI,CAACwB,IAAL,GAAYP,OAAZ;AACAjB,IAAI,CAACyB,OAAL,GAAeN,UAAf;AACAnB,IAAI,CAAC0B,OAAL,GAAeH,UAAf;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}\n        >\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-darker'\n            : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;;;;;IA+DaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,MAAQC,EAAR,GAAyFF,KAAzF,CAAQE,EAAR;AAAA,MAAYC,SAAZ,GAAyFH,KAAzF,CAAYG,SAAZ;AAAA,MAAuBC,QAAvB,GAAyFJ,KAAzF,CAAuBI,QAAvB;AAAA,MAAiCC,QAAjC,GAAyFL,KAAzF,CAAiCK,QAAjC;AAAA,2BAAyFL,KAAzF,CAA2CM,WAA3C;AAAA,MAA2CA,WAA3C,mCAAyD,YAAzD;AAAA,MAA0EC,UAA1E,iCAAyFP,KAAzF;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SADgB,gBAEJH,WAFI,EAGhB;AACI,mBAAeA,WAAW,KAAK;AADnC,GAHgB,EAMhBN,KAAK,CAACQ,SANU,CAApB;AASA,SACIT,aAAA,CAACW,IAAD,oBACQH;AACJC,IAAAA,SAAS,EAAEA;iBACD;AACVG,IAAAA,YAAY,EAAER;AACdS,IAAAA,GAAG,EAAC;AACJC,IAAAA,aAAa,EAAER;AACfC,IAAAA,WAAW,EAAEA;AACbL,IAAAA,GAAG,EAAEA;AACLa,IAAAA,KAAK,EAAEZ;IATX,EAWKE,QAXL,CADJ;AAeH,CA1BmB;AA4BpB,IAAMW,OAAO,gBAAGhB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAkCC,GAAlC;AAC7B,MAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAD,EAAmET,KAAK,CAACQ,SAAzE,CAApB;AAEA,SAAOT,aAAA,CAACW,IAAD,oBAAwBV;AAAOQ,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;IAA1D,CAAP;AACH,CAJe,CAAhB;AAMA,IAAMgB,UAAU,gBAAGlB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;AAChC,MAAQC,EAAR,GAAwCF,KAAxC,CAAQE,EAAR;AAAA,MAAYgB,QAAZ,GAAwClB,KAAxC,CAAYkB,QAAZ;AAAA,MAAyBX,UAAzB,iCAAwCP,KAAxC;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,qFADgB,EAEhBS,QAAQ,GACF,sCADE,GAEF,+NAJU,EAKhBlB,KAAK,CAACQ,SALU,CAApB;AAQA,SACIT,aAAA,CAACW,OAAD,oBACQH;AACJC,IAAAA,SAAS,EAAEA;AACXU,IAAAA,QAAQ,EAAEA;AACVjB,IAAAA,GAAG,EAAEA;AACLkB,IAAAA,KAAK,EAAE;AACHC,MAAAA,UAAU,EAAE;AADT;AAGPN,IAAAA,KAAK,EAAEZ;IARX,CADJ;AAYH,CAtBkB,CAAnB;AAwBA,IAAMmB,UAAU,gBAAGtB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;AAChC,MAAQC,EAAR,GAA8BF,KAA9B,CAAQE,EAAR;AAAA,MAAeK,UAAf,iCAA8BP,KAA9B;;AACA,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAAD,EAA+BT,KAAK,CAACQ,SAArC,CAApB;AAEA,SAAOT,aAAA,CAACW,OAAD,oBAA2BH;AAAYC,IAAAA,SAAS,EAAEA;AAAWP,IAAAA,GAAG,EAAEA;AAAKa,IAAAA,KAAK,EAAEZ;IAA9E,CAAP;AACH,CALkB,CAAnB;AAOAJ,IAAI,CAACwB,IAAL,GAAYP,OAAZ;AACAjB,IAAI,CAACyB,OAAL,GAAeN,UAAf;AACAnB,IAAI,CAAC0B,OAAL,GAAeH,UAAf;;;;"}

package/dist/esm/index.css

@@ -644,8 +644,8 @@
     @apply m-0 mr-4 flex-col border-0 border-r;
 }
 
-.yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {
-    @apply border-blue text-black;
+.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
+    @apply h-8 py-0;
 }
 
 .yt-tabs.yt-tabs--vertical .yt-tab__list {

package/dist/index.css

@@ -644,8 +644,8 @@
     @apply m-0 mr-4 flex-col border-0 border-r;
 }
 
-.yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {
-    @apply border-blue text-black;
+.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
+    @apply h-8 py-0;
 }
 
 .yt-tabs.yt-tabs--vertical .yt-tab__list {

package/dist/taco.cjs.development.js

@@ -24,6 +24,7 @@ var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var focus = require('@react-aria/focus');
 var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
@@ -3404,7 +3405,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 
 var _excluded$5 = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
 };
 var getAppearanceClasses = function getAppearanceClasses(value, icon) {
   if (icon === void 0) {
@@ -3413,13 +3414,13 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
 
   switch (value) {
     case 'primary':
-      return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue";
+      return "yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue";
 
     case 'danger':
-      return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
+      return "yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
 
     case 'ghost':
-      return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted";
+      return "bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light";
 
     case 'discrete':
       {
@@ -3427,11 +3428,11 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
           return "bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black ";
         }
 
-        return "yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent";
+        return "yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent";
       }
 
     default:
-      return "yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid";
+      return "yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid";
   }
 };
 var createButton = function createButton(props, className, ref) {
@@ -6633,27 +6634,6 @@ var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
 });
 
 var _excluded$w = ["children", "placement"];
-
-var getAppearanceClasses$1 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'wcag-blue border-blue';
-
-    case 'danger':
-      return 'wcag-red border-red';
-
-    case 'ghost':
-      return 'bg-white text-blue border-blue yt-shadow-blue';
-
-    case 'discrete':
-      return 'wcag-white border-grey yt-shadow';
-
-    case 'default':
-    default:
-      return 'wcag-grey-light border-grey';
-  }
-};
-
 var Content$5 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
   var internalRef = useProxiedRef(ref);
   var menu = useCurrentMenu();
@@ -6662,7 +6642,7 @@ var Content$5 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
       side = props.placement,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$w);
 
-  var className = cn('border rounded block outline-none p-1', getAppearanceClasses$1(menu === null || menu === void 0 ? void 0 : menu.appearance), props.className);
+  var className = cn('border rounded block outline-none p-1 wcag-white border-grey yt-shadow', props.className);
   return React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
     align: "start",
     className: className,
@@ -6686,27 +6666,6 @@ var Icon$1 = function Icon$1(_ref) {
     name: name
   }));
 };
-
-var getAppearanceClasses$2 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'wcag-blue aria-disabled:text-blue-dark hover:wcag-blue-light focus:wcag-blue-light';
-
-    case 'danger':
-      return 'wcag-red aria-disabled:text-red-dark hover:wcag-red-light focus:wcag-red-light';
-
-    case 'ghost':
-      return 'text-blue aria-disabled:text-grey hover:wcag-blue focus:wcag-blue';
-
-    case 'discrete':
-      return 'text-black aria-disabled:text-grey hover:wcag-blue-lightest focus:wcag-blue-lightest';
-
-    case 'default':
-    default:
-      return 'wcag-grey-light aria-disabled:text-grey-darker hover:wcag-grey-dark focus:wcag-grey-dark';
-  }
-};
-
 var useItemStyling = function useItemStyling(_ref2) {
   var disabled = _ref2.disabled,
       indented = _ref2.indented,
@@ -6717,7 +6676,7 @@ var useItemStyling = function useItemStyling(_ref2) {
       menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
     }
   }, [indented]);
-  return cn('flex items-center justify-start h-7 pr-1.5 relative rounded w-full focus:outline-none group', getAppearanceClasses$2(menu === null || menu === void 0 ? void 0 : menu.appearance), {
+  return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', 'text-black aria-disabled:text-grey hover:bg-grey-light hover:text-black', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
     'cursor-pointer': !disabled,
@@ -6725,35 +6684,8 @@ var useItemStyling = function useItemStyling(_ref2) {
   }, className);
 };
 var Shortcut = function Shortcut(props) {
-  var menu = useCurrentMenu();
-  var appearance;
-
-  switch (menu === null || menu === void 0 ? void 0 : menu.appearance) {
-    case 'primary':
-      appearance = 'text-blue-lightest group-focus:text-black';
-      break;
-
-    case 'danger':
-      appearance = 'text-red-lightest group-focus:text-white';
-      break;
-
-    case 'ghost':
-      appearance = 'text-blue-light group-focus:text-blue-lightest';
-      break;
-
-    case 'discrete':
-      appearance = 'text-grey-darker group-focus:text-blue-light';
-      break;
-
-    case 'default':
-    default:
-      appearance = 'text-grey-darkest';
-      break;
-  }
-
-  var className = cn('ml-auto pl-3', appearance);
   return React.createElement("span", Object.assign({}, props, {
-    className: className
+    className: "text-grey-darkest ml-auto pl-3"
   }));
 };
 var Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
@@ -6841,25 +6773,13 @@ var Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 });
 
 var Trigger$4 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
-  var _props$children3, _props$children3$prop;
-
   var menu = useCurrentMenu();
   var internalRef = useProxiedRef(ref);
   React.useEffect(function () {
     if (internalRef.current) {
       menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
     }
-  }, [internalRef]); // set the appearance based on the trigger button
-
-  React.useEffect(function () {
-    var _props$children, _props$children$props;
-
-    if ((_props$children = props.children) !== null && _props$children !== void 0 && (_props$children$props = _props$children.props) !== null && _props$children$props !== void 0 && _props$children$props.appearance) {
-      var _props$children2, _props$children2$prop;
-
-      menu === null || menu === void 0 ? void 0 : menu.setAppearance((_props$children2 = props.children) === null || _props$children2 === void 0 ? void 0 : (_props$children2$prop = _props$children2.props) === null || _props$children2$prop === void 0 ? void 0 : _props$children2$prop.appearance);
-    }
-  }, [(_props$children3 = props.children) === null || _props$children3 === void 0 ? void 0 : (_props$children3$prop = _props$children3.props) === null || _props$children3$prop === void 0 ? void 0 : _props$children3$prop.appearance]);
+  }, [internalRef]);
   return React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: internalRef
@@ -7043,57 +6963,15 @@ var RadioGroup$1 = function RadioGroup(props) {
 };
 RadioGroup$1.Item = RadioItem;
 
-var getAppearanceClasses$3 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'bg-blue-lighe';
-
-    case 'danger':
-      return 'bg-red-light';
-
-    case 'ghost':
-      return 'bg-blue-light';
-
-    case 'discrete':
-      return 'bg-grey-dark';
-
-    case 'default':
-    default:
-      return 'bg-grey-dark';
-  }
-};
-
 var Separator = function Separator() {
-  var menu = useCurrentMenu();
-  var className = cn('h-px  my-1', getAppearanceClasses$3(menu === null || menu === void 0 ? void 0 : menu.appearance));
   return React.createElement(DropdownMenuPrimitive.Separator, {
-    className: className
+    className: "bg-grey-dark my-1 h-px"
   });
 };
 
-var getAppearanceClasses$4 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'text-blue-lighest';
-
-    case 'danger':
-      return 'text-red-lightest';
-
-    case 'ghost':
-      return 'text-blue-light';
-
-    case 'discrete':
-      return 'text-grey-darkest';
-
-    case 'default':
-    default:
-      return 'text-grey-darkest';
-  }
-};
-
 var Header = function Header(props) {
   var menu = useCurrentMenu();
-  var className = cn('flex items-center justify-start h-6 pr-1.5 text-xs', getAppearanceClasses$4(menu === null || menu === void 0 ? void 0 : menu.appearance), {
+  var className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-darkest', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
   }, props.className);
@@ -7102,10 +6980,9 @@ var Header = function Header(props) {
   }));
 };
 
-var _excluded$C = ["appearance", "children", "trigger"];
+var _excluded$C = ["children", "trigger"];
 var Menu = function Menu(externalProps) {
-  var externalAppearance = externalProps.appearance,
-      children = externalProps.children,
+  var children = externalProps.children,
       trigger = externalProps.trigger,
       props = _objectWithoutPropertiesLoose(externalProps, _excluded$C);
 
@@ -7113,24 +6990,16 @@ var Menu = function Menu(externalProps) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default'),
-      appearance = _React$useState2[0],
-      _setAppearance = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      indented = _React$useState3[0],
-      setIndented = _React$useState3[1];
+  var _React$useState2 = React.useState(false),
+      indented = _React$useState2[0],
+      setIndented = _React$useState2[1];
 
-  var _React$useState4 = React.useState(undefined),
-      minWidth = _React$useState4[0],
-      _setMinWidth = _React$useState4[1];
+  var _React$useState3 = React.useState(undefined),
+      minWidth = _React$useState3[0],
+      _setMinWidth = _React$useState3[1];
 
   var context = React.useMemo(function () {
     return {
-      appearance: appearance,
-      setAppearance: function setAppearance(appearance) {
-        return _setAppearance(appearance);
-      },
       indented: indented,
       registerIndentation: function registerIndentation() {
         return setIndented(true);
@@ -7143,7 +7012,7 @@ var Menu = function Menu(externalProps) {
         return setOpen(false);
       }
     };
-  }, [indented, minWidth, appearance]);
+  }, [indented, minWidth]);
   return React.createElement(MenuContext.Provider, {
     value: context
   }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
@@ -8610,9 +8479,13 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
 var useTableKeyboardNavigation = function useTableKeyboardNavigation(props, rows, rowProps, ref) {
   var useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;
 
-  var _React$useState = React__default.useState(useGlobalKeyboardNavigation ? 0 : undefined),
-      activeIndex = _React$useState[0],
-      setActiveIndex = _React$useState[1];
+  var _useControllableState = reactUseControllableState.useControllableState({
+    prop: props.activeIndex,
+    defaultProp: props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,
+    onChange: props.onChangeActiveIndex
+  }),
+      activeIndex = _useControllableState[0],
+      setActiveIndex = _useControllableState[1];
 
   var onKeyDown = function onKeyDown(event) {
     var _document$activeEleme;
@@ -9418,7 +9291,11 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
 
 
   var headerRef = React__default.useRef(null);
-  var rowsRef = React__default.useRef(null);
+
+  var _React$useState = React__default.useState(null),
+      rowsRef = _React$useState[0],
+      setRowsRef = _React$useState[1];
+
   var tableDimensions = useBoundingClientRectListener(tableRef);
   var headerDimensions = useBoundingClientRectListener(headerRef);
   var height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null; // variable row height calculations
@@ -9431,8 +9308,8 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
 
       rowHeights.current = _extends({}, rowHeights.current, (_extends2 = {}, _extends2[index] = size, _extends2));
 
-      if (rowsRef.current) {
-        rowsRef.current.resetAfterIndex(0);
+      if (rowsRef) {
+        rowsRef.resetAfterIndex(0);
       }
     }
   }, []);
@@ -9440,16 +9317,16 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
     return rowHeights.current[index] || estimatedRowHeight;
   }, []);
   React__default.useEffect(function () {
-    if (rowsRef && rowsRef.current && rowProps.activeIndex !== undefined) {
-      rowsRef.current.scrollToItem(rowProps.activeIndex);
+    if (rowsRef && rowProps.activeIndex !== undefined) {
+      rowsRef.scrollToItem(rowProps.activeIndex, 'start');
     }
-  }, [rowProps.activeIndex]); // trigger recalculation of variable row heights if the data changes
+  }, [rowsRef, rowProps.activeIndex]); // trigger recalculation of variable row heights if the data changes
 
   React__default.useEffect(function () {
     rowHeights.current = {};
 
-    if (rowsRef.current) {
-      rowsRef.current.resetAfterIndex(0);
+    if (rowsRef) {
+      rowsRef.resetAfterIndex(0);
     }
   }, [rows.length]);
   var contentHeight = estimatedRowHeight * props.data.length || 0;
@@ -9496,14 +9373,16 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
           ref: function ref(list) {
             _ref3(list);
 
-            rowsRef.current = list;
+            setRowsRef(list);
           }
         }), VariableRow);
       });
     } else {
       list = React__default.createElement(reactWindow.VariableSizeList, Object.assign({}, listProps, {
         itemCount: rows.length,
-        ref: rowsRef
+        ref: function ref(_ref4) {
+          setRowsRef(_ref4);
+        }
       }), VariableRow);
     }
   }
@@ -9745,7 +9624,7 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
       disabled = props.disabled,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded2$9);
 
-  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
+  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
   return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
     className: className,
     disabled: disabled,