@economic/taco 2.26.6 → 2.26.8

package/dist/taco.cjs.development.js

@@ -10923,55 +10923,57 @@ function useTableStyleGrid(tableId, table, fontSize) {
   const globalMinSize = getCellMinWidth(fontSize);
   // header body ?footer
   const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
-  let printGridTemplateColumns = '';
-  const printHiddenColumns = [];
-  const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
-    var _column$columnDef$min, _column$columnDef$met;
-    if (table.options.enableGrouping && column.getIsGrouped()) {
-      return accum;
-    }
-    const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
-    const width = columnSizing[column.id];
-    let size;
-    let printSize;
-    if (column.id === '__actions') {
-      const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
-      size = `minmax(${minWidth}px, auto)`;
-    } else if (width !== undefined) {
-      const isLastColumn = index === allVisibleColumns.length - 1;
-      if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
-        size = `minmax(max-content, 1fr)`;
-      } else {
-        const minWidth = width < minSize ? minSize : width;
-        if (isLastColumn) {
-          size = `minmax(${minWidth}px, auto)`;
+  return React__default.useMemo(() => {
+    let printGridTemplateColumns = '';
+    const printHiddenColumns = [];
+    const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
+      var _column$columnDef$min, _column$columnDef$met;
+      if (table.options.enableGrouping && column.getIsGrouped()) {
+        return accum;
+      }
+      const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
+      const width = columnSizing[column.id];
+      let size;
+      let printSize;
+      if (column.id === '__actions') {
+        const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
+        size = `minmax(${minWidth}px, auto)`;
+      } else if (width !== undefined) {
+        const isLastColumn = index === allVisibleColumns.length - 1;
+        if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
+          size = `minmax(max-content, 1fr)`;
         } else {
-          size = `${minWidth}px`;
+          const minWidth = width < minSize ? minSize : width;
+          if (isLastColumn) {
+            size = `minmax(${minWidth}px, auto)`;
+          } else {
+            size = `${minWidth}px`;
+          }
         }
+      } else {
+        size = `minmax(max-content, auto)`;
       }
-    } else {
-      size = `minmax(max-content, auto)`;
-    }
-    if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
-      printSize = '';
-      printHiddenColumns.push(column.id);
-    } else {
-      printSize = 'auto';
-    }
-    printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
-    return `${accum} ${size}`.trim();
-  }, '');
-  // we have to be specific so that nested tables don't inherit the same css
-  const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
-  const style = {
-    gridTemplateColumns,
-    gridTemplateRows
-  };
-  const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''}}`;
-  return {
-    style,
-    stylesheet
-  };
+      if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
+        printSize = '';
+        printHiddenColumns.push(column.id);
+      } else {
+        printSize = 'auto';
+      }
+      printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
+      return `${accum} ${size}`.trim();
+    }, '');
+    // we have to be specific so that nested tables don't inherit the same css
+    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    const style = {
+      gridTemplateColumns,
+      gridTemplateRows
+    };
+    const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''}}`;
+    return {
+      style,
+      stylesheet
+    };
+  }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
 }
 
 function useTableStyleColumnFreezing(tableId, table) {
@@ -15785,7 +15787,7 @@ function Column$1(_) {
 function Group$3(_) {
   return null;
 }
-const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
+const BaseReport = /*#__PURE__*/fixedForwardRef(function BaseReport(props, ref) {
   const report = useReport(props, ref);
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: report
@@ -15794,6 +15796,16 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     table: report
   }));
 });
+const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
+  const stringifiedChildren = String(props.children);
+  // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
+  // this is cheaper from a complexity perspective, and probably performance wise as well
+  const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
+  return /*#__PURE__*/React__default.createElement(BaseReport, Object.assign({}, props, {
+    key: key,
+    ref: ref
+  }));
+});
 Report$1.Column = Column$1;
 Report$1.Group = Group$3;
 
@@ -18507,7 +18519,7 @@ function Group$4(_) {
   return null;
 }
 Group$4.displayName = 'Table3Group';
-const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
+const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
   const table3 = useTable3(props, ref);
   const handleBlur = event => {
@@ -18536,6 +18548,16 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     table: table3
   })));
 });
+const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
+  const stringifiedChildren = String(props.children);
+  // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
+  // this is cheaper from a complexity perspective, and probably performance wise as well
+  const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
+  return /*#__PURE__*/React__default.createElement(BaseTable3, Object.assign({}, props, {
+    key: key,
+    ref: ref
+  }));
+});
 Table3.Column = Column$3;
 Table3.Group = Group$4;