@economic/taco 12.0.0-react18-compat.0 → 12.0.0

package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedCell.cjs","sources":["../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport type { TableCellRendererProps } from '../../../../types';\nimport { RowContext } from '../../../Row/RowContext';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { getCellAttributes } from '../util';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, index, isHighlighted } = props;\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const attributes = getCellAttributes(cell, index, isHighlighted);\n\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n    // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that\n    // rowGroupActions aligns with rowActions.\n    const colSpan =\n        cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;\n    const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n    // using flexRender renders as a react component not a function, and that causes re-render issues for us\n    // for example, clicks on buttons in cells no longer works until the row becomes active\n    const content = typeof cell.column.columnDef.cell === 'function' ? cell.column.columnDef.cell(cell.getContext()) : null;\n\n    return (\n        <MemoedGroupedCell<TType>\n            {...attributes}\n            canShowActions={canShowActions}\n            cellRef={cellRef}\n            colSpan={colSpan}\n            rowActions={tableMeta.rowGroups.rowActionsForGroup}\n            rowId={cell.row.id}\n            subRows={subRows}\n            table={table}>\n            {content}\n        </MemoedGroupedCell>\n    );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n    canShowActions: boolean;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[];\n    rowId: string;\n    subRows: TType[];\n    table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n    const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n    return (\n        // pr-1 is needed to align group row actions with row actions in sibling rows, if present\n        <td {...attributes} className=\"!pr-1\" ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n            <span className=\"grow\">{children}</span>\n            {rowActions?.length && canShowActions ? (\n                <RowGroupActions<TType>\n                    actions={rowActions as any}\n                    actionsLength={4}\n                    data={subRows}\n                    isActiveRow\n                    rowId={rowId}\n                    table={table}\n                />\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["getCellAttributes","RowContext","isInternalColumn","MemoedGroupedCell","RowGroupActions"],"mappings":";;;;;;;AAUO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAaA,KAAAA,kBAAkB,MAAM,OAAO,aAAa;AAE/D,QAAM,EAAE,WAAW,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAC3D,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,iBAAiB,eAAgB,aAAa,CAAC,UAAU,UAAU;AAIzE,QAAM,UACF,KAAK,IAAI,kBAAkB,OAAO,OAAK,EAAE,OAAO,OAAO,eAAe,CAACC,QAAAA,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS;AACnH,QAAM,UAAU,KAAK,WAAA,EAAa,IAAI,QAAQ,IAAI,CAAA,QAAO,IAAI,QAAQ;AAIrE,QAAM,UAAU,OAAO,KAAK,OAAO,UAAU,SAAS,aAAa,KAAK,OAAO,UAAU,KAAK,KAAK,WAAA,CAAY,IAAI;AAEnH,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,UAAU,UAAU;AAAA,MAChC,OAAO,KAAK,IAAI;AAAA,MAChB;AAAA,MACA;AAAA,IAAA;AAAA,IACC;AAAA,EAAA;AAGb;AAYA,MAAM,oBAAoB,MAAM,KAAK,SAASC,mBAAmC,OAAsC;AACnH,QAAM,EAAE,gBAAgB,SAAS,UAAU,SAAS,YAAY,OAAO,SAAS,OAAO,GAAG,WAAA,IAAe;AAEzG;AAAA;AAAA,IAEI,sBAAA,cAAC,MAAA,EAAI,GAAG,YAAY,WAAU,SAAQ,KAAK,SAAS,OAAO,EAAE,YAAY,QAAQ,OAAO,WAAW,OAAO,GAAA,EAAG,GACzG,sBAAA,cAAC,QAAA,EAAK,WAAU,OAAA,GAAQ,QAAS,GAChC,YAAY,UAAU,iBACnB,sBAAA;AAAA,MAACC,QAAAA;AAAAA,MAAA;AAAA,QACG,SAAS;AAAA,QACT,eAAe;AAAA,QACf,MAAM;AAAA,QACN,aAAW;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEJ,IACR;AAAA;AAER,CAAC;;"}
+{"version":3,"file":"GroupedCell.cjs","sources":["../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport type { TableCellRendererProps } from '../../../../types';\nimport { RowContext } from '../../../Row/RowContext';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { getCellAttributes } from '../util';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, index, isHighlighted } = props;\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const attributes = getCellAttributes(cell, index, isHighlighted);\n\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n    // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that\n    // rowGroupActions aligns with rowActions.\n    const colSpan =\n        cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;\n    const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n    // using flexRender renders as a react component not a function, and that causes re-render issues for us\n    // for example, clicks on buttons in cells no longer works until the row becomes active\n    const content = typeof cell.column.columnDef.cell === 'function' ? cell.column.columnDef.cell(cell.getContext()) : null;\n\n    return (\n        <MemoedGroupedCell<TType>\n            {...attributes}\n            canShowActions={canShowActions}\n            cellRef={cellRef}\n            colSpan={colSpan}\n            rowActions={tableMeta.rowGroups.rowActionsForGroup}\n            rowId={cell.row.id}\n            subRows={subRows}\n            table={table}>\n            {content}\n        </MemoedGroupedCell>\n    );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n    canShowActions: boolean;\n    cellRef: React.RefObject<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[];\n    rowId: string;\n    subRows: TType[];\n    table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n    const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n    return (\n        // pr-1 is needed to align group row actions with row actions in sibling rows, if present\n        <td {...attributes} className=\"!pr-1\" ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n            <span className=\"grow\">{children}</span>\n            {rowActions?.length && canShowActions ? (\n                <RowGroupActions<TType>\n                    actions={rowActions as any}\n                    actionsLength={4}\n                    data={subRows}\n                    isActiveRow\n                    rowId={rowId}\n                    table={table}\n                />\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["getCellAttributes","RowContext","isInternalColumn","MemoedGroupedCell","RowGroupActions"],"mappings":";;;;;;;AAUO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAaA,KAAAA,kBAAkB,MAAM,OAAO,aAAa;AAE/D,QAAM,EAAE,WAAW,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAC3D,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,iBAAiB,eAAgB,aAAa,CAAC,UAAU,UAAU;AAIzE,QAAM,UACF,KAAK,IAAI,kBAAkB,OAAO,OAAK,EAAE,OAAO,OAAO,eAAe,CAACC,QAAAA,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS;AACnH,QAAM,UAAU,KAAK,WAAA,EAAa,IAAI,QAAQ,IAAI,CAAA,QAAO,IAAI,QAAQ;AAIrE,QAAM,UAAU,OAAO,KAAK,OAAO,UAAU,SAAS,aAAa,KAAK,OAAO,UAAU,KAAK,KAAK,WAAA,CAAY,IAAI;AAEnH,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,UAAU,UAAU;AAAA,MAChC,OAAO,KAAK,IAAI;AAAA,MAChB;AAAA,MACA;AAAA,IAAA;AAAA,IACC;AAAA,EAAA;AAGb;AAYA,MAAM,oBAAoB,MAAM,KAAK,SAASC,mBAAmC,OAAsC;AACnH,QAAM,EAAE,gBAAgB,SAAS,UAAU,SAAS,YAAY,OAAO,SAAS,OAAO,GAAG,WAAA,IAAe;AAEzG;AAAA;AAAA,IAEI,sBAAA,cAAC,MAAA,EAAI,GAAG,YAAY,WAAU,SAAQ,KAAK,SAAS,OAAO,EAAE,YAAY,QAAQ,OAAO,WAAW,OAAO,GAAA,EAAG,GACzG,sBAAA,cAAC,QAAA,EAAK,WAAU,OAAA,GAAQ,QAAS,GAChC,YAAY,UAAU,iBACnB,sBAAA;AAAA,MAACC,QAAAA;AAAAA,MAAA;AAAA,QACG,SAAS;AAAA,QACT,eAAe;AAAA,QACf,MAAM;AAAA,QACN,aAAW;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEJ,IACR;AAAA;AAER,CAAC;;"}

package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport type { TableCellRendererProps } from '../../../../types';\nimport { RowContext } from '../../../Row/RowContext';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { getCellAttributes } from '../util';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, index, isHighlighted } = props;\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const attributes = getCellAttributes(cell, index, isHighlighted);\n\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n    // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that\n    // rowGroupActions aligns with rowActions.\n    const colSpan =\n        cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;\n    const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n    // using flexRender renders as a react component not a function, and that causes re-render issues for us\n    // for example, clicks on buttons in cells no longer works until the row becomes active\n    const content = typeof cell.column.columnDef.cell === 'function' ? cell.column.columnDef.cell(cell.getContext()) : null;\n\n    return (\n        <MemoedGroupedCell<TType>\n            {...attributes}\n            canShowActions={canShowActions}\n            cellRef={cellRef}\n            colSpan={colSpan}\n            rowActions={tableMeta.rowGroups.rowActionsForGroup}\n            rowId={cell.row.id}\n            subRows={subRows}\n            table={table}>\n            {content}\n        </MemoedGroupedCell>\n    );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n    canShowActions: boolean;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[];\n    rowId: string;\n    subRows: TType[];\n    table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n    const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n    return (\n        // pr-1 is needed to align group row actions with row actions in sibling rows, if present\n        <td {...attributes} className=\"!pr-1\" ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n            <span className=\"grow\">{children}</span>\n            {rowActions?.length && canShowActions ? (\n                <RowGroupActions<TType>\n                    actions={rowActions as any}\n                    actionsLength={4}\n                    data={subRows}\n                    isActiveRow\n                    rowId={rowId}\n                    table={table}\n                />\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["React","MemoedGroupedCell","RowGroupActions"],"mappings":";;;;;AAUO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAa,kBAAkB,MAAM,OAAO,aAAa;AAE/D,QAAM,EAAE,WAAW,SAAA,IAAaA,eAAM,WAAW,UAAU;AAC3D,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,iBAAiB,eAAgB,aAAa,CAAC,UAAU,UAAU;AAIzE,QAAM,UACF,KAAK,IAAI,kBAAkB,OAAO,OAAK,EAAE,OAAO,OAAO,eAAe,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS;AACnH,QAAM,UAAU,KAAK,WAAA,EAAa,IAAI,QAAQ,IAAI,CAAA,QAAO,IAAI,QAAQ;AAIrE,QAAM,UAAU,OAAO,KAAK,OAAO,UAAU,SAAS,aAAa,KAAK,OAAO,UAAU,KAAK,KAAK,WAAA,CAAY,IAAI;AAEnH,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,UAAU,UAAU;AAAA,MAChC,OAAO,KAAK,IAAI;AAAA,MAChB;AAAA,MACA;AAAA,IAAA;AAAA,IACC;AAAA,EAAA;AAGb;AAYA,MAAM,oBAAoBA,eAAM,KAAK,SAASC,mBAAmC,OAAsC;AACnH,QAAM,EAAE,gBAAgB,SAAS,UAAU,SAAS,YAAY,OAAO,SAAS,OAAO,GAAG,WAAA,IAAe;AAEzG;AAAA;AAAA,IAEID,+BAAA,cAAC,MAAA,EAAI,GAAG,YAAY,WAAU,SAAQ,KAAK,SAAS,OAAO,EAAE,YAAY,QAAQ,OAAO,WAAW,OAAO,GAAA,EAAG,GACzGA,+BAAA,cAAC,QAAA,EAAK,WAAU,OAAA,GAAQ,QAAS,GAChC,YAAY,UAAU,iBACnBA,+BAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACG,SAAS;AAAA,QACT,eAAe;AAAA,QACf,MAAM;AAAA,QACN,aAAW;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEJ,IACR;AAAA;AAER,CAAC;"}
+{"version":3,"file":"GroupedCell.js","sources":["../../../../../../../../src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.tsx"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport type { TableCellRendererProps } from '../../../../types';\nimport { RowContext } from '../../../Row/RowContext';\nimport { Actions as RowGroupActions } from '../../Internal/Actions';\nimport { getCellAttributes } from '../util';\n\nexport function GroupedCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, index, isHighlighted } = props;\n    const { table } = cell.getContext();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const attributes = getCellAttributes(cell, index, isHighlighted);\n\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const canShowActions = isActiveRow || (isHovered && !tableMeta.rowActive.isHoverStatePaused);\n\n    // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that\n    // rowGroupActions aligns with rowActions.\n    const colSpan =\n        cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;\n    const subRows = cell.getContext().row.subRows.map(row => row.original);\n\n    // using flexRender renders as a react component not a function, and that causes re-render issues for us\n    // for example, clicks on buttons in cells no longer works until the row becomes active\n    const content = typeof cell.column.columnDef.cell === 'function' ? cell.column.columnDef.cell(cell.getContext()) : null;\n\n    return (\n        <MemoedGroupedCell<TType>\n            {...attributes}\n            canShowActions={canShowActions}\n            cellRef={cellRef}\n            colSpan={colSpan}\n            rowActions={tableMeta.rowGroups.rowActionsForGroup}\n            rowId={cell.row.id}\n            subRows={subRows}\n            table={table}>\n            {content}\n        </MemoedGroupedCell>\n    );\n}\n\ntype MemoedGroupedCellProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {\n    canShowActions: boolean;\n    cellRef: React.RefObject<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[];\n    rowId: string;\n    subRows: TType[];\n    table: ReactTable<TType>;\n};\n\nconst MemoedGroupedCell = React.memo(function MemoedGroupedCell<TType = unknown>(props: MemoedGroupedCellProps<TType>) {\n    const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;\n\n    return (\n        // pr-1 is needed to align group row actions with row actions in sibling rows, if present\n        <td {...attributes} className=\"!pr-1\" ref={cellRef} style={{ gridColumn: `span ${colSpan} / span ${colSpan}` }}>\n            <span className=\"grow\">{children}</span>\n            {rowActions?.length && canShowActions ? (\n                <RowGroupActions<TType>\n                    actions={rowActions as any}\n                    actionsLength={4}\n                    data={subRows}\n                    isActiveRow\n                    rowId={rowId}\n                    table={table}\n                />\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["React","MemoedGroupedCell","RowGroupActions"],"mappings":";;;;;AAUO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAa,kBAAkB,MAAM,OAAO,aAAa;AAE/D,QAAM,EAAE,WAAW,SAAA,IAAaA,eAAM,WAAW,UAAU;AAC3D,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,iBAAiB,eAAgB,aAAa,CAAC,UAAU,UAAU;AAIzE,QAAM,UACF,KAAK,IAAI,kBAAkB,OAAO,OAAK,EAAE,OAAO,OAAO,eAAe,CAAC,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS;AACnH,QAAM,UAAU,KAAK,WAAA,EAAa,IAAI,QAAQ,IAAI,CAAA,QAAO,IAAI,QAAQ;AAIrE,QAAM,UAAU,OAAO,KAAK,OAAO,UAAU,SAAS,aAAa,KAAK,OAAO,UAAU,KAAK,KAAK,WAAA,CAAY,IAAI;AAEnH,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,UAAU,UAAU;AAAA,MAChC,OAAO,KAAK,IAAI;AAAA,MAChB;AAAA,MACA;AAAA,IAAA;AAAA,IACC;AAAA,EAAA;AAGb;AAYA,MAAM,oBAAoBA,eAAM,KAAK,SAASC,mBAAmC,OAAsC;AACnH,QAAM,EAAE,gBAAgB,SAAS,UAAU,SAAS,YAAY,OAAO,SAAS,OAAO,GAAG,WAAA,IAAe;AAEzG;AAAA;AAAA,IAEID,+BAAA,cAAC,MAAA,EAAI,GAAG,YAAY,WAAU,SAAQ,KAAK,SAAS,OAAO,EAAE,YAAY,QAAQ,OAAO,WAAW,OAAO,GAAA,EAAG,GACzGA,+BAAA,cAAC,QAAA,EAAK,WAAU,OAAA,GAAQ,QAAS,GAChC,YAAY,UAAU,iBACnBA,+BAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QACG,SAAS;AAAA,QACT,eAAe;AAAA,QACf,MAAM;AAAA,QACN,aAAW;AAAA,QACX;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEJ,IACR;AAAA;AAER,CAAC;"}

package/dist/primitives/Table/Core/components/Columns/Cell/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Cell/util.ts"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    ColumnMeta as ReactTableColumnMeta,\n    TableMeta as ReactTableMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { isCellHighlighted, isInternalColumn } from '../../../../useTableManager/util/columns';\nimport { RowContext } from '../../Row/RowContext';\n\nexport type DisplayCellProps<TType = unknown> = {\n    index: number;\n    cell: ReactTableCell<TType, unknown>;\n};\n\nexport function getCellAttributes<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    index: number,\n    isHighlighted: true | 'current' | undefined\n) {\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isPinned = cell.column.getIsPinned();\n\n    // be careful adding new properties here, any objects will break cell memoisation (e.g. the style attribute)\n    return {\n        'data-cell-align': columnMeta?.align,\n        'data-cell-highlighted': isHighlighted,\n        'data-cell-id': cell.column.id,\n        'data-cell-index': index,\n        'data-cell-pinned': isPinned ? true : undefined,\n        'data-cell-truncate': columnMeta.enableTruncate ? true : undefined,\n        className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className,\n    };\n}\n\nexport function useSearchHighlighting<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    cellIndex: number,\n    ref: React.RefObject<HTMLTableCellElement | null>\n) {\n    const localization = useLocalization();\n    const { rowIndex } = React.useContext(RowContext);\n    const context = cell.getContext();\n    const tableMeta = context.table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n    const isHighlighted: 'current' | boolean | undefined = React.useMemo(() => {\n        if (\n            !cell.column.columnDef.enableGlobalFilter ||\n            isInternalColumn(cell.column.id) ||\n            cell.getIsAggregated() ||\n            cell.getIsPlaceholder()\n        ) {\n            return undefined;\n        }\n\n        let isHighlighted = false;\n\n        if (context.table.getState().globalFilter) {\n            isHighlighted = isCellHighlighted(\n                context.table.getState().globalFilter,\n                cell.getValue(),\n                cell.row.original,\n                columnMeta.dataType,\n                columnMeta.dataTypeOptions,\n                localization\n            );\n        }\n\n        if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {\n            return undefined;\n        }\n\n        const [rowActiveIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex] ?? [];\n\n        if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {\n            return 'current';\n        }\n\n        return true;\n    }, [\n        cell.getValue(),\n        context.table.getState().globalFilter,\n        tableMeta.search.highlightedColumnIndexes.length,\n        tableMeta.search.currentHighlightColumnIndex,\n    ]);\n\n    React.useEffect(() => {\n        if (ref.current && isHighlighted === 'current') {\n            ref.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n            setTimeout(() => {\n                if (ref.current) {\n                    const tableEl = ref.current.closest('table[data-taco^=\"table\"]');\n\n                    setTimeout(() => {\n                        const pinnedColumns = tableEl?.querySelectorAll('thead tr:last-child th[data-cell-pinned=\"left\"]');\n\n                        if (pinnedColumns?.length) {\n                            const lastFrozenRect = pinnedColumns.item(pinnedColumns.length - 1)?.getBoundingClientRect();\n\n                            if (lastFrozenRect && cell.column.getStart() < lastFrozenRect.right) {\n                                tableEl?.scrollTo(cell.column.getStart() - lastFrozenRect.right, tableEl.scrollTop);\n                            }\n                        }\n                    }, 1);\n                }\n            }, 1);\n        }\n    }, [isHighlighted]);\n\n    return isHighlighted;\n}\n\nexport function getCurrentRowCellElement(index: number, tableEl: HTMLElement) {\n    const cellSelector = `[data-current=\"true\"] [data-column-index=\"${index}\"`;\n    return tableEl.querySelector(cellSelector);\n}\n\nexport function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement) {\n    if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {\n        const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableEl);\n        const highlightRef = column?.getBoundingClientRect();\n        const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n\n        // offset the width of frozen columns so that the column being scrolled to is not hidden behind them\n        if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {\n            const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n            tableEl?.scrollTo(highlightRef.left - pinnedColumnsWidth, tableEl.scrollTop);\n        }\n    } else {\n        column.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n}\n"],"names":["useLocalization","RowContext","isInternalColumn","isHighlighted","isCellHighlighted"],"mappings":";;;;;;AAgBO,SAAS,kBACZ,MACA,OACA,eACF;AACE,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,WAAW,KAAK,OAAO,YAAA;AAG7B,SAAO;AAAA,IACH,mBAAmB,YAAY;AAAA,IAC/B,yBAAyB;AAAA,IACzB,gBAAgB,KAAK,OAAO;AAAA,IAC5B,mBAAmB;AAAA,IACnB,oBAAoB,WAAW,OAAO;AAAA,IACtC,sBAAsB,WAAW,iBAAiB,OAAO;AAAA,IACzD,WAAW,OAAO,WAAW,cAAc,aAAa,WAAW,UAAU,KAAK,IAAI,QAAQ,IAAI,WAAW;AAAA,EAAA;AAErH;AAEO,SAAS,sBACZ,MACA,WACA,KACF;AACE,QAAM,eAAeA,aAAAA,gBAAA;AACrB,QAAM,EAAE,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAChD,QAAM,UAAU,KAAK,WAAA;AACrB,QAAM,YAAY,QAAQ,MAAM,QAAQ;AACxC,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,QAAM,gBAAiD,MAAM,QAAQ,MAAM;AACvE,QACI,CAAC,KAAK,OAAO,UAAU,sBACvBC,QAAAA,iBAAiB,KAAK,OAAO,EAAE,KAC/B,KAAK,gBAAA,KACL,KAAK,oBACP;AACE,aAAO;AAAA,IACX;AAEA,QAAIC,iBAAgB;AAEpB,QAAI,QAAQ,MAAM,SAAA,EAAW,cAAc;AACvCA,uBAAgBC,QAAAA;AAAAA,QACZ,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB,KAAK,SAAA;AAAA,QACL,KAAK,IAAI;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,IAER;AAEA,QAAI,CAACD,kBAAiB,UAAU,OAAO,gCAAgC,QAAW;AAC9E,aAAO;AAAA,IACX;AAEA,UAAM,CAAC,gBAAgB,kBAAkB,IACrC,UAAU,OAAO,yBAAyB,UAAU,OAAO,2BAA2B,KAAK,CAAA;AAE/F,QAAI,mBAAmB,YAAY,uBAAuB,WAAW;AACjE,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX,GAAG;AAAA,IACC,KAAK,SAAA;AAAA,IACL,QAAQ,MAAM,SAAA,EAAW;AAAA,IACzB,UAAU,OAAO,yBAAyB;AAAA,IAC1C,UAAU,OAAO;AAAA,EAAA,CACpB;AAED,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,WAAW,kBAAkB,WAAW;AAC5C,UAAI,QAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAElE,iBAAW,MAAM;AACb,YAAI,IAAI,SAAS;AACb,gBAAM,UAAU,IAAI,QAAQ,QAAQ,2BAA2B;AAE/D,qBAAW,MAAM;AACb,kBAAM,gBAAgB,SAAS,iBAAiB,iDAAiD;AAEjG,gBAAI,eAAe,QAAQ;AACvB,oBAAM,iBAAiB,cAAc,KAAK,cAAc,SAAS,CAAC,GAAG,sBAAA;AAErE,kBAAI,kBAAkB,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO;AACjE,yBAAS,SAAS,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO,QAAQ,SAAS;AAAA,cACtF;AAAA,YACJ;AAAA,UACJ,GAAG,CAAC;AAAA,QACR;AAAA,MACJ,GAAG,CAAC;AAAA,IACR;AAAA,EACJ,GAAG,CAAC,aAAa,CAAC;AAElB,SAAO;AACX;;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Cell/util.ts"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    ColumnMeta as ReactTableColumnMeta,\n    TableMeta as ReactTableMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { isCellHighlighted, isInternalColumn } from '../../../../useTableManager/util/columns';\nimport { RowContext } from '../../Row/RowContext';\n\nexport type DisplayCellProps<TType = unknown> = {\n    index: number;\n    cell: ReactTableCell<TType, unknown>;\n};\n\nexport function getCellAttributes<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    index: number,\n    isHighlighted: true | 'current' | undefined\n) {\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isPinned = cell.column.getIsPinned();\n\n    // be careful adding new properties here, any objects will break cell memoisation (e.g. the style attribute)\n    return {\n        'data-cell-align': columnMeta?.align,\n        'data-cell-highlighted': isHighlighted,\n        'data-cell-id': cell.column.id,\n        'data-cell-index': index,\n        'data-cell-pinned': isPinned ? true : undefined,\n        'data-cell-truncate': columnMeta.enableTruncate ? true : undefined,\n        className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className,\n    };\n}\n\nexport function useSearchHighlighting<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    cellIndex: number,\n    ref: React.RefObject<HTMLTableCellElement>\n) {\n    const localization = useLocalization();\n    const { rowIndex } = React.useContext(RowContext);\n    const context = cell.getContext();\n    const tableMeta = context.table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n    const isHighlighted: 'current' | boolean | undefined = React.useMemo(() => {\n        if (\n            !cell.column.columnDef.enableGlobalFilter ||\n            isInternalColumn(cell.column.id) ||\n            cell.getIsAggregated() ||\n            cell.getIsPlaceholder()\n        ) {\n            return undefined;\n        }\n\n        let isHighlighted = false;\n\n        if (context.table.getState().globalFilter) {\n            isHighlighted = isCellHighlighted(\n                context.table.getState().globalFilter,\n                cell.getValue(),\n                cell.row.original,\n                columnMeta.dataType,\n                columnMeta.dataTypeOptions,\n                localization\n            );\n        }\n\n        if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {\n            return undefined;\n        }\n\n        const [rowActiveIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex] ?? [];\n\n        if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {\n            return 'current';\n        }\n\n        return true;\n    }, [\n        cell.getValue(),\n        context.table.getState().globalFilter,\n        tableMeta.search.highlightedColumnIndexes.length,\n        tableMeta.search.currentHighlightColumnIndex,\n    ]);\n\n    React.useEffect(() => {\n        if (ref.current && isHighlighted === 'current') {\n            ref.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n            setTimeout(() => {\n                if (ref.current) {\n                    const tableEl = ref.current.closest('table[data-taco^=\"table\"]');\n\n                    setTimeout(() => {\n                        const pinnedColumns = tableEl?.querySelectorAll('thead tr:last-child th[data-cell-pinned=\"left\"]');\n\n                        if (pinnedColumns?.length) {\n                            const lastFrozenRect = pinnedColumns.item(pinnedColumns.length - 1)?.getBoundingClientRect();\n\n                            if (lastFrozenRect && cell.column.getStart() < lastFrozenRect.right) {\n                                tableEl?.scrollTo(cell.column.getStart() - lastFrozenRect.right, tableEl.scrollTop);\n                            }\n                        }\n                    }, 1);\n                }\n            }, 1);\n        }\n    }, [isHighlighted]);\n\n    return isHighlighted;\n}\n\nexport function getCurrentRowCellElement(index: number, tableEl: HTMLElement) {\n    const cellSelector = `[data-current=\"true\"] [data-column-index=\"${index}\"`;\n    return tableEl.querySelector(cellSelector);\n}\n\nexport function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement) {\n    if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {\n        const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableEl);\n        const highlightRef = column?.getBoundingClientRect();\n        const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n\n        // offset the width of frozen columns so that the column being scrolled to is not hidden behind them\n        if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {\n            const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n            tableEl?.scrollTo(highlightRef.left - pinnedColumnsWidth, tableEl.scrollTop);\n        }\n    } else {\n        column.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n}\n"],"names":["useLocalization","RowContext","isInternalColumn","isHighlighted","isCellHighlighted"],"mappings":";;;;;;AAgBO,SAAS,kBACZ,MACA,OACA,eACF;AACE,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,WAAW,KAAK,OAAO,YAAA;AAG7B,SAAO;AAAA,IACH,mBAAmB,YAAY;AAAA,IAC/B,yBAAyB;AAAA,IACzB,gBAAgB,KAAK,OAAO;AAAA,IAC5B,mBAAmB;AAAA,IACnB,oBAAoB,WAAW,OAAO;AAAA,IACtC,sBAAsB,WAAW,iBAAiB,OAAO;AAAA,IACzD,WAAW,OAAO,WAAW,cAAc,aAAa,WAAW,UAAU,KAAK,IAAI,QAAQ,IAAI,WAAW;AAAA,EAAA;AAErH;AAEO,SAAS,sBACZ,MACA,WACA,KACF;AACE,QAAM,eAAeA,aAAAA,gBAAA;AACrB,QAAM,EAAE,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAChD,QAAM,UAAU,KAAK,WAAA;AACrB,QAAM,YAAY,QAAQ,MAAM,QAAQ;AACxC,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,QAAM,gBAAiD,MAAM,QAAQ,MAAM;AACvE,QACI,CAAC,KAAK,OAAO,UAAU,sBACvBC,QAAAA,iBAAiB,KAAK,OAAO,EAAE,KAC/B,KAAK,gBAAA,KACL,KAAK,oBACP;AACE,aAAO;AAAA,IACX;AAEA,QAAIC,iBAAgB;AAEpB,QAAI,QAAQ,MAAM,SAAA,EAAW,cAAc;AACvCA,uBAAgBC,QAAAA;AAAAA,QACZ,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB,KAAK,SAAA;AAAA,QACL,KAAK,IAAI;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,IAER;AAEA,QAAI,CAACD,kBAAiB,UAAU,OAAO,gCAAgC,QAAW;AAC9E,aAAO;AAAA,IACX;AAEA,UAAM,CAAC,gBAAgB,kBAAkB,IACrC,UAAU,OAAO,yBAAyB,UAAU,OAAO,2BAA2B,KAAK,CAAA;AAE/F,QAAI,mBAAmB,YAAY,uBAAuB,WAAW;AACjE,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX,GAAG;AAAA,IACC,KAAK,SAAA;AAAA,IACL,QAAQ,MAAM,SAAA,EAAW;AAAA,IACzB,UAAU,OAAO,yBAAyB;AAAA,IAC1C,UAAU,OAAO;AAAA,EAAA,CACpB;AAED,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,WAAW,kBAAkB,WAAW;AAC5C,UAAI,QAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAElE,iBAAW,MAAM;AACb,YAAI,IAAI,SAAS;AACb,gBAAM,UAAU,IAAI,QAAQ,QAAQ,2BAA2B;AAE/D,qBAAW,MAAM;AACb,kBAAM,gBAAgB,SAAS,iBAAiB,iDAAiD;AAEjG,gBAAI,eAAe,QAAQ;AACvB,oBAAM,iBAAiB,cAAc,KAAK,cAAc,SAAS,CAAC,GAAG,sBAAA;AAErE,kBAAI,kBAAkB,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO;AACjE,yBAAS,SAAS,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO,QAAQ,SAAS;AAAA,cACtF;AAAA,YACJ;AAAA,UACJ,GAAG,CAAC;AAAA,QACR;AAAA,MACJ,GAAG,CAAC;AAAA,IACR;AAAA,EACJ,GAAG,CAAC,aAAa,CAAC;AAElB,SAAO;AACX;;;"}

package/dist/primitives/Table/Core/components/Columns/Cell/util.d.ts

@@ -13,6 +13,6 @@ export declare function getCellAttributes<TType = unknown>(cell: ReactTableCell<
     'data-cell-truncate': boolean | undefined;
     className: string | undefined;
 };
-export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, cellIndex: number, ref: React.RefObject<HTMLTableCellElement | null>): true | "current" | undefined;
+export declare function useSearchHighlighting<TType = unknown>(cell: ReactTableCell<TType, unknown>, cellIndex: number, ref: React.RefObject<HTMLTableCellElement>): true | "current" | undefined;
 export declare function getCurrentRowCellElement(index: number, tableEl: HTMLElement): Element | null;
 export declare function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement): void;

package/dist/primitives/Table/Core/components/Columns/Cell/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Cell/util.ts"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    ColumnMeta as ReactTableColumnMeta,\n    TableMeta as ReactTableMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { isCellHighlighted, isInternalColumn } from '../../../../useTableManager/util/columns';\nimport { RowContext } from '../../Row/RowContext';\n\nexport type DisplayCellProps<TType = unknown> = {\n    index: number;\n    cell: ReactTableCell<TType, unknown>;\n};\n\nexport function getCellAttributes<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    index: number,\n    isHighlighted: true | 'current' | undefined\n) {\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isPinned = cell.column.getIsPinned();\n\n    // be careful adding new properties here, any objects will break cell memoisation (e.g. the style attribute)\n    return {\n        'data-cell-align': columnMeta?.align,\n        'data-cell-highlighted': isHighlighted,\n        'data-cell-id': cell.column.id,\n        'data-cell-index': index,\n        'data-cell-pinned': isPinned ? true : undefined,\n        'data-cell-truncate': columnMeta.enableTruncate ? true : undefined,\n        className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className,\n    };\n}\n\nexport function useSearchHighlighting<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    cellIndex: number,\n    ref: React.RefObject<HTMLTableCellElement | null>\n) {\n    const localization = useLocalization();\n    const { rowIndex } = React.useContext(RowContext);\n    const context = cell.getContext();\n    const tableMeta = context.table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n    const isHighlighted: 'current' | boolean | undefined = React.useMemo(() => {\n        if (\n            !cell.column.columnDef.enableGlobalFilter ||\n            isInternalColumn(cell.column.id) ||\n            cell.getIsAggregated() ||\n            cell.getIsPlaceholder()\n        ) {\n            return undefined;\n        }\n\n        let isHighlighted = false;\n\n        if (context.table.getState().globalFilter) {\n            isHighlighted = isCellHighlighted(\n                context.table.getState().globalFilter,\n                cell.getValue(),\n                cell.row.original,\n                columnMeta.dataType,\n                columnMeta.dataTypeOptions,\n                localization\n            );\n        }\n\n        if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {\n            return undefined;\n        }\n\n        const [rowActiveIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex] ?? [];\n\n        if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {\n            return 'current';\n        }\n\n        return true;\n    }, [\n        cell.getValue(),\n        context.table.getState().globalFilter,\n        tableMeta.search.highlightedColumnIndexes.length,\n        tableMeta.search.currentHighlightColumnIndex,\n    ]);\n\n    React.useEffect(() => {\n        if (ref.current && isHighlighted === 'current') {\n            ref.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n            setTimeout(() => {\n                if (ref.current) {\n                    const tableEl = ref.current.closest('table[data-taco^=\"table\"]');\n\n                    setTimeout(() => {\n                        const pinnedColumns = tableEl?.querySelectorAll('thead tr:last-child th[data-cell-pinned=\"left\"]');\n\n                        if (pinnedColumns?.length) {\n                            const lastFrozenRect = pinnedColumns.item(pinnedColumns.length - 1)?.getBoundingClientRect();\n\n                            if (lastFrozenRect && cell.column.getStart() < lastFrozenRect.right) {\n                                tableEl?.scrollTo(cell.column.getStart() - lastFrozenRect.right, tableEl.scrollTop);\n                            }\n                        }\n                    }, 1);\n                }\n            }, 1);\n        }\n    }, [isHighlighted]);\n\n    return isHighlighted;\n}\n\nexport function getCurrentRowCellElement(index: number, tableEl: HTMLElement) {\n    const cellSelector = `[data-current=\"true\"] [data-column-index=\"${index}\"`;\n    return tableEl.querySelector(cellSelector);\n}\n\nexport function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement) {\n    if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {\n        const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableEl);\n        const highlightRef = column?.getBoundingClientRect();\n        const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n\n        // offset the width of frozen columns so that the column being scrolled to is not hidden behind them\n        if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {\n            const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n            tableEl?.scrollTo(highlightRef.left - pinnedColumnsWidth, tableEl.scrollTop);\n        }\n    } else {\n        column.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n}\n"],"names":["React","isHighlighted"],"mappings":";;;;AAgBO,SAAS,kBACZ,MACA,OACA,eACF;AACE,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,WAAW,KAAK,OAAO,YAAA;AAG7B,SAAO;AAAA,IACH,mBAAmB,YAAY;AAAA,IAC/B,yBAAyB;AAAA,IACzB,gBAAgB,KAAK,OAAO;AAAA,IAC5B,mBAAmB;AAAA,IACnB,oBAAoB,WAAW,OAAO;AAAA,IACtC,sBAAsB,WAAW,iBAAiB,OAAO;AAAA,IACzD,WAAW,OAAO,WAAW,cAAc,aAAa,WAAW,UAAU,KAAK,IAAI,QAAQ,IAAI,WAAW;AAAA,EAAA;AAErH;AAEO,SAAS,sBACZ,MACA,WACA,KACF;AACE,QAAM,eAAe,gBAAA;AACrB,QAAM,EAAE,SAAA,IAAaA,eAAM,WAAW,UAAU;AAChD,QAAM,UAAU,KAAK,WAAA;AACrB,QAAM,YAAY,QAAQ,MAAM,QAAQ;AACxC,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,QAAM,gBAAiDA,eAAM,QAAQ,MAAM;AACvE,QACI,CAAC,KAAK,OAAO,UAAU,sBACvB,iBAAiB,KAAK,OAAO,EAAE,KAC/B,KAAK,gBAAA,KACL,KAAK,oBACP;AACE,aAAO;AAAA,IACX;AAEA,QAAIC,iBAAgB;AAEpB,QAAI,QAAQ,MAAM,SAAA,EAAW,cAAc;AACvCA,uBAAgB;AAAA,QACZ,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB,KAAK,SAAA;AAAA,QACL,KAAK,IAAI;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,IAER;AAEA,QAAI,CAACA,kBAAiB,UAAU,OAAO,gCAAgC,QAAW;AAC9E,aAAO;AAAA,IACX;AAEA,UAAM,CAAC,gBAAgB,kBAAkB,IACrC,UAAU,OAAO,yBAAyB,UAAU,OAAO,2BAA2B,KAAK,CAAA;AAE/F,QAAI,mBAAmB,YAAY,uBAAuB,WAAW;AACjE,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX,GAAG;AAAA,IACC,KAAK,SAAA;AAAA,IACL,QAAQ,MAAM,SAAA,EAAW;AAAA,IACzB,UAAU,OAAO,yBAAyB;AAAA,IAC1C,UAAU,OAAO;AAAA,EAAA,CACpB;AAEDD,iBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,WAAW,kBAAkB,WAAW;AAC5C,UAAI,QAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAElE,iBAAW,MAAM;AACb,YAAI,IAAI,SAAS;AACb,gBAAM,UAAU,IAAI,QAAQ,QAAQ,2BAA2B;AAE/D,qBAAW,MAAM;AACb,kBAAM,gBAAgB,SAAS,iBAAiB,iDAAiD;AAEjG,gBAAI,eAAe,QAAQ;AACvB,oBAAM,iBAAiB,cAAc,KAAK,cAAc,SAAS,CAAC,GAAG,sBAAA;AAErE,kBAAI,kBAAkB,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO;AACjE,yBAAS,SAAS,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO,QAAQ,SAAS;AAAA,cACtF;AAAA,YACJ;AAAA,UACJ,GAAG,CAAC;AAAA,QACR;AAAA,MACJ,GAAG,CAAC;AAAA,IACR;AAAA,EACJ,GAAG,CAAC,aAAa,CAAC;AAElB,SAAO;AACX;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Cell/util.ts"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    ColumnMeta as ReactTableColumnMeta,\n    TableMeta as ReactTableMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { isCellHighlighted, isInternalColumn } from '../../../../useTableManager/util/columns';\nimport { RowContext } from '../../Row/RowContext';\n\nexport type DisplayCellProps<TType = unknown> = {\n    index: number;\n    cell: ReactTableCell<TType, unknown>;\n};\n\nexport function getCellAttributes<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    index: number,\n    isHighlighted: true | 'current' | undefined\n) {\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isPinned = cell.column.getIsPinned();\n\n    // be careful adding new properties here, any objects will break cell memoisation (e.g. the style attribute)\n    return {\n        'data-cell-align': columnMeta?.align,\n        'data-cell-highlighted': isHighlighted,\n        'data-cell-id': cell.column.id,\n        'data-cell-index': index,\n        'data-cell-pinned': isPinned ? true : undefined,\n        'data-cell-truncate': columnMeta.enableTruncate ? true : undefined,\n        className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className,\n    };\n}\n\nexport function useSearchHighlighting<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    cellIndex: number,\n    ref: React.RefObject<HTMLTableCellElement>\n) {\n    const localization = useLocalization();\n    const { rowIndex } = React.useContext(RowContext);\n    const context = cell.getContext();\n    const tableMeta = context.table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n    const isHighlighted: 'current' | boolean | undefined = React.useMemo(() => {\n        if (\n            !cell.column.columnDef.enableGlobalFilter ||\n            isInternalColumn(cell.column.id) ||\n            cell.getIsAggregated() ||\n            cell.getIsPlaceholder()\n        ) {\n            return undefined;\n        }\n\n        let isHighlighted = false;\n\n        if (context.table.getState().globalFilter) {\n            isHighlighted = isCellHighlighted(\n                context.table.getState().globalFilter,\n                cell.getValue(),\n                cell.row.original,\n                columnMeta.dataType,\n                columnMeta.dataTypeOptions,\n                localization\n            );\n        }\n\n        if (!isHighlighted || tableMeta.search.currentHighlightColumnIndex === undefined) {\n            return undefined;\n        }\n\n        const [rowActiveIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex] ?? [];\n\n        if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {\n            return 'current';\n        }\n\n        return true;\n    }, [\n        cell.getValue(),\n        context.table.getState().globalFilter,\n        tableMeta.search.highlightedColumnIndexes.length,\n        tableMeta.search.currentHighlightColumnIndex,\n    ]);\n\n    React.useEffect(() => {\n        if (ref.current && isHighlighted === 'current') {\n            ref.current.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n            setTimeout(() => {\n                if (ref.current) {\n                    const tableEl = ref.current.closest('table[data-taco^=\"table\"]');\n\n                    setTimeout(() => {\n                        const pinnedColumns = tableEl?.querySelectorAll('thead tr:last-child th[data-cell-pinned=\"left\"]');\n\n                        if (pinnedColumns?.length) {\n                            const lastFrozenRect = pinnedColumns.item(pinnedColumns.length - 1)?.getBoundingClientRect();\n\n                            if (lastFrozenRect && cell.column.getStart() < lastFrozenRect.right) {\n                                tableEl?.scrollTo(cell.column.getStart() - lastFrozenRect.right, tableEl.scrollTop);\n                            }\n                        }\n                    }, 1);\n                }\n            }, 1);\n        }\n    }, [isHighlighted]);\n\n    return isHighlighted;\n}\n\nexport function getCurrentRowCellElement(index: number, tableEl: HTMLElement) {\n    const cellSelector = `[data-current=\"true\"] [data-column-index=\"${index}\"`;\n    return tableEl.querySelector(cellSelector);\n}\n\nexport function scrollColumnIntoView(columnIndex: number, frozenColumnIndex: number, column: HTMLElement, tableEl: HTMLElement) {\n    if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {\n        const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableEl);\n        const highlightRef = column?.getBoundingClientRect();\n        const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n\n        // offset the width of frozen columns so that the column being scrolled to is not hidden behind them\n        if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {\n            const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n            tableEl?.scrollTo(highlightRef.left - pinnedColumnsWidth, tableEl.scrollTop);\n        }\n    } else {\n        column.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n}\n"],"names":["React","isHighlighted"],"mappings":";;;;AAgBO,SAAS,kBACZ,MACA,OACA,eACF;AACE,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,WAAW,KAAK,OAAO,YAAA;AAG7B,SAAO;AAAA,IACH,mBAAmB,YAAY;AAAA,IAC/B,yBAAyB;AAAA,IACzB,gBAAgB,KAAK,OAAO;AAAA,IAC5B,mBAAmB;AAAA,IACnB,oBAAoB,WAAW,OAAO;AAAA,IACtC,sBAAsB,WAAW,iBAAiB,OAAO;AAAA,IACzD,WAAW,OAAO,WAAW,cAAc,aAAa,WAAW,UAAU,KAAK,IAAI,QAAQ,IAAI,WAAW;AAAA,EAAA;AAErH;AAEO,SAAS,sBACZ,MACA,WACA,KACF;AACE,QAAM,eAAe,gBAAA;AACrB,QAAM,EAAE,SAAA,IAAaA,eAAM,WAAW,UAAU;AAChD,QAAM,UAAU,KAAK,WAAA;AACrB,QAAM,YAAY,QAAQ,MAAM,QAAQ;AACxC,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,QAAM,gBAAiDA,eAAM,QAAQ,MAAM;AACvE,QACI,CAAC,KAAK,OAAO,UAAU,sBACvB,iBAAiB,KAAK,OAAO,EAAE,KAC/B,KAAK,gBAAA,KACL,KAAK,oBACP;AACE,aAAO;AAAA,IACX;AAEA,QAAIC,iBAAgB;AAEpB,QAAI,QAAQ,MAAM,SAAA,EAAW,cAAc;AACvCA,uBAAgB;AAAA,QACZ,QAAQ,MAAM,SAAA,EAAW;AAAA,QACzB,KAAK,SAAA;AAAA,QACL,KAAK,IAAI;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX;AAAA,MAAA;AAAA,IAER;AAEA,QAAI,CAACA,kBAAiB,UAAU,OAAO,gCAAgC,QAAW;AAC9E,aAAO;AAAA,IACX;AAEA,UAAM,CAAC,gBAAgB,kBAAkB,IACrC,UAAU,OAAO,yBAAyB,UAAU,OAAO,2BAA2B,KAAK,CAAA;AAE/F,QAAI,mBAAmB,YAAY,uBAAuB,WAAW;AACjE,aAAO;AAAA,IACX;AAEA,WAAO;AAAA,EACX,GAAG;AAAA,IACC,KAAK,SAAA;AAAA,IACL,QAAQ,MAAM,SAAA,EAAW;AAAA,IACzB,UAAU,OAAO,yBAAyB;AAAA,IAC1C,UAAU,OAAO;AAAA,EAAA,CACpB;AAEDD,iBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,WAAW,kBAAkB,WAAW;AAC5C,UAAI,QAAQ,eAAe,EAAE,OAAO,WAAW,QAAQ,WAAW;AAElE,iBAAW,MAAM;AACb,YAAI,IAAI,SAAS;AACb,gBAAM,UAAU,IAAI,QAAQ,QAAQ,2BAA2B;AAE/D,qBAAW,MAAM;AACb,kBAAM,gBAAgB,SAAS,iBAAiB,iDAAiD;AAEjG,gBAAI,eAAe,QAAQ;AACvB,oBAAM,iBAAiB,cAAc,KAAK,cAAc,SAAS,CAAC,GAAG,sBAAA;AAErE,kBAAI,kBAAkB,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO;AACjE,yBAAS,SAAS,KAAK,OAAO,SAAA,IAAa,eAAe,OAAO,QAAQ,SAAS;AAAA,cACtF;AAAA,YACJ;AAAA,UACJ,GAAG,CAAC;AAAA,QACR;AAAA,MACJ,GAAG,CAAC;AAAA,IACR;AAAA,EACJ,GAAG,CAAC,aAAa,CAAC;AAElB,SAAO;AACX;"}

package/dist/primitives/Table/Core/types.d.ts

@@ -16,7 +16,7 @@ export type TableRowRendererProps<TType = unknown> = {
 export type TableRowRenderer<TType = unknown> = <T = TType>(props: TableRowRendererProps<T>) => React.JSX.Element;
 export type TableCellRendererProps<TType = unknown> = React.TdHTMLAttributes<HTMLTableCellElement> & {
     cell: ReactTableCell<TType, unknown>;
-    cellRef: React.RefObject<HTMLTableCellElement | null>;
+    cellRef: React.RefObject<HTMLTableCellElement>;
     index: number;
     isHighlighted: true | 'current' | undefined;
 };

package/dist/primitives/Table/useTableManager/features/useTableRowSelection.d.ts

@@ -5,5 +5,5 @@ export declare function useTableRowSelection(isEnabled?: boolean, controlledSele
     isControlled: boolean;
     controlledSelectedRows: Record<string, boolean> | undefined;
     handleKeyDown: <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;
-    lastSelectedRowIndex: React.RefObject<number | undefined>;
+    lastSelectedRowIndex: React.MutableRefObject<number | undefined>;
 };

package/dist/taco.css

@@ -903,8 +903,10 @@ table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] {
 }
 
 /* small font size */
-table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='legacy-button'],
-table[data-taco^='table'][data-table-font-size='small'] tr[data-row-id] td [data-taco='legacy-icon-button'] {
+table[data-taco^='table'][data-table-font-size='small']
+    tr[data-row-id]
+    td
+    :where([data-taco='legacy-button'], [data-taco='legacy-icon-button'], [data-taco='button'], [data-taco='linkbutton']) {
     @apply !-my-2;
 }
 
@@ -1080,8 +1082,10 @@ table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [dat
     @apply !h-5 !w-5;
 }
 
-table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [data-taco='legacy-button'],
-table[data-taco^='table'][data-table-font-size='medium'] tr[data-row-id] td [data-taco='legacy-icon-button'] {
+table[data-taco^='table'][data-table-font-size='medium']
+    tr[data-row-id]
+    td
+    :where([data-taco='legacy-button'], [data-taco='legacy-icon-button'], [data-taco='button'], [data-taco='linkbutton']) {
     @apply !-my-1.5;
 }
 
@@ -1194,8 +1198,10 @@ table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data
     @apply !h-6 !w-6;
 }
 
-table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data-taco='legacy-button'],
-table[data-taco^='table'][data-table-font-size='large'] tr[data-row-id] td [data-taco='legacy-icon-button'] {
+table[data-taco^='table'][data-table-font-size='large']
+    tr[data-row-id]
+    td
+    :where([data-taco='legacy-button'], [data-taco='legacy-icon-button'], [data-taco='button'], [data-taco='linkbutton']) {
     @apply !-my-1;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "12.0.0-react18-compat.0",
+    "version": "12.0.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -46,7 +46,7 @@
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@economic/taco-tokens": "3.0.2-react18-compat.0",
+        "@economic/taco-tokens": "^3.0.2",
         "@radix-ui/react-scroll-area": "1.2.10",
         "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
@@ -63,21 +63,21 @@
     "peerDependencies": {
         "clsx": "^2.1.1",
         "nanoid": "^5.1.16 || ^6.0.0",
-        "react": "^18.3.1 || ^19.0.0",
-        "react-dom": "^18.3.1 || ^19.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "tailwindcss": ">=3.4.19"
     },
     "devDependencies": {
-        "@economic/taco-rules": "1.0.2-react18-compat.0",
+        "@economic/taco-rules": "^1.0.2",
         "@oxlint/plugins": "^1.75.0",
         "@svgr/cli": "^8.1.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
-        "@testing-library/user-event": "^14.6.3",
+        "@testing-library/user-event": "^14.6.6",
         "@types/lodash": "^4.17.25",
         "@types/node": "^22.20.1",
-        "@types/react": "19.2.18",
-        "@types/react-dom": "19.2.4",
+        "@types/react": "18.3.31",
+        "@types/react-dom": "18.3.7",
         "clsx": "^2.1.1",
         "fast-sort": "^2.2.0",
         "jsdom": "^29.1.1",
@@ -91,10 +91,10 @@
         "vite": "^7.3.6",
         "vite-plugin-dts": "^5.0.3",
         "vite-plugin-externalize-deps": "^0.10.0",
-        "vitest": "^4.1.10"
+        "vitest": "^4.1.11"
     },
     "optionalDependencies": {
-        "@rollup/rollup-linux-x64-gnu": "^4.62.4"
+        "@rollup/rollup-linux-x64-gnu": "^4.62.5"
     },
-    "gitHead": "102ac8458611e9a5c37fcfc69711d90df6ebb0b9"
+    "gitHead": "d38b34a38e057c6cd9a5d9827b9cf54ec215b691"
 }