@economic/taco 2.26.3 → 2.26.4

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

@@ -0,0 +1,4 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+export declare function useTableStyleColumnFreezing<TType = unknown>(tableId: string, table: ReactTable<TType>): {
+    stylesheet: string;
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableFontSize } from '../../types';
+export declare function useTableStyleGrid<TType = unknown>(tableId: string, table: ReactTable<TType>, fontSize: TableFontSize): {
+    style: React.CSSProperties;
+    stylesheet: string;
+};

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

@@ -21,7 +21,8 @@ export declare type useTableReturnValue<TType = unknown> = {
         style: React.CSSProperties;
         scrollToIndex: (index: number, options?: ReactVirtualScrollToOptions) => void;
     };
-    stylesheet: JSX.Element;
+    style: React.CSSProperties;
+    stylesheet: string;
     state: ReactTableState;
 };
 export declare function useTable<TType = unknown, TMeta = {}>(props: TableProps<TType>, externalRef: React.Ref<TableRef>, renderers: useTableRenderers<TType>, meta?: Partial<ReactTableMeta<TType>> & TMeta): useTableReturnValue<TType>;

package/dist/taco.cjs.development.js

@@ -10896,7 +10896,7 @@ function useTableManager(props, meta, internalColumns) {
   };
 }
 
-function useStylesheetCssGrid(tableId, table, fontSize) {
+function useTableStyleGrid(tableId, table, fontSize) {
   const tableMeta = table.options.meta;
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
@@ -10944,12 +10944,19 @@ function useStylesheetCssGrid(tableId, table, fontSize) {
     }, '');
     // 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(',');
-    return `table[data-taco^='table']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }
-@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''} }`;
+    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 useStylesheetColumnFreezing(tableId, table) {
+function useTableStyleColumnFreezing(tableId, table) {
   const {
     columnPinning
   } = table.getState();
@@ -10986,20 +10993,32 @@ function useStylesheetColumnFreezing(tableId, table) {
     }
     return styles.join('\n');
   }, [columnPinning]);
-  return stylesheet;
+  return {
+    stylesheet
+  };
 }
 
-function useStylesheet(tableId, table) {
+function useTableStyle(tableId, table) {
   const tableMeta = table.options.meta;
-  const cssGridStylesheet = useStylesheetCssGrid(tableId, table, tableMeta.fontSize.size);
-  const columnFreezingStylesheet = useStylesheetColumnFreezing(tableId, table);
-  const genericStylesheet = `table[data-taco^='table']#${tableId} {
-        --table-header-group-depth: ${table.getHeaderGroups().length};
-        --table-cell-padding-x: ${getCellWidthPadding(tableMeta.fontSize.size)};
-        --table-cell-padding-y: ${getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size)};
-    }`;
-  const css = [genericStylesheet, cssGridStylesheet, columnFreezingStylesheet].filter(s => !!s).join('\n');
-  return /*#__PURE__*/React__default.createElement("style", null, css);
+  const {
+    style: cssGridStyle,
+    stylesheet: cssGridStylesheet
+  } = useTableStyleGrid(tableId, table, tableMeta.fontSize.size);
+  const {
+    stylesheet: columnFreezingStylesheet
+  } = useTableStyleColumnFreezing(tableId, table);
+  const style = {
+    // css vars required by children of table
+    '--table-header-group-depth': table.getHeaderGroups().length,
+    '--table-cell-padding-x': getCellWidthPadding(tableMeta.fontSize.size),
+    '--table-cell-padding-y': getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size),
+    ...cssGridStyle
+  };
+  const stylesheet = [cssGridStylesheet, columnFreezingStylesheet].filter(s => !!s).join('\n');
+  return {
+    style,
+    stylesheet
+  };
 }
 // we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)
 function getCellHeightPadding(height, fontSize) {
@@ -11758,7 +11777,10 @@ function useTable(props, externalRef, renderers, meta) {
   // configure the virtualised renderer
   const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex);
   // configure dynamic styling
-  const stylesheet = useStylesheet(manager.id, manager.instance);
+  const {
+    style,
+    stylesheet
+  } = useTableStyle(manager.id, manager.instance);
   // configure global keyboard shortcuts
   useTableGlobalShortcuts(manager.instance, ref, renderer.scrollToIndex);
   // augment the ref with some helper functions
@@ -11775,6 +11797,7 @@ function useTable(props, externalRef, renderers, meta) {
       toolbarRight: props.toolbarRight
     },
     renderer,
+    style,
     stylesheet,
     ref
   };
@@ -12361,11 +12384,11 @@ function HeaderMenu(props) {
   // can't use display: none because the button needs to be focusable
   const className = cn(
   // positioning
-  'justify-end -mr-1 overflow-hidden',
+  'justify-end overflow-hidden',
   // sizing
   '!h-6 !w-0 !min-h-[theme(spacing.6)] !min-w-0',
   // visible - hover
-  'group-hover/header:!w-6 group-hover/header:!min-w-[theme(spacing.6)]',
+  'group-hover/header:!w-6 group-hover/header:!min-w-[theme(spacing.6)] group-hover/header:-mr-1',
   // visible - expanded
   'aria-expanded:!w-6 aria-expanded:!min-w-[theme(spacing.6)]',
   // visible - focus
@@ -15709,7 +15732,7 @@ function TableGrid(props) {
   const handleFocus = table.meta.rowActive.rowActiveIndex === undefined ? event => {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.stylesheet, /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
     "data-table-horizontally-scrolled": table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined,
@@ -15720,6 +15743,7 @@ function TableGrid(props) {
     onFocus: handleFocus,
     onScroll: table.meta.columnFreezing.handleScroll,
     ref: table.ref,
+    style: table.style,
     tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("thead", null, table.instance.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("tr", {
     key: headerGroup.id