@economic/taco 2.26.8 → 2.26.10

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

@@ -1,5 +1,5 @@
 import { TableMeta as ReactTableMeta, RowData } from '@tanstack/react-table';
-import { TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnMenu, TableColumnRendererControl, TableFilterComparator, TableProps } from '../types';
+import { TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnMenu, TableColumnRenderer, TableColumnRendererControl, TableFilterComparator, TableProps } from '../types';
 import { useTableColumnFreezing } from './features/useTableColumnFreezing';
 import { useTableColumnOrdering } from './features/useTableColumnOrdering';
 import { useTableFooter } from './features/useTableFooter';
@@ -54,6 +54,7 @@ declare module '@tanstack/table-core' {
         header: string;
         headerClassName?: string;
         menu?: TableColumnMenu;
+        renderer?: TableColumnRenderer<TValue, TData>;
         tooltip?: string;
     }
 }

package/dist/taco.cjs.development.js

@@ -9594,7 +9594,8 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
         enableOrdering: isGrouped ? false : enableOrdering,
         enablePrinting,
         enableTruncate,
-        header
+        header,
+        renderer
       }
     };
     // renderers
@@ -10935,9 +10936,14 @@ function useTableStyleGrid(tableId, table, fontSize) {
       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)`;
+      if (isInternalColumn(column.id)) {
+        if (column.id === '__actions') {
+          const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
+          size = `minmax(${minWidth}px, auto)`;
+        } else {
+          // getSize method is used instead of columnSizing state because internal columns have defined widths
+          size = `${column.getSize()}px`;
+        }
       } else if (width !== undefined) {
         const isLastColumn = index === allVisibleColumns.length - 1;
         if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
@@ -11490,7 +11496,7 @@ const renderer = {
   renderer: Cell,
   meta: {
     align: 'right',
-    className: /*#__PURE__*/cn('print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active="true"]]/row:sticky [table[data-table-pause-hover="false"]_&]:group-hover/row:sticky right-0', 'group-[[data-row-active="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-row-selected="true"]]/row:text-blue-100', 'group-[[data-row-selected="false"]:hover]/row:text-grey-100'),
+    className: /*#__PURE__*/cn('print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active="true"]]/row:sticky right-0', 'group-[[data-row-active="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-row-selected="true"]]/row:text-blue-100', 'group-[[data-row-selected="false"]:hover]/row:text-grey-100'),
     // TODO: remove when table3 is migrated, this satisfies the legacy table3 type
     enableSearch: false,
     header: ''
@@ -11892,6 +11898,7 @@ function useSearchHighlighting(cell, cellIndex, ref) {
 }
 
 function GroupedCell(props) {
+  var _ref, _columnMeta$renderer, _columnMeta$renderer2;
   const {
     cell,
     cellRef,
@@ -11899,6 +11906,7 @@ function GroupedCell(props) {
     isHighlighted
   } = props;
   const tableMeta = cell.getContext().table.options.meta;
+  const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const {
     isHovered,
@@ -11906,25 +11914,31 @@ function GroupedCell(props) {
   } = React__default.useContext(RowContext);
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const canShowActions = isActiveRow || isHovered && !tableMeta.rowActive.isHoverStatePaused;
+  const colSpan = cell.row.getVisibleCells().filter(c => !isInternalColumn(c.column.id)).length - 1;
+  const content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
+  const subRows = cell.getContext().row.subRows.map(row => row.original);
   return /*#__PURE__*/React__default.createElement(MemoedGroupedCell, Object.assign({}, attributes, {
-    cell: cell,
-    cellRef: cellRef,
     canShowActions: canShowActions,
+    cellRef: cellRef,
+    colSpan: colSpan,
     fontSize: tableMeta.fontSize.size,
-    rowActions: tableMeta.rowGroups.rowActionsForGroup
-  }));
+    rowActions: tableMeta.rowGroups.rowActionsForGroup,
+    rowId: cell.row.id,
+    subRows: subRows
+  }), content);
 }
 const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupedCell(props) {
   const {
     canShowActions,
-    cell,
     cellRef,
+    children,
+    colSpan,
     fontSize,
     rowActions,
+    rowId,
+    subRows,
     ...attributes
   } = props;
-  const colSpan = cell.row.getVisibleCells().filter(c => !isInternalColumn(c.column.id)).length - 1;
-  const subRows = cell.getContext().row.subRows.map(row => row.original);
   return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
     ref: cellRef,
     style: {
@@ -11932,13 +11946,13 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     }
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "grow"
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? ( /*#__PURE__*/React__default.createElement(Actions$1, {
+  }, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? ( /*#__PURE__*/React__default.createElement(Actions$1, {
     actions: rowActions,
     actionsLength: 4,
     data: subRows,
     fontSize: fontSize,
     isActiveRow: true,
-    rowId: cell.row.id
+    rowId: rowId
   })) : null);
 });
 
@@ -12080,7 +12094,7 @@ function useSetVirtualisedRowHeight(measureRow, rowEl, expansionEl, isExpanded)
   }, [isExpanded, rowEl, expansionEl]);
 }
 
-const DisplayCell = /*#__PURE__*/React__default.memo(function DisplayCell(props) {
+function DisplayCell(props) {
   const {
     cell,
     cellRef,
@@ -12088,15 +12102,37 @@ const DisplayCell = /*#__PURE__*/React__default.memo(function DisplayCell(props)
     isHighlighted,
     ...cellAttributes
   } = props;
+  const {
+    isHovered
+  } = React__default.useContext(RowContext);
   const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const isTruncated = !!columnMeta.enableTruncate;
-  const content = reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
-  return /*#__PURE__*/React__default.createElement("td", Object.assign({}, cellAttributes, attributes, {
+  let content;
+  if (isInternalColumn(cell.column.id)) {
+    content = reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
+  } else {
+    var _ref, _columnMeta$renderer, _columnMeta$renderer2;
+    content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
+  }
+  return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, cellAttributes, attributes, {
+    cellRef: cellRef,
+    isTruncated: isTruncated,
+    key: `${cell.id}_${isHovered}`
+  }), content);
+}
+const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
+  const {
+    cellRef,
+    children,
+    isTruncated,
+    ...cellAttributes
+  } = props;
+  return /*#__PURE__*/React__default.createElement("td", Object.assign({}, cellAttributes, {
     ref: cellRef
   }), isTruncated ? /*#__PURE__*/React__default.createElement("span", {
     className: "truncate print:overflow-visible print:whitespace-normal"
-  }, content) : content);
+  }, children) : children);
 });
 
 const RENDERERS = {