@economic/taco 2.3.0 → 2.4.1

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js

@@ -1,11 +1,17 @@
 import React__default from 'react';
 import { useLocalization } from '../../../Provider/Localization.js';
-import { isDate } from 'date-fns';
-import { format, parseFromISOString } from '../../../../utils/date.js';
 import { SearchInput2 } from '../../../SearchInput2/SearchInput2.js';
 import { Switch } from '../../../Switch/Switch.js';
+import { getCellValueAsString } from '../../util/columns.js';
 import { globalFilterFn } from '../../util/filtering.js';
+import { useDebouncedEffect } from '../../../../hooks/useDebouncedEffect.js';
 
+var LoadingState;
+(function (LoadingState) {
+  LoadingState[LoadingState["Incomplete"] = 0] = "Incomplete";
+  LoadingState[LoadingState["Loading"] = 1] = "Loading";
+  LoadingState[LoadingState["Completed"] = 2] = "Completed";
+})(LoadingState || (LoadingState = {}));
 function Search(props) {
   const {
     scrollToIndex,
@@ -16,6 +22,8 @@ function Search(props) {
   } = useLocalization();
   const ref = React__default.useRef(null);
   const tableMeta = table.options.meta;
+  const [query, setQuery] = React__default.useState(tableMeta.search.query);
+  const [loading, setLoading] = React__default.useState(LoadingState.Incomplete);
   const scrollTo = rowIndex => scrollToIndex(rowIndex, {
     align: 'center'
   });
@@ -26,32 +34,38 @@ function Search(props) {
     if (firstRowIndex) {
       scrollTo(firstRowIndex);
     }
-  }, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
-  const handleSearch = function (query) {
-    try {
-      function _temp2() {
-        if (tableMeta.search.excludeUnmatchedResults) {
-          if (value !== null && value !== void 0 && value.length) {
-            table.setGlobalFilter(value);
-          } else {
-            table.resetGlobalFilter();
-          }
-        }
-        tableMeta.search.setQuery(value);
+  }, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), loading]);
+  // update the table search and filtering on a debounce
+  useDebouncedEffect(() => {
+    tableMeta.search.setQuery(query);
+    if (tableMeta.search.excludeUnmatchedResults) {
+      if (query !== null && query !== void 0 && query.length) {
+        table.setGlobalFilter(query);
+      } else {
+        table.resetGlobalFilter();
       }
-      const value = String(query !== null && query !== void 0 ? query : '');
-      // load all data if that is possible
+    }
+  }, [query]);
+  const handleFocus = function () {
+    try {
       const _temp = function () {
-        if (tableMeta.search.loadAll) {
+        if (tableMeta.search.loadAll && loading === LoadingState.Incomplete) {
+          setLoading(LoadingState.Loading);
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+          return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {
+            setLoading(LoadingState.Completed);
+          });
         }
       }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+      // load all data if that is possible
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  const handleChange = query => {
+    setQuery(String(query !== null && query !== void 0 ? query : ''));
+  };
   const handleToggleExcludeUnmatchedResults = enabled => {
     tableMeta.search.toggleExcludeUnmatchedResults(enabled);
     if (enabled) {
@@ -96,9 +110,11 @@ function Search(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
     findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
     findTotal: tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null,
+    loading: loading === LoadingState.Loading,
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
-    onSearch: handleSearch,
+    onChange: handleChange,
+    onFocus: handleFocus,
     placeholder: texts.table3.search.placeholder,
     settingsContent: settings,
     ref: ref,
@@ -107,7 +123,7 @@ function Search(props) {
       meta: true,
       shift: false
     },
-    value: tableMeta.search.query
+    value: query
   }));
 }
 function resetHighlightedColumnIndexes(enabled, value, table) {
@@ -119,14 +135,9 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          var _column$columnDef$met, _format, _format2;
-          if ((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.enableSearch && row.original && globalFilterFn(
-          // if it's a date, format it first
-          isDate(row.original[column.id]) ? (_format = format(row.original[column.id])) !== null && _format !== void 0 ? _format : '' :
-          // if its marked as a date but isn't a date, try to format it
-          column.columnDef.meta.dataType === 'datetime' ? (_format2 = format(parseFromISOString(row.original[column.id]))) !== null && _format2 !== void 0 ? _format2 : '' :
-          // otherwise just string compare
-          String(row.original[column.id]), value)) {
+          var _row$original, _column$columnDef$met;
+          const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
+          if (cellValue && globalFilterFn(cellValue, value)) {
             indexes.push([rowIndex, columnIndex]);
           }
         } catch (e) {

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { isDate } from 'date-fns';\nimport { format, parseFromISOString } from '../../../../utils/date';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\n\ntype SearchProps<TType = unknown> = {\n    scrollToIndex: any;\n    table: RTable<TType>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n    const { scrollToIndex, table } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLInputElement>(null);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n    // update the indexes if the row length changes (e.g. when filtering)\n    React.useEffect(() => {\n        const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n        if (firstRowIndex) {\n            scrollTo(firstRowIndex);\n        }\n    }, [\n        tableMeta.search.query,\n        tableMeta.search.excludeUnmatchedResults,\n        table.getRowModel().rows.length,\n        JSON.stringify(table.getState().sorting),\n        JSON.stringify(table.getState().columnVisibility),\n    ]);\n\n    const handleSearch = async (query: any) => {\n        const value = String(query ?? '');\n\n        // load all data if that is possible\n        if (tableMeta.search.loadAll) {\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n        }\n\n        if (tableMeta.search.excludeUnmatchedResults) {\n            if (value?.length) {\n                table.setGlobalFilter(value);\n            } else {\n                table.resetGlobalFilter();\n            }\n        }\n\n        tableMeta.search.setQuery(value);\n    };\n\n    const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n        tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n        if (enabled) {\n            if (ref.current?.value) {\n                table.setGlobalFilter(ref.current?.value);\n            } else {\n                table.resetGlobalFilter();\n            }\n        } else {\n            table.resetGlobalFilter();\n        }\n\n        requestAnimationFrame(() => ref.current?.focus());\n    };\n\n    const handleNextResult = () => {\n        if (!tableMeta.search.highlightedColumnIndexes.length) {\n            return;\n        }\n\n        const nextIndex =\n            tableMeta.search.currentHighlightColumnIndex === undefined ||\n            tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n                ? 0\n                : tableMeta.search.currentHighlightColumnIndex + 1;\n\n        tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n        // we scroll to the row here, the cell scrolls itself into view\n        scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n    };\n\n    const handlePreviousResult = () => {\n        if (!tableMeta.search.highlightedColumnIndexes.length) {\n            return;\n        }\n\n        const nextIndex =\n            tableMeta.search.currentHighlightColumnIndex === undefined\n                ? 0\n                : tableMeta.search.currentHighlightColumnIndex === 0\n                ? tableMeta.search.highlightedColumnIndexes.length - 1\n                : tableMeta.search.currentHighlightColumnIndex - 1;\n\n        tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n        // we scroll to the row here, the cell scrolls itself into view\n        scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n    };\n\n    const settings = (\n        <Switch\n            label={texts.table3.search.excludeUnmatchedResults}\n            checked={tableMeta.search.excludeUnmatchedResults}\n            onChange={handleToggleExcludeUnmatchedResults}\n        />\n    );\n\n    return (\n        <>\n            <SearchInput2\n                findCurrent={\n                    tableMeta.search.currentHighlightColumnIndex !== undefined\n                        ? tableMeta.search.currentHighlightColumnIndex + 1\n                        : null\n                }\n                findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n                onClickFindPrevious={handlePreviousResult}\n                onClickFindNext={handleNextResult}\n                onSearch={handleSearch}\n                placeholder={texts.table3.search.placeholder}\n                settingsContent={settings}\n                ref={ref}\n                shortcut={{ key: 'f', meta: true, shift: false }}\n                value={tableMeta.search.query}\n            />\n        </>\n    );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    let firstRowIndex: undefined | number;\n\n    if (enabled && value) {\n        const rowIndexes: number[] = [];\n        const indexes: number[][] = [];\n        const columns = table.getVisibleLeafColumns();\n\n        table.getRowModel().rows.forEach((row, rowIndex) => {\n            columns.forEach((column, columnIndex) => {\n                try {\n                    if (\n                        column.columnDef.meta?.enableSearch &&\n                        row.original &&\n                        globalFilterFn(\n                            // if it's a date, format it first\n                            isDate(row.original[column.id])\n                                ? format(row.original[column.id]) ?? ''\n                                : // if its marked as a date but isn't a date, try to format it\n                                column.columnDef.meta.dataType === 'datetime'\n                                ? format(parseFromISOString(row.original[column.id])) ?? ''\n                                : // otherwise just string compare\n                                  String(row.original[column.id]),\n                            value\n                        )\n                    ) {\n                        indexes.push([rowIndex, columnIndex]);\n                    }\n                } catch (e) {\n                    //\n                }\n            });\n\n            if (indexes.length) {\n                rowIndexes.push(rowIndex);\n            }\n        });\n\n        tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n        if (indexes.length) {\n            firstRowIndex = indexes[0][0];\n            tableMeta.search.setCurrentHighlightColumnIndex(0);\n        } else {\n            tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n        }\n    } else {\n        tableMeta.search.setHighlightedColumnIndexes([]);\n        tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n    }\n\n    if (firstRowIndex !== undefined) {\n        tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);\n    }\n\n    return firstRowIndex;\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","search","isHighlightingEnabled","current","value","query","excludeUnmatchedResults","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","setGlobalFilter","resetGlobalFilter","setQuery","String","loadAll","columnFilters","undefined","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onSearch","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","columnDef","enableSearch","original","globalFilterFn","isDate","id","format","dataType","parseFromISOString","push","e","setHighlightedColumnIndexes","currentRow","setCurrentRowIndex"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\nimport { useDebouncedEffect } from '../../../../hooks/useDebouncedEffect';\nimport { getCellValueAsString } from '../../util/columns';\n\ntype SearchProps<TType = unknown> = {\n    scrollToIndex: any;\n    table: RTable<TType>;\n};\n\nenum LoadingState {\n    Incomplete,\n    Loading,\n    Completed,\n}\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n    const { scrollToIndex, table } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLInputElement>(null);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const [query, setQuery] = React.useState(tableMeta.search.query);\n    const [loading, setLoading] = React.useState<LoadingState>(LoadingState.Incomplete);\n\n    const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n    // update the indexes if the row length changes (e.g. when filtering)\n    React.useEffect(() => {\n        const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n        if (firstRowIndex) {\n            scrollTo(firstRowIndex);\n        }\n    }, [\n        tableMeta.search.query,\n        tableMeta.search.excludeUnmatchedResults,\n        table.getRowModel().rows.length,\n        JSON.stringify(table.getState().sorting),\n        JSON.stringify(table.getState().columnVisibility),\n        loading,\n    ]);\n\n    // update the table search and filtering on a debounce\n    useDebouncedEffect(() => {\n        tableMeta.search.setQuery(query);\n\n        if (tableMeta.search.excludeUnmatchedResults) {\n            if (query?.length) {\n                table.setGlobalFilter(query);\n            } else {\n                table.resetGlobalFilter();\n            }\n        }\n    }, [query]);\n\n    const handleFocus = async () => {\n        // load all data if that is possible\n        if (tableMeta.search.loadAll && loading === LoadingState.Incomplete) {\n            setLoading(LoadingState.Loading);\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n            setLoading(LoadingState.Completed);\n        }\n    };\n\n    const handleChange = (query: any) => {\n        setQuery(String(query ?? ''));\n    };\n\n    const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n        tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n        if (enabled) {\n            if (ref.current?.value) {\n                table.setGlobalFilter(ref.current?.value);\n            } else {\n                table.resetGlobalFilter();\n            }\n        } else {\n            table.resetGlobalFilter();\n        }\n\n        requestAnimationFrame(() => ref.current?.focus());\n    };\n\n    const handleNextResult = () => {\n        if (!tableMeta.search.highlightedColumnIndexes.length) {\n            return;\n        }\n\n        const nextIndex =\n            tableMeta.search.currentHighlightColumnIndex === undefined ||\n            tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n                ? 0\n                : tableMeta.search.currentHighlightColumnIndex + 1;\n\n        tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n        // we scroll to the row here, the cell scrolls itself into view\n        scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n    };\n\n    const handlePreviousResult = () => {\n        if (!tableMeta.search.highlightedColumnIndexes.length) {\n            return;\n        }\n\n        const nextIndex =\n            tableMeta.search.currentHighlightColumnIndex === undefined\n                ? 0\n                : tableMeta.search.currentHighlightColumnIndex === 0\n                ? tableMeta.search.highlightedColumnIndexes.length - 1\n                : tableMeta.search.currentHighlightColumnIndex - 1;\n\n        tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n        // we scroll to the row here, the cell scrolls itself into view\n        scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n    };\n\n    const settings = (\n        <Switch\n            label={texts.table3.search.excludeUnmatchedResults}\n            checked={tableMeta.search.excludeUnmatchedResults}\n            onChange={handleToggleExcludeUnmatchedResults}\n        />\n    );\n\n    return (\n        <>\n            <SearchInput2\n                findCurrent={\n                    tableMeta.search.currentHighlightColumnIndex !== undefined\n                        ? tableMeta.search.currentHighlightColumnIndex + 1\n                        : null\n                }\n                findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n                loading={loading === LoadingState.Loading}\n                onClickFindPrevious={handlePreviousResult}\n                onClickFindNext={handleNextResult}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                placeholder={texts.table3.search.placeholder}\n                settingsContent={settings}\n                ref={ref}\n                shortcut={{ key: 'f', meta: true, shift: false }}\n                value={query}\n            />\n        </>\n    );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    let firstRowIndex: undefined | number;\n\n    if (enabled && value) {\n        const rowIndexes: number[] = [];\n        const indexes: number[][] = [];\n        const columns = table.getVisibleLeafColumns();\n\n        table.getRowModel().rows.forEach((row, rowIndex) => {\n            columns.forEach((column, columnIndex) => {\n                try {\n                    const cellValue = getCellValueAsString(row.original?.[column.id], column.columnDef.meta?.dataType);\n\n                    if (cellValue && globalFilterFn(cellValue, value)) {\n                        indexes.push([rowIndex, columnIndex]);\n                    }\n                } catch (e) {\n                    //\n                }\n            });\n\n            if (indexes.length) {\n                rowIndexes.push(rowIndex);\n            }\n        });\n\n        tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n        if (indexes.length) {\n            firstRowIndex = indexes[0][0];\n            tableMeta.search.setCurrentHighlightColumnIndex(0);\n        } else {\n            tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n        }\n    } else {\n        tableMeta.search.setHighlightedColumnIndexes([]);\n        tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n    }\n\n    if (firstRowIndex !== undefined) {\n        tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);\n    }\n\n    return firstRowIndex;\n}\n"],"names":["LoadingState","Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","query","setQuery","useState","search","loading","setLoading","Incomplete","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","isHighlightingEnabled","current","value","excludeUnmatchedResults","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","useDebouncedEffect","setGlobalFilter","resetGlobalFilter","handleFocus","loadAll","Loading","columnFilters","undefined","Completed","handleChange","String","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onFocus","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","cellValue","getCellValueAsString","original","id","columnDef","dataType","globalFilterFn","push","e","setHighlightedColumnIndexes","currentRow","setCurrentRowIndex"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { Tooltip } from '../../../Tooltip/Tooltip.js';
 import { IconButton } from '../../../IconButton/IconButton.js';
 import { useLocalization } from '../../../Provider/Localization.js';
 import { Group } from '../../../Group/Group.js';
@@ -42,7 +43,10 @@ function Toolbar(props) {
   }) : null, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
     table: table,
     tableProps: tableProps
-  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: texts.table3.otherOptions.tooltip
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table3.otherOptions.tooltip,
     icon: "more",
     menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
       align: "end"
@@ -57,7 +61,7 @@ function Toolbar(props) {
         table: table
       })
     }, texts.table3.fontSize.tooltip) : null))
-  }) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search, {
+  })) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search, {
     scrollToIndex: scrollToIndex,
     table: table
   }) : null));

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\n\nexport type ToolbarProps<TType = unknown> = {\n    left?: JSX.Element;\n    right?: JSX.Element;\n    scrollToIndex: any;\n    table: RTable<TType>;\n    tableProps: Table3Props<TType>;\n    total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, scrollToIndex, table, tableProps, total } = props;\n    const { texts } = useLocalization();\n\n    if (!isToolbarVisible(props)) {\n        return null;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return (\n        <div className=\"mb-4 flex flex-shrink flex-grow-0 gap-2\" data-taco=\"table3-toolbar\">\n            {left}\n            <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n                {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n                {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n                {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n                {right}\n                {isMoreVisible(props) ? (\n                    <IconButton\n                        icon=\"more\"\n                        menu={menuProps => (\n                            <Menu {...menuProps}>\n                                <Menu.Content align=\"end\">\n                                    {tableMeta.rowHeight.isEnabled ? (\n                                        <Menu.Item\n                                            icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                            subMenu={() => <RowHeight table={table} />}>\n                                            {texts.table3.rowHeight.tooltip}\n                                        </Menu.Item>\n                                    ) : null}\n                                    {tableMeta.fontSize.isEnabled ? (\n                                        <Menu.Item icon=\"font-size\" subMenu={() => <FontSize table={table} />}>\n                                            {texts.table3.fontSize.tooltip}\n                                        </Menu.Item>\n                                    ) : null}\n                                </Menu.Content>\n                            </Menu>\n                        )}\n                    />\n                ) : null}\n                {tableMeta.search.isEnabled ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n            </Group>\n        </div>\n    );\n}\n\nfunction isMoreVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const hasInternalToolbar =\n        enableSettingsButton ||\n        tableMeta.editing.isEnabled ||\n        tableMeta.printing.isEnabled ||\n        table.options.enableColumnFilters ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        tableMeta.search.isEnabled;\n\n    return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","left","right","scrollToIndex","table","tableProps","total","texts","useLocalization","isToolbarVisible","tableMeta","options","meta","React","className","Group","editing","isEnabled","EditButton","enableColumnFilters","Filters","enableHiding","columnOrdering","ColumnSettings","printing","PrintButton","isMoreVisible","IconButton","icon","menu","menuProps","Menu","Content","align","rowHeight","Item","height","subMenu","RowHeight","table3","tooltip","fontSize","FontSize","search","Search","enableSettingsButton","hasInternalToolbar"],"mappings":"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"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport type ToolbarProps<TType = unknown> = {\n    left?: JSX.Element;\n    right?: JSX.Element;\n    scrollToIndex: any;\n    table: RTable<TType>;\n    tableProps: Table3Props<TType>;\n    total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, scrollToIndex, table, tableProps, total } = props;\n    const { texts } = useLocalization();\n\n    if (!isToolbarVisible(props)) {\n        return null;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return (\n        <div className=\"mb-4 flex flex-shrink flex-grow-0 gap-2\" data-taco=\"table3-toolbar\">\n            {left}\n            <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n                {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n                {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n                {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n                {right}\n                {isMoreVisible(props) ? (\n                    <Tooltip title={texts.table3.otherOptions.tooltip}>\n                        <IconButton\n                            aria-label={texts.table3.otherOptions.tooltip}\n                            icon=\"more\"\n                            menu={menuProps => (\n                                <Menu {...menuProps}>\n                                    <Menu.Content align=\"end\">\n                                        {tableMeta.rowHeight.isEnabled ? (\n                                            <Menu.Item\n                                                icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                                subMenu={() => <RowHeight table={table} />}>\n                                                {texts.table3.rowHeight.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                        {tableMeta.fontSize.isEnabled ? (\n                                            <Menu.Item icon=\"font-size\" subMenu={() => <FontSize table={table} />}>\n                                                {texts.table3.fontSize.tooltip}\n                                            </Menu.Item>\n                                        ) : null}\n                                    </Menu.Content>\n                                </Menu>\n                            )}\n                        />\n                    </Tooltip>\n                ) : null}\n                {tableMeta.search.isEnabled ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n            </Group>\n        </div>\n    );\n}\n\nfunction isMoreVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>) {\n    const { left, right, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const hasInternalToolbar =\n        enableSettingsButton ||\n        tableMeta.editing.isEnabled ||\n        tableMeta.printing.isEnabled ||\n        table.options.enableColumnFilters ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        tableMeta.search.isEnabled;\n\n    return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","left","right","scrollToIndex","table","tableProps","total","texts","useLocalization","isToolbarVisible","tableMeta","options","meta","React","className","Group","editing","isEnabled","EditButton","enableColumnFilters","Filters","enableHiding","columnOrdering","ColumnSettings","printing","PrintButton","isMoreVisible","Tooltip","title","table3","otherOptions","tooltip","IconButton","icon","menu","menuProps","Menu","Content","align","rowHeight","Item","height","subMenu","RowHeight","fontSize","FontSize","search","Search","enableSettingsButton","hasInternalToolbar"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js

@@ -1,8 +1,8 @@
 import React__default from 'react';
 import { isInternalColumn } from '../../util/columns.js';
 
-function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
-  let index = defaultFrozenIndex;
+function getFrozenInternalColumnCount(options) {
+  let index = 0;
   if (options.enableRowDrag) {
     index++;
   }
@@ -12,7 +12,7 @@ function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
   if (options.enableRowExpansion) {
     index++;
   }
-  return index >= 0 ? index : undefined;
+  return index;
 }
 /*
 Because of the desired behaviour of column freezing we use custom state and just an index.
@@ -20,7 +20,7 @@ If a frozen column is, for example, hidden, then the desired behaviour is that t
 If this behaviour were different we would just use the native column pinning functionality
 */
 function useColumnFreezing(defaultFrozenIndex, options) {
-  const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(getDefaultFrozenIndex(options, defaultFrozenIndex));
+  const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(() => defaultFrozenIndex);
   const [horizontallyScrolled, setHorizontallyScrolled] = React__default.useState(false);
   const onScroll = event => {
     if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {
@@ -29,11 +29,13 @@ function useColumnFreezing(defaultFrozenIndex, options) {
       setHorizontallyScrolled(false);
     }
   };
-  const setFrozenColumnIndex = index => {
-    _setFrozenColumnIndex(index !== null && index !== void 0 ? index : getDefaultFrozenIndex(options));
-  };
+  const frozenInternalColumnCount = React__default.useMemo(() => getFrozenInternalColumnCount(options), []);
+  // we must set a value when undefined is explicitly set, otherwise nothing is saved to settings
+  // and the next time the table loads it will fall back to the initial value even though the user changed it
+  const setFrozenColumnIndex = index => _setFrozenColumnIndex(index !== null && index !== void 0 ? index : -1);
   return {
     isEnabled: options.enableColumnFreezing,
+    frozenInternalColumnCount,
     frozenColumnIndex,
     setFrozenColumnIndex,
     horizontallyScrolled,
@@ -41,6 +43,7 @@ function useColumnFreezing(defaultFrozenIndex, options) {
   };
 }
 function useColumnFreezingStyle(tableId, table) {
+  var _tableMeta$columnFree;
   const {
     columnOrder,
     columnSizing,
@@ -48,9 +51,10 @@ function useColumnFreezingStyle(tableId, table) {
     columnVisibility
   } = table.getState();
   const tableMeta = table.options.meta;
+  const frozenColumnIndex = ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
   const style = React__default.useMemo(() => {
-    if (tableMeta.columnFreezing.isEnabled && tableMeta.columnFreezing.frozenColumnIndex !== undefined) {
-      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, tableMeta.columnFreezing.frozenColumnIndex + 1).map(column => column.id);
+    if (tableMeta.columnFreezing.frozenInternalColumnCount > 0 || tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
+      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1).map(column => column.id);
       // if all frozen columns haven't had their size set yet, then abort
       if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
         return undefined;
@@ -60,28 +64,28 @@ function useColumnFreezingStyle(tableId, table) {
         offsets[columnId] = offset;
         return offset + columnSizing[columnId];
       }, 0);
-      const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${tableMeta.columnFreezing.frozenColumnIndex + 2})) {
+      const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {
                     position: sticky;
-                    z-index: 20; 
-                }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${tableMeta.columnFreezing.frozenColumnIndex + 1}) {
+                    z-index: 20;
+                }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;
                 }`];
-      const columnId = visibleFrozenColumns[tableMeta.columnFreezing.frozenColumnIndex];
+      const columnId = visibleFrozenColumns[frozenColumnIndex];
       // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId
       // exists before checking if it is internal.
       //
       // only add a border to the edge column if it isn't an internal column
       if (columnId && !isInternalColumn(columnId)) {
-        styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${tableMeta.columnFreezing.frozenColumnIndex + 1}) {
+        styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;
                 }`);
       }
       return styles.join('\n');
     }
     return undefined;
-  }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, tableMeta.columnFreezing.frozenColumnIndex]);
+  }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, frozenColumnIndex]);
   return style;
 }
 
-export { getDefaultFrozenIndex, useColumnFreezing, useColumnFreezingStyle };
+export { getFrozenInternalColumnCount, useColumnFreezing, useColumnFreezingStyle };
 //# sourceMappingURL=useColumnFreezing.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnFreezing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useColumnFreezing.ts"],"sourcesContent":["import { Table, TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { Table3Options } from '../../types';\nimport { isInternalColumn } from '../../util/columns';\n\nexport function getDefaultFrozenIndex(options: Table3Options, defaultFrozenIndex = -1) {\n    let index = defaultFrozenIndex;\n\n    if (options.enableRowDrag) {\n        index++;\n    }\n\n    if (options.enableRowSelection) {\n        index++;\n    }\n\n    if (options.enableRowExpansion) {\n        index++;\n    }\n\n    return index >= 0 ? index : undefined;\n}\n\n/*\nBecause of the desired behaviour of column freezing we use custom state and just an index.\nIf a frozen column is, for example, hidden, then the desired behaviour is that the next available column gets frozen.\nIf this behaviour were different we would just use the native column pinning functionality\n*/\nexport function useColumnFreezing(defaultFrozenIndex: number | undefined, options: Table3Options) {\n    const [frozenColumnIndex, _setFrozenColumnIndex] = React.useState<number | undefined>(\n        getDefaultFrozenIndex(options, defaultFrozenIndex)\n    );\n\n    const [horizontallyScrolled, setHorizontallyScrolled] = React.useState(false);\n\n    const onScroll = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {\n            setHorizontallyScrolled(true);\n        } else if (event.currentTarget.scrollLeft === 0 && horizontallyScrolled) {\n            setHorizontallyScrolled(false);\n        }\n    };\n\n    const setFrozenColumnIndex = (index: number | undefined) => {\n        _setFrozenColumnIndex(index ?? getDefaultFrozenIndex(options));\n    };\n\n    return {\n        isEnabled: options.enableColumnFreezing,\n        frozenColumnIndex,\n        setFrozenColumnIndex,\n        horizontallyScrolled,\n        handleScroll: onScroll,\n    };\n}\n\nexport function useColumnFreezingStyle<TType = unknown>(tableId: string, table: Table<TType>) {\n    const { columnOrder, columnSizing, columnSizingInfo, columnVisibility } = table.getState();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const style = React.useMemo(() => {\n        if (tableMeta.columnFreezing.isEnabled && tableMeta.columnFreezing.frozenColumnIndex !== undefined) {\n            const visibleFrozenColumns = table\n                .getVisibleLeafColumns()\n                .slice(0, tableMeta.columnFreezing.frozenColumnIndex + 1)\n                .map(column => column.id);\n\n            // if all frozen columns haven't had their size set yet, then abort\n            if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {\n                return undefined;\n            }\n\n            const offsets = {};\n\n            visibleFrozenColumns.reduce((offset, columnId) => {\n                offsets[columnId] = offset;\n                return offset + columnSizing[columnId];\n            }, 0);\n\n            const styles = [\n                Object.values(offsets)\n                    .map((offset, index) => `#${tableId} [role=\"row\"] > :nth-child(${index + 1}) { left: ${offset}px }`)\n                    .join('\\n'),\n                `#${tableId} [role=\"row\"] > :not(:nth-child(n+${tableMeta.columnFreezing.frozenColumnIndex + 2})) {\n                    position: sticky;\n                    z-index: 20; \n                }`,\n                `#${tableId}[data-horizontally-scrolled=\"true\"] [role=\"row\"] > :nth-child(${\n                    tableMeta.columnFreezing.frozenColumnIndex + 1\n                }) {\n                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;\n                }`,\n            ];\n\n            const columnId = visibleFrozenColumns[tableMeta.columnFreezing.frozenColumnIndex];\n\n            // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId\n            // exists before checking if it is internal.\n            //\n            // only add a border to the edge column if it isn't an internal column\n            if (columnId && !isInternalColumn(columnId)) {\n                styles.push(`#${tableId}[data-horizontally-scrolled=\"false\"] [role=\"row\"] > :nth-child(${\n                    tableMeta.columnFreezing.frozenColumnIndex + 1\n                }) {\n                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;\n                }`);\n            }\n\n            return styles.join('\\n');\n        }\n\n        return undefined;\n    }, [\n        columnOrder,\n        columnSizing,\n        columnSizingInfo,\n        columnVisibility,\n        tableMeta.columnFreezing.isEnabled,\n        tableMeta.columnFreezing.frozenColumnIndex,\n    ]);\n\n    return style;\n}\n"],"names":["getDefaultFrozenIndex","options","defaultFrozenIndex","index","enableRowDrag","enableRowSelection","enableRowExpansion","undefined","useColumnFreezing","frozenColumnIndex","_setFrozenColumnIndex","React","useState","horizontallyScrolled","setHorizontallyScrolled","onScroll","event","currentTarget","scrollLeft","setFrozenColumnIndex","isEnabled","enableColumnFreezing","handleScroll","useColumnFreezingStyle","tableId","table","columnOrder","columnSizing","columnSizingInfo","columnVisibility","getState","tableMeta","meta","style","useMemo","columnFreezing","visibleFrozenColumns","getVisibleLeafColumns","slice","map","column","id","every","offsets","reduce","offset","columnId","styles","Object","values","join","isInternalColumn","push"],"mappings":"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"}
+{"version":3,"file":"useColumnFreezing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useColumnFreezing.ts"],"sourcesContent":["import { Table, TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { Table3Options } from '../../types';\nimport { isInternalColumn } from '../../util/columns';\n\nexport function getFrozenInternalColumnCount(options: Table3Options) {\n    let index = 0;\n\n    if (options.enableRowDrag) {\n        index++;\n    }\n\n    if (options.enableRowSelection) {\n        index++;\n    }\n\n    if (options.enableRowExpansion) {\n        index++;\n    }\n\n    return index;\n}\n\n/*\nBecause of the desired behaviour of column freezing we use custom state and just an index.\nIf a frozen column is, for example, hidden, then the desired behaviour is that the next available column gets frozen.\nIf this behaviour were different we would just use the native column pinning functionality\n*/\nexport function useColumnFreezing(defaultFrozenIndex: number | undefined, options: Table3Options) {\n    const [frozenColumnIndex, _setFrozenColumnIndex] = React.useState<number | undefined>(() => defaultFrozenIndex);\n    const [horizontallyScrolled, setHorizontallyScrolled] = React.useState(false);\n\n    const onScroll = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {\n            setHorizontallyScrolled(true);\n        } else if (event.currentTarget.scrollLeft === 0 && horizontallyScrolled) {\n            setHorizontallyScrolled(false);\n        }\n    };\n\n    const frozenInternalColumnCount = React.useMemo(() => getFrozenInternalColumnCount(options), []);\n    // we must set a value when undefined is explicitly set, otherwise nothing is saved to settings\n    // and the next time the table loads it will fall back to the initial value even though the user changed it\n    const setFrozenColumnIndex = (index: number | undefined) => _setFrozenColumnIndex(index ?? -1);\n\n    return {\n        isEnabled: options.enableColumnFreezing,\n        frozenInternalColumnCount,\n        frozenColumnIndex,\n        setFrozenColumnIndex,\n        horizontallyScrolled,\n        handleScroll: onScroll,\n    };\n}\n\nexport function useColumnFreezingStyle<TType = unknown>(tableId: string, table: Table<TType>) {\n    const { columnOrder, columnSizing, columnSizingInfo, columnVisibility } = table.getState();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const frozenColumnIndex =\n        (tableMeta.columnFreezing.frozenColumnIndex ?? -1) + tableMeta.columnFreezing.frozenInternalColumnCount;\n\n    const style = React.useMemo(() => {\n        if (\n            tableMeta.columnFreezing.frozenInternalColumnCount > 0 ||\n            (tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined)\n        ) {\n            const visibleFrozenColumns = table\n                .getVisibleLeafColumns()\n                .slice(0, frozenColumnIndex + 1)\n                .map(column => column.id);\n\n            // if all frozen columns haven't had their size set yet, then abort\n            if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {\n                return undefined;\n            }\n\n            const offsets = {};\n\n            visibleFrozenColumns.reduce((offset, columnId) => {\n                offsets[columnId] = offset;\n                return offset + columnSizing[columnId];\n            }, 0);\n\n            const styles = [\n                Object.values(offsets)\n                    .map((offset, index) => `#${tableId} [role=\"row\"] > :nth-child(${index + 1}) { left: ${offset}px }`)\n                    .join('\\n'),\n                `#${tableId} [role=\"row\"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {\n                    position: sticky;\n                    z-index: 20;\n                }`,\n                `#${tableId}[data-horizontally-scrolled=\"true\"] [role=\"row\"] > :nth-child(${frozenColumnIndex + 1}) {\n                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;\n                }`,\n            ];\n\n            const columnId = visibleFrozenColumns[frozenColumnIndex];\n\n            // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId\n            // exists before checking if it is internal.\n            //\n            // only add a border to the edge column if it isn't an internal column\n            if (columnId && !isInternalColumn(columnId)) {\n                styles.push(`#${tableId}[data-horizontally-scrolled=\"false\"] [role=\"row\"] > :nth-child(${frozenColumnIndex + 1}) {\n                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;\n                }`);\n            }\n\n            return styles.join('\\n');\n        }\n\n        return undefined;\n    }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, frozenColumnIndex]);\n\n    return style;\n}\n"],"names":["getFrozenInternalColumnCount","options","index","enableRowDrag","enableRowSelection","enableRowExpansion","useColumnFreezing","defaultFrozenIndex","frozenColumnIndex","_setFrozenColumnIndex","React","useState","horizontallyScrolled","setHorizontallyScrolled","onScroll","event","currentTarget","scrollLeft","frozenInternalColumnCount","useMemo","setFrozenColumnIndex","isEnabled","enableColumnFreezing","handleScroll","useColumnFreezingStyle","tableId","table","columnOrder","columnSizing","columnSizingInfo","columnVisibility","getState","tableMeta","meta","columnFreezing","style","undefined","visibleFrozenColumns","getVisibleLeafColumns","slice","map","column","id","every","offsets","reduce","offset","columnId","styles","Object","values","join","isInternalColumn","push"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useCurrentRow.js

@@ -10,7 +10,7 @@ function useCurrentRow(defaultCurrentRowIndex = 0) {
   const moveUp = (length, callback) => move(-1, length, callback);
   const moveDown = (length, callback) => move(1, length, callback);
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
-    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+    if (event.defaultPrevented) {
       return;
     }
     if (event.key === 'ArrowUp') {

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useCurrentRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCurrentRow.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useCurrentRow.ts"],"sourcesContent":["import React from 'react';\nimport { TableStrategy } from '../../types';\n\ntype CurrentRowHandlerCallback = TableStrategy['scrollToIndex'];\n\nexport function useCurrentRow(defaultCurrentRowIndex: number | undefined = 0) {\n    const [currentRowIndex, setCurrentRowIndex] = React.useState<number>(defaultCurrentRowIndex);\n\n    const move = (direction: -1 | 1, length: number, scrollToIndex: CurrentRowHandlerCallback) =>\n        setCurrentRowIndex(currentIndex => {\n            const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;\n            scrollToIndex(direction === -1 ? nextIndex : nextIndex + 3);\n            return nextIndex;\n        });\n    const moveUp = (length: number, callback: CurrentRowHandlerCallback) => move(-1, length, callback);\n    const moveDown = (length: number, callback: CurrentRowHandlerCallback) => move(1, length, callback);\n\n    const onKeyDown = React.useCallback(\n        (event: React.KeyboardEvent, length: number, scrollToIndex: CurrentRowHandlerCallback) => {\n            if (event.isDefaultPrevented() || event.isPropagationStopped()) {\n                return;\n            }\n\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = 0;\n                    setCurrentRowIndex(newIndex);\n                    scrollToIndex(newIndex);\n                } else {\n                    moveUp(length, scrollToIndex);\n                }\n\n                return;\n            } else if (event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                if (event.ctrlKey || event.metaKey) {\n                    const newIndex = length - 1;\n                    setCurrentRowIndex(newIndex);\n                    scrollToIndex(newIndex);\n                } else {\n                    moveDown(length, scrollToIndex);\n                }\n\n                return;\n            }\n        },\n        []\n    );\n\n    return {\n        currentRowIndex,\n        setCurrentRowIndex,\n        handleKeyDown: onKeyDown,\n    };\n}\n\nconst getNextIndex = (direction: -1 | 1, currentIndex: number, length: number) => {\n    if (direction === -1) {\n        return currentIndex - 1 > 0 ? currentIndex - 1 : 0;\n    }\n\n    return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;\n};\n"],"names":["useCurrentRow","defaultCurrentRowIndex","currentRowIndex","setCurrentRowIndex","React","useState","move","direction","length","scrollToIndex","currentIndex","nextIndex","undefined","getNextIndex","moveUp","callback","moveDown","onKeyDown","useCallback","event","isDefaultPrevented","isPropagationStopped","key","preventDefault","ctrlKey","metaKey","newIndex","handleKeyDown"],"mappings":";;SAKgBA,aAAa,CAACC,yBAA6C,CAAC;EACxE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAASJ,sBAAsB,CAAC;EAE5F,MAAMK,IAAI,GAAG,CAACC,SAAiB,EAAEC,MAAc,EAAEC,aAAwC,KACrFN,kBAAkB,CAACO,YAAY;IAC3B,MAAMC,SAAS,GAAGD,YAAY,KAAKE,SAAS,GAAGC,YAAY,CAACN,SAAS,EAAEG,YAAY,EAAEF,MAAM,CAAC,GAAG,CAAC;IAChGC,aAAa,CAACF,SAAS,KAAK,CAAC,CAAC,GAAGI,SAAS,GAAGA,SAAS,GAAG,CAAC,CAAC;IAC3D,OAAOA,SAAS;GACnB,CAAC;EACN,MAAMG,MAAM,GAAG,CAACN,MAAc,EAAEO,QAAmC,KAAKT,IAAI,CAAC,CAAC,CAAC,EAAEE,MAAM,EAAEO,QAAQ,CAAC;EAClG,MAAMC,QAAQ,GAAG,CAACR,MAAc,EAAEO,QAAmC,KAAKT,IAAI,CAAC,CAAC,EAAEE,MAAM,EAAEO,QAAQ,CAAC;EAEnG,MAAME,SAAS,GAAGb,cAAK,CAACc,WAAW,CAC/B,CAACC,KAA0B,EAAEX,MAAc,EAAEC,aAAwC;IACjF,IAAIU,KAAK,CAACC,kBAAkB,EAAE,IAAID,KAAK,CAACE,oBAAoB,EAAE,EAAE;MAC5D;;IAGJ,IAAIF,KAAK,CAACG,GAAG,KAAK,SAAS,EAAE;MACzBH,KAAK,CAACI,cAAc,EAAE;MAEtB,IAAIJ,KAAK,CAACK,OAAO,IAAIL,KAAK,CAACM,OAAO,EAAE;QAChC,MAAMC,QAAQ,GAAG,CAAC;QAClBvB,kBAAkB,CAACuB,QAAQ,CAAC;QAC5BjB,aAAa,CAACiB,QAAQ,CAAC;OAC1B,MAAM;QACHZ,MAAM,CAACN,MAAM,EAAEC,aAAa,CAAC;;MAGjC;KACH,MAAM,IAAIU,KAAK,CAACG,GAAG,KAAK,WAAW,EAAE;MAClCH,KAAK,CAACI,cAAc,EAAE;MAEtB,IAAIJ,KAAK,CAACK,OAAO,IAAIL,KAAK,CAACM,OAAO,EAAE;QAChC,MAAMC,QAAQ,GAAGlB,MAAM,GAAG,CAAC;QAC3BL,kBAAkB,CAACuB,QAAQ,CAAC;QAC5BjB,aAAa,CAACiB,QAAQ,CAAC;OAC1B,MAAM;QACHV,QAAQ,CAACR,MAAM,EAAEC,aAAa,CAAC;;MAGnC;;GAEP,EACD,EAAE,CACL;EAED,OAAO;IACHP,eAAe;IACfC,kBAAkB;IAClBwB,aAAa,EAAEV;GAClB;AACL;AAEA,MAAMJ,YAAY,GAAG,CAACN,SAAiB,EAAEG,YAAoB,EAAEF,MAAc;EACzE,IAAID,SAAS,KAAK,CAAC,CAAC,EAAE;IAClB,OAAOG,YAAY,GAAG,CAAC,GAAG,CAAC,GAAGA,YAAY,GAAG,CAAC,GAAG,CAAC;;EAGtD,OAAOA,YAAY,GAAG,CAAC,GAAGF,MAAM,GAAGE,YAAY,GAAG,CAAC,GAAGA,YAAY;AACtE,CAAC;;;;"}
+{"version":3,"file":"useCurrentRow.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useCurrentRow.ts"],"sourcesContent":["import React from 'react';\nimport { TableStrategy } from '../../types';\n\ntype CurrentRowHandlerCallback = TableStrategy['scrollToIndex'];\n\nexport function useCurrentRow(defaultCurrentRowIndex: number | undefined = 0) {\n    const [currentRowIndex, setCurrentRowIndex] = React.useState<number>(defaultCurrentRowIndex);\n\n    const move = (direction: -1 | 1, length: number, scrollToIndex: CurrentRowHandlerCallback) =>\n        setCurrentRowIndex(currentIndex => {\n            const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;\n            scrollToIndex(direction === -1 ? nextIndex : nextIndex + 3);\n            return nextIndex;\n        });\n    const moveUp = (length: number, callback: CurrentRowHandlerCallback) => move(-1, length, callback);\n    const moveDown = (length: number, callback: CurrentRowHandlerCallback) => move(1, length, callback);\n\n    const onKeyDown = React.useCallback((event: KeyboardEvent, length: number, scrollToIndex: CurrentRowHandlerCallback) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (event.key === 'ArrowUp') {\n            event.preventDefault();\n\n            if (event.ctrlKey || event.metaKey) {\n                const newIndex = 0;\n                setCurrentRowIndex(newIndex);\n                scrollToIndex(newIndex);\n            } else {\n                moveUp(length, scrollToIndex);\n            }\n\n            return;\n        } else if (event.key === 'ArrowDown') {\n            event.preventDefault();\n\n            if (event.ctrlKey || event.metaKey) {\n                const newIndex = length - 1;\n                setCurrentRowIndex(newIndex);\n                scrollToIndex(newIndex);\n            } else {\n                moveDown(length, scrollToIndex);\n            }\n\n            return;\n        }\n    }, []);\n\n    return {\n        currentRowIndex,\n        setCurrentRowIndex,\n        handleKeyDown: onKeyDown,\n    };\n}\n\nconst getNextIndex = (direction: -1 | 1, currentIndex: number, length: number) => {\n    if (direction === -1) {\n        return currentIndex - 1 > 0 ? currentIndex - 1 : 0;\n    }\n\n    return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;\n};\n"],"names":["useCurrentRow","defaultCurrentRowIndex","currentRowIndex","setCurrentRowIndex","React","useState","move","direction","length","scrollToIndex","currentIndex","nextIndex","undefined","getNextIndex","moveUp","callback","moveDown","onKeyDown","useCallback","event","defaultPrevented","key","preventDefault","ctrlKey","metaKey","newIndex","handleKeyDown"],"mappings":";;SAKgBA,aAAa,CAACC,yBAA6C,CAAC;EACxE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAASJ,sBAAsB,CAAC;EAE5F,MAAMK,IAAI,GAAG,CAACC,SAAiB,EAAEC,MAAc,EAAEC,aAAwC,KACrFN,kBAAkB,CAACO,YAAY;IAC3B,MAAMC,SAAS,GAAGD,YAAY,KAAKE,SAAS,GAAGC,YAAY,CAACN,SAAS,EAAEG,YAAY,EAAEF,MAAM,CAAC,GAAG,CAAC;IAChGC,aAAa,CAACF,SAAS,KAAK,CAAC,CAAC,GAAGI,SAAS,GAAGA,SAAS,GAAG,CAAC,CAAC;IAC3D,OAAOA,SAAS;GACnB,CAAC;EACN,MAAMG,MAAM,GAAG,CAACN,MAAc,EAAEO,QAAmC,KAAKT,IAAI,CAAC,CAAC,CAAC,EAAEE,MAAM,EAAEO,QAAQ,CAAC;EAClG,MAAMC,QAAQ,GAAG,CAACR,MAAc,EAAEO,QAAmC,KAAKT,IAAI,CAAC,CAAC,EAAEE,MAAM,EAAEO,QAAQ,CAAC;EAEnG,MAAME,SAAS,GAAGb,cAAK,CAACc,WAAW,CAAC,CAACC,KAAoB,EAAEX,MAAc,EAAEC,aAAwC;IAC/G,IAAIU,KAAK,CAACC,gBAAgB,EAAE;MACxB;;IAGJ,IAAID,KAAK,CAACE,GAAG,KAAK,SAAS,EAAE;MACzBF,KAAK,CAACG,cAAc,EAAE;MAEtB,IAAIH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACK,OAAO,EAAE;QAChC,MAAMC,QAAQ,GAAG,CAAC;QAClBtB,kBAAkB,CAACsB,QAAQ,CAAC;QAC5BhB,aAAa,CAACgB,QAAQ,CAAC;OAC1B,MAAM;QACHX,MAAM,CAACN,MAAM,EAAEC,aAAa,CAAC;;MAGjC;KACH,MAAM,IAAIU,KAAK,CAACE,GAAG,KAAK,WAAW,EAAE;MAClCF,KAAK,CAACG,cAAc,EAAE;MAEtB,IAAIH,KAAK,CAACI,OAAO,IAAIJ,KAAK,CAACK,OAAO,EAAE;QAChC,MAAMC,QAAQ,GAAGjB,MAAM,GAAG,CAAC;QAC3BL,kBAAkB,CAACsB,QAAQ,CAAC;QAC5BhB,aAAa,CAACgB,QAAQ,CAAC;OAC1B,MAAM;QACHT,QAAQ,CAACR,MAAM,EAAEC,aAAa,CAAC;;MAGnC;;GAEP,EAAE,EAAE,CAAC;EAEN,OAAO;IACHP,eAAe;IACfC,kBAAkB;IAClBuB,aAAa,EAAET;GAClB;AACL;AAEA,MAAMJ,YAAY,GAAG,CAACN,SAAiB,EAAEG,YAAoB,EAAEF,MAAc;EACzE,IAAID,SAAS,KAAK,CAAC,CAAC,EAAE;IAClB,OAAOG,YAAY,GAAG,CAAC,GAAG,CAAC,GAAGA,YAAY,GAAG,CAAC,GAAG,CAAC;;EAGtD,OAAOA,YAAY,GAAG,CAAC,GAAGF,MAAM,GAAGE,YAAY,GAAG,CAAC,GAAGA,YAAY;AACtE,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js

@@ -52,29 +52,25 @@ function useEditing(isEnabled, onSave) {
     }
     setChanges(currentChanges);
   }
-  const handleKeyDown = (event, tableRef) => {
+  const handleKeyDown = React__default.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.ctrlKey || event.metaKey) {
       if (event.key === 'e') {
-        if (isEditing) {
-          var _tableRef$current;
-          setIsEditing(false);
-          (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
-        } else {
-          setIsEditing(true);
-        }
-      }
-      if (event.key === 's') {
+        setIsEditing(editing => !editing);
+      } else if (event.key === 's') {
         // Prevent default browser save
         event.preventDefault();
         saveChangesIfNeeded();
       }
     }
-  };
-  const handleBlur = event => {
+  }, [isEditing]);
+  const handleBlur = React__default.useCallback(event => {
     if (event.target === event.currentTarget) {
       saveChangesIfNeeded();
     }
-  };
+  }, []);
   // Creates initial saving states from changes object
   const addSavingStates = () => {
     const changeset = Object.keys(changes || {});

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useEditing.tsx"],"sourcesContent":["import React from 'react';\nimport _ from 'lodash';\nimport { Cell as RTCell } from '@tanstack/react-table';\nimport { Table3Ref } from '../../types';\nimport { IndicatorReason } from '../../components/columns/cell/Indicator';\n\nexport enum SavingStateValue {\n    Saving = 'saving',\n    Saved = 'saved',\n    Error = 'error',\n}\n\nexport type SavingState = {\n    state: SavingStateValue;\n};\n\nexport function useEditing<TType = unknown>(isEnabled: boolean, onSave?: (row: TType) => void) {\n    // used to switch the table into editing mode\n    const [isEditing, setIsEditing] = React.useState(false);\n    // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',\n    // 'saved' should remain for a few seconds to show tick icon after row has been saved.\n    const [savingStates, setSavingStates] = React.useState<Record<string, SavingState> | null>(null);\n\n    // sets of row changes pending save, either they have not saved yet or they have errors\n    const [changes, setChanges] = React.useState<Record<string, TType> | null>(null);\n\n    const [detailModeEditing, setDetailModeEditing] = React.useState(false);\n\n    function getCellValue<T extends TType>(cell: RTCell<T, unknown>) {\n        return changes ? changes[cell.row.id]?.[cell.column.id] : undefined;\n    }\n\n    // Saves editing cell value into editing state.\n    function setCellValue<T extends TType>(cell: RTCell<T, unknown>, value: unknown) {\n        setChanges(currentChanges => {\n            const nextChanges = { ...currentChanges };\n\n            if (nextChanges[cell.row.id]) {\n                nextChanges[cell.row.id][cell.column.id] = value;\n                // we should probably delete the cell if it has just reverted back to its original value\n            } else {\n                nextChanges[cell.row.id] = { ...cell.row.original, [cell.column.id]: value };\n            }\n\n            return nextChanges;\n        });\n    }\n\n    // Removes changes from editing state by row id\n    function resetChange(rowId: string) {\n        let currentChanges: Record<string, TType> | null = changes ? { ...changes } : {};\n        if (currentChanges) {\n            delete currentChanges[rowId];\n        }\n        const changeset = Object.keys(currentChanges);\n        if (changeset.length === 0) {\n            currentChanges = null;\n        }\n\n        setChanges(currentChanges);\n    }\n\n    const handleKeyDown = (event, tableRef: React.RefObject<Table3Ref>) => {\n        if (event.ctrlKey || event.metaKey) {\n            if (event.key === 'e') {\n                if (isEditing) {\n                    setIsEditing(false);\n                    tableRef.current?.focus();\n                } else {\n                    setIsEditing(true);\n                }\n            }\n            if (event.key === 's') {\n                // Prevent default browser save\n                event.preventDefault();\n                saveChangesIfNeeded();\n            }\n        }\n    };\n\n    const handleBlur = (event: React.FocusEvent) => {\n        if (event.target === event.currentTarget) {\n            saveChangesIfNeeded();\n        }\n    };\n\n    // Creates initial saving states from changes object\n    const addSavingStates = () => {\n        const changeset = Object.keys(changes || {});\n        const additionalSavingStates = _.reduce(\n            changeset,\n            (result, value) => {\n                return { ...result, [value]: { state: SavingStateValue.Saving } };\n            },\n            {}\n        );\n        setSavingStates({ ...savingStates, ...additionalSavingStates });\n    };\n\n    // Repoves edititng state by row is. Used in delayed saving indicator.\n    const removeSavingState = (rowId: string) => {\n        const newSavingStates = { ...savingStates };\n        delete newSavingStates[rowId];\n        setSavingStates(newSavingStates);\n    };\n\n    // Checks if we have changes, then saves them\n    const saveChangesIfNeeded = async () => {\n        if (!changes) {\n            return;\n        }\n\n        const changeset = Object.keys(changes);\n        if (onSave && changeset.length) {\n            addSavingStates();\n\n            const responses = await Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])));\n\n            setChanges(currentChanges => {\n                const nextChanges = { ...currentChanges };\n\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        delete nextChanges[rowId];\n                    }\n                });\n\n                return nextChanges;\n            });\n\n            setSavingStates(savingStates => {\n                const nextSavingStates = savingStates ? { ...savingStates } : {};\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        nextSavingStates[rowId] = { state: SavingStateValue.Saved };\n                    } else {\n                        // add the error when validation is added\n                        nextSavingStates[rowId] = { state: SavingStateValue.Error };\n                    }\n                });\n                return nextSavingStates;\n            });\n        }\n    };\n\n    const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n    const removeRowMoveReason = (columnId: string) => {\n        setRowMoveReason(prevState => {\n            const newState = { ...prevState };\n            delete newState[columnId];\n\n            return newState;\n        });\n    };\n\n    const showWarning = React.useCallback(\n        event => {\n            if (isEditing && changes && Object.keys(changes).length > 0) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        },\n        [isEditing, changes]\n    );\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showWarning);\n        };\n    }, [showWarning]);\n\n    return {\n        isEnabled,\n        isEditing,\n        toggleEditing: setIsEditing,\n        changes,\n        getCellValue,\n        setCellValue,\n        saveChangesIfNeeded,\n        detailModeEditing,\n        setDetailModeEditing,\n        rowMoveReason,\n        setRowMoveReason,\n        removeRowMoveReason,\n        handleKeyDown,\n        handleBlur,\n        resetChange,\n        savingStates,\n        removeSavingState,\n    };\n}\n"],"names":["SavingStateValue","useEditing","isEnabled","onSave","isEditing","setIsEditing","React","useState","savingStates","setSavingStates","changes","setChanges","detailModeEditing","setDetailModeEditing","getCellValue","cell","row","id","column","undefined","setCellValue","value","currentChanges","nextChanges","original","resetChange","rowId","changeset","Object","keys","length","handleKeyDown","event","tableRef","ctrlKey","metaKey","key","current","focus","preventDefault","saveChangesIfNeeded","handleBlur","target","currentTarget","addSavingStates","additionalSavingStates","_","reduce","result","state","Saving","removeSavingState","newSavingStates","Promise","allSettled","map","responses","forEach","response","index","status","nextSavingStates","Saved","Error","rowMoveReason","setRowMoveReason","removeRowMoveReason","columnId","prevState","newState","showWarning","useCallback","returnValue","useEffect","window","addEventListener","removeEventListener","toggleEditing"],"mappings":"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"}
+{"version":3,"file":"useEditing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useEditing.tsx"],"sourcesContent":["import React from 'react';\nimport _ from 'lodash';\nimport { Cell as RTCell } from '@tanstack/react-table';\nimport { IndicatorReason } from '../../components/columns/cell/Indicator';\n\nexport enum SavingStateValue {\n    Saving = 'saving',\n    Saved = 'saved',\n    Error = 'error',\n}\n\nexport type SavingState = {\n    state: SavingStateValue;\n};\n\nexport function useEditing<TType = unknown>(isEnabled: boolean, onSave?: (row: TType) => void) {\n    // used to switch the table into editing mode\n    const [isEditing, setIsEditing] = React.useState(false);\n    // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',\n    // 'saved' should remain for a few seconds to show tick icon after row has been saved.\n    const [savingStates, setSavingStates] = React.useState<Record<string, SavingState> | null>(null);\n\n    // sets of row changes pending save, either they have not saved yet or they have errors\n    const [changes, setChanges] = React.useState<Record<string, TType> | null>(null);\n\n    const [detailModeEditing, setDetailModeEditing] = React.useState(false);\n\n    function getCellValue<T extends TType>(cell: RTCell<T, unknown>) {\n        return changes ? changes[cell.row.id]?.[cell.column.id] : undefined;\n    }\n\n    // Saves editing cell value into editing state.\n    function setCellValue<T extends TType>(cell: RTCell<T, unknown>, value: unknown) {\n        setChanges(currentChanges => {\n            const nextChanges = { ...currentChanges };\n\n            if (nextChanges[cell.row.id]) {\n                nextChanges[cell.row.id][cell.column.id] = value;\n                // we should probably delete the cell if it has just reverted back to its original value\n            } else {\n                nextChanges[cell.row.id] = { ...cell.row.original, [cell.column.id]: value };\n            }\n\n            return nextChanges;\n        });\n    }\n\n    // Removes changes from editing state by row id\n    function resetChange(rowId: string) {\n        let currentChanges: Record<string, TType> | null = changes ? { ...changes } : {};\n        if (currentChanges) {\n            delete currentChanges[rowId];\n        }\n        const changeset = Object.keys(currentChanges);\n        if (changeset.length === 0) {\n            currentChanges = null;\n        }\n\n        setChanges(currentChanges);\n    }\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent) => {\n            if (event.defaultPrevented) {\n                return;\n            }\n\n            if (event.ctrlKey || event.metaKey) {\n                if (event.key === 'e') {\n                    setIsEditing(editing => !editing);\n                } else if (event.key === 's') {\n                    // Prevent default browser save\n                    event.preventDefault();\n                    saveChangesIfNeeded();\n                }\n            }\n        },\n        [isEditing]\n    );\n\n    const handleBlur = React.useCallback((event: React.FocusEvent) => {\n        if (event.target === event.currentTarget) {\n            saveChangesIfNeeded();\n        }\n    }, []);\n\n    // Creates initial saving states from changes object\n    const addSavingStates = () => {\n        const changeset = Object.keys(changes || {});\n        const additionalSavingStates = _.reduce(\n            changeset,\n            (result, value) => {\n                return { ...result, [value]: { state: SavingStateValue.Saving } };\n            },\n            {}\n        );\n        setSavingStates({ ...savingStates, ...additionalSavingStates });\n    };\n\n    // Repoves edititng state by row is. Used in delayed saving indicator.\n    const removeSavingState = (rowId: string) => {\n        const newSavingStates = { ...savingStates };\n        delete newSavingStates[rowId];\n        setSavingStates(newSavingStates);\n    };\n\n    // Checks if we have changes, then saves them\n    const saveChangesIfNeeded = async () => {\n        if (!changes) {\n            return;\n        }\n\n        const changeset = Object.keys(changes);\n        if (onSave && changeset.length) {\n            addSavingStates();\n\n            const responses = await Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])));\n\n            setChanges(currentChanges => {\n                const nextChanges = { ...currentChanges };\n\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        delete nextChanges[rowId];\n                    }\n                });\n\n                return nextChanges;\n            });\n\n            setSavingStates(savingStates => {\n                const nextSavingStates = savingStates ? { ...savingStates } : {};\n                responses.forEach((response, index) => {\n                    const rowId = changeset[index];\n\n                    if (response.status === 'fulfilled') {\n                        nextSavingStates[rowId] = { state: SavingStateValue.Saved };\n                    } else {\n                        // add the error when validation is added\n                        nextSavingStates[rowId] = { state: SavingStateValue.Error };\n                    }\n                });\n                return nextSavingStates;\n            });\n        }\n    };\n\n    const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n    const removeRowMoveReason = (columnId: string) => {\n        setRowMoveReason(prevState => {\n            const newState = { ...prevState };\n            delete newState[columnId];\n\n            return newState;\n        });\n    };\n\n    const showWarning = React.useCallback(\n        event => {\n            if (isEditing && changes && Object.keys(changes).length > 0) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        },\n        [isEditing, changes]\n    );\n\n    React.useEffect(() => {\n        window.addEventListener('beforeunload', showWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showWarning);\n        };\n    }, [showWarning]);\n\n    return {\n        isEnabled,\n        isEditing,\n        toggleEditing: setIsEditing,\n        changes,\n        getCellValue,\n        setCellValue,\n        saveChangesIfNeeded,\n        detailModeEditing,\n        setDetailModeEditing,\n        rowMoveReason,\n        setRowMoveReason,\n        removeRowMoveReason,\n        handleKeyDown,\n        handleBlur,\n        resetChange,\n        savingStates,\n        removeSavingState,\n    };\n}\n"],"names":["SavingStateValue","useEditing","isEnabled","onSave","isEditing","setIsEditing","React","useState","savingStates","setSavingStates","changes","setChanges","detailModeEditing","setDetailModeEditing","getCellValue","cell","row","id","column","undefined","setCellValue","value","currentChanges","nextChanges","original","resetChange","rowId","changeset","Object","keys","length","handleKeyDown","useCallback","event","defaultPrevented","ctrlKey","metaKey","key","editing","preventDefault","saveChangesIfNeeded","handleBlur","target","currentTarget","addSavingStates","additionalSavingStates","_","reduce","result","state","Saving","removeSavingState","newSavingStates","Promise","allSettled","map","responses","forEach","response","index","status","nextSavingStates","Saved","Error","rowMoveReason","setRowMoveReason","removeRowMoveReason","columnId","prevState","newState","showWarning","returnValue","useEffect","window","addEventListener","removeEventListener","toggleEditing"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseHoverState.js

@@ -4,6 +4,9 @@ import { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused.j
 function usePauseHoverState() {
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
   const onKeyDown = React__default.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       setHoverStatePaused(true);
     }

package/dist/esm/packages/taco/src/components/Table3/hooks/features/usePauseHoverState.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePauseHoverState.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/usePauseHoverState.ts"],"sourcesContent":["import React from 'react';\nimport { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused';\n\nexport function usePauseHoverState() {\n    const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();\n\n    const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            setHoverStatePaused(true);\n        }\n    }, []);\n\n    return {\n        isPaused: isHoverStatePaused,\n        pause: setHoverStatePaused,\n        handleKeyDown: onKeyDown,\n    };\n}\n"],"names":["usePauseHoverState","isHoverStatePaused","setHoverStatePaused","useIsHoverStatePaused","onKeyDown","React","useCallback","event","key","isPaused","pause","handleKeyDown"],"mappings":";;;SAGgBA,kBAAkB;EAC9B,MAAM,CAACC,kBAAkB,EAAEC,mBAAmB,CAAC,GAAGC,qBAAqB,EAAE;EAEzE,MAAMC,SAAS,GAAGC,cAAK,CAACC,WAAW,CAAEC,KAA0B;IAC3D,IAAIA,KAAK,CAACC,GAAG,KAAK,SAAS,IAAID,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;MACtDN,mBAAmB,CAAC,IAAI,CAAC;;GAEhC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHO,QAAQ,EAAER,kBAAkB;IAC5BS,KAAK,EAAER,mBAAmB;IAC1BS,aAAa,EAAEP;GAClB;AACL;;;;"}
+{"version":3,"file":"usePauseHoverState.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/usePauseHoverState.ts"],"sourcesContent":["import React from 'react';\nimport { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused';\n\nexport function usePauseHoverState() {\n    const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();\n\n    const onKeyDown = React.useCallback((event: KeyboardEvent) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            setHoverStatePaused(true);\n        }\n    }, []);\n\n    return {\n        isPaused: isHoverStatePaused,\n        pause: setHoverStatePaused,\n        handleKeyDown: onKeyDown,\n    };\n}\n"],"names":["usePauseHoverState","isHoverStatePaused","setHoverStatePaused","useIsHoverStatePaused","onKeyDown","React","useCallback","event","defaultPrevented","key","isPaused","pause","handleKeyDown"],"mappings":";;;SAGgBA,kBAAkB;EAC9B,MAAM,CAACC,kBAAkB,EAAEC,mBAAmB,CAAC,GAAGC,qBAAqB,EAAE;EAEzE,MAAMC,SAAS,GAAGC,cAAK,CAACC,WAAW,CAAEC,KAAoB;IACrD,IAAIA,KAAK,CAACC,gBAAgB,EAAE;MACxB;;IAGJ,IAAID,KAAK,CAACE,GAAG,KAAK,SAAS,IAAIF,KAAK,CAACE,GAAG,KAAK,WAAW,EAAE;MACtDP,mBAAmB,CAAC,IAAI,CAAC;;GAEhC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHQ,QAAQ,EAAET,kBAAkB;IAC5BU,KAAK,EAAET,mBAAmB;IAC1BU,aAAa,EAAER;GAClB;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowClick.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 
 function useRowClick(onRowClick) {
   const onKeyDown = React__default.useCallback((event, table) => {
-    if (typeof onRowClick !== 'function' || event.isDefaultPrevented() || event.isPropagationStopped()) {
+    if (typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
     const rows = table.getRowModel().rows;