@economic/taco 2.33.1 → 2.34.0

package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n\n    // expanded rows\n    const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n    // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n    // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n    const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n    const virtualiser = useVirtualizer({\n        count: rows.length,\n        estimateSize,\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n        rangeExtractor,\n        // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change\n        scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n    });\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === rows.length - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, rows.length]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [\n                  Math.max(0, virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size ?? 0),\n                  Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0),\n              ]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    if (rows.length) {\n        style = {\n            height: `${totalSize}px`,\n            paddingBottom,\n            paddingTop,\n        };\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            const row = rows[virtualRow.index];\n            const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const expandedState = table.getState().expanded;\n\n    const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n    // look at all registered expanded row heights and use them to form a more accurate average size\n    // it might be worth considering if taking the max, or an upper bound, would be better\n    const averageExpandedRowHeight = React.useMemo(() => {\n        const values: number[] = Object.values(expandedRowHeightsCache);\n        return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n    }, [expandedRowHeightsCache]);\n\n    // row heights\n    const estimateSize = React.useCallback(\n        (index: number) => {\n            const rowHeight = tableMeta.rowHeight.height\n                ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n                : ROW_HEIGHT_ESTIMATES.medium;\n\n            if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n                return rowHeight + averageExpandedRowHeight;\n            }\n\n            return rowHeight;\n        },\n        [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n    );\n\n    const createRowMeasurer = React.useCallback(\n        (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n            (rowHeight: number, expansionHeight?: number) => {\n                // register the expansion height so that it can be used to determine an average\n                if (expansionHeight) {\n                    setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n                }\n\n                // update the whole row's size to include the expanded height\n                resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n            },\n        []\n    );\n\n    return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        range => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n            return [...next].sort((a, b) => a - b);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollMargin","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","paddingTop","paddingBottom","Math","max","_ref","_virtualItems$padding","start","_virtualItems$padding2","size","_ref2","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":";;;;;SAagBA,gBAAgBA,CAC5BC,SAAmC,EACnCC,KAAwB,EACxBC,QAAmC,EACnCC,qBAA0C;;EAE1C,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,iBAAiB,GAAG,CAAC,GAAAC,qBAAA,GAACT,KAAK,CAACU,QAAQ,EAAE,CAACC,QAAQ,cAAAF,qBAAA,eAAzBA,qBAAA,CAA2BG,MAAM;;EAG7D,MAAM;IAAEC,iBAAiB;IAAEC;GAAc,GAAGC,0BAA0B,CAAQf,KAAK,CAAC;;EAGpF,MAAMgB,cAAc,GAAGC,yBAAyB,CAAQjB,KAAK,CAAC;;EAG9D,MAAMkB,kBAAkB,GAAGC,oBAAoB,CAACC,MAAM;;;EAGtD,MAAMC,gBAAgB,GAAGF,oBAAoB,CAACC,MAAM,IAAIpB,KAAK,CAACsB,eAAe,EAAE,CAACV,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;EAErG,MAAMW,WAAW,GAAGC,cAAc,CAAC;IAC/BC,KAAK,EAAEnB,IAAI,CAACM,MAAM;IAClBE,YAAY;IACZY,gBAAgB,EAAEA,MAAMzB,QAAQ,CAAC0B,OAAO;IACxCC,QAAQ,EAAEzB,SAAS,CAAC0B,QAAQ,CAACC,UAAU,GAAGxB,IAAI,CAACM,MAAM,GAAGmB,SAAS;IACjEf,cAAc;;IAEdgB,YAAY,EAAExB,iBAAiB,GAAG,CAAC,GAAGU,kBAAkB;;IAExDA,kBAAkB;IAClBG,gBAAgB,EAAElB,SAAS,CAAC8B,MAAM,CAACC,SAAS,GAAGb,gBAAgB,GAAG,CAAC,GAAGA;GACzE,CAAC;EAEF,MAAMc,SAAS,GAAGZ,WAAW,CAACa,YAAY,EAAE;EAC5C,MAAMC,YAAY,GAAGd,WAAW,CAACe,eAAe,EAAE;EAElD,MAAMC,aAAa,GAAGC,cAAK,CAACC,WAAW,CACnC,CAACC,KAAa,EAAEtC,UAAuC;IAAEuC,KAAK,EAAE,MAAM;IAAEC,QAAQ,EAAE;GAAU;IACxF,MAAMC,SAAS,GAAgC;MAAE,GAAGzC,OAAO;MAAEwC,QAAQ,EAAE;KAAQ;IAE/E,IAAI3C,QAAQ,CAAC0B,OAAO,EAAE;MAClB,IAAIe,KAAK,KAAK,CAAC,EAAE;QACbnB,WAAW,CAACuB,cAAc,CAAC,CAAC,EAAED,SAAS,CAAC;OAC3C,MAAM,IAAIH,KAAK,KAAKpC,IAAI,CAACM,MAAM,GAAG,CAAC,EAAE;;QAElCX,QAAQ,CAAC0B,OAAO,CAACoB,SAAS,GAAG9C,QAAQ,CAAC0B,OAAO,CAACqB,YAAY;OAC7D,MAAM;QACHzB,WAAW,CAACgB,aAAa,CAACG,KAAK,EAAEtC,OAAO,CAAC;;;GAGpD,EACD,CAACiC,YAAY,CAACzB,MAAM,EAAEX,QAAQ,CAAC0B,OAAO,EAAEQ,SAAS,EAAE7B,IAAI,CAACM,MAAM,CAAC,CAClE;;EAGD,MAAMqC,iBAAiB,GAAGzC,iBAAiB,IAAIF,IAAI,CAACM,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;;EAGtE,MAAM,CAACsC,UAAU,EAAEC,aAAa,CAAC,GAC7Bd,YAAY,CAACzB,MAAM,GAAG,CAAC,GACjB,CACIwC,IAAI,CAACC,GAAG,CAAC,CAAC,GAAAC,IAAA,GAAE,EAAAC,qBAAA,GAAAlB,YAAY,CAACY,iBAAiB,CAAC,cAAAM,qBAAA,uBAA/BA,qBAAA,CAAiCC,KAAK,MAAAC,sBAAA,GAAGpB,YAAY,CAACY,iBAAiB,CAAC,cAAAQ,sBAAA,uBAA/BA,sBAAA,CAAiCC,IAAI,eAAAJ,IAAA,cAAAA,IAAA,GAAI,CAAC,CAAC,EAChGF,IAAI,CAACC,GAAG,CAAC,CAAC,GAAAM,KAAA,GAAExB,SAAS,KAAAyB,aAAA,GAAGvB,YAAY,CAACA,YAAY,CAACzB,MAAM,GAAG,CAAC,CAAC,cAAAgD,aAAA,uBAArCA,aAAA,CAAuCC,GAAG,eAAAF,KAAA,cAAAA,KAAA,GAAI,CAAC,CAAC,CAC3E,GACD,CAAC,CAAC,EAAE,CAAC,CAAC;;EAGhBnB,cAAK,CAACsB,SAAS,CAAC;IACZ,IAAI5D,qBAAqB,EAAE;MACvBqC,aAAa,CAACrC,qBAAqB,EAAE;QAAEyC,KAAK,EAAE,QAAQ;QAAEC,QAAQ,EAAE;OAAQ,CAAC;;GAElF,EAAE,EAAE,CAAC;;EAGN,IAAImB,KAAK,GAAkB,EAAE;EAC7B,IAAIC,OAAO,GAAkC,IAAI;EAEjD,IAAI1D,IAAI,CAACM,MAAM,EAAE;IACbmD,KAAK,GAAG;MACJE,MAAM,KAAK9B,aAAa;MACxBgB,aAAa;MACbD;KACH;IACDc,OAAO,GAAG3B,YAAY,CAAC6B,GAAG,CAACC,UAAU;;MAEjC,IAAI,CAACA,UAAU,EAAE;QACb,OAAO,IAAI;;MAGf,MAAMC,GAAG,GAAG9D,IAAI,CAAC6D,UAAU,CAACzB,KAAK,CAAC;MAClC,MAAM2B,UAAU,GAAGxD,iBAAiB,CAACU,WAAW,CAAC+C,UAAU,EAAEH,UAAU,CAAC;MACxE,oBACI3B,6BAAC+B,GAAG;QACAC,GAAG,EAAEJ,GAAG,CAACK,EAAE;QACXL,GAAG,EAAEA,GAAG;QACR1B,KAAK,EAAEyB,UAAU,CAACzB,KAAK;QACvB1C,KAAK,EAAEA,KAAK;QACZqE,UAAU,EAAEA,UAAU;QACtBK,QAAQ,EAAE3E,SAAS,CAACqE,GAAG;QACvBO,YAAY,EAAE5E,SAAS,CAAC6E;QAC1B;KAET,CAAC;;EAGN,OAAO;IACHtE,IAAI,EAAE0D,OAAO;IACbD,KAAK;IACLxB;GACH;AACL;AAEA;AACA,SAASxB,0BAA0BA,CAAkBf,KAAwB;EACzE,MAAMG,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAMuE,aAAa,GAAG7E,KAAK,CAACU,QAAQ,EAAE,CAACoE,QAAQ;EAE/C,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGxC,cAAK,CAACyC,QAAQ,CAAyB,EAAE,CAAC;;;EAIxG,MAAMC,wBAAwB,GAAG1C,cAAK,CAAC2C,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAaC,MAAM,CAACD,MAAM,CAACL,uBAAuB,CAAC;IAC/D,OAAOK,MAAM,CAACxE,MAAM,GAAGwE,MAAM,CAACE,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC,GAAGJ,MAAM,CAACxE,MAAM,GAAG,CAAC;GAC/E,EAAE,CAACmE,uBAAuB,CAAC,CAAC;;EAG7B,MAAMjE,YAAY,GAAG0B,cAAK,CAACC,WAAW,CACjCC,KAAa;;IACV,MAAM+C,SAAS,GAAGtF,SAAS,CAACsF,SAAS,CAACxB,MAAM,GACtC9C,oBAAoB,CAAChB,SAAS,CAACsF,SAAS,CAACxB,MAAM,CAAC,GAChD9C,oBAAoB,CAACC,MAAM;IAEjC,IAAIyD,aAAa,KAAK,IAAI,KAAAa,WAAA,GAAIpF,IAAI,CAACoC,KAAK,CAAC,cAAAgD,WAAA,gBAAAC,qBAAA,GAAXD,WAAA,CAAaE,aAAa,cAAAD,qBAAA,eAA1BA,qBAAA,CAAAE,IAAA,CAAAH,YAA8B,EAAE;MAC1D,OAAOD,SAAS,GAAGP,wBAAwB;;IAG/C,OAAOO,SAAS;GACnB,EACD,CAACtF,SAAS,CAACsF,SAAS,CAACxB,MAAM,EAAEiB,wBAAwB,EAAEL,aAAa,CAAC,CACxE;EAED,MAAMhE,iBAAiB,GAAG2B,cAAK,CAACC,WAAW,CACvC,CAAC6B,UAAqD,EAAEH,UAAuB,KAC3E,CAACsB,SAAiB,EAAEK,eAAwB;;IAExC,IAAIA,eAAe,EAAE;MACjBd,0BAA0B,CAACe,KAAK,KAAK;QAAE,GAAGA,KAAK;QAAE,CAAC5B,UAAU,CAACzB,KAAK,GAAGoD;OAAiB,CAAC,CAAC;;;IAI5FxB,UAAU,CAACH,UAAU,EAAEsB,SAAS,IAAIK,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAI,CAAC,CAAC,CAAC;GAC7D,EACL,EAAE,CACL;EAED,OAAO;IAAEhF,YAAY;IAAED;GAAmB;AAC9C;AAEA;AACA,SAASI,yBAAyBA,CAAkBjB,KAAwB;EACxE,MAAMM,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAM0F,cAAc,GAAG,CAAC,CAAChG,KAAK,CAACU,QAAQ,EAAE,CAACC,QAAQ,CAACC,MAAM;EAEzD,MAAMqF,eAAe,GAAGzD,cAAK,CAAC2C,OAAO,CAAC;IAClC,MAAMe,OAAO,GAAa,EAAE;IAE5B,IAAIF,cAAc,EAAE;MAChB1F,IAAI,CAAC6F,OAAO,CAAC,CAAC/B,GAAG,EAAE1B,KAAK;QACpB,IAAI0B,GAAG,CAACgC,YAAY,EAAE,EAAE;UACpBF,OAAO,CAACG,IAAI,CAAC3D,KAAK,CAAC;;OAE1B,CAAC;;IAGN,OAAOwD,OAAO;GACjB,EAAE,CAAC5F,IAAI,CAAC,CAAC;;EAGV,MAAMU,cAAc,GAAGwB,cAAK,CAACC,WAAW,CACpC6D,KAAK;;IACD,MAAMC,mBAAmB,IAAAC,aAAA,GACrB,CAAC,GAAGP,eAAe,CAAC,CAACQ,OAAO,EAAE,CAACC,IAAI,CAAChE,KAAK,IAAI4D,KAAK,CAACK,UAAU,IAAIjE,KAAK,CAAC,cAAA8D,aAAA,cAAAA,aAAA,GAAIP,eAAe,CAAC,CAAC,CAAC;IAEjG,MAAMW,IAAI,GAAG,IAAIC,GAAG,CAAC,CAACN,mBAAmB,EAAE,GAAGO,qBAAqB,CAACR,KAAK,CAAC,CAAC,CAAC;IAC5E,OAAO,CAAC,GAAGM,IAAI,CAAC,CAACG,IAAI,CAAC,CAACxB,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,CAAC;GACzC,EACD,CAACS,eAAe,CAAC,CACpB;EAED,OAAOD,cAAc,GAAGhF,cAAc,GAAGe,SAAS;AACtD;;;;"}
+{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n\n    // expanded rows\n    const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n    // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n    // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n    const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n    const virtualiser = useVirtualizer({\n        count: rows.length,\n        estimateSize,\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n        rangeExtractor,\n        // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change\n        scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n    });\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === rows.length - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, rows.length]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [\n                  Math.max(0, virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size ?? 0),\n                  Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0),\n              ]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    if (rows.length) {\n        style = {\n            height: `${totalSize}px`,\n            paddingBottom,\n            paddingTop,\n        };\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            const row = rows[virtualRow.index];\n            const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const expandedState = table.getState().expanded;\n\n    const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n    // look at all registered expanded row heights and use them to form a more accurate average size\n    // it might be worth considering if taking the max, or an upper bound, would be better\n    const averageExpandedRowHeight = React.useMemo(() => {\n        const values: number[] = Object.values(expandedRowHeightsCache);\n        return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n    }, [expandedRowHeightsCache]);\n\n    // row heights\n    const estimateSize = React.useCallback(\n        (index: number) => {\n            const rowHeight = tableMeta.rowHeight.height\n                ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n                : ROW_HEIGHT_ESTIMATES.medium;\n\n            if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n                return rowHeight + averageExpandedRowHeight;\n            }\n\n            return rowHeight;\n        },\n        [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n    );\n\n    const createRowMeasurer = React.useCallback(\n        (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n            (rowHeight: number, expansionHeight?: number) => {\n                // register the expansion height so that it can be used to determine an average\n                if (expansionHeight) {\n                    setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n                }\n\n                // update the whole row's size to include the expanded height\n                resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n            },\n        []\n    );\n\n    return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        range => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n            return [...next].sort((a, b) => a - b);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollMargin","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","paddingTop","paddingBottom","Math","max","_ref","_virtualItems$padding","start","_virtualItems$padding2","size","_ref2","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowActive.js

@@ -6,11 +6,11 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
-    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    setTimeout(() => scrollToIndex(nextIndex), 1);
-    return nextIndex;
-  });
+  const move = (direction, length, scrollToIndex) => {
+    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
+    scrollToIndex(nextIndex);
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+  };
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowActive.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowActive.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableRowActive.ts"],"sourcesContent":["import React from 'react';\nimport { TableScrollToIndexHandler } from '../../types';\nimport { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../utils/dom';\n\nexport function useTableRowActive(isEnabled = false, initialRowActiveIndex?: number) {\n    const [rowActiveIndex, setRowActiveIndex] = React.useState<number | undefined>(initialRowActiveIndex);\n    const [rowHoverIndex, setRowHoverIndex] = React.useState<number | undefined>(undefined);\n    const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();\n\n    const move = (direction: -1 | 1, length: number, scrollToIndex: TableScrollToIndexHandler) =>\n        setRowActiveIndex(currentIndex => {\n            const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;\n            setTimeout(() => scrollToIndex(nextIndex), 1);\n            return nextIndex;\n        });\n\n    const onKeyDown = React.useCallback(\n        (event: KeyboardEvent, length: number, scrollToIndex: TableScrollToIndexHandler) => {\n            if (!isEnabled || event.defaultPrevented) {\n                return;\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                setHoverStatePaused(true);\n            }\n\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = 0;\n                    scrollToIndex(newIndex);\n                    setRowActiveIndex(newIndex);\n                } else {\n                    move(-1, length, scrollToIndex);\n                }\n\n                return;\n            } else if (event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = length - 1;\n                    scrollToIndex(newIndex);\n                    setRowActiveIndex(newIndex);\n                } else {\n                    move(+1, length, scrollToIndex);\n                }\n                return;\n            }\n        },\n        [isEnabled, rowActiveIndex]\n    );\n\n    const onFocus = React.useCallback(\n        (event: React.FocusEvent, length: number, scrollToIndex: TableScrollToIndexHandler) => {\n            if (!isEnabled || event.isDefaultPrevented()) {\n                return;\n            }\n\n            if (event.target.closest('tbody') || isElementInsideOrTriggeredFromContainer(event.target, event.currentTarget)) {\n                return;\n            }\n\n            if (rowActiveIndex === undefined && length > 0) {\n                setRowActiveIndex(index => {\n                    if (index === undefined) {\n                        scrollToIndex(0);\n                        return 0;\n                    }\n                    return index;\n                });\n            }\n        },\n        [rowActiveIndex, length, isEnabled]\n    );\n\n    return {\n        isEnabled,\n        rowActiveIndex,\n        setRowActiveIndex: isEnabled ? setRowActiveIndex : () => undefined,\n        rowHoverIndex,\n        setRowHoverIndex,\n        isHoverStatePaused,\n        setHoverStatePaused: isEnabled ? setHoverStatePaused : () => undefined,\n        handleFocus: isEnabled ? onFocus : () => undefined,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n    };\n}\n\nfunction getNextIndex(direction: -1 | 1, currentIndex: number, length: number) {\n    if (direction === -1) {\n        return currentIndex - 1 > 0 ? currentIndex - 1 : 0;\n    }\n\n    return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;\n}\n"],"names":["useTableRowActive","isEnabled","initialRowActiveIndex","rowActiveIndex","setRowActiveIndex","React","useState","rowHoverIndex","setRowHoverIndex","undefined","isHoverStatePaused","setHoverStatePaused","useIsHoverStatePaused","move","direction","length","scrollToIndex","currentIndex","nextIndex","getNextIndex","setTimeout","onKeyDown","useCallback","event","defaultPrevented","key","preventDefault","ctrlKey","metaKey","newIndex","onFocus","isDefaultPrevented","target","closest","isElementInsideOrTriggeredFromContainer","currentTarget","index","handleFocus","handleKeyDown"],"mappings":"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"}
+{"version":3,"file":"useTableRowActive.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableRowActive.ts"],"sourcesContent":["import React from 'react';\nimport { TableScrollToIndexHandler } from '../../types';\nimport { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../../utils/dom';\n\nexport function useTableRowActive(isEnabled = false, initialRowActiveIndex?: number) {\n    const [rowActiveIndex, setRowActiveIndex] = React.useState<number | undefined>(initialRowActiveIndex);\n    const [rowHoverIndex, setRowHoverIndex] = React.useState<number | undefined>(undefined);\n    const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();\n\n    const move = (direction: -1 | 1, length: number, scrollToIndex: TableScrollToIndexHandler) => {\n        const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;\n        scrollToIndex(nextIndex);\n        setTimeout(() => setRowActiveIndex(nextIndex), 50);\n    };\n\n    const onKeyDown = React.useCallback(\n        (event: KeyboardEvent, length: number, scrollToIndex: TableScrollToIndexHandler) => {\n            if (!isEnabled || event.defaultPrevented) {\n                return;\n            }\n\n            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                setHoverStatePaused(true);\n            }\n\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = 0;\n                    scrollToIndex(newIndex);\n                    setRowActiveIndex(newIndex);\n                } else {\n                    move(-1, length, scrollToIndex);\n                }\n\n                return;\n            } else if (event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = length - 1;\n                    scrollToIndex(newIndex);\n                    setRowActiveIndex(newIndex);\n                } else {\n                    move(+1, length, scrollToIndex);\n                }\n                return;\n            }\n        },\n        [isEnabled, rowActiveIndex]\n    );\n\n    const onFocus = React.useCallback(\n        (event: React.FocusEvent, length: number, scrollToIndex: TableScrollToIndexHandler) => {\n            if (!isEnabled || event.isDefaultPrevented()) {\n                return;\n            }\n\n            if (event.target.closest('tbody') || isElementInsideOrTriggeredFromContainer(event.target, event.currentTarget)) {\n                return;\n            }\n\n            if (rowActiveIndex === undefined && length > 0) {\n                setRowActiveIndex(index => {\n                    if (index === undefined) {\n                        scrollToIndex(0);\n                        return 0;\n                    }\n                    return index;\n                });\n            }\n        },\n        [rowActiveIndex, length, isEnabled]\n    );\n\n    return {\n        isEnabled,\n        rowActiveIndex,\n        setRowActiveIndex: isEnabled ? setRowActiveIndex : () => undefined,\n        rowHoverIndex,\n        setRowHoverIndex,\n        isHoverStatePaused,\n        setHoverStatePaused: isEnabled ? setHoverStatePaused : () => undefined,\n        handleFocus: isEnabled ? onFocus : () => undefined,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n    };\n}\n\nfunction getNextIndex(direction: -1 | 1, currentIndex: number, length: number) {\n    if (direction === -1) {\n        return currentIndex - 1 > 0 ? currentIndex - 1 : 0;\n    }\n\n    return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;\n}\n"],"names":["useTableRowActive","isEnabled","initialRowActiveIndex","rowActiveIndex","setRowActiveIndex","React","useState","rowHoverIndex","setRowHoverIndex","undefined","isHoverStatePaused","setHoverStatePaused","useIsHoverStatePaused","move","direction","length","scrollToIndex","nextIndex","getNextIndex","setTimeout","onKeyDown","useCallback","event","defaultPrevented","key","preventDefault","ctrlKey","metaKey","newIndex","onFocus","isDefaultPrevented","target","closest","isElementInsideOrTriggeredFromContainer","currentTarget","index","handleFocus","handleKeyDown","currentIndex"],"mappings":"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"}

package/dist/esm/packages/taco/src/utils/dom.js

@@ -72,6 +72,9 @@ function isElementInteractive(element) {
   }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isElementInsideTable3OrReport(element) {
+  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
+}
 
-export { getIndexOfFirstChildOverflowingParent, getNextFocussableElement, hasFocusableElement, isElementInsideOrTriggeredFromContainer, isElementInsideOverlay, isElementInteractive, isSiblingElementInsideSameParentOverlay };
+export { getIndexOfFirstChildOverflowingParent, getNextFocussableElement, hasFocusableElement, isElementInsideOrTriggeredFromContainer, isElementInsideOverlay, isElementInsideTable3OrReport, isElementInteractive, isSiblingElementInsideSameParentOverlay };
 //# sourceMappingURL=dom.js.map

package/dist/esm/packages/taco/src/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    'input:not([disabled]):not([type=hidden])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        if (container?.querySelector(selector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(selector);\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementInsideOrTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","getOverlaySelector","getAttribute","id","undefined","isElementInsideOrTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","elementInDocument","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","includes","tagName","hidden","disabled","readOnly"],"mappings":"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"}
+{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    'input:not([disabled]):not([type=hidden])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        if (container?.querySelector(selector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(selector);\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementInsideOrTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n\nexport function isElementInsideTable3OrReport(element: Element | null) {\n    return !!element?.closest('[data-taco^=table]');\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","getOverlaySelector","getAttribute","id","undefined","isElementInsideOrTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","elementInDocument","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","includes","tagName","hidden","disabled","readOnly","isElementInsideTable3OrReport"],"mappings":"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"}

package/dist/index.css

@@ -625,16 +625,16 @@ table[data-taco^='table'] tr:last-child th:before {
 /* row groups */
 
 table[data-taco^='table'] tr[data-row-group] {
-        @apply bg-grey-100 sticky top-[calc((var(--table-header-group-depth)_-_1)_*_40px_+_42px)] z-30 mt-10 print:mt-0;
+        @apply bg-grey-100 sticky top-[calc((var(--table-header-group-depth)_-_1)_*_40px_+_42px)] z-30 pt-10 print:pt-0;
     }
 
 table[data-taco^='table'] tr[data-row-group]:first-child {
-            @apply mt-0;
+            @apply pt-0;
         }
 
 table[data-taco^='table'] tr[data-row-group]:not(:first-child):before {
             content: '';
-            @apply bg-grey-100 border-grey-300 absolute -top-full left-0 right-0 mt-px h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
+            @apply bg-grey-100 border-grey-300 absolute left-0 right-0 top-0 h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
         }
 
 table[data-taco^='table'] tr[data-row-group] td {
@@ -1231,7 +1231,7 @@ table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-mov
 }
 
 table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] td {
-        @apply border-b-0;
+        @apply z-30 border-b-0;
     }
 
 table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-move='true'] > td:first-child {

package/dist/primitives/Table/Core/components/Body/Body.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
+import { TableRef } from '../../../types';
 declare type BodyProps<TType = unknown> = React.HTMLAttributes<HTMLTableSectionElement> & {
     enableHorizontalArrowKeyNavigation?: boolean;
     scrollToIndex: (index: number) => void;
     table: ReactTable<TType>;
+    tableElement: TableRef | null;
 };
 export declare function Body<TType = unknown>(props: BodyProps<TType>): JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Toolbar/components/Filters/util.d.ts

@@ -1,4 +1,5 @@
 import { Column as ReactTableColumn } from '@tanstack/react-table';
-import { TableFilter } from '../../../../../types';
+import { TableFilter, TableFilterComparator } from '../../../../../types';
 export declare function sortByHeader<TType = unknown>(a: ReactTableColumn<TType>, b: ReactTableColumn<TType>): number;
 export declare function isEmptyFilter(filter: TableFilter): boolean;
+export declare function guessComparatorsBasedOnControl<TType = unknown>(column?: ReactTableColumn<TType>): TableFilterComparator[];

package/dist/taco.cjs.development.js

@@ -4122,6 +4122,9 @@ function isElementInteractive(element) {
   }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isElementInsideTable3OrReport(element) {
+  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
+}
 
 function isPressingMetaKey(event) {
   return isMacOs() ? event.metaKey : event.ctrlKey;
@@ -5823,9 +5826,7 @@ const useCombobox = ({
     }
   };
   const handleInputKeyDown = event => {
-    var _inputRef$current;
     event.persist();
-    const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -5847,7 +5848,7 @@ const useCombobox = ({
           }
         case 'Enter':
           {
-            if (insideTheTable) {
+            if (isElementInsideTable3OrReport(event.currentTarget)) {
               event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
@@ -5865,7 +5866,7 @@ const useCombobox = ({
           if (open) {
             event.preventDefault();
           } else {
-            if (!inline && buttonRef.current && !insideTheTable) {
+            if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {
               buttonRef.current.click();
             }
           }
@@ -5885,7 +5886,7 @@ const useCombobox = ({
         listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
       }
       if (inline && !open) {
-        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
           event.preventDefault();
           const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
@@ -8194,12 +8195,13 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
-  const preventArrowDownShortcut = event => {
-    var _internalRef$current;
-    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('tbody'));
-    if (isRenderedInTable && event.key === 'ArrowDown') {
-      var _internalRef$current2, _internalRef$current3;
-      internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : (_internalRef$current3 = _internalRef$current2.parentNode) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.dispatchEvent(createCustomKeyboardEvent(event));
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown') {
+      if (isElementInsideTable3OrReport(event.currentTarget)) {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentNode) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(createCustomKeyboardEvent(event));
+      }
     }
   };
   React.useEffect(() => {
@@ -8210,7 +8212,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: internalRef,
-    onKeyDown: preventArrowDownShortcut
+    onKeyDown: handleKeyDown
   }));
 });
 
@@ -10437,11 +10439,11 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
-    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    setTimeout(() => scrollToIndex(nextIndex), 1);
-    return nextIndex;
-  });
+  const move = (direction, length, scrollToIndex) => {
+    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
+    scrollToIndex(nextIndex);
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+  };
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;
@@ -11663,7 +11665,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
-  // account for thead and tfoot in the scroll area
+  // account for thead and tfoot in the scroll area - both are always medium row height
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
   // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
   // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
@@ -13121,6 +13123,7 @@ function Body(props) {
     enableHorizontalArrowKeyNavigation = false,
     scrollToIndex,
     table,
+    tableElement,
     ...attributes
   } = props;
   const ref = React__default.useRef(null);
@@ -13138,12 +13141,30 @@ function Body(props) {
           return;
         }
         tableMeta.rowActive.setHoverStatePaused(true);
-        const focusedElement = event.shiftKey || event.key === 'ArrowLeft' ? focusManager.focusPrevious() : focusManager.focusNext();
+        const isMetaKeyPressed = isPressingMetaKey(event);
+        let focusedElement;
+        switch (event.key) {
+          case 'ArrowLeft':
+            focusedElement = isMetaKeyPressed ? focusManager.focusFirst() : focusManager.focusPrevious();
+            break;
+          case 'ArrowRight':
+            focusedElement = isMetaKeyPressed ? focusManager.focusLast() : focusManager.focusNext();
+            // Scrolls table all the way to the right
+            if (isMetaKeyPressed && tableElement) {
+              tableElement.scrollLeft = tableElement.scrollWidth;
+            }
+            break;
+          default:
+            focusedElement = event.shiftKey ? focusManager.focusPrevious() : focusManager.focusNext();
+            break;
+        }
         if (focusedElement) {
           // override default behaviour, since we're handling focus internally now
           event.preventDefault();
           return;
         }
+        // The code below only executes when focusedElement was undefined/null. This happens only when arrow-left/shift+tab
+        // is pressed on the first cell or arrow-right/tab is pressed on the last cell.
         if (event.shiftKey || event.key === 'ArrowLeft') {
           if (!isFirstRow) {
             // there are no previous elements to focus, go up a row or go outside the table
@@ -15223,6 +15244,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
+    } else if (isElementInsideTable3OrReport(event.currentTarget)) {
+      return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
     }
@@ -15639,6 +15662,46 @@ function sortByHeader(a, b) {
 function isEmptyFilter(filter) {
   return !filter.value.hasOwnProperty('value'); // eslint-disable-line no-prototype-builtins
 }
+function guessComparatorsBasedOnControl(column) {
+  var _column$columnDef$met;
+  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
+  if (Array.isArray(columnMeta.filters)) {
+    return columnMeta.filters;
+  }
+  if (typeof columnMeta.control === 'function') {
+    const renderedControl = columnMeta.control({
+      onBlur: () => undefined,
+      onFocus: () => undefined,
+      setValue: () => undefined,
+      value: undefined,
+      disabled: false,
+      readOnly: false,
+      ref: undefined
+    });
+    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
+      const {
+        props,
+        type
+      } = renderedControl;
+      if (type.displayName === 'Select2') {
+        if (props.multiple) {
+          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+        }
+        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+      }
+    }
+  }
+  if (columnMeta.dataType === 'number') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+  }
+  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
+  }
+  if (columnMeta.control === 'switch') {
+    return [exports.TableFilterComparator.IsEqualTo];
+  }
+  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+}
 
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
@@ -15692,11 +15755,6 @@ function FilterComparator(props) {
     texts
   } = useLocalization();
   const validComparators = guessComparatorsBasedOnControl(column);
-  React__default.useEffect(() => {
-    if (value === undefined || !validComparators.includes(value)) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(validComparators[0]);
-    }
-  }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     disabled: !column,
@@ -15707,49 +15765,9 @@ function FilterComparator(props) {
     value: comparator
   }, getComparatorText(comparator, texts, column)))));
 }
-function guessComparatorsBasedOnControl(column) {
-  var _column$columnDef$met;
-  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
-  if (Array.isArray(columnMeta.filters)) {
-    return columnMeta.filters;
-  }
-  if (typeof columnMeta.control === 'function') {
-    const renderedControl = columnMeta.control({
-      onBlur: () => undefined,
-      onFocus: () => undefined,
-      setValue: () => undefined,
-      value: undefined,
-      disabled: false,
-      readOnly: false,
-      ref: undefined
-    });
-    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
-      const {
-        props,
-        type
-      } = renderedControl;
-      if (type.displayName === 'Select2') {
-        if (props.multiple) {
-          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-        }
-        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-      }
-    }
-  }
-  if (columnMeta.dataType === 'number') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-  }
-  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
-  }
-  if (columnMeta.control === 'switch') {
-    return [exports.TableFilterComparator.IsEqualTo];
-  }
-  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-}
 function getComparatorText(comparator, texts, column) {
-  var _column$columnDef, _column$columnDef$met2;
-  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met2 = _column$columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) === 'datepicker';
+  var _column$columnDef, _column$columnDef$met;
+  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met = _column$columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control) === 'datepicker';
   switch (comparator) {
     case exports.TableFilterComparator.Contains:
       return texts.table.filters.comparators.contains;
@@ -15925,14 +15943,22 @@ function Filter$1(props) {
     }
   } = filter;
   const handleChangeColumn = columnId => {
-    var _previousColumn$colum, _nextColumn$columnDef;
+    var _previousColumn$colum, _previousColumn$colum2, _nextColumn$columnDef;
     const previousColumn = allColumns.find(column => column.id === id);
     const nextColumn = allColumns.find(column => column.id === columnId);
     // UX requirement: if old column data type is the same as next column data type,
     // then we applying the same filter value for the next column,
     // but when data types are different, we're reseting comparator ans value for the next column
-    const value = (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum = previousColumn.columnDef.meta) === null || _previousColumn$colum === void 0 ? void 0 : _previousColumn$colum.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType) ? filter.value : {
-      comparator: exports.TableFilterComparator.Contains,
+    if (previousColumn !== null && previousColumn !== void 0 && (_previousColumn$colum = previousColumn.columnDef.meta) !== null && _previousColumn$colum !== void 0 && _previousColumn$colum.dataType && (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum2 = previousColumn.columnDef.meta) === null || _previousColumn$colum2 === void 0 ? void 0 : _previousColumn$colum2.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType)) {
+      handleChange(position, {
+        id: columnId,
+        value: filter.value
+      });
+      return;
+    }
+    const validComparators = guessComparatorsBasedOnControl(nextColumn);
+    const value = {
+      comparator: validComparators[0],
       value: undefined
     };
     handleChange(position, {
@@ -16245,6 +16271,7 @@ function TableGrid(props) {
   }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
+    tableElement: table.ref.current,
     scrollToIndex: table.renderer.scrollToIndex,
     style: table.renderer.style
   }, table.renderer.rows), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
@@ -17880,7 +17907,6 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
       pendingChangesFns.saveChanges();
     }
   }, [pendingChangesFns.saveChanges]);
-  // TODO: using useGlobalKeyDown prevents trigger when focused on inputs, but it's more "proper"
   useGlobalKeyDown(isEnabled && isEditing ? {
     key: 's',
     meta: true,
@@ -18575,7 +18601,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       return;
     }
     // toggle into detailed mode when actually inputting something
-    if (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace') {
+    if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {
       toggleDetailedMode(true);
     }
   };
@@ -18783,7 +18809,7 @@ function Row$2(props) {
     if (tableMeta.editing.isEditing && isActiveRow) {
       var _event$target$closest, _event$target$closest2;
       const cellIndex = Number((_event$target$closest = (_event$target$closest2 = event.target.closest('td')) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.getAttribute('data-cell-index')) !== null && _event$target$closest !== void 0 ? _event$target$closest : undefined);
-      if (!isNaN(cellIndex) && tableMeta.editing.lastFocusedCellIndex !== cellIndex) {
+      if (!isNaN(cellIndex)) {
         tableMeta.editing.setLastFocusedCellIndex(Number(cellIndex));
       }
     }