@economic/taco 14.2.0 → 14.2.1-EC-87277-rollup-optional-dep-test-release.0

package/dist/components/Table3/components/Editing/Alert.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const columns = require("../../../../primitives/Table/useTableManager/util/columns.cjs");
 const rows = require("../../../../primitives/Table/useTableManager/util/rows.cjs");
 const Localization = require("../../../Provider/Localization.cjs");
 const Tooltip = require("../../../Tooltip/Tooltip.cjs");
@@ -15,10 +16,26 @@ function Alert(props) {
   const tableMeta = rows.getTableMeta(table);
   const [showFilterResetDialog, setShowFilterResetDialog] = React.useState(false);
   const [pendingFocusRowId, setPendingFocusRowId] = React.useState(null);
+  const hasScrolledToPendingRow = React.useRef(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert();
+  const isDataLoader2 = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2;
   const visibleRows = table.getRowModel().rows;
   function getVisibleRowIndex(rowId) {
-    return visibleRows.findIndex((row) => row.id === rowId);
+    return visibleRows.findIndex((row) => row.original !== void 0 && row.id === rowId);
+  }
+  function getDatasetRowIndex(visibleIndex) {
+    if (!isDataLoader2) {
+      return visibleIndex;
+    }
+    const pageSize = tableMeta.server.pageSize;
+    const pageIndex = tableMeta.server.pages?.[Math.floor(visibleIndex / pageSize)];
+    if (pageIndex === void 0) {
+      return visibleIndex;
+    }
+    return pageIndex * pageSize + visibleIndex % pageSize;
+  }
+  function hasActiveFilters() {
+    return !!table.getState().columnFilters.length || !!table.getState().globalFilter;
   }
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
@@ -44,9 +61,9 @@ function Alert(props) {
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
     const handleClick = () => {
-      const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);
-      if (visibleIndex > -1) {
-        scrollToRow(visibleIndex);
+      if (getVisibleRowIndex(pendingChangeWithError.rowId) > -1 || isDataLoader2 && !hasActiveFilters()) {
+        hasScrolledToPendingRow.current = false;
+        setPendingFocusRowId(pendingChangeWithError.rowId);
       } else {
         setShowFilterResetDialog(pendingChangeWithError.rowId);
       }
@@ -91,9 +108,14 @@ function Alert(props) {
   });
   const handleResetFilters = () => {
     const rowId = showFilterResetDialog;
+    const search = table.getState().globalFilter;
     table.resetGlobalFilter();
     table.resetColumnFilters();
+    if (isDataLoader2 && search) {
+      tableMeta.search.handleSearch?.(void 0, columns.getHiddenColumns(table.getState().columnVisibility));
+    }
     if (typeof rowId === "string") {
+      hasScrolledToPendingRow.current = false;
       setPendingFocusRowId(rowId);
     }
     setShowFilterResetDialog(false);
@@ -104,8 +126,19 @@ function Alert(props) {
     }
     const visibleIndex = getVisibleRowIndex(pendingFocusRowId);
     if (visibleIndex > -1) {
-      scrollToRow(visibleIndex);
+      scrollToRow(getDatasetRowIndex(visibleIndex));
       setPendingFocusRowId(null);
+      hasScrolledToPendingRow.current = false;
+    } else if (isDataLoader2) {
+      const datasetIndex = pendingChangesWithErrors.find((change) => change.rowId === pendingFocusRowId)?.index;
+      const targetPageLoaded = datasetIndex !== void 0 && !!tableMeta.server.pages?.includes(Math.floor(datasetIndex / tableMeta.server.pageSize));
+      if (datasetIndex === void 0 || targetPageLoaded && hasScrolledToPendingRow.current) {
+        setPendingFocusRowId(null);
+        hasScrolledToPendingRow.current = false;
+      } else {
+        hasScrolledToPendingRow.current = true;
+        scrollToIndex(datasetIndex, { align: "center" });
+      }
     }
   }, [pendingFocusRowId, visibleRows]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Alert$1.Alert, { ...attributes, state: "error" }, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, title), " ", message), /* @__PURE__ */ React.createElement(

package/dist/components/Table3/components/Editing/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { AlertProps as BaseAlertProps, DialogProps } from '@/components';\nimport { Alert as BaseAlert, Button, Dialog, Inline, Tooltip, useLocalization } from '@/components';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = getTableMeta(table);\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : undefined;\n\n        if (rowIdentity !== null && rowIdentity !== undefined) {\n            label = String(rowIdentity);\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/u)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["useLocalization","getTableMeta","Tooltip","BaseAlert","Dialog","Inline","Button"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { AlertProps as BaseAlertProps, DialogProps } from '@/components';\nimport { Alert as BaseAlert, Button, Dialog, Inline, Tooltip, useLocalization } from '@/components';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { getHiddenColumns } from '@/primitives/Table/useTableManager/util/columns';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = getTableMeta(table);\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    // whether the pending focus effect has already scrolled towards the pending row's stored index\n    const hasScrolledToPendingRow = React.useRef(false);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const isDataLoader2 = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2;\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        // rows in unloaded dataloader2 pages are placeholders with an index-based id, which can\n        // collide with a real row id - so only match rows that actually have data\n        return visibleRows.findIndex(row => row.original !== undefined && row.id === rowId);\n    }\n\n    // with dataloader2 the row model only contains the loaded window of pages while row indexes span\n    // the full dataset, so a row model index has to be mapped onto its dataset index before scrolling\n    function getDatasetRowIndex(visibleIndex: number) {\n        if (!isDataLoader2) {\n            return visibleIndex;\n        }\n\n        const pageSize = tableMeta.server.pageSize;\n        const pageIndex = tableMeta.server.pages?.[Math.floor(visibleIndex / pageSize)];\n\n        // page 0 is a valid loaded page, so only fall back when the page is actually unknown\n        if (pageIndex === undefined) {\n            return visibleIndex;\n        }\n\n        return pageIndex * pageSize + (visibleIndex % pageSize);\n    }\n\n    function hasActiveFilters() {\n        return !!table.getState().columnFilters.length || !!table.getState().globalFilter;\n    }\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n\n        const handleClick = () => {\n            // the pending focus effect below owns scrolling/focusing: it scrolls immediately when the row\n            // is in the row model, and chases the row into view when it sits in an unloaded dataloader2\n            // page (with no active filters a missing row isn't filtered out, just not loaded yet)\n            if (getVisibleRowIndex(pendingChangeWithError.rowId) > -1 || (isDataLoader2 && !hasActiveFilters())) {\n                hasScrolledToPendingRow.current = false;\n                setPendingFocusRowId(pendingChangeWithError.rowId);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : undefined;\n\n        if (rowIdentity !== null && rowIdentity !== undefined) {\n            label = String(rowIdentity);\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/u)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        const rowId = showFilterResetDialog;\n        const search = table.getState().globalFilter;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // resetting column filters reloads dataloader2 data through the filter listener, but its\n        // server-side search only reloads when the search handler is called explicitly\n        if (isDataLoader2 && search) {\n            tableMeta.search.handleSearch?.(undefined, getHiddenColumns(table.getState().columnVisibility));\n        }\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            hasScrolledToPendingRow.current = false;\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // scrolls to and focuses the pending row as soon as it is (back) in the row model, e.g. after the\n    // filters have been reset or, with dataloader2, once the page containing the row has loaded\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(getDatasetRowIndex(visibleIndex));\n            setPendingFocusRowId(null);\n            hasScrolledToPendingRow.current = false;\n        } else if (isDataLoader2) {\n            const datasetIndex = pendingChangesWithErrors.find(change => change.rowId === pendingFocusRowId)?.index;\n            const targetPageLoaded =\n                datasetIndex !== undefined &&\n                !!tableMeta.server.pages?.includes(Math.floor(datasetIndex / tableMeta.server.pageSize));\n\n            // stop chasing when the change is gone, or when the page at the stored index has loaded\n            // without the row - the snapshot is stale (e.g. sorting changed since the error was recorded)\n            if (datasetIndex === undefined || (targetPageLoaded && hasScrolledToPendingRow.current)) {\n                setPendingFocusRowId(null);\n                hasScrolledToPendingRow.current = false;\n            } else {\n                // the row sits in a page that isn't loaded - scroll towards its last known dataset index so\n                // the skeleton rows load their pages, then this effect runs again once the row model updates\n                hasScrolledToPendingRow.current = true;\n                scrollToIndex(datasetIndex, { align: 'center' });\n            }\n        }\n    }, [pendingFocusRowId, visibleRows]);\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["useLocalization","getTableMeta","Tooltip","getHiddenColumns","BaseAlert","Dialog","Inline","Button"],"mappings":"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"}

package/dist/components/Table3/components/Editing/Alert.js

@@ -1,4 +1,5 @@
 import React__default from "react";
+import { getHiddenColumns } from "../../../../primitives/Table/useTableManager/util/columns.js";
 import { getTableMeta } from "../../../../primitives/Table/useTableManager/util/rows.js";
 import { useLocalization } from "../../../Provider/Localization.js";
 import { Tooltip } from "../../../Tooltip/Tooltip.js";
@@ -13,10 +14,26 @@ function Alert(props) {
   const tableMeta = getTableMeta(table);
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
   const [pendingFocusRowId, setPendingFocusRowId] = React__default.useState(null);
+  const hasScrolledToPendingRow = React__default.useRef(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert();
+  const isDataLoader2 = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2;
   const visibleRows = table.getRowModel().rows;
   function getVisibleRowIndex(rowId) {
-    return visibleRows.findIndex((row) => row.id === rowId);
+    return visibleRows.findIndex((row) => row.original !== void 0 && row.id === rowId);
+  }
+  function getDatasetRowIndex(visibleIndex) {
+    if (!isDataLoader2) {
+      return visibleIndex;
+    }
+    const pageSize = tableMeta.server.pageSize;
+    const pageIndex = tableMeta.server.pages?.[Math.floor(visibleIndex / pageSize)];
+    if (pageIndex === void 0) {
+      return visibleIndex;
+    }
+    return pageIndex * pageSize + visibleIndex % pageSize;
+  }
+  function hasActiveFilters() {
+    return !!table.getState().columnFilters.length || !!table.getState().globalFilter;
   }
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
@@ -42,9 +59,9 @@ function Alert(props) {
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
     const handleClick = () => {
-      const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);
-      if (visibleIndex > -1) {
-        scrollToRow(visibleIndex);
+      if (getVisibleRowIndex(pendingChangeWithError.rowId) > -1 || isDataLoader2 && !hasActiveFilters()) {
+        hasScrolledToPendingRow.current = false;
+        setPendingFocusRowId(pendingChangeWithError.rowId);
       } else {
         setShowFilterResetDialog(pendingChangeWithError.rowId);
       }
@@ -89,9 +106,14 @@ function Alert(props) {
   });
   const handleResetFilters = () => {
     const rowId = showFilterResetDialog;
+    const search = table.getState().globalFilter;
     table.resetGlobalFilter();
     table.resetColumnFilters();
+    if (isDataLoader2 && search) {
+      tableMeta.search.handleSearch?.(void 0, getHiddenColumns(table.getState().columnVisibility));
+    }
     if (typeof rowId === "string") {
+      hasScrolledToPendingRow.current = false;
       setPendingFocusRowId(rowId);
     }
     setShowFilterResetDialog(false);
@@ -102,8 +124,19 @@ function Alert(props) {
     }
     const visibleIndex = getVisibleRowIndex(pendingFocusRowId);
     if (visibleIndex > -1) {
-      scrollToRow(visibleIndex);
+      scrollToRow(getDatasetRowIndex(visibleIndex));
       setPendingFocusRowId(null);
+      hasScrolledToPendingRow.current = false;
+    } else if (isDataLoader2) {
+      const datasetIndex = pendingChangesWithErrors.find((change) => change.rowId === pendingFocusRowId)?.index;
+      const targetPageLoaded = datasetIndex !== void 0 && !!tableMeta.server.pages?.includes(Math.floor(datasetIndex / tableMeta.server.pageSize));
+      if (datasetIndex === void 0 || targetPageLoaded && hasScrolledToPendingRow.current) {
+        setPendingFocusRowId(null);
+        hasScrolledToPendingRow.current = false;
+      } else {
+        hasScrolledToPendingRow.current = true;
+        scrollToIndex(datasetIndex, { align: "center" });
+      }
     }
   }, [pendingFocusRowId, visibleRows]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Alert$1, { ...attributes, state: "error" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, title), " ", message), /* @__PURE__ */ React__default.createElement(

package/dist/components/Table3/components/Editing/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { AlertProps as BaseAlertProps, DialogProps } from '@/components';\nimport { Alert as BaseAlert, Button, Dialog, Inline, Tooltip, useLocalization } from '@/components';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = getTableMeta(table);\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        return visibleRows.findIndex(row => row.id === rowId);\n    }\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n\n        const handleClick = () => {\n            const visibleIndex = getVisibleRowIndex(pendingChangeWithError.rowId);\n\n            if (visibleIndex > -1) {\n                scrollToRow(visibleIndex);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : undefined;\n\n        if (rowIdentity !== null && rowIdentity !== undefined) {\n            label = String(rowIdentity);\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/u)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        const rowId = showFilterResetDialog;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // once the filters are reset and the previously hidden row is visible again, scroll to and focus it\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(visibleIndex);\n            setPendingFocusRowId(null);\n        }\n    }, [pendingFocusRowId, visibleRows]);\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["React","BaseAlert"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Table3/components/Editing/Alert.tsx"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport type { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport React from 'react';\n\nimport type { AlertProps as BaseAlertProps, DialogProps } from '@/components';\nimport { Alert as BaseAlert, Button, Dialog, Inline, Tooltip, useLocalization } from '@/components';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { getHiddenColumns } from '@/primitives/Table/useTableManager/util/columns';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype AlertProps<TType = unknown> = Omit<BaseAlertProps, 'children'> & {\n    scrollToIndex: (index: number, options: ReactVirtualScrollToOptions) => void;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Alert<TType = unknown>(props: AlertProps<TType>) {\n    const { scrollToIndex, table, tableRef, ...attributes } = props;\n    const { texts } = useLocalization();\n    const validationTexts = texts.table3.editing.validation;\n    const tableMeta = getTableMeta(table);\n    const [showFilterResetDialog, setShowFilterResetDialog] = React.useState<string | false>(false);\n    // row to scroll to and focus once the filters have been reset and it becomes visible again\n    const [pendingFocusRowId, setPendingFocusRowId] = React.useState<string | null>(null);\n    // whether the pending focus effect has already scrolled towards the pending row's stored index\n    const hasScrolledToPendingRow = React.useRef(false);\n    const pendingChangesWithErrors = tableMeta.editing.getErrorsShownInAlert<TType>();\n\n    const isDataLoader2 = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2;\n    const visibleRows = table.getRowModel().rows;\n\n    function getVisibleRowIndex(rowId: string) {\n        // rows in unloaded dataloader2 pages are placeholders with an index-based id, which can\n        // collide with a real row id - so only match rows that actually have data\n        return visibleRows.findIndex(row => row.original !== undefined && row.id === rowId);\n    }\n\n    // with dataloader2 the row model only contains the loaded window of pages while row indexes span\n    // the full dataset, so a row model index has to be mapped onto its dataset index before scrolling\n    function getDatasetRowIndex(visibleIndex: number) {\n        if (!isDataLoader2) {\n            return visibleIndex;\n        }\n\n        const pageSize = tableMeta.server.pageSize;\n        const pageIndex = tableMeta.server.pages?.[Math.floor(visibleIndex / pageSize)];\n\n        // page 0 is a valid loaded page, so only fall back when the page is actually unknown\n        if (pageIndex === undefined) {\n            return visibleIndex;\n        }\n\n        return pageIndex * pageSize + (visibleIndex % pageSize);\n    }\n\n    function hasActiveFilters() {\n        return !!table.getState().columnFilters.length || !!table.getState().globalFilter;\n    }\n\n    function scrollToRow(rowIndex: number) {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n\n        requestAnimationFrame(() => {\n            const cell = tableRef.current?.querySelector(\n                'tbody > tr[data-row-active=\"true\"] > td[data-cell-editing-invalid=\"true\"]'\n            );\n\n            if (cell) {\n                (cell as HTMLElement).focus?.();\n            }\n        });\n    }\n\n    // generate the \"N unsaved entries\" title\n    const title = (\n        pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural\n    ).replace('[COUNT]', String(pendingChangesWithErrors.length));\n\n    // generate links to each invalid row, to go into the error message\n    const links: React.ReactNode[] = [];\n    const visibleColumns = table.getVisibleFlatColumns().map(c => c.id);\n    const rowIdentityColumn =\n        // table.getColumn(columName) throw error in strict dev mode. Related thread: https://github.com/TanStack/table/discussions/5505\n        tableMeta.rowIdentityAccessor && visibleColumns.includes(String(tableMeta.rowIdentityAccessor))\n            ? table.getAllColumns().find(x => x.id === String(tableMeta.rowIdentityAccessor))\n            : undefined;\n\n    pendingChangesWithErrors.forEach((pendingChangeWithError, index) => {\n        // if appropriate, concatenate the item with the text \"and\"\n        if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {\n            // Add space before and after `messageAnd` text\n            links.push(` ${validationTexts.alert.messageAnd} `);\n        }\n\n        const handleClick = () => {\n            // the pending focus effect below owns scrolling/focusing: it scrolls immediately when the row\n            // is in the row model, and chases the row into view when it sits in an unloaded dataloader2\n            // page (with no active filters a missing row isn't filtered out, just not loaded yet)\n            if (getVisibleRowIndex(pendingChangeWithError.rowId) > -1 || (isDataLoader2 && !hasActiveFilters())) {\n                hasScrolledToPendingRow.current = false;\n                setPendingFocusRowId(pendingChangeWithError.rowId);\n            } else {\n                setShowFilterResetDialog(pendingChangeWithError.rowId);\n            }\n        };\n\n        let tooltip;\n\n        if (pendingChangeWithError.errors.row) {\n            tooltip = pendingChangeWithError.errors.row;\n        } else {\n            const firstCellErrorColumnId = Object.keys(pendingChangeWithError.errors.cells)[0];\n            const columnName = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)?.columnDef.meta?.header;\n\n            if (columnName && firstCellErrorColumnId) {\n                tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;\n            }\n        }\n\n        let row;\n        try {\n            row = table.getRow(pendingChangeWithError.rowId).original;\n        } catch {\n            // because of server loading, some rows may not be accessible\n        }\n\n        // the row identity when there is one, otherwise the 1-based position, which server loading can leave unknown\n        let label = '';\n\n        const rowIdentity = rowIdentityColumn ? row?.[rowIdentityColumn.id as keyof TType] : undefined;\n\n        if (rowIdentity !== null && rowIdentity !== undefined) {\n            label = String(rowIdentity);\n        } else if (pendingChangeWithError.index !== undefined) {\n            label = String(pendingChangeWithError.index + 1);\n        }\n\n        links.push(\n            <Tooltip key={pendingChangeWithError.rowId} title={tooltip ?? ''}>\n                <span className=\"text-blue\" onClick={handleClick} role=\"button\">\n                    {label}\n                </span>\n            </Tooltip>\n        );\n\n        // if appropriate, concatenate the item with the text \",\"\n        if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {\n            links.push(', ');\n        }\n    });\n\n    // generate the \"Row N is incomplete and hasn't been saved\" error message\n    const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural)\n        .split(/(\\[\\w+\\])/u)\n        .map(part => {\n            if (part === '[COLUMN]') {\n                return rowIdentityColumn?.columnDef.meta?.header ?? validationTexts.alert.messageRow;\n            }\n\n            if (part === '[ROW]') {\n                return links;\n            }\n\n            return part;\n        });\n\n    const handleResetFilters = () => {\n        const rowId = showFilterResetDialog;\n        const search = table.getState().globalFilter;\n\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n\n        // resetting column filters reloads dataloader2 data through the filter listener, but its\n        // server-side search only reloads when the search handler is called explicitly\n        if (isDataLoader2 && search) {\n            tableMeta.search.handleSearch?.(undefined, getHiddenColumns(table.getState().columnVisibility));\n        }\n\n        // defer focusing until the row model has re-rendered with the filters cleared,\n        // otherwise the row isn't in the model/DOM yet\n        if (typeof rowId === 'string') {\n            hasScrolledToPendingRow.current = false;\n            setPendingFocusRowId(rowId);\n        }\n\n        setShowFilterResetDialog(false);\n    };\n\n    // scrolls to and focuses the pending row as soon as it is (back) in the row model, e.g. after the\n    // filters have been reset or, with dataloader2, once the page containing the row has loaded\n    React.useEffect(() => {\n        if (pendingFocusRowId === null) {\n            return;\n        }\n\n        const visibleIndex = getVisibleRowIndex(pendingFocusRowId);\n\n        if (visibleIndex > -1) {\n            scrollToRow(getDatasetRowIndex(visibleIndex));\n            setPendingFocusRowId(null);\n            hasScrolledToPendingRow.current = false;\n        } else if (isDataLoader2) {\n            const datasetIndex = pendingChangesWithErrors.find(change => change.rowId === pendingFocusRowId)?.index;\n            const targetPageLoaded =\n                datasetIndex !== undefined &&\n                !!tableMeta.server.pages?.includes(Math.floor(datasetIndex / tableMeta.server.pageSize));\n\n            // stop chasing when the change is gone, or when the page at the stored index has loaded\n            // without the row - the snapshot is stale (e.g. sorting changed since the error was recorded)\n            if (datasetIndex === undefined || (targetPageLoaded && hasScrolledToPendingRow.current)) {\n                setPendingFocusRowId(null);\n                hasScrolledToPendingRow.current = false;\n            } else {\n                // the row sits in a page that isn't loaded - scroll towards its last known dataset index so\n                // the skeleton rows load their pages, then this effect runs again once the row model updates\n                hasScrolledToPendingRow.current = true;\n                scrollToIndex(datasetIndex, { align: 'center' });\n            }\n        }\n    }, [pendingFocusRowId, visibleRows]);\n\n    return (\n        <>\n            <BaseAlert {...attributes} state=\"error\">\n                <span className=\"font-bold\">{title}</span>&nbsp;{message}\n            </BaseAlert>\n            <FilterResetDialog\n                open={showFilterResetDialog !== false}\n                onChange={() => setShowFilterResetDialog(false)}\n                onSubmit={handleResetFilters}\n            />\n        </>\n    );\n}\n\ntype FilterResetDialogProps = Omit<DialogProps, 'children'> & {\n    onSubmit: () => void;\n};\n\nfunction FilterResetDialog(props: FilterResetDialogProps) {\n    const { onSubmit: handleSubmit, ...dialogProps } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Dialog {...dialogProps} size=\"xs\">\n            <Dialog.Content aria-label={texts.table3.editing.validation.resetFiltersDialog.title}>\n                <Dialog.Title>{texts.table3.editing.validation.resetFiltersDialog.title}</Dialog.Title>\n                <p>{texts.table3.editing.validation.resetFiltersDialog.description}</p>\n                <Dialog.Footer>\n                    <Inline spacing={8} alignInline=\"end\">\n                        <Dialog.Close>\n                            <Button>{texts.table3.editing.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button variant=\"primary\" onClick={handleSubmit}>\n                            {texts.table3.editing.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Inline>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["React","BaseAlert"],"mappings":"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"}

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

@@ -37,16 +37,21 @@ const MemoedGroupedCell = React.memo(function MemoedGroupedCell2(props) {
   const { canShowActions, cellRef, children, colSpan, rowActions: rowActions$1, rowId, subRows, table, ...attributes } = props;
   return (
     // pr-1 is needed to align group row actions with row actions in sibling rows, if present
-    /* @__PURE__ */ React.createElement("td", { ...attributes, className: "!pr-1", ref: cellRef, style: { gridColumn: `span ${colSpan} / span ${colSpan}` } }, /* @__PURE__ */ React.createElement("span", { className: "grow" }, children), rowActions.hasRowActions(rowActions$1) && canShowActions ? /* @__PURE__ */ React.createElement(
-      Actions.Actions,
-      {
-        actions: rowActions$1,
-        actionsLength: 4,
-        data: subRows,
-        isActiveRow: true,
-        rowId,
-        table
-      }
+    /* @__PURE__ */ React.createElement("td", { ...attributes, className: "!pr-1", ref: cellRef, style: { gridColumn: `span ${colSpan} / span ${colSpan}` } }, /* @__PURE__ */ React.createElement("span", { className: "grow" }, children), rowActions.hasRowActions(rowActions$1) && canShowActions ? (
+      // the cell spans the full row, so when the table overflows horizontally the actions would sit
+      // beyond the scrollport - stick this wrapper to its right edge, like the row actions
+      // column in sibling rows (right-1 matches that column's pr-1 inset)
+      /* @__PURE__ */ React.createElement("span", { className: "sticky right-1 bg-[inherit] print:hidden", "data-taco": "table-row-group-actions" }, /* @__PURE__ */ React.createElement(
+        Actions.Actions,
+        {
+          actions: rowActions$1,
+          actionsLength: 4,
+          data: subRows,
+          isActiveRow: true,
+          rowId,
+          table
+        }
+      ))
     ) : null)
   );
 });

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 } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionConfigGroupRenderer, TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { hasRowActions } from '../../../../../useTableManager/util/rowActions';\nimport { getTableMeta } from '../../../../../useTableManager/util/rows';\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 = getTableMeta(table);\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.Ref<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[] | TableRowActionConfigGroupRenderer<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            {hasRowActions(rowActions) && canShowActions ? (\n                <RowGroupActions<TType>\n                    // TOOD: remove \"as\" when we'll migrate to a new API and get rid of mixed array types\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":["getTableMeta","getCellAttributes","RowContext","isInternalColumn","MemoedGroupedCell","rowActions","hasRowActions","RowGroupActions"],"mappings":";;;;;;;;;AAYO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAYA,KAAAA,aAAa,KAAK;AACpC,QAAM,aAAaC,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,SAAA,YAASC,cAAY,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,GAChCC,WAAAA,cAAcD,YAAU,KAAK,iBAC1B,sBAAA;AAAA,MAACE,QAAAA;AAAAA,MAAA;AAAA,QAEG,SAASF;AAAAA,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 } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionConfigGroupRenderer, TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { hasRowActions } from '../../../../../useTableManager/util/rowActions';\nimport { getTableMeta } from '../../../../../useTableManager/util/rows';\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 = getTableMeta(table);\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.Ref<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[] | TableRowActionConfigGroupRenderer<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            {hasRowActions(rowActions) && canShowActions ? (\n                // the cell spans the full row, so when the table overflows horizontally the actions would sit\n                // beyond the scrollport - stick this wrapper to its right edge, like the row actions\n                // column in sibling rows (right-1 matches that column's pr-1 inset)\n                <span className=\"sticky right-1 bg-[inherit] print:hidden\" data-taco=\"table-row-group-actions\">\n                    <RowGroupActions<TType>\n                        // TOOD: remove \"as\" when we'll migrate to a new API and get rid of mixed array types\n                        actions={rowActions as any}\n                        actionsLength={4}\n                        data={subRows}\n                        isActiveRow\n                        rowId={rowId}\n                        table={table}\n                    />\n                </span>\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["getTableMeta","getCellAttributes","RowContext","isInternalColumn","MemoedGroupedCell","rowActions","hasRowActions","RowGroupActions"],"mappings":";;;;;;;;;AAYO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAYA,KAAAA,aAAa,KAAK;AACpC,QAAM,aAAaC,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,SAAA,YAASC,cAAY,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,GAChCC,WAAAA,cAAcD,YAAU,KAAK;AAAA;AAAA;AAAA;AAAA,MAI1B,sBAAA,cAAC,QAAA,EAAK,WAAU,4CAA2C,aAAU,6BACjE,sBAAA;AAAA,QAACE,QAAAA;AAAAA,QAAA;AAAA,UAEG,SAASF;AAAAA,UACT,eAAe;AAAA,UACf,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,QAAA;AAAA,MAAA,CAER;AAAA,QACA,IACR;AAAA;AAER,CAAC;;"}

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

@@ -35,16 +35,21 @@ const MemoedGroupedCell = React__default.memo(function MemoedGroupedCell2(props)
   const { canShowActions, cellRef, children, colSpan, rowActions, rowId, subRows, table, ...attributes } = props;
   return (
     // pr-1 is needed to align group row actions with row actions in sibling rows, if present
-    /* @__PURE__ */ React__default.createElement("td", { ...attributes, className: "!pr-1", ref: cellRef, style: { gridColumn: `span ${colSpan} / span ${colSpan}` } }, /* @__PURE__ */ React__default.createElement("span", { className: "grow" }, children), hasRowActions(rowActions) && canShowActions ? /* @__PURE__ */ React__default.createElement(
-      Actions,
-      {
-        actions: rowActions,
-        actionsLength: 4,
-        data: subRows,
-        isActiveRow: true,
-        rowId,
-        table
-      }
+    /* @__PURE__ */ React__default.createElement("td", { ...attributes, className: "!pr-1", ref: cellRef, style: { gridColumn: `span ${colSpan} / span ${colSpan}` } }, /* @__PURE__ */ React__default.createElement("span", { className: "grow" }, children), hasRowActions(rowActions) && canShowActions ? (
+      // the cell spans the full row, so when the table overflows horizontally the actions would sit
+      // beyond the scrollport - stick this wrapper to its right edge, like the row actions
+      // column in sibling rows (right-1 matches that column's pr-1 inset)
+      /* @__PURE__ */ React__default.createElement("span", { className: "sticky right-1 bg-[inherit] print:hidden", "data-taco": "table-row-group-actions" }, /* @__PURE__ */ React__default.createElement(
+        Actions,
+        {
+          actions: rowActions,
+          actionsLength: 4,
+          data: subRows,
+          isActiveRow: true,
+          rowId,
+          table
+        }
+      ))
     ) : null)
   );
 });

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 } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionConfigGroupRenderer, TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { hasRowActions } from '../../../../../useTableManager/util/rowActions';\nimport { getTableMeta } from '../../../../../useTableManager/util/rows';\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 = getTableMeta(table);\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.Ref<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[] | TableRowActionConfigGroupRenderer<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            {hasRowActions(rowActions) && canShowActions ? (\n                <RowGroupActions<TType>\n                    // TOOD: remove \"as\" when we'll migrate to a new API and get rid of mixed array types\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":";;;;;;;AAYO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,aAAa,KAAK;AACpC,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,cAAc,UAAU,KAAK,iBAC1BA,+BAAA;AAAA,MAACE;AAAAA,MAAA;AAAA,QAEG,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 } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableRowActionConfigGroupRenderer, TableRowActionGroupRenderer } from '../../../../../types';\nimport { isInternalColumn } from '../../../../../useTableManager/util/columns';\nimport { hasRowActions } from '../../../../../useTableManager/util/rowActions';\nimport { getTableMeta } from '../../../../../useTableManager/util/rows';\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 = getTableMeta(table);\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.Ref<HTMLTableCellElement>;\n    colSpan: number;\n    rowActions?: TableRowActionGroupRenderer<TType>[] | TableRowActionConfigGroupRenderer<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            {hasRowActions(rowActions) && canShowActions ? (\n                // the cell spans the full row, so when the table overflows horizontally the actions would sit\n                // beyond the scrollport - stick this wrapper to its right edge, like the row actions\n                // column in sibling rows (right-1 matches that column's pr-1 inset)\n                <span className=\"sticky right-1 bg-[inherit] print:hidden\" data-taco=\"table-row-group-actions\">\n                    <RowGroupActions<TType>\n                        // TOOD: remove \"as\" when we'll migrate to a new API and get rid of mixed array types\n                        actions={rowActions as any}\n                        actionsLength={4}\n                        data={subRows}\n                        isActiveRow\n                        rowId={rowId}\n                        table={table}\n                    />\n                </span>\n            ) : null}\n        </td>\n    );\n}) as <TType = unknown>(props: MemoedGroupedCellProps<TType>) => React.JSX.Element;\n"],"names":["React","MemoedGroupedCell","RowGroupActions"],"mappings":";;;;;;;AAYO,SAAS,YAA6B,OAAsC;AAC/E,QAAM,EAAE,MAAM,SAAS,OAAO,kBAAkB;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,YAAY,aAAa,KAAK;AACpC,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,cAAc,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA,MAI1BA,+BAAA,cAAC,QAAA,EAAK,WAAU,4CAA2C,aAAU,6BACjEA,+BAAA;AAAA,QAACE;AAAAA,QAAA;AAAA,UAEG,SAAS;AAAA,UACT,eAAe;AAAA,UACf,MAAM;AAAA,UACN,aAAW;AAAA,UACX;AAAA,UACA;AAAA,QAAA;AAAA,MAAA,CAER;AAAA,QACA,IACR;AAAA;AAER,CAAC;"}

package/dist/primitives/Table/Core/components/Columns/Internal/Selection.cjs

@@ -46,7 +46,7 @@ const toggleBetween = (fromRowIndex, toRowIndex) => {
 function Cell(context) {
   const { texts } = Localization.useLocalization();
   const { row, table } = context;
-  const { hideInternalColumns, rowIndex } = React.useContext(RowContext.RowContext);
+  const { hideInternalColumns } = React.useContext(RowContext.RowContext);
   const tableMeta = rows.getTableMeta(table);
   if (hideInternalColumns || table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped()) {
     return null;
@@ -59,7 +59,7 @@ function Cell(context) {
     if (row.getIsGrouped()) {
       row.subRows.forEach((row2) => row2.toggleSelected());
     } else if (event.shiftKey) {
-      const [fromIndex, toIndex] = toggleBetween(tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0, rowIndex);
+      const lastSelectedRowId = tableMeta.rowSelection.lastSelectedRowId.current;
       if (tableMeta.server.loadAllIfNeeded) {
         const hiddenColumns = columns.getHiddenColumns(table.getState().columnVisibility);
         await tableMeta.server.loadAllIfNeeded(
@@ -69,15 +69,24 @@ function Cell(context) {
           tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : void 0
         );
       }
-      const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
-      table.setRowSelection((currentRowSelection) => ({
-        ...currentRowSelection,
-        ...selectedRows.filter((row2) => row2.getCanSelect()).reduce((state, row2) => ({ ...state, [row2.id]: true }), {})
-      }));
+      requestAnimationFrame(() => {
+        const rows2 = table.getRowModel().rows;
+        const clickedRowIndex = rows2.findIndex(({ id }) => id === row.id);
+        const lastSelectedRowIndex = lastSelectedRowId === void 0 ? 0 : rows2.findIndex(({ id }) => id === lastSelectedRowId);
+        const [fromIndex, toIndex] = toggleBetween(
+          lastSelectedRowIndex === -1 ? clickedRowIndex : lastSelectedRowIndex,
+          clickedRowIndex
+        );
+        const selectedRows = clickedRowIndex === -1 ? [row] : rows2.slice(fromIndex, toIndex + 1);
+        table.setRowSelection((currentRowSelection) => ({
+          ...currentRowSelection,
+          ...selectedRows.filter((row2) => row2.getCanSelect()).reduce((state, row2) => ({ ...state, [row2.id]: true }), {})
+        }));
+      });
     } else {
       row.toggleSelected();
     }
-    tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
+    tableMeta.rowSelection.lastSelectedRowId.current = row.id;
   };
   return /* @__PURE__ */ React.createElement(
     Tooltip.Tooltip,

package/dist/primitives/Table/Core/components/Columns/Internal/Selection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Selection.tsx"],"sourcesContent":["import type {\n    HeaderContext as ReactTableHeaderContext,\n    CellContext as ReactTableCellContext,\n    RowSelectionState,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Checkbox, Spinner, Tooltip, Shortcut, useLocalization } from '@/components';\n\nimport type { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { getHiddenColumns } from '../../../../useTableManager/util/columns';\nimport { getTableMeta } from '../../../../useTableManager/util/rows';\nimport { RowContext } from '../../Row/RowContext';\n\nfunction Header<TType = unknown>(context: ReactTableHeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { table } = context;\n    const tableMeta = getTableMeta(table);\n\n    const isAllRowsSelected = table.getIsAllRowsSelected();\n    const isSomeRowsSelected = table.getIsSomeRowsSelected();\n    const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;\n\n    const handleChange = async (checked: boolean) => {\n        // load all data if that is possible (only needed when selecting all, not when deselecting)\n        if (checked && tableMeta.server.loadAllIfNeeded) {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.server.loadAllIfNeeded(\n                table.getState().sorting,\n                table.getState().columnFilters,\n                hiddenColumns,\n                tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n            );\n        }\n\n        // setTimeout here fixes issue related React 18's automatic batching:\n        // Selection should be applied after all rows are loaded\n        setTimeout(() => table.toggleAllRowsSelected(checked), 1);\n    };\n\n    return (\n        <Tooltip title={title}>\n            {tableMeta.server.loading ? (\n                <Spinner className=\"h-5 w-5 text-blue-500\" />\n            ) : (\n                <Checkbox\n                    aria-label={title}\n                    checked={isAllRowsSelected}\n                    indeterminate={isSomeRowsSelected && !isAllRowsSelected}\n                    onChange={handleChange}\n                />\n            )}\n        </Tooltip>\n    );\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nfunction Cell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { row, table } = context;\n    const { hideInternalColumns, rowIndex } = React.useContext(RowContext);\n    const tableMeta = getTableMeta(table);\n\n    if (hideInternalColumns || (table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped())) {\n        return null;\n    }\n\n    const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();\n    const canSelect = row.getCanSelect();\n    const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;\n\n    const handleClick = async (event: React.MouseEvent) => {\n        event.stopPropagation();\n\n        if (row.getIsGrouped()) {\n            row.subRows.forEach(row => row.toggleSelected());\n        } else if (event.shiftKey) {\n            const [fromIndex, toIndex] = toggleBetween(tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0, rowIndex);\n\n            if (tableMeta.server.loadAllIfNeeded) {\n                const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n                // don't pass the search query because we need all data - not filtered data\n                await tableMeta.server.loadAllIfNeeded(\n                    table.getState().sorting,\n                    table.getState().columnFilters,\n                    hiddenColumns,\n                    tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n                );\n            }\n\n            const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);\n            table.setRowSelection((currentRowSelection: RowSelectionState) => ({\n                ...currentRowSelection,\n                ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({ ...state, [row.id]: true }), {}),\n            }));\n        } else {\n            row.toggleSelected();\n        }\n\n        tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;\n    };\n\n    return (\n        <Tooltip\n            hidden={!canSelect}\n            title={\n                <>\n                    {title}\n                    <Shortcut className=\"ml-2\" keys=\"Space\" />\n                </>\n            }>\n            <Checkbox\n                aria-label={title}\n                checked={isSelected}\n                onClick={handleClick}\n                disabled={!canSelect}\n                // this is necessary to remove console spam from eslint\n                onChange={() => false}\n            />\n        </Tooltip>\n    );\n}\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    size: 40,\n    meta: {\n        align: 'center',\n        className: '!px-1',\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n        headerClassName: '!px-1',\n    },\n};\n"],"names":["useLocalization","getTableMeta","getHiddenColumns","Tooltip","Spinner","Checkbox","RowContext","row","Shortcut"],"mappings":"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"}
+{"version":3,"file":"Selection.cjs","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Selection.tsx"],"sourcesContent":["import type {\n    HeaderContext as ReactTableHeaderContext,\n    CellContext as ReactTableCellContext,\n    RowSelectionState,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Checkbox, Spinner, Tooltip, Shortcut, useLocalization } from '@/components';\n\nimport type { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { getHiddenColumns } from '../../../../useTableManager/util/columns';\nimport { getTableMeta } from '../../../../useTableManager/util/rows';\nimport { RowContext } from '../../Row/RowContext';\n\nfunction Header<TType = unknown>(context: ReactTableHeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { table } = context;\n    const tableMeta = getTableMeta(table);\n\n    const isAllRowsSelected = table.getIsAllRowsSelected();\n    const isSomeRowsSelected = table.getIsSomeRowsSelected();\n    const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;\n\n    const handleChange = async (checked: boolean) => {\n        // load all data if that is possible (only needed when selecting all, not when deselecting)\n        if (checked && tableMeta.server.loadAllIfNeeded) {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.server.loadAllIfNeeded(\n                table.getState().sorting,\n                table.getState().columnFilters,\n                hiddenColumns,\n                tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n            );\n        }\n\n        // setTimeout here fixes issue related React 18's automatic batching:\n        // Selection should be applied after all rows are loaded\n        setTimeout(() => table.toggleAllRowsSelected(checked), 1);\n    };\n\n    return (\n        <Tooltip title={title}>\n            {tableMeta.server.loading ? (\n                <Spinner className=\"h-5 w-5 text-blue-500\" />\n            ) : (\n                <Checkbox\n                    aria-label={title}\n                    checked={isAllRowsSelected}\n                    indeterminate={isSomeRowsSelected && !isAllRowsSelected}\n                    onChange={handleChange}\n                />\n            )}\n        </Tooltip>\n    );\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nfunction Cell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { row, table } = context;\n    const { hideInternalColumns } = React.useContext(RowContext);\n    const tableMeta = getTableMeta(table);\n\n    if (hideInternalColumns || (table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped())) {\n        return null;\n    }\n\n    const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();\n    const canSelect = row.getCanSelect();\n    const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;\n\n    const handleClick = async (event: React.MouseEvent) => {\n        event.stopPropagation();\n\n        if (row.getIsGrouped()) {\n            row.subRows.forEach(row => row.toggleSelected());\n        } else if (event.shiftKey) {\n            // the anchor must be read before it is reassigned to the clicked row below\n            const lastSelectedRowId = tableMeta.rowSelection.lastSelectedRowId.current;\n\n            if (tableMeta.server.loadAllIfNeeded) {\n                const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n                // don't pass the search query because we need all data - not filtered data\n                await tableMeta.server.loadAllIfNeeded(\n                    table.getState().sorting,\n                    table.getState().columnFilters,\n                    hiddenColumns,\n                    tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n                );\n            }\n\n            // rows fetched by loadAllIfNeeded only reach the row model when React re-renders after this handler, so resolving\n            // the ids synchronously would read stale rows - defer to the next frame (handleChange in Header defers too)\n            requestAnimationFrame(() => {\n                // resolve ids to visible positions - data positions (row.index) don't match them when sorted or filtered\n                const rows = table.getRowModel().rows;\n                const clickedRowIndex = rows.findIndex(({ id }) => id === row.id);\n                const lastSelectedRowIndex =\n                    lastSelectedRowId === undefined ? 0 : rows.findIndex(({ id }) => id === lastSelectedRowId);\n\n                // if the anchor row is no longer visible (e.g. filtered out), select only the clicked row\n                const [fromIndex, toIndex] = toggleBetween(\n                    lastSelectedRowIndex === -1 ? clickedRowIndex : lastSelectedRowIndex,\n                    clickedRowIndex\n                );\n                const selectedRows = clickedRowIndex === -1 ? [row] : rows.slice(fromIndex, toIndex + 1);\n\n                table.setRowSelection((currentRowSelection: RowSelectionState) => ({\n                    ...currentRowSelection,\n                    ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({ ...state, [row.id]: true }), {}),\n                }));\n            });\n        } else {\n            row.toggleSelected();\n        }\n\n        tableMeta.rowSelection.lastSelectedRowId.current = row.id;\n    };\n\n    return (\n        <Tooltip\n            hidden={!canSelect}\n            title={\n                <>\n                    {title}\n                    <Shortcut className=\"ml-2\" keys=\"Space\" />\n                </>\n            }>\n            <Checkbox\n                aria-label={title}\n                checked={isSelected}\n                onClick={handleClick}\n                disabled={!canSelect}\n                // this is necessary to remove console spam from eslint\n                onChange={() => false}\n            />\n        </Tooltip>\n    );\n}\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    size: 40,\n    meta: {\n        align: 'center',\n        className: '!px-1',\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n        headerClassName: '!px-1',\n    },\n};\n"],"names":["useLocalization","getTableMeta","getHiddenColumns","Tooltip","Spinner","Checkbox","RowContext","row","rows","Shortcut"],"mappings":"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"}

package/dist/primitives/Table/Core/components/Columns/Internal/Selection.js

@@ -44,7 +44,7 @@ const toggleBetween = (fromRowIndex, toRowIndex) => {
 function Cell(context) {
   const { texts } = useLocalization();
   const { row, table } = context;
-  const { hideInternalColumns, rowIndex } = React__default.useContext(RowContext);
+  const { hideInternalColumns } = React__default.useContext(RowContext);
   const tableMeta = getTableMeta(table);
   if (hideInternalColumns || table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped()) {
     return null;
@@ -57,7 +57,7 @@ function Cell(context) {
     if (row.getIsGrouped()) {
       row.subRows.forEach((row2) => row2.toggleSelected());
     } else if (event.shiftKey) {
-      const [fromIndex, toIndex] = toggleBetween(tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0, rowIndex);
+      const lastSelectedRowId = tableMeta.rowSelection.lastSelectedRowId.current;
       if (tableMeta.server.loadAllIfNeeded) {
         const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
         await tableMeta.server.loadAllIfNeeded(
@@ -67,15 +67,24 @@ function Cell(context) {
           tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : void 0
         );
       }
-      const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
-      table.setRowSelection((currentRowSelection) => ({
-        ...currentRowSelection,
-        ...selectedRows.filter((row2) => row2.getCanSelect()).reduce((state, row2) => ({ ...state, [row2.id]: true }), {})
-      }));
+      requestAnimationFrame(() => {
+        const rows = table.getRowModel().rows;
+        const clickedRowIndex = rows.findIndex(({ id }) => id === row.id);
+        const lastSelectedRowIndex = lastSelectedRowId === void 0 ? 0 : rows.findIndex(({ id }) => id === lastSelectedRowId);
+        const [fromIndex, toIndex] = toggleBetween(
+          lastSelectedRowIndex === -1 ? clickedRowIndex : lastSelectedRowIndex,
+          clickedRowIndex
+        );
+        const selectedRows = clickedRowIndex === -1 ? [row] : rows.slice(fromIndex, toIndex + 1);
+        table.setRowSelection((currentRowSelection) => ({
+          ...currentRowSelection,
+          ...selectedRows.filter((row2) => row2.getCanSelect()).reduce((state, row2) => ({ ...state, [row2.id]: true }), {})
+        }));
+      });
     } else {
       row.toggleSelected();
     }
-    tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
+    tableMeta.rowSelection.lastSelectedRowId.current = row.id;
   };
   return /* @__PURE__ */ React__default.createElement(
     Tooltip,

package/dist/primitives/Table/Core/components/Columns/Internal/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Selection.tsx"],"sourcesContent":["import type {\n    HeaderContext as ReactTableHeaderContext,\n    CellContext as ReactTableCellContext,\n    RowSelectionState,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Checkbox, Spinner, Tooltip, Shortcut, useLocalization } from '@/components';\n\nimport type { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { getHiddenColumns } from '../../../../useTableManager/util/columns';\nimport { getTableMeta } from '../../../../useTableManager/util/rows';\nimport { RowContext } from '../../Row/RowContext';\n\nfunction Header<TType = unknown>(context: ReactTableHeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { table } = context;\n    const tableMeta = getTableMeta(table);\n\n    const isAllRowsSelected = table.getIsAllRowsSelected();\n    const isSomeRowsSelected = table.getIsSomeRowsSelected();\n    const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;\n\n    const handleChange = async (checked: boolean) => {\n        // load all data if that is possible (only needed when selecting all, not when deselecting)\n        if (checked && tableMeta.server.loadAllIfNeeded) {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.server.loadAllIfNeeded(\n                table.getState().sorting,\n                table.getState().columnFilters,\n                hiddenColumns,\n                tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n            );\n        }\n\n        // setTimeout here fixes issue related React 18's automatic batching:\n        // Selection should be applied after all rows are loaded\n        setTimeout(() => table.toggleAllRowsSelected(checked), 1);\n    };\n\n    return (\n        <Tooltip title={title}>\n            {tableMeta.server.loading ? (\n                <Spinner className=\"h-5 w-5 text-blue-500\" />\n            ) : (\n                <Checkbox\n                    aria-label={title}\n                    checked={isAllRowsSelected}\n                    indeterminate={isSomeRowsSelected && !isAllRowsSelected}\n                    onChange={handleChange}\n                />\n            )}\n        </Tooltip>\n    );\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nfunction Cell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { row, table } = context;\n    const { hideInternalColumns, rowIndex } = React.useContext(RowContext);\n    const tableMeta = getTableMeta(table);\n\n    if (hideInternalColumns || (table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped())) {\n        return null;\n    }\n\n    const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();\n    const canSelect = row.getCanSelect();\n    const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;\n\n    const handleClick = async (event: React.MouseEvent) => {\n        event.stopPropagation();\n\n        if (row.getIsGrouped()) {\n            row.subRows.forEach(row => row.toggleSelected());\n        } else if (event.shiftKey) {\n            const [fromIndex, toIndex] = toggleBetween(tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0, rowIndex);\n\n            if (tableMeta.server.loadAllIfNeeded) {\n                const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n                // don't pass the search query because we need all data - not filtered data\n                await tableMeta.server.loadAllIfNeeded(\n                    table.getState().sorting,\n                    table.getState().columnFilters,\n                    hiddenColumns,\n                    tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n                );\n            }\n\n            const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);\n            table.setRowSelection((currentRowSelection: RowSelectionState) => ({\n                ...currentRowSelection,\n                ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({ ...state, [row.id]: true }), {}),\n            }));\n        } else {\n            row.toggleSelected();\n        }\n\n        tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;\n    };\n\n    return (\n        <Tooltip\n            hidden={!canSelect}\n            title={\n                <>\n                    {title}\n                    <Shortcut className=\"ml-2\" keys=\"Space\" />\n                </>\n            }>\n            <Checkbox\n                aria-label={title}\n                checked={isSelected}\n                onClick={handleClick}\n                disabled={!canSelect}\n                // this is necessary to remove console spam from eslint\n                onChange={() => false}\n            />\n        </Tooltip>\n    );\n}\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    size: 40,\n    meta: {\n        align: 'center',\n        className: '!px-1',\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n        headerClassName: '!px-1',\n    },\n};\n"],"names":["React","row"],"mappings":"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"}
+{"version":3,"file":"Selection.js","sources":["../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Selection.tsx"],"sourcesContent":["import type {\n    HeaderContext as ReactTableHeaderContext,\n    CellContext as ReactTableCellContext,\n    RowSelectionState,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport { Checkbox, Spinner, Tooltip, Shortcut, useLocalization } from '@/components';\n\nimport type { useTableManagerInternalColumn } from '../../../../useTableManager/types';\nimport { getHiddenColumns } from '../../../../useTableManager/util/columns';\nimport { getTableMeta } from '../../../../useTableManager/util/rows';\nimport { RowContext } from '../../Row/RowContext';\n\nfunction Header<TType = unknown>(context: ReactTableHeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { table } = context;\n    const tableMeta = getTableMeta(table);\n\n    const isAllRowsSelected = table.getIsAllRowsSelected();\n    const isSomeRowsSelected = table.getIsSomeRowsSelected();\n    const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;\n\n    const handleChange = async (checked: boolean) => {\n        // load all data if that is possible (only needed when selecting all, not when deselecting)\n        if (checked && tableMeta.server.loadAllIfNeeded) {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.server.loadAllIfNeeded(\n                table.getState().sorting,\n                table.getState().columnFilters,\n                hiddenColumns,\n                tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n            );\n        }\n\n        // setTimeout here fixes issue related React 18's automatic batching:\n        // Selection should be applied after all rows are loaded\n        setTimeout(() => table.toggleAllRowsSelected(checked), 1);\n    };\n\n    return (\n        <Tooltip title={title}>\n            {tableMeta.server.loading ? (\n                <Spinner className=\"h-5 w-5 text-blue-500\" />\n            ) : (\n                <Checkbox\n                    aria-label={title}\n                    checked={isAllRowsSelected}\n                    indeterminate={isSomeRowsSelected && !isAllRowsSelected}\n                    onChange={handleChange}\n                />\n            )}\n        </Tooltip>\n    );\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nfunction Cell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n    const { texts } = useLocalization();\n    const { row, table } = context;\n    const { hideInternalColumns } = React.useContext(RowContext);\n    const tableMeta = getTableMeta(table);\n\n    if (hideInternalColumns || (table.options.enableGrouping && table.getState().grouping?.length && !row.getIsGrouped())) {\n        return null;\n    }\n\n    const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();\n    const canSelect = row.getCanSelect();\n    const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;\n\n    const handleClick = async (event: React.MouseEvent) => {\n        event.stopPropagation();\n\n        if (row.getIsGrouped()) {\n            row.subRows.forEach(row => row.toggleSelected());\n        } else if (event.shiftKey) {\n            // the anchor must be read before it is reassigned to the clicked row below\n            const lastSelectedRowId = tableMeta.rowSelection.lastSelectedRowId.current;\n\n            if (tableMeta.server.loadAllIfNeeded) {\n                const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n\n                // don't pass the search query because we need all data - not filtered data\n                await tableMeta.server.loadAllIfNeeded(\n                    table.getState().sorting,\n                    table.getState().columnFilters,\n                    hiddenColumns,\n                    tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : undefined\n                );\n            }\n\n            // rows fetched by loadAllIfNeeded only reach the row model when React re-renders after this handler, so resolving\n            // the ids synchronously would read stale rows - defer to the next frame (handleChange in Header defers too)\n            requestAnimationFrame(() => {\n                // resolve ids to visible positions - data positions (row.index) don't match them when sorted or filtered\n                const rows = table.getRowModel().rows;\n                const clickedRowIndex = rows.findIndex(({ id }) => id === row.id);\n                const lastSelectedRowIndex =\n                    lastSelectedRowId === undefined ? 0 : rows.findIndex(({ id }) => id === lastSelectedRowId);\n\n                // if the anchor row is no longer visible (e.g. filtered out), select only the clicked row\n                const [fromIndex, toIndex] = toggleBetween(\n                    lastSelectedRowIndex === -1 ? clickedRowIndex : lastSelectedRowIndex,\n                    clickedRowIndex\n                );\n                const selectedRows = clickedRowIndex === -1 ? [row] : rows.slice(fromIndex, toIndex + 1);\n\n                table.setRowSelection((currentRowSelection: RowSelectionState) => ({\n                    ...currentRowSelection,\n                    ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({ ...state, [row.id]: true }), {}),\n                }));\n            });\n        } else {\n            row.toggleSelected();\n        }\n\n        tableMeta.rowSelection.lastSelectedRowId.current = row.id;\n    };\n\n    return (\n        <Tooltip\n            hidden={!canSelect}\n            title={\n                <>\n                    {title}\n                    <Shortcut className=\"ml-2\" keys=\"Space\" />\n                </>\n            }>\n            <Checkbox\n                aria-label={title}\n                checked={isSelected}\n                onClick={handleClick}\n                disabled={!canSelect}\n                // this is necessary to remove console spam from eslint\n                onChange={() => false}\n            />\n        </Tooltip>\n    );\n}\n\nexport const renderer: useTableManagerInternalColumn = {\n    header: Header,\n    renderer: Cell,\n    size: 40,\n    meta: {\n        align: 'center',\n        className: '!px-1',\n        // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n        enableSearch: false,\n        header: '',\n        headerClassName: '!px-1',\n    },\n};\n"],"names":["React","row"],"mappings":"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"}

package/dist/primitives/Table/useTableManager/features/useTableRowSelection.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const rows = require("../util/rows.cjs");
 function useTableRowSelection(isEnabled = false, controlledSelectedRows) {
-  const lastSelectedRowIndex = React.useRef(void 0);
+  const lastSelectedRowId = React.useRef(void 0);
   const isControlled = isEnabled && controlledSelectedRows !== void 0;
   const onKeyDown = React.useCallback(
     (event, table) => {
@@ -31,7 +31,7 @@ function useTableRowSelection(isEnabled = false, controlledSelectedRows) {
     isControlled,
     controlledSelectedRows,
     handleKeyDown: isEnabled ? onKeyDown : () => void 0,
-    lastSelectedRowIndex
+    lastSelectedRowId
   };
 }
 exports.useTableRowSelection = useTableRowSelection;

package/dist/primitives/Table/useTableManager/features/useTableRowSelection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowSelection.cjs","sources":["../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { getTableMeta } from '../util/rows';\n\nexport function useTableRowSelection(isEnabled = false, controlledSelectedRows?: Record<string, boolean>) {\n    const lastSelectedRowIndex = React.useRef<number | undefined>(undefined);\n    const isControlled = isEnabled && controlledSelectedRows !== undefined;\n\n    const onKeyDown = React.useCallback(\n        <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n            if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n                return;\n            }\n\n            const rows = table.getRowModel().rows;\n\n            if (event.key === ' ') {\n                event.preventDefault();\n                const rowActiveIndex = getTableMeta(table).rowActive.rowActiveIndex;\n\n                if (rowActiveIndex !== undefined && rows[rowActiveIndex]?.getCanSelect()) {\n                    rows[rowActiveIndex]?.toggleSelected();\n                }\n\n                return;\n            }\n            if (\n                (event.ctrlKey || event.metaKey) &&\n                event.key === 'a' &&\n                !['INPUT', 'TEXTAREA'].includes((event.target as Element)?.tagName)\n            ) {\n                event.preventDefault();\n                table.toggleAllRowsSelected();\n            }\n        },\n        [isEnabled]\n    ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n    return {\n        isEnabled,\n        isControlled,\n        controlledSelectedRows,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n        lastSelectedRowIndex,\n    };\n}\n"],"names":["rows","getTableMeta"],"mappings":";;;;AAKO,SAAS,qBAAqB,YAAY,OAAO,wBAAkD;AACtG,QAAM,uBAAuB,MAAM,OAA2B,MAAS;AACvE,QAAM,eAAe,aAAa,2BAA2B;AAE7D,QAAM,YAAY,MAAM;AAAA,IACpB,CAAkB,OAAsB,UAA6B;AACjE,UAAI,CAAC,aAAa,CAAC,MAAM,QAAQ,sBAAsB,MAAM,kBAAkB;AAC3E;AAAA,MACJ;AAEA,YAAMA,SAAO,MAAM,YAAA,EAAc;AAEjC,UAAI,MAAM,QAAQ,KAAK;AACnB,cAAM,eAAA;AACN,cAAM,iBAAiBC,KAAAA,aAAa,KAAK,EAAE,UAAU;AAErD,YAAI,mBAAmB,UAAaD,OAAK,cAAc,GAAG,gBAAgB;AACtEA,iBAAK,cAAc,GAAG,eAAA;AAAA,QAC1B;AAEA;AAAA,MACJ;AACA,WACK,MAAM,WAAW,MAAM,YACxB,MAAM,QAAQ,OACd,CAAC,CAAC,SAAS,UAAU,EAAE,SAAU,MAAM,QAAoB,OAAO,GACpE;AACE,cAAM,eAAA;AACN,cAAM,sBAAA;AAAA,MACV;AAAA,IACJ;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGd,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,YAAY,YAAY,MAAM;AAAA,IAC7C;AAAA,EAAA;AAER;;"}
+{"version":3,"file":"useTableRowSelection.cjs","sources":["../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { getTableMeta } from '../util/rows';\n\nexport function useTableRowSelection(isEnabled = false, controlledSelectedRows?: Record<string, boolean>) {\n    // the shift-click range anchor, stored as a row id because positions move when sorting or filtering\n    const lastSelectedRowId = React.useRef<string | undefined>(undefined);\n    const isControlled = isEnabled && controlledSelectedRows !== undefined;\n\n    const onKeyDown = React.useCallback(\n        <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n            if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n                return;\n            }\n\n            const rows = table.getRowModel().rows;\n\n            if (event.key === ' ') {\n                event.preventDefault();\n                const rowActiveIndex = getTableMeta(table).rowActive.rowActiveIndex;\n\n                if (rowActiveIndex !== undefined && rows[rowActiveIndex]?.getCanSelect()) {\n                    rows[rowActiveIndex]?.toggleSelected();\n                }\n\n                return;\n            }\n            if (\n                (event.ctrlKey || event.metaKey) &&\n                event.key === 'a' &&\n                !['INPUT', 'TEXTAREA'].includes((event.target as Element)?.tagName)\n            ) {\n                event.preventDefault();\n                table.toggleAllRowsSelected();\n            }\n        },\n        [isEnabled]\n    ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n    return {\n        isEnabled,\n        isControlled,\n        controlledSelectedRows,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n        lastSelectedRowId,\n    };\n}\n"],"names":["rows","getTableMeta"],"mappings":";;;;AAKO,SAAS,qBAAqB,YAAY,OAAO,wBAAkD;AAEtG,QAAM,oBAAoB,MAAM,OAA2B,MAAS;AACpE,QAAM,eAAe,aAAa,2BAA2B;AAE7D,QAAM,YAAY,MAAM;AAAA,IACpB,CAAkB,OAAsB,UAA6B;AACjE,UAAI,CAAC,aAAa,CAAC,MAAM,QAAQ,sBAAsB,MAAM,kBAAkB;AAC3E;AAAA,MACJ;AAEA,YAAMA,SAAO,MAAM,YAAA,EAAc;AAEjC,UAAI,MAAM,QAAQ,KAAK;AACnB,cAAM,eAAA;AACN,cAAM,iBAAiBC,KAAAA,aAAa,KAAK,EAAE,UAAU;AAErD,YAAI,mBAAmB,UAAaD,OAAK,cAAc,GAAG,gBAAgB;AACtEA,iBAAK,cAAc,GAAG,eAAA;AAAA,QAC1B;AAEA;AAAA,MACJ;AACA,WACK,MAAM,WAAW,MAAM,YACxB,MAAM,QAAQ,OACd,CAAC,CAAC,SAAS,UAAU,EAAE,SAAU,MAAM,QAAoB,OAAO,GACpE;AACE,cAAM,eAAA;AACN,cAAM,sBAAA;AAAA,MACV;AAAA,IACJ;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGd,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,YAAY,YAAY,MAAM;AAAA,IAC7C;AAAA,EAAA;AAER;;"}

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>;
+    lastSelectedRowId: React.RefObject<string | undefined>;
 };

package/dist/primitives/Table/useTableManager/features/useTableRowSelection.js

@@ -1,7 +1,7 @@
 import React__default from "react";
 import { getTableMeta } from "../util/rows.js";
 function useTableRowSelection(isEnabled = false, controlledSelectedRows) {
-  const lastSelectedRowIndex = React__default.useRef(void 0);
+  const lastSelectedRowId = React__default.useRef(void 0);
   const isControlled = isEnabled && controlledSelectedRows !== void 0;
   const onKeyDown = React__default.useCallback(
     (event, table) => {
@@ -29,7 +29,7 @@ function useTableRowSelection(isEnabled = false, controlledSelectedRows) {
     isControlled,
     controlledSelectedRows,
     handleKeyDown: isEnabled ? onKeyDown : () => void 0,
-    lastSelectedRowIndex
+    lastSelectedRowId
   };
 }
 export {

package/dist/primitives/Table/useTableManager/features/useTableRowSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowSelection.js","sources":["../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { getTableMeta } from '../util/rows';\n\nexport function useTableRowSelection(isEnabled = false, controlledSelectedRows?: Record<string, boolean>) {\n    const lastSelectedRowIndex = React.useRef<number | undefined>(undefined);\n    const isControlled = isEnabled && controlledSelectedRows !== undefined;\n\n    const onKeyDown = React.useCallback(\n        <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n            if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n                return;\n            }\n\n            const rows = table.getRowModel().rows;\n\n            if (event.key === ' ') {\n                event.preventDefault();\n                const rowActiveIndex = getTableMeta(table).rowActive.rowActiveIndex;\n\n                if (rowActiveIndex !== undefined && rows[rowActiveIndex]?.getCanSelect()) {\n                    rows[rowActiveIndex]?.toggleSelected();\n                }\n\n                return;\n            }\n            if (\n                (event.ctrlKey || event.metaKey) &&\n                event.key === 'a' &&\n                !['INPUT', 'TEXTAREA'].includes((event.target as Element)?.tagName)\n            ) {\n                event.preventDefault();\n                table.toggleAllRowsSelected();\n            }\n        },\n        [isEnabled]\n    ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n    return {\n        isEnabled,\n        isControlled,\n        controlledSelectedRows,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n        lastSelectedRowIndex,\n    };\n}\n"],"names":["React"],"mappings":";;AAKO,SAAS,qBAAqB,YAAY,OAAO,wBAAkD;AACtG,QAAM,uBAAuBA,eAAM,OAA2B,MAAS;AACvE,QAAM,eAAe,aAAa,2BAA2B;AAE7D,QAAM,YAAYA,eAAM;AAAA,IACpB,CAAkB,OAAsB,UAA6B;AACjE,UAAI,CAAC,aAAa,CAAC,MAAM,QAAQ,sBAAsB,MAAM,kBAAkB;AAC3E;AAAA,MACJ;AAEA,YAAM,OAAO,MAAM,YAAA,EAAc;AAEjC,UAAI,MAAM,QAAQ,KAAK;AACnB,cAAM,eAAA;AACN,cAAM,iBAAiB,aAAa,KAAK,EAAE,UAAU;AAErD,YAAI,mBAAmB,UAAa,KAAK,cAAc,GAAG,gBAAgB;AACtE,eAAK,cAAc,GAAG,eAAA;AAAA,QAC1B;AAEA;AAAA,MACJ;AACA,WACK,MAAM,WAAW,MAAM,YACxB,MAAM,QAAQ,OACd,CAAC,CAAC,SAAS,UAAU,EAAE,SAAU,MAAM,QAAoB,OAAO,GACpE;AACE,cAAM,eAAA;AACN,cAAM,sBAAA;AAAA,MACV;AAAA,IACJ;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGd,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,YAAY,YAAY,MAAM;AAAA,IAC7C;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useTableRowSelection.js","sources":["../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { getTableMeta } from '../util/rows';\n\nexport function useTableRowSelection(isEnabled = false, controlledSelectedRows?: Record<string, boolean>) {\n    // the shift-click range anchor, stored as a row id because positions move when sorting or filtering\n    const lastSelectedRowId = React.useRef<string | undefined>(undefined);\n    const isControlled = isEnabled && controlledSelectedRows !== undefined;\n\n    const onKeyDown = React.useCallback(\n        <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n            if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n                return;\n            }\n\n            const rows = table.getRowModel().rows;\n\n            if (event.key === ' ') {\n                event.preventDefault();\n                const rowActiveIndex = getTableMeta(table).rowActive.rowActiveIndex;\n\n                if (rowActiveIndex !== undefined && rows[rowActiveIndex]?.getCanSelect()) {\n                    rows[rowActiveIndex]?.toggleSelected();\n                }\n\n                return;\n            }\n            if (\n                (event.ctrlKey || event.metaKey) &&\n                event.key === 'a' &&\n                !['INPUT', 'TEXTAREA'].includes((event.target as Element)?.tagName)\n            ) {\n                event.preventDefault();\n                table.toggleAllRowsSelected();\n            }\n        },\n        [isEnabled]\n    ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n    return {\n        isEnabled,\n        isControlled,\n        controlledSelectedRows,\n        handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n        lastSelectedRowId,\n    };\n}\n"],"names":["React"],"mappings":";;AAKO,SAAS,qBAAqB,YAAY,OAAO,wBAAkD;AAEtG,QAAM,oBAAoBA,eAAM,OAA2B,MAAS;AACpE,QAAM,eAAe,aAAa,2BAA2B;AAE7D,QAAM,YAAYA,eAAM;AAAA,IACpB,CAAkB,OAAsB,UAA6B;AACjE,UAAI,CAAC,aAAa,CAAC,MAAM,QAAQ,sBAAsB,MAAM,kBAAkB;AAC3E;AAAA,MACJ;AAEA,YAAM,OAAO,MAAM,YAAA,EAAc;AAEjC,UAAI,MAAM,QAAQ,KAAK;AACnB,cAAM,eAAA;AACN,cAAM,iBAAiB,aAAa,KAAK,EAAE,UAAU;AAErD,YAAI,mBAAmB,UAAa,KAAK,cAAc,GAAG,gBAAgB;AACtE,eAAK,cAAc,GAAG,eAAA;AAAA,QAC1B;AAEA;AAAA,MACJ;AACA,WACK,MAAM,WAAW,MAAM,YACxB,MAAM,QAAQ,OACd,CAAC,CAAC,SAAS,UAAU,EAAE,SAAU,MAAM,QAAoB,OAAO,GACpE;AACE,cAAM,eAAA;AACN,cAAM,sBAAA;AAAA,MACV;AAAA,IACJ;AAAA,IACA,CAAC,SAAS;AAAA,EAAA;AAGd,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,YAAY,YAAY,MAAM;AAAA,IAC7C;AAAA,EAAA;AAER;"}

package/dist/primitives/Table/useTableManager/listeners/useTableFilterListener.cjs

@@ -8,7 +8,7 @@ function useTableFilterListener(table, onFilter) {
     if (table.options.enableColumnFilters && typeof onFilter === "function") {
       const hiddenColumns = columns.getHiddenColumns(table.getState().columnVisibility);
       onFilter(columnFilters, hiddenColumns);
-      if (table.options.enableRowSelection) {
+      if (table.options.enableRowSelection && !table.options.getRowId) {
         table.resetRowSelection();
       }
     }

package/dist/primitives/Table/useTableManager/listeners/useTableFilterListener.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableFilterListener.cjs","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableFilterListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\n\nimport type { TableFilterHandler } from '../../types';\nimport { getHiddenColumns } from '../util/columns';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the filtering state, so that it can filter server side\nexport function useTableFilterListener<TType = unknown>(table: ReactTable<TType>, onFilter?: TableFilterHandler) {\n    const columnFilters = table.getState().columnFilters;\n\n    useLazyEffect(() => {\n        if (table.options.enableColumnFilters && typeof onFilter === 'function') {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n            onFilter(columnFilters, hiddenColumns);\n\n            if (table.options.enableRowSelection) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableColumnFilters, columnFilters]);\n}\n"],"names":["useLazyEffect","getHiddenColumns"],"mappings":";;;;AAUO,SAAS,uBAAwC,OAA0B,UAA+B;AAC7G,QAAM,gBAAgB,MAAM,SAAA,EAAW;AAEvCA,gBAAAA,cAAc,MAAM;AAChB,QAAI,MAAM,QAAQ,uBAAuB,OAAO,aAAa,YAAY;AACrE,YAAM,gBAAgBC,QAAAA,iBAAiB,MAAM,SAAA,EAAW,gBAAgB;AACxE,eAAS,eAAe,aAAa;AAErC,UAAI,MAAM,QAAQ,oBAAoB;AAClC,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,qBAAqB,aAAa,CAAC;AACzD;;"}
+{"version":3,"file":"useTableFilterListener.cjs","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableFilterListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\n\nimport type { TableFilterHandler } from '../../types';\nimport { getHiddenColumns } from '../util/columns';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the filtering state, so that it can filter server side\nexport function useTableFilterListener<TType = unknown>(table: ReactTable<TType>, onFilter?: TableFilterHandler) {\n    const columnFilters = table.getState().columnFilters;\n\n    useLazyEffect(() => {\n        if (table.options.enableColumnFilters && typeof onFilter === 'function') {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n            onFilter(columnFilters, hiddenColumns);\n\n            // selection without stable row ids (rowIdentityAccessor) is positional and would point at\n            // different rows after the server filters the data, so it is only safe to keep with getRowId\n            if (table.options.enableRowSelection && !table.options.getRowId) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableColumnFilters, columnFilters]);\n}\n"],"names":["useLazyEffect","getHiddenColumns"],"mappings":";;;;AAUO,SAAS,uBAAwC,OAA0B,UAA+B;AAC7G,QAAM,gBAAgB,MAAM,SAAA,EAAW;AAEvCA,gBAAAA,cAAc,MAAM;AAChB,QAAI,MAAM,QAAQ,uBAAuB,OAAO,aAAa,YAAY;AACrE,YAAM,gBAAgBC,QAAAA,iBAAiB,MAAM,SAAA,EAAW,gBAAgB;AACxE,eAAS,eAAe,aAAa;AAIrC,UAAI,MAAM,QAAQ,sBAAsB,CAAC,MAAM,QAAQ,UAAU;AAC7D,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,qBAAqB,aAAa,CAAC;AACzD;;"}

package/dist/primitives/Table/useTableManager/listeners/useTableFilterListener.js

@@ -6,7 +6,7 @@ function useTableFilterListener(table, onFilter) {
     if (table.options.enableColumnFilters && typeof onFilter === "function") {
       const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
       onFilter(columnFilters, hiddenColumns);
-      if (table.options.enableRowSelection) {
+      if (table.options.enableRowSelection && !table.options.getRowId) {
         table.resetRowSelection();
       }
     }

package/dist/primitives/Table/useTableManager/listeners/useTableFilterListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableFilterListener.js","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableFilterListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\n\nimport type { TableFilterHandler } from '../../types';\nimport { getHiddenColumns } from '../util/columns';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the filtering state, so that it can filter server side\nexport function useTableFilterListener<TType = unknown>(table: ReactTable<TType>, onFilter?: TableFilterHandler) {\n    const columnFilters = table.getState().columnFilters;\n\n    useLazyEffect(() => {\n        if (table.options.enableColumnFilters && typeof onFilter === 'function') {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n            onFilter(columnFilters, hiddenColumns);\n\n            if (table.options.enableRowSelection) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableColumnFilters, columnFilters]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,uBAAwC,OAA0B,UAA+B;AAC7G,QAAM,gBAAgB,MAAM,SAAA,EAAW;AAEvC,gBAAc,MAAM;AAChB,QAAI,MAAM,QAAQ,uBAAuB,OAAO,aAAa,YAAY;AACrE,YAAM,gBAAgB,iBAAiB,MAAM,SAAA,EAAW,gBAAgB;AACxE,eAAS,eAAe,aAAa;AAErC,UAAI,MAAM,QAAQ,oBAAoB;AAClC,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,qBAAqB,aAAa,CAAC;AACzD;"}
+{"version":3,"file":"useTableFilterListener.js","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableFilterListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\n\nimport type { TableFilterHandler } from '../../types';\nimport { getHiddenColumns } from '../util/columns';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the filtering state, so that it can filter server side\nexport function useTableFilterListener<TType = unknown>(table: ReactTable<TType>, onFilter?: TableFilterHandler) {\n    const columnFilters = table.getState().columnFilters;\n\n    useLazyEffect(() => {\n        if (table.options.enableColumnFilters && typeof onFilter === 'function') {\n            const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);\n            onFilter(columnFilters, hiddenColumns);\n\n            // selection without stable row ids (rowIdentityAccessor) is positional and would point at\n            // different rows after the server filters the data, so it is only safe to keep with getRowId\n            if (table.options.enableRowSelection && !table.options.getRowId) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableColumnFilters, columnFilters]);\n}\n"],"names":[],"mappings":";;AAUO,SAAS,uBAAwC,OAA0B,UAA+B;AAC7G,QAAM,gBAAgB,MAAM,SAAA,EAAW;AAEvC,gBAAc,MAAM;AAChB,QAAI,MAAM,QAAQ,uBAAuB,OAAO,aAAa,YAAY;AACrE,YAAM,gBAAgB,iBAAiB,MAAM,SAAA,EAAW,gBAAgB;AACxE,eAAS,eAAe,aAAa;AAIrC,UAAI,MAAM,QAAQ,sBAAsB,CAAC,MAAM,QAAQ,UAAU;AAC7D,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,qBAAqB,aAAa,CAAC;AACzD;"}

package/dist/primitives/Table/useTableManager/listeners/useTableSortingListener.cjs

@@ -6,7 +6,7 @@ function useTableSortingListener(table, onSort) {
   useLazyDebouncedEffect.useLazyDebouncedEffect(() => {
     if (table.options.enableSorting && typeof onSort === "function") {
       onSort(sorting);
-      if (table.options.enableRowSelection) {
+      if (table.options.enableRowSelection && !table.options.getRowId) {
         table.resetRowSelection();
       }
     }

package/dist/primitives/Table/useTableManager/listeners/useTableSortingListener.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSortingListener.cjs","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableSortingListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyDebouncedEffect } from '@/hooks/useLazyDebouncedEffect';\n\nimport type { TableSortHandler } from '../../types';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the sorting state, so that it can sort server side\nexport function useTableSortingListener<TType = unknown>(table: ReactTable<TType>, onSort?: TableSortHandler) {\n    const sorting = table.getState().sorting;\n\n    useLazyDebouncedEffect(() => {\n        if (table.options.enableSorting && typeof onSort === 'function') {\n            onSort(sorting);\n\n            if (table.options.enableRowSelection) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableSorting, sorting]);\n}\n"],"names":["useLazyDebouncedEffect"],"mappings":";;;AASO,SAAS,wBAAyC,OAA0B,QAA2B;AAC1G,QAAM,UAAU,MAAM,SAAA,EAAW;AAEjCA,yBAAAA,uBAAuB,MAAM;AACzB,QAAI,MAAM,QAAQ,iBAAiB,OAAO,WAAW,YAAY;AAC7D,aAAO,OAAO;AAEd,UAAI,MAAM,QAAQ,oBAAoB;AAClC,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,eAAe,OAAO,CAAC;AAC7C;;"}
+{"version":3,"file":"useTableSortingListener.cjs","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableSortingListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyDebouncedEffect } from '@/hooks/useLazyDebouncedEffect';\n\nimport type { TableSortHandler } from '../../types';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the sorting state, so that it can sort server side\nexport function useTableSortingListener<TType = unknown>(table: ReactTable<TType>, onSort?: TableSortHandler) {\n    const sorting = table.getState().sorting;\n\n    useLazyDebouncedEffect(() => {\n        if (table.options.enableSorting && typeof onSort === 'function') {\n            onSort(sorting);\n\n            // selection without stable row ids (rowIdentityAccessor) is positional and would point at\n            // different rows after the server re-sorts the data, so it is only safe to keep with getRowId\n            if (table.options.enableRowSelection && !table.options.getRowId) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableSorting, sorting]);\n}\n"],"names":["useLazyDebouncedEffect"],"mappings":";;;AASO,SAAS,wBAAyC,OAA0B,QAA2B;AAC1G,QAAM,UAAU,MAAM,SAAA,EAAW;AAEjCA,yBAAAA,uBAAuB,MAAM;AACzB,QAAI,MAAM,QAAQ,iBAAiB,OAAO,WAAW,YAAY;AAC7D,aAAO,OAAO;AAId,UAAI,MAAM,QAAQ,sBAAsB,CAAC,MAAM,QAAQ,UAAU;AAC7D,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,eAAe,OAAO,CAAC;AAC7C;;"}

package/dist/primitives/Table/useTableManager/listeners/useTableSortingListener.js

@@ -4,7 +4,7 @@ function useTableSortingListener(table, onSort) {
   useLazyDebouncedEffect(() => {
     if (table.options.enableSorting && typeof onSort === "function") {
       onSort(sorting);
-      if (table.options.enableRowSelection) {
+      if (table.options.enableRowSelection && !table.options.getRowId) {
         table.resetRowSelection();
       }
     }

package/dist/primitives/Table/useTableManager/listeners/useTableSortingListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSortingListener.js","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableSortingListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyDebouncedEffect } from '@/hooks/useLazyDebouncedEffect';\n\nimport type { TableSortHandler } from '../../types';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the sorting state, so that it can sort server side\nexport function useTableSortingListener<TType = unknown>(table: ReactTable<TType>, onSort?: TableSortHandler) {\n    const sorting = table.getState().sorting;\n\n    useLazyDebouncedEffect(() => {\n        if (table.options.enableSorting && typeof onSort === 'function') {\n            onSort(sorting);\n\n            if (table.options.enableRowSelection) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableSorting, sorting]);\n}\n"],"names":[],"mappings":";AASO,SAAS,wBAAyC,OAA0B,QAA2B;AAC1G,QAAM,UAAU,MAAM,SAAA,EAAW;AAEjC,yBAAuB,MAAM;AACzB,QAAI,MAAM,QAAQ,iBAAiB,OAAO,WAAW,YAAY;AAC7D,aAAO,OAAO;AAEd,UAAI,MAAM,QAAQ,oBAAoB;AAClC,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,eAAe,OAAO,CAAC;AAC7C;"}
+{"version":3,"file":"useTableSortingListener.js","sources":["../../../../../src/primitives/Table/useTableManager/listeners/useTableSortingListener.ts"],"sourcesContent":["import type { Table as ReactTable } from '@tanstack/react-table';\n\nimport { useLazyDebouncedEffect } from '@/hooks/useLazyDebouncedEffect';\n\nimport type { TableSortHandler } from '../../types';\n\n// we use a listener, and not the internal \"controlled\" change handlers because we don't actually want consumers\n// to control the state outside the table. this listener is really here to let the consumer make a server request\n// and provide the server with the sorting state, so that it can sort server side\nexport function useTableSortingListener<TType = unknown>(table: ReactTable<TType>, onSort?: TableSortHandler) {\n    const sorting = table.getState().sorting;\n\n    useLazyDebouncedEffect(() => {\n        if (table.options.enableSorting && typeof onSort === 'function') {\n            onSort(sorting);\n\n            // selection without stable row ids (rowIdentityAccessor) is positional and would point at\n            // different rows after the server re-sorts the data, so it is only safe to keep with getRowId\n            if (table.options.enableRowSelection && !table.options.getRowId) {\n                table.resetRowSelection();\n            }\n        }\n    }, [table.options.enableSorting, sorting]);\n}\n"],"names":[],"mappings":";AASO,SAAS,wBAAyC,OAA0B,QAA2B;AAC1G,QAAM,UAAU,MAAM,SAAA,EAAW;AAEjC,yBAAuB,MAAM;AACzB,QAAI,MAAM,QAAQ,iBAAiB,OAAO,WAAW,YAAY;AAC7D,aAAO,OAAO;AAId,UAAI,MAAM,QAAQ,sBAAsB,CAAC,MAAM,QAAQ,UAAU;AAC7D,cAAM,kBAAA;AAAA,MACV;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,MAAM,QAAQ,eAAe,OAAO,CAAC;AAC7C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "14.2.0",
+    "version": "14.2.1-EC-87277-rollup-optional-dep-test-release.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -47,7 +47,7 @@
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@economic/taco-tokens": "^3.0.3",
+        "@economic/taco-tokens": "3.0.4-EC-87277-rollup-optional-dep-test-release.0",
         "@radix-ui/react-scroll-area": "1.2.10",
         "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
@@ -67,14 +67,14 @@
         "tailwindcss": ">=3.4.19"
     },
     "devDependencies": {
-        "@economic/taco-rules": "^1.1.1",
+        "@economic/taco-rules": "1.1.2-EC-87277-rollup-optional-dep-test-release.0",
         "@oxlint/plugins": "^1.75.0",
         "@svgr/cli": "^8.1.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.3",
         "@testing-library/user-event": "^14.6.7",
         "@types/lodash": "^4.17.25",
-        "@types/node": "^22.20.4",
+        "@types/node": "^22.20.5",
         "@types/react": "19.2.18",
         "@types/react-dom": "19.2.7",
         "clsx": "^2.1.1",
@@ -82,18 +82,15 @@
         "jsdom": "^29.1.1",
         "resize-observer-polyfill": "^1.5.1",
         "rimraf": "^6.1.3",
-        "stylelint": "^17.15.0",
+        "stylelint": "^17.16.0",
         "svgo": "^4.1.0",
         "tailwindcss": "^3.4.19",
         "typescript": "^6.0.3",
         "vite": "^7.3.6",
-        "vite-plugin-dts": "^5.1.1",
+        "vite-plugin-dts": "^5.1.2",
         "vite-plugin-externalize-deps": "^0.10.0",
         "vitest": "^4.1.11",
         "vitest-fail-on-console": "^0.10.1"
     },
-    "optionalDependencies": {
-        "@rollup/rollup-linux-x64-gnu": "^4.63.5"
-    },
-    "gitHead": "5d80c1b6aaf3018e39e1df42457581a881dcd6be"
+    "gitHead": "24feb93f48149ee0221c89524190bf281e26b6c7"
 }