@economic/taco 2.40.0 → 2.40.1

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Search/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../../../../components/Provider/Localization';\nimport { SearchInput2 } from '../../../../../../../components/SearchInput2/SearchInput2';\nimport { Switch } from '../../../../../../../components/Switch/Switch';\nimport { TableRef, TableServerLoadAllState } from '../../../../../types';\n\ntype SearchProps<TType = unknown> = {\n    scrollToIndex: any;\n    table: ReactTable<TType>;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n    const { scrollToIndex, table, tableRef } = props;\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLInputElement>(null);\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const query = table.getState().globalFilter;\n    const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n    React.useEffect(() => {\n        if (tableMeta.search.highlightedColumnIndexes.length) {\n            scrollTo(tableMeta.search.highlightedColumnIndexes[0][0]);\n        }\n    }, [tableMeta.search.highlightedColumnIndexes.length]);\n\n    const handleFocus = async () => {\n        // load all data if that is possible\n        if (tableMeta.server.loadAllIfNeeded) {\n            // don't pass the search query because we need all data - not filtered data\n            await tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters);\n        }\n    };\n\n    const handleChange = (query: any) => {\n        table.setGlobalFilter(String(query ?? ''));\n    };\n\n    const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n        tableMeta.search.setEnableGlobalFilter(enabled, table);\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.table.search.excludeUnmatchedResults}\n            checked={!!table.options.enableGlobalFilter}\n            onChange={handleToggleExcludeUnmatchedResults}\n        />\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Escape' && tableMeta.search.currentHighlightColumnIndex !== undefined) {\n            const [rowIndex, cellIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n            if (rowIndex !== undefined && cellIndex !== undefined) {\n                tableMeta.rowActive.setRowActiveIndex(rowIndex);\n\n                requestAnimationFrame(() => {\n                    const cell = tableRef.current?.querySelector(\n                        `tbody > tr[data-row-index=\"${rowIndex}\"] > td[data-cell-index=\"${cellIndex}\"]`\n                    );\n\n                    if (cell) {\n                        (cell as HTMLElement).focus?.();\n                    }\n                });\n            }\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?.length ?? null}\n                loading={tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading}\n                name=\"table-search\"\n                onClickFindPrevious={handlePreviousResult}\n                onClickFindNext={handleNextResult}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                placeholder={texts.table.search.placeholder}\n                settingsContent={settings}\n                ref={ref}\n                shortcut={{ key: 'f', meta: true, shift: false }}\n                value={query}\n            />\n        </>\n    );\n}\n"],"names":["Search","props","scrollToIndex","table","tableRef","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","query","getState","globalFilter","scrollTo","rowIndex","align","useEffect","search","highlightedColumnIndexes","length","handleFocus","server","loadAllIfNeeded","Promise","resolve","sorting","columnFilters","then","_temp","e","reject","handleChange","setGlobalFilter","String","handleToggleExcludeUnmatchedResults","enabled","setEnableGlobalFilter","requestAnimationFrame","_ref$current","current","focus","handleNextResult","nextIndex","currentHighlightColumnIndex","undefined","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","excludeUnmatchedResults","checked","enableGlobalFilter","onChange","handleKeyDown","event","key","cellIndex","rowActive","setRowActiveIndex","cell","_tableRef$current","querySelector","_cell$focus","call","SearchInput2","findCurrent","findTotal","_tableMeta$search$hig","_tableMeta$search$hig2","loading","loadAllStatus","TableServerLoadAllState","Loading","name","onClickFindPrevious","onClickFindNext","onFocus","onKeyDown","placeholder","settingsContent","shortcut","shift","value"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.js

@@ -0,0 +1,119 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../../../../../../components/Icon/Icon.js';
+import { useLocalization } from '../../../../../../../components/Provider/Localization.js';
+import { Checkbox } from '../../../../../../../components/Checkbox/Checkbox.js';
+import { Input } from '../../../../../../../components/Input/Input.js';
+import { Popover } from '../../../../../../../components/Popover/Popover.js';
+import { isInternalColumn, ensureOrdering } from '../../../../../useTableManager/util/columns.js';
+import { Container } from '../../../../../../Sortable/components/Container.js';
+import { arrayMove } from '@dnd-kit/sortable';
+import { Item } from '../../../../../../Sortable/components/Item.js';
+import { List } from '../../../../../../Sortable/components/List.js';
+
+const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
+  var _column$parent, _column$parent$column, _column$columnDef$met;
+  const {
+    column,
+    draggable = false,
+    ...dragAttributes
+  } = props;
+  const canHide = column.getCanHide();
+  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
+    'hover:bg-grey-200': canHide || draggable,
+    'hover:cursor-pointer': canHide,
+    'active:cursor-move active:bg-grey-300': draggable
+  });
+  const attributes = draggable ? dragAttributes : undefined;
+  const isVisible = column.getIsVisible();
+  const parentHeader = (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header;
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    onClick: () => column.toggleVisibility(!isVisible),
+    ref: ref
+  }), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "drag",
+    className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
+  }) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header, parentHeader ? /*#__PURE__*/React__default.createElement("span", {
+    className: "italic"
+  }, "(", parentHeader, ")") : null), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: isVisible,
+    onChange: () => column.toggleVisibility(!isVisible)
+  }) : null);
+});
+function HideOrOrderPopover(props) {
+  const {
+    table,
+    trigger,
+    ...popoverProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const [query, setQuery] = React__default.useState('');
+  const allColumns = table.getAllLeafColumns();
+  const tableMeta = table.options.meta;
+  const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => {
+    var _column$columnDef$met2, _column$parent2, _column$parent2$colum;
+    return query !== null && query !== void 0 && query.length ? ((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase())) || ((_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : (_column$parent2$colum = _column$parent2.columnDef.meta) === null || _column$parent2$colum === void 0 ? void 0 : _column$parent2$colum.header.toLowerCase().includes(query.toLowerCase())) : true;
+  }), [allColumns, query]);
+  const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
+  const handleReorder = (activeId, overId) => {
+    if (columns.find(column => {
+      var _column$columnDef$met3;
+      return column.id === overId && ((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.enableOrdering) === false;
+    })) {
+      return;
+    }
+    const currentOrder = table.getState().columnOrder;
+    const nextOrder = ensureOrdering(allColumns, arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId)));
+    // update column order
+    table.setColumnOrder(nextOrder);
+    // update pinned columns - because we do index based "freezing" instead of just pinning, pinned state needs updating to align with ordering
+    if (table.getIsSomeColumnsPinned()) {
+      var _table$getState$colum, _table$getState$colum2;
+      const currentFrozenIndex = (_table$getState$colum = (_table$getState$colum2 = table.getState().columnPinning.left) === null || _table$getState$colum2 === void 0 ? void 0 : _table$getState$colum2.length) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : -1;
+      if (currentFrozenIndex > -1) {
+        table.setColumnPinning(currentPinning => ({
+          ...currentPinning,
+          left: nextOrder.slice(0, currentFrozenIndex)
+        }));
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+    anchor: trigger
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex min-w-[100px] max-w-sm flex-col gap-2"
+  }, table.options.enableHiding ? (/*#__PURE__*/React__default.createElement(Input, {
+    onChange: event => setQuery(event.target.value),
+    placeholder: texts.table.columnSettings.search,
+    value: query
+  })) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? (/*#__PURE__*/React__default.createElement(Container, {
+    reorder: handleReorder
+  }, /*#__PURE__*/React__default.createElement(List, {
+    id: "columns",
+    className: listClassName
+  }, columns.filter(column => !column.getIsGrouped()).map(column => {
+    var _column$columnDef$met4, _column$columnDef$met5;
+    return /*#__PURE__*/React__default.createElement(Item, {
+      key: column.id,
+      id: column.id,
+      disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(Column, {
+      column: column,
+      draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
+    }));
+  })))) : (/*#__PURE__*/React__default.createElement("div", {
+    className: listClassName
+  }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column, {
+    column: column,
+    key: column.id
+  })) : texts.table.columnSettings.noResults)))));
+}
+
+export { HideOrOrderPopover };
+//# sourceMappingURL=HideOrOrderPopover.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HideOrOrderPopover.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Table as ReactTable, Column as ReactTableColumn, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Popover, PopoverProps } from '../../../../../../../components/Popover/Popover';\nimport { Input } from '../../../../../../../components/Input/Input';\nimport * as SortablePrimitive from '../../../../../../Sortable/Sortable';\nimport { Icon } from '../../../../../../../components/Icon/Icon';\nimport { Checkbox } from '../../../../../../../components/Checkbox/Checkbox';\nimport { useLocalization } from '../../../../../../../components/Provider/Localization';\nimport { ensureOrdering, isInternalColumn } from '../../../../../useTableManager/util/columns';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: ReactTableColumn<TType, unknown>;\n    draggable?: boolean;\n};\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const isVisible = column.getIsVisible();\n    const parentHeader = column.parent?.columnDef?.header;\n\n    return (\n        <div {...attributes} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n            {draggable ? <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" /> : null}\n            <span className=\"flex-grow truncate\">\n                {column.columnDef.meta?.header}\n                {parentHeader ? <span className=\"italic\">({parentHeader})</span> : null}\n            </span>\n            {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n        </div>\n    );\n});\n\nexport type HideOrOrderPopoverProps<TType = unknown> = PopoverProps & {\n    table: ReactTable<TType>;\n};\n\nexport function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>) {\n    const { table, trigger, ...popoverProps } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column =>\n                    query?.length\n                        ? column.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase()) ||\n                          column.parent?.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase())\n                        : true\n                ),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.enableOrdering === false)) {\n            return;\n        }\n\n        const currentOrder = table.getState().columnOrder;\n        const nextOrder = ensureOrdering(\n            allColumns,\n            SortablePrimitive.arrayMove(\n                currentOrder,\n                currentOrder.findIndex(c => c === activeId),\n                currentOrder.findIndex(c => c === overId)\n            )\n        );\n\n        // update column order\n        table.setColumnOrder(nextOrder);\n\n        // update pinned columns - because we do index based \"freezing\" instead of just pinning, pinned state needs updating to align with ordering\n        if (table.getIsSomeColumnsPinned()) {\n            const currentFrozenIndex = table.getState().columnPinning.left?.length ?? -1;\n\n            if (currentFrozenIndex > -1) {\n                table.setColumnPinning(currentPinning => ({\n                    ...currentPinning,\n                    left: nextOrder.slice(0, currentFrozenIndex),\n                }));\n            }\n        }\n    };\n\n    return (\n        <Popover {...popoverProps} anchor={trigger}>\n            <Popover.Content>\n                <div className=\"flex min-w-[100px] max-w-sm flex-col gap-2\">\n                    {table.options.enableHiding ? (\n                        <Input\n                            onChange={event => setQuery(event.target.value)}\n                            placeholder={texts.table.columnSettings.search}\n                            value={query}\n                        />\n                    ) : null}\n                    {tableMeta.columnOrdering.isEnabled && columns.length && !query?.length ? (\n                        <SortablePrimitive.Container reorder={handleReorder}>\n                            <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                {columns\n                                    .filter(column => !column.getIsGrouped())\n                                    .map(column => (\n                                        <SortablePrimitive.Item\n                                            key={column.id}\n                                            id={column.id}\n                                            disabled={!column.columnDef.meta?.enableOrdering}\n                                            asChild>\n                                            <Column column={column as any} draggable={column.columnDef.meta?.enableOrdering} />\n                                        </SortablePrimitive.Item>\n                                    ))}\n                            </SortablePrimitive.List>\n                        </SortablePrimitive.Container>\n                    ) : (\n                        <div className={listClassName}>\n                            {columns.length\n                                ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                : texts.table.columnSettings.noResults}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["Column","React","forwardRef","props","ref","column","draggable","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","isVisible","getIsVisible","parentHeader","_column$parent","parent","_column$parent$column","columnDef","header","onClick","toggleVisibility","Icon","name","meta","_column$columnDef$met","Checkbox","checked","onChange","HideOrOrderPopover","table","trigger","popoverProps","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","columns","useMemo","filter","isInternalColumn","id","_column$columnDef$met2","_column$parent2","_column$parent2$colum","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","_column$columnDef$met3","enableOrdering","currentOrder","getState","columnOrder","nextOrder","ensureOrdering","SortablePrimitive","findIndex","c","setColumnOrder","getIsSomeColumnsPinned","_table$getState$colum","_table$getState$colum2","currentFrozenIndex","columnPinning","left","setColumnPinning","currentPinning","slice","Popover","anchor","Content","enableHiding","Input","event","target","value","placeholder","columnSettings","search","columnOrdering","isEnabled","reorder","getIsGrouped","map","_column$columnDef$met4","_column$columnDef$met5","key","disabled","asChild","noResults"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,MAAMA,CAAkBG,KAAyB,EAAEC,GAA8B;;EACtH,MAAM;IAAEC,MAAM;IAAEC,SAAS,GAAG,KAAK;IAAE,GAAGC;GAAgB,GAAGJ,KAAK;EAC9D,MAAMK,OAAO,GAAGH,MAAM,CAACI,UAAU,EAAE;EAEnC,MAAMC,SAAS,GAAGC,EAAE,CAAC,0DAA0D,EAAE;IAC7E,mBAAmB,EAAEH,OAAO,IAAIF,SAAS;IACzC,sBAAsB,EAAEE,OAAO;IAC/B,uCAAuC,EAAEF;GAC5C,CAAC;EAEF,MAAMM,UAAU,GAAGN,SAAS,GAAGC,cAAc,GAAGM,SAAS;EACzD,MAAMC,SAAS,GAAGT,MAAM,CAACU,YAAY,EAAE;EACvC,MAAMC,YAAY,IAAAC,cAAA,GAAGZ,MAAM,CAACa,MAAM,cAAAD,cAAA,wBAAAE,qBAAA,GAAbF,cAAA,CAAeG,SAAS,cAAAD,qBAAA,uBAAxBA,qBAAA,CAA0BE,MAAM;EAErD,oBACIpB,sDAASW,UAAU;IAAEF,SAAS,EAAEA,SAAS;IAAEY,OAAO,EAAEA,MAAMjB,MAAM,CAACkB,gBAAgB,CAAC,CAACT,SAAS,CAAC;IAAEV,GAAG,EAAEA;MAC/FE,SAAS,gBAAGL,6BAACuB,IAAI;IAACC,IAAI,EAAC,MAAM;IAACf,SAAS,EAAC;IAA8D,GAAG,IAAI,eAC9GT;IAAMS,SAAS,EAAC;8BACXL,MAAM,CAACe,SAAS,CAACM,IAAI,cAAAC,qBAAA,uBAArBA,qBAAA,CAAuBN,MAAM,EAC7BL,YAAY,gBAAGf;IAAMS,SAAS,EAAC;UAAWM,YAAY,MAAS,GAAG,IAAI,CACpE,EACNR,OAAO,gBAAGP,6BAAC2B,QAAQ;IAACC,OAAO,EAAEf,SAAS;IAAEgB,QAAQ,EAAEA,MAAMzB,MAAM,CAACkB,gBAAgB,CAAC,CAACT,SAAS;IAAK,GAAG,IAAI,CACrG;AAEd,CAAC,CAAC;SAMciB,kBAAkBA,CAAkB5B,KAAqC;EACrF,MAAM;IAAE6B,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAc,GAAG/B,KAAK;EACjD,MAAM;IAAEgC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGrC,cAAK,CAACsC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAMC,UAAU,GAAGR,KAAK,CAACS,iBAAiB,EAAE;EAC5C,MAAMC,SAAS,GAAGV,KAAK,CAACW,OAAO,CAACjB,IAA6B;EAC7D,MAAMkB,OAAO,GAAG3C,cAAK,CAAC4C,OAAO,CACzB,MACIL,UAAU,CACLM,MAAM,CAACzC,MAAM,IAAI,CAAC0C,gBAAgB,CAAC1C,MAAM,CAAC2C,EAAE,CAAC,CAAC,CAC9CF,MAAM,CAACzC,MAAM;IAAA,IAAA4C,sBAAA,EAAAC,eAAA,EAAAC,qBAAA;IAAA,OACVd,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEe,MAAM,GACP,EAAAH,sBAAA,GAAA5C,MAAM,CAACe,SAAS,CAACM,IAAI,cAAAuB,sBAAA,uBAArBA,sBAAA,CAAuB5B,MAAM,CAACgC,WAAW,EAAE,CAACC,QAAQ,CAACjB,KAAK,CAACgB,WAAW,EAAE,CAAC,OAAAH,eAAA,GACzE7C,MAAM,CAACa,MAAM,cAAAgC,eAAA,wBAAAC,qBAAA,GAAbD,eAAA,CAAe9B,SAAS,CAACM,IAAI,cAAAyB,qBAAA,uBAA7BA,qBAAA,CAA+B9B,MAAM,CAACgC,WAAW,EAAE,CAACC,QAAQ,CAACjB,KAAK,CAACgB,WAAW,EAAE,CAAC,IACjF,IAAI;IACb,EACT,CAACb,UAAU,EAAEH,KAAK,CAAC,CACtB;EAED,MAAMkB,aAAa,GAAG,+CAA+C;EAErE,MAAMC,aAAa,GAAGA,CAACC,QAAQ,EAAEC,MAAM;IACnC,IAAId,OAAO,CAACe,IAAI,CAACtD,MAAM;MAAA,IAAAuD,sBAAA;MAAA,OAAIvD,MAAM,CAAC2C,EAAE,KAAKU,MAAM,IAAI,EAAAE,sBAAA,GAAAvD,MAAM,CAACe,SAAS,CAACM,IAAI,cAAAkC,sBAAA,uBAArBA,sBAAA,CAAuBC,cAAc,MAAK,KAAK;MAAC,EAAE;MACjG;;IAGJ,MAAMC,YAAY,GAAG9B,KAAK,CAAC+B,QAAQ,EAAE,CAACC,WAAW;IACjD,MAAMC,SAAS,GAAGC,cAAc,CAC5B1B,UAAU,EACV2B,SAA2B,CACvBL,YAAY,EACZA,YAAY,CAACM,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKZ,QAAQ,CAAC,EAC3CK,YAAY,CAACM,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKX,MAAM,CAAC,CAC5C,CACJ;;IAGD1B,KAAK,CAACsC,cAAc,CAACL,SAAS,CAAC;;IAG/B,IAAIjC,KAAK,CAACuC,sBAAsB,EAAE,EAAE;MAAA,IAAAC,qBAAA,EAAAC,sBAAA;MAChC,MAAMC,kBAAkB,IAAAF,qBAAA,IAAAC,sBAAA,GAAGzC,KAAK,CAAC+B,QAAQ,EAAE,CAACY,aAAa,CAACC,IAAI,cAAAH,sBAAA,uBAAnCA,sBAAA,CAAqCrB,MAAM,cAAAoB,qBAAA,cAAAA,qBAAA,GAAI,CAAC,CAAC;MAE5E,IAAIE,kBAAkB,GAAG,CAAC,CAAC,EAAE;QACzB1C,KAAK,CAAC6C,gBAAgB,CAACC,cAAc,KAAK;UACtC,GAAGA,cAAc;UACjBF,IAAI,EAAEX,SAAS,CAACc,KAAK,CAAC,CAAC,EAAEL,kBAAkB;SAC9C,CAAC,CAAC;;;GAGd;EAED,oBACIzE,6BAAC+E,OAAO,oBAAK9C,YAAY;IAAE+C,MAAM,EAAEhD;mBAC/BhC,6BAAC+E,OAAO,CAACE,OAAO,qBACZjF;IAAKS,SAAS,EAAC;KACVsB,KAAK,CAACW,OAAO,CAACwC,YAAY,iBACvBlF,6BAACmF,KAAK;IACFtD,QAAQ,EAAEuD,KAAK,IAAI/C,QAAQ,CAAC+C,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;IAC/CC,WAAW,EAAErD,KAAK,CAACH,KAAK,CAACyD,cAAc,CAACC,MAAM;IAC9CH,KAAK,EAAElD;IACT,IACF,IAAI,EACPK,SAAS,CAACiD,cAAc,CAACC,SAAS,IAAIhD,OAAO,CAACQ,MAAM,IAAI,EAACf,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEe,MAAM,kBACnEnD,6BAACkE,SAA2B;IAAC0B,OAAO,EAAErC;kBAClCvD,6BAACkE,IAAsB;IAACnB,EAAE,EAAC,SAAS;IAACtC,SAAS,EAAE6C;KAC3CX,OAAO,CACHE,MAAM,CAACzC,MAAM,IAAI,CAACA,MAAM,CAACyF,YAAY,EAAE,CAAC,CACxCC,GAAG,CAAC1F,MAAM;IAAA,IAAA2F,sBAAA,EAAAC,sBAAA;IAAA,oBACPhG,6BAACkE,IAAsB;MACnB+B,GAAG,EAAE7F,MAAM,CAAC2C,EAAE;MACdA,EAAE,EAAE3C,MAAM,CAAC2C,EAAE;MACbmD,QAAQ,EAAE,GAAAH,sBAAA,GAAC3F,MAAM,CAACe,SAAS,CAACM,IAAI,cAAAsE,sBAAA,eAArBA,sBAAA,CAAuBnC,cAAc;MAChDuC,OAAO;oBACPnG,6BAACD,MAAM;MAACK,MAAM,EAAEA,MAAa;MAAEC,SAAS,GAAA2F,sBAAA,GAAE5F,MAAM,CAACe,SAAS,CAACM,IAAI,cAAAuE,sBAAA,uBAArBA,sBAAA,CAAuBpC;MAAkB,CAC9D;GAC5B,CAAC,CACe,CACC,kBAE9B5D;IAAKS,SAAS,EAAE6C;KACXX,OAAO,CAACQ,MAAM,GACTR,OAAO,CAACmD,GAAG,CAAC1F,MAAM,iBAAIJ,6BAACD,MAAM;IAACK,MAAM,EAAEA,MAAa;IAAE6F,GAAG,EAAE7F,MAAM,CAAC2C;IAAM,CAAC,GACxEb,KAAK,CAACH,KAAK,CAACyD,cAAc,CAACY,SAAS,CACxC,CACT,CACC,CACQ,CACZ;AAElB;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Settings/Settings.js

@@ -0,0 +1,103 @@
+import React__default from 'react';
+import { IconButton } from '../../../../../../../components/IconButton/IconButton.js';
+import { useLocalization } from '../../../../../../../components/Provider/Localization.js';
+import { Menu } from '../../../../../../../components/Menu/Menu.js';
+import { FontSizes } from '../../../../../../../types.js';
+import { getSettings } from '../../../../../useTableManager/util/settings.js';
+import { HideOrOrderPopover } from './HideOrOrderPopover.js';
+
+function Settings(props) {
+  const {
+    customSettings,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const tableMeta = table.options.meta;
+  const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
+  const canChangeFontSize = tableMeta.fontSize.isEnabled;
+  const canChangeRowHeight = tableMeta.rowHeight.isEnabled;
+  const [popover, setPopover] = React__default.useState(undefined);
+  let popoverElement;
+  if (popover) {
+    const handleClosePopover = () => setPopover(undefined);
+    switch (popover) {
+      case 'columnSettings':
+        {
+          if (canHideOrOrder) {
+            popoverElement = popoverProps => (/*#__PURE__*/React__default.createElement(HideOrOrderPopover, Object.assign({}, popoverProps, {
+              open: true,
+              onChange: handleClosePopover,
+              table: table
+            })));
+          }
+        }
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table.otherOptions.tooltip,
+    icon: "sliders",
+    menu: popoverElement ? undefined : menuProps => (/*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
+      align: "end"
+    }, canHideOrOrder ? (/*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "columns",
+      onClick: () => setPopover('columnSettings')
+    }, texts.table.columnSettings.button)) : null, canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? (/*#__PURE__*/React__default.createElement(Menu.Separator, null)) : null, canChangeRowHeight ? (/*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: `height-${tableMeta.rowHeight.height}`,
+      subMenu: () => /*#__PURE__*/React__default.createElement(RowHeightMenuItem, {
+        tableMeta: tableMeta
+      })
+    }, texts.table.rowHeight.tooltip)) : null, canChangeFontSize ? (/*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "font-size",
+      subMenu: () => /*#__PURE__*/React__default.createElement(FontSizeMenuItem, {
+        tableMeta: tableMeta
+      })
+    }, texts.table.fontSize.tooltip)) : null, customSettings ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, canChangeRowHeight || canChangeFontSize ? /*#__PURE__*/React__default.createElement(Menu.Separator, null) : null, customSettings(getSettings(table)).map((item, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, item))))) : null))),
+    popover: popoverElement,
+    onClickCapture: event => event.preventDefault(),
+    tooltip: texts.table.otherOptions.tooltip
+  });
+}
+function FontSizeMenuItem({
+  tableMeta
+}) {
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+    onChange: tableMeta.fontSize.setSize,
+    value: tableMeta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.small
+  }, texts.table.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.medium
+  }, texts.table.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    disabled: tableMeta.rowHeight.height === 'short',
+    value: FontSizes.large
+  }, texts.table.fontSize.sizes.large)));
+}
+function RowHeightMenuItem({
+  tableMeta
+}) {
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+    onChange: tableMeta.rowHeight.setHeight,
+    value: tableMeta.rowHeight.height
+  }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "short"
+  }, texts.table.rowHeight.sizes.short), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "medium"
+  }, texts.table.rowHeight.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "tall"
+  }, texts.table.rowHeight.sizes.tall), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "extra-tall"
+  }, texts.table.rowHeight.sizes.extraTall)));
+}
+
+export { Settings };
+//# sourceMappingURL=Settings.js.map

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Settings/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sources":["../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../../components/IconButton/IconButton';\nimport { useLocalization } from '../../../../../../../components/Provider/Localization';\nimport { Menu } from '../../../../../../../components/Menu/Menu';\nimport { HideOrOrderPopover } from './HideOrOrderPopover';\nimport { getSettings } from '../../../../../useTableManager/util/settings';\nimport { FontSizes } from '../../../../../../../types';\nimport { IconName } from '../../../../../../../components/Icon/Icon';\nimport { TableCustomSettingsRenderer } from '../../../../../types';\n\nexport type SettingsProps<TType = unknown> = {\n    customSettings?: TableCustomSettingsRenderer;\n    table: ReactTable<TType>;\n};\n\nexport function Settings<TType = unknown>(props: SettingsProps<TType>) {\n    const { customSettings, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const canChangeFontSize = tableMeta.fontSize.isEnabled;\n    const canChangeRowHeight = tableMeta.rowHeight.isEnabled;\n\n    const [popover, setPopover] = React.useState<string | undefined>(undefined);\n\n    let popoverElement;\n\n    if (popover) {\n        const handleClosePopover = () => setPopover(undefined);\n\n        switch (popover) {\n            case 'columnSettings': {\n                if (canHideOrOrder) {\n                    popoverElement = popoverProps => (\n                        <HideOrOrderPopover {...popoverProps} open onChange={handleClosePopover} table={table} />\n                    );\n                }\n            }\n        }\n    }\n\n    return (\n        <IconButton\n            aria-label={texts.table.otherOptions.tooltip}\n            icon=\"sliders\"\n            menu={\n                popoverElement\n                    ? undefined\n                    : menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content align=\"end\">\n                                  {canHideOrOrder ? (\n                                      <Menu.Item icon=\"columns\" onClick={() => setPopover('columnSettings')}>\n                                          {texts.table.columnSettings.button}\n                                      </Menu.Item>\n                                  ) : null}\n                                  {canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? (\n                                      <Menu.Separator />\n                                  ) : null}\n                                  {canChangeRowHeight ? (\n                                      <Menu.Item\n                                          icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                          subMenu={() => <RowHeightMenuItem tableMeta={tableMeta} />}>\n                                          {texts.table.rowHeight.tooltip}\n                                      </Menu.Item>\n                                  ) : null}\n                                  {canChangeFontSize ? (\n                                      <Menu.Item icon=\"font-size\" subMenu={() => <FontSizeMenuItem tableMeta={tableMeta} />}>\n                                          {texts.table.fontSize.tooltip}\n                                      </Menu.Item>\n                                  ) : null}\n\n                                  {customSettings ? (\n                                      <>\n                                          {canChangeRowHeight || canChangeFontSize ? <Menu.Separator /> : null}\n                                          {customSettings(getSettings(table)).map((item, index) => (\n                                              <React.Fragment key={index}>{item}</React.Fragment>\n                                          ))}\n                                      </>\n                                  ) : null}\n                              </Menu.Content>\n                          </Menu>\n                      )\n            }\n            popover={popoverElement}\n            onClickCapture={event => event.preventDefault()}\n            tooltip={texts.table.otherOptions.tooltip}\n        />\n    );\n}\n\nfunction FontSizeMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n    const { texts } = useLocalization();\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={tableMeta.fontSize.setSize as any} value={tableMeta.fontSize.size}>\n                <Menu.RadioGroup.Item value={FontSizes.small}>{texts.table.fontSize.sizes.small}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value={FontSizes.medium}>{texts.table.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item disabled={tableMeta.rowHeight.height === 'short'} value={FontSizes.large}>\n                    {texts.table.fontSize.sizes.large}\n                </Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n\nfunction RowHeightMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n    const { texts } = useLocalization();\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={tableMeta.rowHeight.setHeight as any} value={tableMeta.rowHeight.height}>\n                <Menu.RadioGroup.Item value=\"short\">{texts.table.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"medium\">{texts.table.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"tall\">{texts.table.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n"],"names":["Settings","props","customSettings","table","texts","useLocalization","tableMeta","options","meta","canHideOrOrder","enableHiding","columnOrdering","isEnabled","canChangeFontSize","fontSize","canChangeRowHeight","rowHeight","popover","setPopover","React","useState","undefined","popoverElement","handleClosePopover","popoverProps","HideOrOrderPopover","open","onChange","IconButton","otherOptions","tooltip","icon","menu","menuProps","Menu","Content","align","Item","onClick","columnSettings","button","Separator","height","subMenu","RowHeightMenuItem","FontSizeMenuItem","getSettings","map","item","index","Fragment","key","onClickCapture","event","preventDefault","SubMenu","RadioGroup","setSize","value","size","FontSizes","small","sizes","medium","disabled","large","setHeight","short","tall","extraTall"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { isElementInsideOverlay, isSiblingElementInsideSameParentOverlay, isElementInteractive, isElementInsideOrTriggeredFromContainer } from '../../../../utils/dom.js';
+
+function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  React__default.useEffect(() => {
+    const handleKeyDown = event => {
+      const trigger = event.target;
+      if (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current)) {
+        return;
+      }
+      tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex);
+      tableMeta.rowSelection.handleKeyDown(event, table);
+      if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _rows$tableMeta$rowAc;
+        tableMeta.rowClick.handleKeyDown(event, (_rows$tableMeta$rowAc = rows[tableMeta.rowActive.rowActiveIndex]) === null || _rows$tableMeta$rowAc === void 0 ? void 0 : _rows$tableMeta$rowAc.original);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  },
+  // scrollToIndex function changes when row count changes, so it is important to update handlers
+  [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
+}
+
+export { useTableGlobalShortcuts };
+//# sourceMappingURL=useTableGlobalShortcuts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableGlobalShortcuts.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableGlobalShortcuts.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableRef } from '../../types';\nimport {\n    isElementInsideOrTriggeredFromContainer,\n    isElementInsideOverlay,\n    isElementInteractive,\n    isSiblingElementInsideSameParentOverlay,\n} from '../../../../utils/dom';\n\nexport function useTableGlobalShortcuts<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const trigger = event.target as HTMLElement;\n\n                if (\n                    (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current)) ||\n                    (isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current))\n                ) {\n                    return;\n                }\n\n                tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex);\n                tableMeta.rowSelection.handleKeyDown(event, table);\n\n                if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n                    tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n\n        // scrollToIndex function changes when row count changes, so it is important to update handlers\n        [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]\n    );\n}\n"],"names":["useTableGlobalShortcuts","table","tableRef","scrollToIndex","tableMeta","options","meta","rows","getRowModel","React","useEffect","handleKeyDown","event","trigger","target","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","current","isElementInteractive","isElementInsideOrTriggeredFromContainer","rowActive","length","rowSelection","rowActiveIndex","undefined","_rows$tableMeta$rowAc","rowClick","original","document","addEventListener","removeEventListener"],"mappings":";;;SAUgBA,uBAAuBA,CACnCC,KAAwB,EACxBC,QAAmC,EACnCC,aAAsC;EAEtC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EAErCE,cAAK,CAACC,SAAS,CACX;IACI,MAAMC,aAAa,GAAIC,KAAoB;MACvC,MAAMC,OAAO,GAAGD,KAAK,CAACE,MAAqB;MAE3C,IACKC,sBAAsB,CAACF,OAAO,CAAC,IAAI,CAACG,uCAAuC,CAACH,OAAO,EAAEX,QAAQ,CAACe,OAAO,CAAC,IACtGC,oBAAoB,CAACL,OAAO,CAAC,IAAI,CAACM,uCAAuC,CAACN,OAAO,EAAEX,QAAQ,CAACe,OAAO,CAAE,EACxG;QACE;;MAGJb,SAAS,CAACgB,SAAS,CAACT,aAAa,CAACC,KAAK,EAAEL,IAAI,CAACc,MAAM,EAAElB,aAAa,CAAC;MACpEC,SAAS,CAACkB,YAAY,CAACX,aAAa,CAACC,KAAK,EAAEX,KAAK,CAAC;MAElD,IAAIG,SAAS,CAACgB,SAAS,CAACG,cAAc,KAAKC,SAAS,EAAE;QAAA,IAAAC,qBAAA;QAClDrB,SAAS,CAACsB,QAAQ,CAACf,aAAa,CAACC,KAAK,GAAAa,qBAAA,GAAElB,IAAI,CAACH,SAAS,CAACgB,SAAS,CAACG,cAAc,CAAC,cAAAE,qBAAA,uBAAxCA,qBAAA,CAA0CE,QAAQ,CAAC;;KAElG;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAElB,aAAa,CAAC;IAEnD,OAAO;MACHiB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEnB,aAAa,CAAC;KACzD;GACJ;;EAGD,CAACT,QAAQ,CAACe,OAAO,EAAEb,SAAS,CAACgB,SAAS,CAACG,cAAc,EAAEpB,aAAa,CAAC,CACxE;AACL;;;;"}

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

@@ -0,0 +1,17 @@
+import React__default from 'react';
+
+function useTableRef(table, ref) {
+  React__default.useEffect(() => {
+    if (ref.current) {
+      ref.current.instance = {
+        resetFiltering: () => table.resetColumnFilters(),
+        resetRowExpansion: () => table.resetExpanded(),
+        resetRowSelection: () => table.resetRowSelection(),
+        resetSorting: () => table.resetSorting()
+      };
+    }
+  }, [table, ref.current]);
+}
+
+export { useTableRef };
+//# sourceMappingURL=useTableRef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRef.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRef.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { TableRef } from '../../types';\n\nexport function useTableRef<TType = unknown>(table: ReactTable<TType>, ref: React.RefObject<TableRef>) {\n    React.useEffect(() => {\n        if (ref.current) {\n            ref.current.instance = {\n                resetFiltering: () => table.resetColumnFilters(),\n                resetRowExpansion: () => table.resetExpanded(),\n                resetRowSelection: () => table.resetRowSelection(),\n                resetSorting: () => table.resetSorting(),\n            };\n        }\n    }, [table, ref.current]);\n}\n"],"names":["useTableRef","table","ref","React","useEffect","current","instance","resetFiltering","resetColumnFilters","resetRowExpansion","resetExpanded","resetRowSelection","resetSorting"],"mappings":";;SAIgBA,WAAWA,CAAkBC,KAAwB,EAAEC,GAA8B;EACjGC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIF,GAAG,CAACG,OAAO,EAAE;MACbH,GAAG,CAACG,OAAO,CAACC,QAAQ,GAAG;QACnBC,cAAc,EAAEA,MAAMN,KAAK,CAACO,kBAAkB,EAAE;QAChDC,iBAAiB,EAAEA,MAAMR,KAAK,CAACS,aAAa,EAAE;QAC9CC,iBAAiB,EAAEA,MAAMV,KAAK,CAACU,iBAAiB,EAAE;QAClDC,YAAY,EAAEA,MAAMX,KAAK,CAACW,YAAY;OACzC;;GAER,EAAE,CAACX,KAAK,EAAEC,GAAG,CAACG,OAAO,CAAC,CAAC;AAC5B;;;;"}

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

@@ -0,0 +1,164 @@
+import React__default from 'react';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import { ROW_HEIGHT_ESTIMATES } from '../util/rows.js';
+import { Row } from '../components/Row/Row.js';
+
+function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
+  var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
+  // expanded rows
+  const {
+    createRowMeasurer,
+    estimateSize
+  } = useRowHeightVirtualisation(table);
+  // row groups
+  const rangeExtractor = useRowGroupVirtualisation(table);
+  // account for thead and tfoot in the scroll area - both are always medium row height
+  const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
+  // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
+  // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
+  const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);
+  const virtualiser = useVirtualizer({
+    count: rows.length,
+    estimateSize,
+    getScrollElement: () => tableRef.current,
+    overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
+    rangeExtractor,
+    // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
+    scrollPaddingStart,
+    scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
+  });
+  const totalSize = virtualiser.getTotalSize();
+  const virtualItems = virtualiser.getVirtualItems();
+  const scrollToIndex = React__default.useCallback((index, options = {
+    align: 'auto',
+    behavior: 'smooth'
+  }) => {
+    const notSmooth = {
+      ...options,
+      behavior: 'auto'
+    };
+    if (tableRef.current) {
+      if (index === 0) {
+        virtualiser.scrollToOffset(0, notSmooth);
+      } else if (index === rows.length - 1) {
+        // sometimes the last row doesn't fully show, so we just force scroll to the bottom
+        tableRef.current.scrollTop = tableRef.current.scrollHeight;
+      } else {
+        virtualiser.scrollToIndex(index, options);
+      }
+    }
+  }, [virtualItems.length, tableRef.current, totalSize, rows.length]);
+  // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
+  const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
+  const startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
+  // styling for offsetting rows - this "is" the virtualisation
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref !== void 0 ? _ref : 0)] : [0, 0];
+  // ensure default active rows are scrolled to
+  React__default.useEffect(() => {
+    if (defaultRowActiveIndex) {
+      scrollToIndex(defaultRowActiveIndex, {
+        align: 'center',
+        behavior: 'auto'
+      });
+    }
+  }, []);
+  // rendered output
+  let style = {};
+  let content = null;
+  if (rows.length) {
+    style = {
+      height: totalSize,
+      paddingBottom,
+      paddingTop
+    };
+    content = virtualItems.map(virtualRow => {
+      // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here
+      if (!virtualRow) {
+        return null;
+      }
+      const row = rows[virtualRow.index];
+      const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
+      return /*#__PURE__*/React__default.createElement(Row, {
+        key: row.id,
+        row: row,
+        index: virtualRow.index,
+        table: table,
+        measureRow: measureRow,
+        renderer: renderers.row,
+        cellRenderer: renderers.cell
+      });
+    });
+  }
+  return {
+    rows: content,
+    style,
+    scrollToIndex
+  };
+}
+// support varying row heights - variable row heights, row expansion
+function useRowHeightVirtualisation(table) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  const expandedState = table.getState().expanded;
+  const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React__default.useState({});
+  // look at all registered expanded row heights and use them to form a more accurate average size
+  // it might be worth considering if taking the max, or an upper bound, would be better
+  const averageExpandedRowHeight = React__default.useMemo(() => {
+    const values = Object.values(expandedRowHeightsCache);
+    return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+  }, [expandedRowHeightsCache]);
+  // row heights
+  const estimateSize = React__default.useCallback(index => {
+    var _rows$index, _rows$index$getIsExpa;
+    const rowHeight = tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;
+    if (expandedState === true || (_rows$index = rows[index]) !== null && _rows$index !== void 0 && (_rows$index$getIsExpa = _rows$index.getIsExpanded) !== null && _rows$index$getIsExpa !== void 0 && _rows$index$getIsExpa.call(_rows$index)) {
+      return rowHeight + averageExpandedRowHeight;
+    }
+    return rowHeight;
+  }, [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]);
+  const createRowMeasurer = React__default.useCallback((resizeItem, virtualRow) => (rowHeight, expansionHeight) => {
+    // register the expansion height so that it can be used to determine an average
+    if (expansionHeight) {
+      setExpandedRowHeightsCache(cache => ({
+        ...cache,
+        [virtualRow.index]: expansionHeight
+      }));
+    }
+    // update the whole row's size to include the expanded height
+    resizeItem(virtualRow, rowHeight + (expansionHeight !== null && expansionHeight !== void 0 ? expansionHeight : 0));
+  }, []);
+  return {
+    estimateSize,
+    createRowMeasurer
+  };
+}
+// support virtualised row groups (where the row group headers are sticky)
+function useRowGroupVirtualisation(table) {
+  const rows = table.getRowModel().rows;
+  const isTableGrouped = !!table.getState().grouping.length;
+  const rowGroupIndexes = React__default.useMemo(() => {
+    const indexes = [];
+    if (isTableGrouped) {
+      rows.forEach((row, index) => {
+        if (row.getIsGrouped()) {
+          indexes.push(index);
+        }
+      });
+    }
+    return indexes;
+  }, [rows]);
+  // this is taken from the react-virtual docs/examples
+  const rangeExtractor = React__default.useCallback(range => {
+    var _reverse$find;
+    const activeRowGroupIndex = (_reverse$find = [...rowGroupIndexes].reverse().find(index => range.startIndex >= index)) !== null && _reverse$find !== void 0 ? _reverse$find : rowGroupIndexes[0];
+    const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);
+    return [...next].sort((a, b) => a - b);
+  }, [rowGroupIndexes]);
+  return isTableGrouped ? rangeExtractor : undefined;
+}
+
+export { useTableRenderer };
+//# sourceMappingURL=useTableRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n    renderers: useTableRenderers<TType>,\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const isTableRowGrouped = !!table.getState().grouping?.length;\n\n    // expanded rows\n    const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    // account for thead and tfoot in the scroll area - both are always medium row height\n    const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n    // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n    // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n    const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n    const virtualiser = useVirtualizer({\n        count: rows.length,\n        estimateSize,\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n        rangeExtractor,\n        // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n        scrollPaddingStart,\n        scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n    });\n\n    const totalSize = virtualiser.getTotalSize();\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index === rows.length - 1) {\n                    // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n                    tableRef.current.scrollTop = tableRef.current.scrollHeight;\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current, totalSize, rows.length]\n    );\n\n    // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n    const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n    const startValue = isTableRowGrouped\n        ? virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size\n        : virtualItems[paddingStartIndex]?.start;\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0)]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: (JSX.Element | null)[] | null = null;\n\n    if (rows.length) {\n        style = {\n            height: totalSize,\n            paddingBottom,\n            paddingTop,\n        };\n        content = virtualItems.map(virtualRow => {\n            // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n            if (!virtualRow) {\n                return null;\n            }\n\n            const row = rows[virtualRow.index];\n            const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n            return (\n                <Row\n                    key={row.id}\n                    row={row}\n                    index={virtualRow.index}\n                    table={table}\n                    measureRow={measureRow}\n                    renderer={renderers.row}\n                    cellRenderer={renderers.cell}\n                />\n            );\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const expandedState = table.getState().expanded;\n\n    const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n    // look at all registered expanded row heights and use them to form a more accurate average size\n    // it might be worth considering if taking the max, or an upper bound, would be better\n    const averageExpandedRowHeight = React.useMemo(() => {\n        const values: number[] = Object.values(expandedRowHeightsCache);\n        return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n    }, [expandedRowHeightsCache]);\n\n    // row heights\n    const estimateSize = React.useCallback(\n        (index: number) => {\n            const rowHeight = tableMeta.rowHeight.height\n                ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n                : ROW_HEIGHT_ESTIMATES.medium;\n\n            if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n                return rowHeight + averageExpandedRowHeight;\n            }\n\n            return rowHeight;\n        },\n        [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n    );\n\n    const createRowMeasurer = React.useCallback(\n        (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n            (rowHeight: number, expansionHeight?: number) => {\n                // register the expansion height so that it can be used to determine an average\n                if (expansionHeight) {\n                    setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n                }\n\n                // update the whole row's size to include the expanded height\n                resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n            },\n        []\n    );\n\n    return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, [rows]);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        range => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n            return [...next].sort((a, b) => a - b);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","startValue","_virtualItems$padding","start","_virtualItems$padding2","size","_virtualItems$padding3","paddingTop","paddingBottom","Math","max","_ref","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}