@economic/taco 2.26.2 → 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/primitives/Table/useTableManager/util/presets.d.ts

@@ -1,2 +1,2 @@
 import { TableFeatureProps, TableProps } from '../../types';
-export declare function useTableFeaturePreset<TType = unknown>(props: TableProps<TType>): TableFeatureProps;
+export declare function getTableFeaturePreset<TType = unknown>(props: TableProps<TType>): TableFeatureProps;

package/dist/taco.cjs.development.js

@@ -9888,7 +9888,7 @@ const presets = {
     enableSaveSettings: true
   }
 };
-function useTableFeaturePreset(props) {
+function getTableFeaturePreset(props) {
   var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableRowSelec2, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
@@ -9899,24 +9899,6 @@ function useTableFeaturePreset(props) {
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
   const enableRowSelectionSingle = (_props$enableRowSelec2 = props.enableRowSelectionSingle) !== null && _props$enableRowSelec2 !== void 0 ? _props$enableRowSelec2 : presetOptions.enableRowSelectionSingle;
-  // guard options that might be unintentionally broken
-  React__default.useEffect(() => {
-    if (enableRowClick && !props.onRowClick) {
-      console.warn(`Table (id: ${props.id}) - Row click is enabled but no \`onRowClick\` handler has been provided. Provide one to enable row click or set \`enableRowClick\` to \`false\`.`);
-    }
-    if (enableRowGoto && !props.onRowGoto) {
-      console.warn(`Table (id: ${props.id}) - Row click is enabled but no \`onRowGoto\` handler has been provided. Provide one to enable row goto or set \`enableRowGoto\` to \`false\`.`);
-    }
-    if (enableRowExpansion && !props.rowExpansionRenderer) {
-      console.warn(`Table (id: ${props.id}) - Row expansion is enabled but no \`rowExpansionRenderer\` has been provided. Provide one to enable row expansion or set \`enableRowExpansion\` to \`false\`.`);
-    }
-    if (enableRowSelection && !props.onRowSelect) {
-      console.warn(`Table (id: ${props.id}) - Row selection is enabled but no \`onRowSelect\` handler has been provided. Provide one to enable row selection or set \`enableRowSelection\` to \`false\`.`);
-    }
-    if (enableRowSelectionSingle && !props.onRowSelect) {
-      console.warn(`Table (id: ${props.id}) - Row selection (single) is enabled but no \`onRowSelect\` handler has been provided. Provide one to enable row selection or set \`enableRowSelectionSingle\` to \`false\`.`);
-    }
-  }, []);
   return {
     // react-table built-in
     enableFiltering: (_props$enableFilterin = props.enableFiltering) !== null && _props$enableFilterin !== void 0 ? _props$enableFilterin : presetOptions.enableFiltering,
@@ -10827,7 +10809,7 @@ function useTableManager(props, meta, internalColumns) {
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
-  const options = useTableFeaturePreset(props);
+  const options = getTableFeaturePreset(props);
   // load any persisted table settings and merge them with any defaults
   const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
   // configure common custom features
@@ -10914,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;
@@ -10962,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();
@@ -11004,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) {
@@ -11776,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
@@ -11793,6 +11797,7 @@ function useTable(props, externalRef, renderers, meta) {
       toolbarRight: props.toolbarRight
     },
     renderer,
+    style,
     stylesheet,
     ref
   };
@@ -12379,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
@@ -15718,7 +15723,7 @@ function Table(props) {
 Table.Toolbar = TableToolbar;
 Table.Grid = TableGrid;
 function TableGrid(props) {
-  var _table$state$grouping, _table$renderer$rows;
+  var _table$state$grouping;
   const {
     enableHorizontalArrowKeyNavigation,
     table,
@@ -15727,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,
@@ -15738,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
@@ -15745,7 +15751,7 @@ function TableGrid(props) {
     key: props.id,
     header: props,
     scrollToIndex: table.renderer.scrollToIndex
-  }))))))), (_table$renderer$rows = table.renderer.rows) !== null && _table$renderer$rows !== void 0 && _table$renderer$rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
+  }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
     style: table.renderer.style