@economic/taco 1.40.3 → 2.0.0-alpha.173

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

@@ -0,0 +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 } 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        table.getRowModel().rows.length,\n        JSON.stringify(table.getState().sorting),\n        JSON.stringify(table.getState().columnVisibility),\n    ]);\n\n    const handleSearch = (query: any) => {\n        const value = String(query ?? '');\n        tableMeta.search.setQuery(value);\n\n        if (tableMeta.search.excludeUnmatchedResults) {\n            if (value?.length) {\n                table.setGlobalFilter(value);\n            } else {\n                table.resetGlobalFilter();\n            }\n        } else if (tableMeta.search.loadAll) {\n            // don't pass the search query because filters when loading all, we need all - not filtered data\n            tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n        }\n\n        const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, value, table);\n\n        if (firstRowIndex) {\n            scrollTo(firstRowIndex);\n        }\n    };\n\n    const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n        tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n        if (enabled) {\n            if (tableMeta.search.query) {\n                table.setGlobalFilter(tableMeta.search.query);\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 !== undefined &&\n                        globalFilterFn(\n                            isDate(row.original[column.id])\n                                ? format(row.original[column.id]) ?? ''\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    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","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","query","String","setQuery","excludeUnmatchedResults","setGlobalFilter","resetGlobalFilter","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","push","e","setHighlightedColumnIndexes"],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import React__default from 'react';
+import { IconButton } from '../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Group } from '../../../Group/Group.js';
+import { Menu } from '../../../Menu/Menu.js';
+import { RowHeight } from './RowHeight.js';
+import { Search } from './Search.js';
+import { Filters } from './Filter/filters/Filters.js';
+import { ColumnSettings } from './ColumnSettings.js';
+import { EditButton } from './EditButton.js';
+import { PrintButton } from './PrintButton/PrintButton.js';
+import { FontSize } from './FontSize.js';
+
+function Toolbar(props) {
+  const {
+    left,
+    right,
+    scrollToIndex,
+    table,
+    tableProps,
+    total
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  if (!isToolbarVisible(props)) {
+    return null;
+  }
+  const tableMeta = table.options.meta;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 flex flex-shrink flex-grow-0 gap-2",
+    "data-taco": "table3-toolbar"
+  }, left, /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto flex-shrink-0 print:hidden"
+  }, tableMeta.editing.isEnabled ? /*#__PURE__*/React__default.createElement(EditButton, {
+    table: table
+  }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(Filters, {
+    table: table,
+    total: total
+  }) : null, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(ColumnSettings, {
+    table: table
+  }) : null, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
+    table: table,
+    tableProps: tableProps
+  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "more",
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
+      align: "end"
+    }, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: `height-${tableMeta.rowHeight.height}`,
+      subMenu: () => /*#__PURE__*/React__default.createElement(RowHeight, {
+        table: table
+      })
+    }, texts.table3.rowHeight.tooltip) : null, tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "font-size",
+      subMenu: () => /*#__PURE__*/React__default.createElement(FontSize, {
+        table: table
+      })
+    }, texts.table3.fontSize.tooltip) : null))
+  }) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search, {
+    scrollToIndex: scrollToIndex,
+    table: table
+  }) : null));
+}
+function isMoreVisible(props) {
+  const {
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;
+}
+function isToolbarVisible(props) {
+  const {
+    left,
+    right,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
+  const hasInternalToolbar = enableSettingsButton || tableMeta.editing.isEnabled || tableMeta.printing.isEnabled || table.options.enableColumnFilters || tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled || tableMeta.search.isEnabled;
+  return hasInternalToolbar || !!left || !!right;
+}
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,87 @@
+import React__default from 'react';
+import { isInternalColumn } from '../../util/columns.js';
+
+function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
+  let index = defaultFrozenIndex;
+  if (options.enableRowDrag) {
+    index++;
+  }
+  if (options.enableRowSelection) {
+    index++;
+  }
+  if (options.enableRowExpansion) {
+    index++;
+  }
+  return index >= 0 ? index : undefined;
+}
+/*
+Because of the desired behaviour of column freezing we use custom state and just an index.
+If a frozen column is, for example, hidden, then the desired behaviour is that the next available column gets frozen.
+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 [horizontallyScrolled, setHorizontallyScrolled] = React__default.useState(false);
+  const onScroll = event => {
+    if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {
+      setHorizontallyScrolled(true);
+    } else if (event.currentTarget.scrollLeft === 0 && horizontallyScrolled) {
+      setHorizontallyScrolled(false);
+    }
+  };
+  const setFrozenColumnIndex = index => {
+    _setFrozenColumnIndex(index !== null && index !== void 0 ? index : getDefaultFrozenIndex(options));
+  };
+  return {
+    isEnabled: options.enableColumnFreezing,
+    frozenColumnIndex,
+    setFrozenColumnIndex,
+    horizontallyScrolled,
+    handleScroll: onScroll
+  };
+}
+function useColumnFreezingStyle(tableId, table) {
+  const {
+    columnOrder,
+    columnSizing,
+    columnSizingInfo,
+    columnVisibility
+  } = table.getState();
+  const tableMeta = table.options.meta;
+  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 all frozen columns haven't had their size set yet, then abort
+      if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
+        return undefined;
+      }
+      const offsets = {};
+      visibleFrozenColumns.reduce((offset, columnId) => {
+        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})) {
+                    position: sticky;
+                    z-index: 20; 
+                }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${tableMeta.columnFreezing.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];
+      // 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}) {
+                    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]);
+  return style;
+}
+
+export { getDefaultFrozenIndex, useColumnFreezing, useColumnFreezingStyle };
+//# sourceMappingURL=useColumnFreezing.js.map

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

@@ -0,0 +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":";;;SAKgBA,qBAAqB,CAACC,OAAsB,EAAEC,kBAAkB,GAAG,CAAC,CAAC;EACjF,IAAIC,KAAK,GAAGD,kBAAkB;EAE9B,IAAID,OAAO,CAACG,aAAa,EAAE;IACvBD,KAAK,EAAE;;EAGX,IAAIF,OAAO,CAACI,kBAAkB,EAAE;IAC5BF,KAAK,EAAE;;EAGX,IAAIF,OAAO,CAACK,kBAAkB,EAAE;IAC5BH,KAAK,EAAE;;EAGX,OAAOA,KAAK,IAAI,CAAC,GAAGA,KAAK,GAAGI,SAAS;AACzC;AAEA;;;;;SAKgBC,iBAAiB,CAACN,kBAAsC,EAAED,OAAsB;EAC5F,MAAM,CAACQ,iBAAiB,EAAEC,qBAAqB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAC7DZ,qBAAqB,CAACC,OAAO,EAAEC,kBAAkB,CAAC,CACrD;EAED,MAAM,CAACW,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGH,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE7E,MAAMG,QAAQ,GAAIC,KAAuC;IACrD,IAAIA,KAAK,CAACC,aAAa,CAACC,UAAU,GAAG,CAAC,IAAI,CAACL,oBAAoB,EAAE;MAC7DC,uBAAuB,CAAC,IAAI,CAAC;KAChC,MAAM,IAAIE,KAAK,CAACC,aAAa,CAACC,UAAU,KAAK,CAAC,IAAIL,oBAAoB,EAAE;MACrEC,uBAAuB,CAAC,KAAK,CAAC;;GAErC;EAED,MAAMK,oBAAoB,GAAIhB,KAAyB;IACnDO,qBAAqB,CAACP,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIH,qBAAqB,CAACC,OAAO,CAAC,CAAC;GACjE;EAED,OAAO;IACHmB,SAAS,EAAEnB,OAAO,CAACoB,oBAAoB;IACvCZ,iBAAiB;IACjBU,oBAAoB;IACpBN,oBAAoB;IACpBS,YAAY,EAAEP;GACjB;AACL;SAEgBQ,sBAAsB,CAAkBC,OAAe,EAAEC,KAAmB;EACxF,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,gBAAgB;IAAEC;GAAkB,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAC1F,MAAMC,SAAS,GAAGN,KAAK,CAACxB,OAAO,CAAC+B,IAAwB;EAExD,MAAMC,KAAK,GAAGtB,cAAK,CAACuB,OAAO,CAAC;IACxB,IAAIH,SAAS,CAACI,cAAc,CAACf,SAAS,IAAIW,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,KAAKF,SAAS,EAAE;MAChG,MAAM6B,oBAAoB,GAAGX,KAAK,CAC7BY,qBAAqB,EAAE,CACvBC,KAAK,CAAC,CAAC,EAAEP,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,GAAG,CAAC,CAAC,CACxD8B,GAAG,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,CAAC;;MAG7B,IAAIL,oBAAoB,CAACM,KAAK,CAACD,EAAE,IAAId,YAAY,CAACc,EAAE,CAAC,KAAKlC,SAAS,CAAC,EAAE;QAClE,OAAOA,SAAS;;MAGpB,MAAMoC,OAAO,GAAG,EAAE;MAElBP,oBAAoB,CAACQ,MAAM,CAAC,CAACC,MAAM,EAAEC,QAAQ;QACzCH,OAAO,CAACG,QAAQ,CAAC,GAAGD,MAAM;QAC1B,OAAOA,MAAM,GAAGlB,YAAY,CAACmB,QAAQ,CAAC;OACzC,EAAE,CAAC,CAAC;MAEL,MAAMC,MAAM,GAAG,CACXC,MAAM,CAACC,MAAM,CAACN,OAAO,CAAC,CACjBJ,GAAG,CAAC,CAACM,MAAM,EAAE1C,KAAK,SAASqB,qCAAqCrB,KAAK,GAAG,cAAc0C,YAAY,CAAC,CACnGK,IAAI,CAAC,IAAI,CAAC,MACX1B,4CAA4CO,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,GAAG;;;kBAG3F,MACEe,wEACAO,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,GAAG;;kBAG/C,CACL;MAED,MAAMqC,QAAQ,GAAGV,oBAAoB,CAACL,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,CAAC;;;;;MAMjF,IAAIqC,QAAQ,IAAI,CAACK,gBAAgB,CAACL,QAAQ,CAAC,EAAE;QACzCC,MAAM,CAACK,IAAI,KAAK5B,yEACZO,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,GAAG;;kBAG/C,CAAC;;MAGP,OAAOsC,MAAM,CAACG,IAAI,CAAC,IAAI,CAAC;;IAG5B,OAAO3C,SAAS;GACnB,EAAE,CACCmB,WAAW,EACXC,YAAY,EACZC,gBAAgB,EAChBC,gBAAgB,EAChBE,SAAS,CAACI,cAAc,CAACf,SAAS,EAClCW,SAAS,CAACI,cAAc,CAAC1B,iBAAiB,CAC7C,CAAC;EAEF,OAAOwB,KAAK;AAChB;;;;"}

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

@@ -0,0 +1,45 @@
+import { COLUMN_ID } from '../../components/columns/internal/Actions.js';
+import { COLUMN_ID as COLUMN_ID$1 } from '../../components/columns/internal/EditingActions.js';
+
+function useColumnOrdering(options) {
+  return {
+    isEnabled: options.enableColumnOrdering
+  };
+}
+function ensureOrdering(columns, settingsOrder) {
+  // internal column come with a defined order
+  const internalColumns = columns.filter(column => {
+    var _column$id;
+    return ((_column$id = column.id) === null || _column$id === void 0 ? void 0 : _column$id.startsWith('__')) && column.id !== COLUMN_ID && column.id !== COLUMN_ID$1;
+  }).map(column => column.id);
+  // columns with ordering disabled should be moved to the front
+  const orderingDisabled = [];
+  const orderingEnabled = [];
+  let orderedColumns = columns;
+  // if settings is defined, make sure the columns that are actual children are sorted by it
+  if (Array.isArray(settingsOrder)) {
+    orderedColumns = columns.slice().sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
+  }
+  orderedColumns.forEach(column => {
+    var _column$id2, _column$meta;
+    if ((_column$id2 = column.id) !== null && _column$id2 !== void 0 && _column$id2.startsWith('__')) {
+      return;
+    }
+    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
+      orderingEnabled.push(column.id);
+    } else {
+      orderingDisabled.push(column.id);
+    }
+  });
+  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
+  // actions should always be last, enforce that
+  if (columns.findIndex(column => column.id === COLUMN_ID || column.id === COLUMN_ID$1) > -1) {
+    order.push(COLUMN_ID);
+  }
+  return order;
+}
+
+export { ensureOrdering, useColumnOrdering };
+//# sourceMappingURL=useColumnOrdering.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnOrdering.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useColumnOrdering.ts"],"sourcesContent":["import { ColumnDef } from '@tanstack/react-table';\nimport { Table3Options } from '../../types';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../../components/columns/internal/Actions';\nimport { COLUMN_ID as EDITING_ACTIONS_COLUMN_ID } from '../../components/columns/internal/EditingActions';\n\nexport function useColumnOrdering(options: Table3Options) {\n    return {\n        isEnabled: options.enableColumnOrdering,\n    };\n}\nexport function ensureOrdering<TType = unknown>(columns: ColumnDef<TType>[], settingsOrder: string[] | undefined): string[] {\n    // internal column come with a defined order\n    const internalColumns = columns\n        .filter(\n            column => column.id?.startsWith('__') && column.id !== ACTIONS_COLUMN_ID && column.id !== EDITING_ACTIONS_COLUMN_ID\n        )\n        .map(column => column.id) as string[];\n\n    // columns with ordering disabled should be moved to the front\n    const orderingDisabled: string[] = [];\n    const orderingEnabled: string[] = [];\n\n    let orderedColumns = columns;\n\n    // if settings is defined, make sure the columns that are actual children are sorted by it\n    if (Array.isArray(settingsOrder)) {\n        orderedColumns = columns.slice().sort(\n            // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end\n            (a, b) => (settingsOrder.indexOf(a.id as string) >>> 0) - (settingsOrder.indexOf(b.id as string) >>> 0)\n        );\n    }\n\n    orderedColumns.forEach(column => {\n        if (column.id?.startsWith('__')) {\n            return;\n        }\n\n        if (column.meta?.enableOrdering) {\n            orderingEnabled.push(column.id as string);\n        } else {\n            orderingDisabled.push(column.id as string);\n        }\n    });\n\n    const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];\n\n    // actions should always be last, enforce that\n    if (columns.findIndex(column => column.id === ACTIONS_COLUMN_ID || column.id === EDITING_ACTIONS_COLUMN_ID) > -1) {\n        order.push(ACTIONS_COLUMN_ID);\n    }\n\n    return order;\n}\n"],"names":["useColumnOrdering","options","isEnabled","enableColumnOrdering","ensureOrdering","columns","settingsOrder","internalColumns","filter","column","id","startsWith","ACTIONS_COLUMN_ID","EDITING_ACTIONS_COLUMN_ID","map","orderingDisabled","orderingEnabled","orderedColumns","Array","isArray","slice","sort","a","b","indexOf","forEach","meta","enableOrdering","push","order","findIndex"],"mappings":";;;SAKgBA,iBAAiB,CAACC,OAAsB;EACpD,OAAO;IACHC,SAAS,EAAED,OAAO,CAACE;GACtB;AACL;SACgBC,cAAc,CAAkBC,OAA2B,EAAEC,aAAmC;;EAE5G,MAAMC,eAAe,GAAGF,OAAO,CAC1BG,MAAM,CACHC,MAAM;IAAA;IAAA,OAAI,eAAAA,MAAM,CAACC,EAAE,+CAAT,WAAWC,UAAU,CAAC,IAAI,CAAC,KAAIF,MAAM,CAACC,EAAE,KAAKE,SAAiB,IAAIH,MAAM,CAACC,EAAE,KAAKG,WAAyB;IACtH,CACAC,GAAG,CAACL,MAAM,IAAIA,MAAM,CAACC,EAAE,CAAa;;EAGzC,MAAMK,gBAAgB,GAAa,EAAE;EACrC,MAAMC,eAAe,GAAa,EAAE;EAEpC,IAAIC,cAAc,GAAGZ,OAAO;;EAG5B,IAAIa,KAAK,CAACC,OAAO,CAACb,aAAa,CAAC,EAAE;IAC9BW,cAAc,GAAGZ,OAAO,CAACe,KAAK,EAAE,CAACC,IAAI;;IAEjC,CAACC,CAAC,EAAEC,CAAC,KAAK,CAACjB,aAAa,CAACkB,OAAO,CAACF,CAAC,CAACZ,EAAY,CAAC,KAAK,CAAC,KAAKJ,aAAa,CAACkB,OAAO,CAACD,CAAC,CAACb,EAAY,CAAC,KAAK,CAAC,CAAC,CAC1G;;EAGLO,cAAc,CAACQ,OAAO,CAAChB,MAAM;;IACzB,mBAAIA,MAAM,CAACC,EAAE,wCAAT,YAAWC,UAAU,CAAC,IAAI,CAAC,EAAE;MAC7B;;IAGJ,oBAAIF,MAAM,CAACiB,IAAI,yCAAX,aAAaC,cAAc,EAAE;MAC7BX,eAAe,CAACY,IAAI,CAACnB,MAAM,CAACC,EAAY,CAAC;KAC5C,MAAM;MACHK,gBAAgB,CAACa,IAAI,CAACnB,MAAM,CAACC,EAAY,CAAC;;GAEjD,CAAC;EAEF,MAAMmB,KAAK,GAAG,CAAC,GAAGtB,eAAe,EAAE,GAAGQ,gBAAgB,EAAE,GAAGC,eAAe,CAAC;;EAG3E,IAAIX,OAAO,CAACyB,SAAS,CAACrB,MAAM,IAAIA,MAAM,CAACC,EAAE,KAAKE,SAAiB,IAAIH,MAAM,CAACC,EAAE,KAAKG,WAAyB,CAAC,GAAG,CAAC,CAAC,EAAE;IAC9GgB,KAAK,CAACD,IAAI,CAAChB,SAAiB,CAAC;;EAGjC,OAAOiB,KAAK;AAChB;;;;"}

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

@@ -0,0 +1,52 @@
+import React__default from 'react';
+
+function useCurrentRow(defaultCurrentRowIndex = 0) {
+  const [currentRowIndex, setCurrentRowIndex] = React__default.useState(defaultCurrentRowIndex);
+  const move = (direction, length, scrollToIndex) => setCurrentRowIndex(currentIndex => {
+    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
+    scrollToIndex(direction === -1 ? nextIndex : nextIndex + 3);
+    return nextIndex;
+  });
+  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()) {
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (event.ctrlKey || event.metaKey) {
+        const newIndex = 0;
+        setCurrentRowIndex(newIndex);
+        scrollToIndex(newIndex);
+      } else {
+        moveUp(length, scrollToIndex);
+      }
+      return;
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (event.ctrlKey || event.metaKey) {
+        const newIndex = length - 1;
+        setCurrentRowIndex(newIndex);
+        scrollToIndex(newIndex);
+      } else {
+        moveDown(length, scrollToIndex);
+      }
+      return;
+    }
+  }, []);
+  return {
+    currentRowIndex,
+    setCurrentRowIndex,
+    handleKeyDown: onKeyDown
+  };
+}
+const getNextIndex = (direction, currentIndex, length) => {
+  if (direction === -1) {
+    return currentIndex - 1 > 0 ? currentIndex - 1 : 0;
+  }
+  return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;
+};
+
+export { useCurrentRow };
+//# sourceMappingURL=useCurrentRow.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,197 @@
+import React__default from 'react';
+import _ from 'lodash-es';
+
+var SavingStateValue;
+(function (SavingStateValue) {
+  SavingStateValue["Saving"] = "saving";
+  SavingStateValue["Saved"] = "saved";
+  SavingStateValue["Error"] = "error";
+})(SavingStateValue || (SavingStateValue = {}));
+function useEditing(isEnabled, onSave) {
+  // used to switch the table into editing mode
+  const [isEditing, setIsEditing] = React__default.useState(false);
+  // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',
+  // 'saved' should remain for a few seconds to show tick icon after row has been saved.
+  const [savingStates, setSavingStates] = React__default.useState(null);
+  // sets of row changes pending save, either they have not saved yet or they have errors
+  const [changes, setChanges] = React__default.useState(null);
+  const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
+  function getCellValue(cell) {
+    var _changes$cell$row$id;
+    return changes ? (_changes$cell$row$id = changes[cell.row.id]) === null || _changes$cell$row$id === void 0 ? void 0 : _changes$cell$row$id[cell.column.id] : undefined;
+  }
+  // Saves editing cell value into editing state.
+  function setCellValue(cell, value) {
+    setChanges(currentChanges => {
+      const nextChanges = {
+        ...currentChanges
+      };
+      if (nextChanges[cell.row.id]) {
+        nextChanges[cell.row.id][cell.column.id] = value;
+        // we should probably delete the cell if it has just reverted back to its original value
+      } else {
+        nextChanges[cell.row.id] = {
+          ...cell.row.original,
+          [cell.column.id]: value
+        };
+      }
+      return nextChanges;
+    });
+  }
+  // Removes changes from editing state by row id
+  function resetChange(rowId) {
+    let currentChanges = changes ? {
+      ...changes
+    } : {};
+    if (currentChanges) {
+      delete currentChanges[rowId];
+    }
+    const changeset = Object.keys(currentChanges);
+    if (changeset.length === 0) {
+      currentChanges = null;
+    }
+    setChanges(currentChanges);
+  }
+  const handleKeyDown = (event, tableRef) => {
+    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') {
+        // Prevent default browser save
+        event.preventDefault();
+        saveChangesIfNeeded();
+      }
+    }
+  };
+  const handleBlur = event => {
+    if (event.target === event.currentTarget) {
+      saveChangesIfNeeded();
+    }
+  };
+  // Creates initial saving states from changes object
+  const addSavingStates = () => {
+    const changeset = Object.keys(changes || {});
+    const additionalSavingStates = _.reduce(changeset, (result, value) => {
+      return {
+        ...result,
+        [value]: {
+          state: SavingStateValue.Saving
+        }
+      };
+    }, {});
+    setSavingStates({
+      ...savingStates,
+      ...additionalSavingStates
+    });
+  };
+  // Repoves edititng state by row is. Used in delayed saving indicator.
+  const removeSavingState = rowId => {
+    const newSavingStates = {
+      ...savingStates
+    };
+    delete newSavingStates[rowId];
+    setSavingStates(newSavingStates);
+  };
+  // Checks if we have changes, then saves them
+  const saveChangesIfNeeded = function () {
+    try {
+      if (!changes) {
+        return Promise.resolve();
+      }
+      const changeset = Object.keys(changes);
+      const _temp = function () {
+        if (onSave && changeset.length) {
+          addSavingStates();
+          return Promise.resolve(Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])))).then(function (responses) {
+            setChanges(currentChanges => {
+              const nextChanges = {
+                ...currentChanges
+              };
+              responses.forEach((response, index) => {
+                const rowId = changeset[index];
+                if (response.status === 'fulfilled') {
+                  delete nextChanges[rowId];
+                }
+              });
+              return nextChanges;
+            });
+            setSavingStates(savingStates => {
+              const nextSavingStates = savingStates ? {
+                ...savingStates
+              } : {};
+              responses.forEach((response, index) => {
+                const rowId = changeset[index];
+                if (response.status === 'fulfilled') {
+                  nextSavingStates[rowId] = {
+                    state: SavingStateValue.Saved
+                  };
+                } else {
+                  // add the error when validation is added
+                  nextSavingStates[rowId] = {
+                    state: SavingStateValue.Error
+                  };
+                }
+              });
+              return nextSavingStates;
+            });
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
+  const removeRowMoveReason = columnId => {
+    setRowMoveReason(prevState => {
+      const newState = {
+        ...prevState
+      };
+      delete newState[columnId];
+      return newState;
+    });
+  };
+  const showWarning = React__default.useCallback(event => {
+    if (isEditing && changes && Object.keys(changes).length > 0) {
+      event.returnValue = true;
+      return true;
+    }
+    return false;
+  }, [isEditing, changes]);
+  React__default.useEffect(() => {
+    window.addEventListener('beforeunload', showWarning);
+    return () => {
+      window.removeEventListener('beforeunload', showWarning);
+    };
+  }, [showWarning]);
+  return {
+    isEnabled,
+    isEditing,
+    toggleEditing: setIsEditing,
+    changes,
+    getCellValue,
+    setCellValue,
+    saveChangesIfNeeded,
+    detailModeEditing,
+    setDetailModeEditing,
+    rowMoveReason,
+    setRowMoveReason,
+    removeRowMoveReason,
+    handleKeyDown,
+    handleBlur,
+    resetChange,
+    savingStates,
+    removeSavingState
+  };
+}
+
+export { SavingStateValue, useEditing };
+//# sourceMappingURL=useEditing.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+function useFontSize(isEnabled, defaultFontSize = 'medium') {
+  const [size, setSize] = React__default.useState(defaultFontSize);
+  return {
+    isEnabled,
+    size,
+    setSize: isEnabled ? setSize : () => undefined
+  };
+}
+
+export { useFontSize };
+//# sourceMappingURL=useFontSize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFontSize.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useFontSize.ts"],"sourcesContent":["import React from 'react';\nimport { Table3FontSize } from '../../types';\n\nexport function useFontSize(isEnabled: boolean, defaultFontSize: Table3FontSize = 'medium') {\n    const [size, setSize] = React.useState<Table3FontSize>(defaultFontSize);\n\n    return {\n        isEnabled,\n        size,\n        setSize: isEnabled ? setSize : () => undefined,\n    };\n}\n"],"names":["useFontSize","isEnabled","defaultFontSize","size","setSize","React","useState","undefined"],"mappings":";;SAGgBA,WAAW,CAACC,SAAkB,EAAEC,kBAAkC,QAAQ;EACtF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAiBJ,eAAe,CAAC;EAEvE,OAAO;IACHD,SAAS;IACTE,IAAI;IACJC,OAAO,EAAEH,SAAS,GAAGG,OAAO,GAAG,MAAMG;GACxC;AACL;;;;"}

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { useIsHoverStatePaused } from '../../../../hooks/useIsHoverStatePaused.js';
+
+function usePauseHoverState() {
+  const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
+  const onKeyDown = React__default.useCallback(event => {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      setHoverStatePaused(true);
+    }
+  }, []);
+  return {
+    isPaused: isHoverStatePaused,
+    pause: setHoverStatePaused,
+    handleKeyDown: onKeyDown
+  };
+}
+
+export { usePauseHoverState };
+//# sourceMappingURL=usePauseHoverState.js.map