@economic/taco 2.26.11 → 2.26.13

package/dist/primitives/Table/Core/features/useTableRenderer.d.ts

@@ -4,7 +4,7 @@ import { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-
 import { useTableRenderers } from '../types';
 import { TableRef } from '../../types';
 export declare function useTableRenderer<TType = unknown>(renderers: useTableRenderers<TType>, table: ReactTable<TType>, tableRef: React.RefObject<TableRef>, defaultRowActiveIndex?: number | undefined): {
-    rows: JSX.Element[] | null;
+    rows: (JSX.Element | null)[] | null;
     style: React.CSSProperties;
     scrollToIndex: (index: number, options?: ReactVirtualScrollToOptions) => void;
 };

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

@@ -17,7 +17,7 @@ export declare type useTableReturnValue<TType = unknown> = {
     };
     ref: React.RefObject<TableRef>;
     renderer: {
-        rows: JSX.Element[] | null;
+        rows: (JSX.Element | null)[] | null;
         style: React.CSSProperties;
         scrollToIndex: (index: number, options?: ReactVirtualScrollToOptions) => void;
     };

package/dist/primitives/Table/useTableManager/util/settings.d.ts

@@ -6,7 +6,6 @@ export declare function getSettings<TType = unknown>(table: ReactTable<TType>):
     columnVisibility: Record<string, boolean> | undefined;
     excludeUnmatchedRecordsInSearch: boolean | undefined;
     fontSize: "small" | "medium" | "large" | undefined;
-    grouping: import("@tanstack/react-table").GroupingState | undefined;
     rowHeight: "medium" | "short" | "tall" | "extra-tall" | undefined;
     sorting: import("@tanstack/react-table").SortingState;
 };

package/dist/taco.cjs.development.js

@@ -9754,7 +9754,7 @@ function configureReactTableOptions(options, props) {
 }
 function useReactTableInitialState(props, columns, persistedSettings, defaults) {
   return React__default.useMemo(() => {
-    var _persistedSettings$co, _props$defaultSetting, _ref, _persistedSettings$co2, _props$defaultSetting2, _columnPinning$left, _ref2, _persistedSettings$co3, _props$defaultSetting3, _ref3, _ref4, _persistedSettings$co4, _props$defaultSetting4, _ref5, _ref6, _persistedSettings$co5, _props$defaultSetting5, _persistedSettings$se, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8, _ref7, _persistedSettings$gr, _persistedSettings$gr2, _props$defaultSetting9, _props$defaultSetting10;
+    var _persistedSettings$co, _props$defaultSetting, _ref, _persistedSettings$co2, _props$defaultSetting2, _columnPinning$left, _ref2, _persistedSettings$co3, _props$defaultSetting3, _ref3, _ref4, _persistedSettings$co4, _props$defaultSetting4, _ref5, _ref6, _persistedSettings$co5, _props$defaultSetting5, _persistedSettings$se, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8;
     const ignoreNotDefinedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
     const columnOrder = ensureOrdering(columns, (_persistedSettings$co = persistedSettings.columnOrder) !== null && _persistedSettings$co !== void 0 ? _persistedSettings$co : (_props$defaultSetting = props.defaultSettings) === null || _props$defaultSetting === void 0 ? void 0 : _props$defaultSetting.columnOrder);
     const columnPinning = (_ref = (_persistedSettings$co2 = persistedSettings.columnPinning) !== null && _persistedSettings$co2 !== void 0 ? _persistedSettings$co2 : (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnPinning) !== null && _ref !== void 0 ? _ref : {};
@@ -9775,7 +9775,7 @@ function useReactTableInitialState(props, columns, persistedSettings, defaults)
       globalFilter: (_persistedSettings$se = persistedSettings.searchQuery) !== null && _persistedSettings$se !== void 0 ? _persistedSettings$se : (_props$defaultSetting6 = props.defaultSettings) === null || _props$defaultSetting6 === void 0 ? void 0 : _props$defaultSetting6.searchQuery,
       sorting: persistedSettings.sorting ? persistedSettings.sorting.filter(ignoreNotDefinedColumns) : (_props$defaultSetting7 = (_props$defaultSetting8 = props.defaultSettings) === null || _props$defaultSetting8 === void 0 ? void 0 : _props$defaultSetting8.sorting) !== null && _props$defaultSetting7 !== void 0 ? _props$defaultSetting7 : defaults.defaultSorting
     };
-    if ((_ref7 = (_persistedSettings$gr = (_persistedSettings$gr2 = persistedSettings.grouping) === null || _persistedSettings$gr2 === void 0 ? void 0 : _persistedSettings$gr2.length) !== null && _persistedSettings$gr !== void 0 ? _persistedSettings$gr : (_props$defaultSetting9 = props.defaultSettings) === null || _props$defaultSetting9 === void 0 ? void 0 : (_props$defaultSetting10 = _props$defaultSetting9.grouping) === null || _props$defaultSetting10 === void 0 ? void 0 : _props$defaultSetting10.length) !== null && _ref7 !== void 0 ? _ref7 : props.defaultRowGroupColumnId) {
+    if (props.defaultRowGroupColumnId) {
       state.grouping = [props.defaultRowGroupColumnId];
       // row groups should (all) always be expanded by default
       state.expanded = true;
@@ -10704,6 +10704,7 @@ function getSettings(table) {
   const meta = table.options.meta;
   const state = table.getState();
   return {
+    // commented out properties are here to highlight things we explicitly don't want them saved
     //columnFilters: table.options.enableColumnFilters ? state.columnFilters : undefined,
     columnOrder: meta.columnOrdering.isEnabled ? state.columnOrder : undefined,
     columnPinning: state.columnPinning,
@@ -10711,7 +10712,7 @@ function getSettings(table) {
     columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
     excludeUnmatchedRecordsInSearch: table.options.enableGlobalFilter,
     fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
-    grouping: table.options.enableGrouping ? state.grouping : undefined,
+    //grouping: table.options.enableGrouping ? state.grouping : undefined,
     rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
     //searchQuery: table.options.enableGlobalFilter ? state.globalFilter : undefined,
     sorting: state.sorting
@@ -10732,7 +10733,9 @@ function useTableSettingsListener(table, onChangeSettings) {
     return () => clearTimeout(handler);
   }, [
   //state.columnFilters,
-  state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, table.options.enableGlobalFilter, meta.fontSize.size, state.grouping, meta.rowHeight.height,
+  state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, table.options.enableGlobalFilter, meta.fontSize.size,
+  //state.grouping,
+  meta.rowHeight.height,
   //state.globalFilter,
   state.sorting]);
 }
@@ -11240,10 +11243,11 @@ function Row(props) {
 const TABLE_SCROLL_PADDING_BOTTOM = 36;
 const TABLE_PADDING_BOTTOM = 120;
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
-  var _table$getState$group, _virtualItems$;
+  var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
   const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
+  const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   // expanded rows
   const {
     createRowMeasurer,
@@ -11257,7 +11261,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     getScrollElement: () => tableRef.current,
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
-    scrollPaddingStart: (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
+    scrollPaddingStart: isTableGrouped ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
     scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
     paddingEnd: TABLE_PADDING_BOTTOM
   });
@@ -11290,10 +11294,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
       }
     }
   }, [virtualItems.length, tableRef.current]);
-  // styling for offsetting rows - this "is" the virtualisation
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  Math.max(0, ((_virtualItems$ = virtualItems[1]) !== null && _virtualItems$ !== void 0 ? _virtualItems$ : virtualItems[0]).start - virtualiser.options.scrollMargin - virtualItems[0].size), Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1].end)] : [0, 0];
+  const paddingStartIndex = isTableGrouped && rows.length > 1 ? 1 : 0;
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - virtualiser.options.scrollMargin - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size)) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = virtualiser.getTotalSize() - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -11313,6 +11316,10 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
       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, {
@@ -12460,16 +12467,22 @@ function HeaderMenu(props) {
   });
 }
 
-function useSetInitialColumnSizing(id, width, element, canMeasureSize, setColumnSizing) {
-  React__default.useEffect(() => {
+function useSetInitialColumnSizing(id, defaultWidth, width, element, canMeasureSize, setColumnSizing) {
+  React__default.useLayoutEffect(() => {
     // columns must set a pixel width...
     // otherwise when scrolling through the table, the column widths adjust based on the content
     // of the column, this is because to the virtualisation mounting new rows and unmounting old ones
     if (canMeasureSize && element && !Number.isInteger(width) && !isInternalColumn(id)) {
-      setColumnSizing(sizes => ({
+      const setWidth = () => setColumnSizing(sizes => ({
         ...sizes,
         [id]: element.getBoundingClientRect().width
       }));
+      // grow columns need to wait for auto layout to run, otherwise they register the incorrect size
+      if (defaultWidth === 'grow') {
+        requestAnimationFrame(setWidth);
+      } else {
+        setWidth();
+      }
     }
   }, [element, canMeasureSize, width]);
 }
@@ -12520,6 +12533,7 @@ function Header$5(props) {
     children: reactTable.flexRender(header.column.columnDef.header, header.getContext()),
     colSpan: header.colSpan,
     customMenu: columnMeta.menu,
+    defaultWidth: columnMeta.defaultWidth,
     hasMenu,
     id: header.id,
     isFiltered: header.column.getIsFiltered(),
@@ -12601,6 +12615,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     className,
     colSpan,
     customMenu,
+    defaultWidth,
     hasMenu,
     id,
     index,
@@ -12626,7 +12641,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   } = props;
   const [ref, setRef] = React__default.useState(null);
   // save column width if none is set
-  useSetInitialColumnSizing(id, width, ref, canMeasureSize, setColumnSizing);
+  useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);
   // feature specific styles
   const style = {};
   // column groups often span multiple columns