@economic/taco 2.26.3 → 2.26.5

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/features/useTableServerLoading.d.ts

@@ -1,6 +1,7 @@
 import { TableServerLoadAllHandler, TableServerLoadAllState, TableServerLoadPageHandler } from '../../types';
 export declare function useTableServerLoading(loadPage?: TableServerLoadPageHandler, loadAll?: TableServerLoadAllHandler, pageSize?: number): {
     isEnabled: boolean;
+    isReady: boolean;
     loadPage: TableServerLoadPageHandler | undefined;
     loadAll: TableServerLoadAllHandler | undefined;
     loadAllIfNeeded: TableServerLoadAllHandler | undefined;

package/dist/taco.cjs.development.js

@@ -10413,34 +10413,53 @@ function useTableDataLoader(fetch, fetchAll, options = {
 
 function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
   const isEnabled = !!loadPage && !!loadAll;
+  const [isReady, setReady] = React__default.useState(false);
   const [loadAllStatus, setLoadedStatus] = React__default.useState(exports.TableServerLoadAllState.Incomplete);
+  let _loadPage;
   let _loadAll;
   let _loadAllIfNeeded;
+  if (typeof loadPage === 'function') {
+    _loadPage = function (...args) {
+      try {
+        const _temp = function () {
+          if (typeof loadPage === 'function') {
+            return Promise.resolve(loadPage(...args)).then(function () {
+              setReady(true);
+            });
+          }
+        }();
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+  }
   if (typeof loadAll === 'function') {
     _loadAll = function (...args) {
       try {
-        const _temp = function () {
+        const _temp2 = function () {
           if (typeof loadAll === 'function') {
             setLoadedStatus(exports.TableServerLoadAllState.Loading);
             return Promise.resolve(loadAll(...args)).then(function () {
               setLoadedStatus(exports.TableServerLoadAllState.Completed);
+              setReady(true);
             });
           }
         }();
-        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
     };
     _loadAllIfNeeded = function (...args) {
       try {
-        const _temp2 = function () {
+        const _temp3 = function () {
           if (loadAllStatus === exports.TableServerLoadAllState.Incomplete) {
             var _loadAll2;
             return Promise.resolve((_loadAll2 = _loadAll) === null || _loadAll2 === void 0 ? void 0 : _loadAll2(...args)).then(function () {});
           }
         }();
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
       } catch (e) {
         return Promise.reject(e);
       }
@@ -10448,7 +10467,8 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
   }
   return {
     isEnabled,
-    loadPage,
+    isReady,
+    loadPage: _loadPage,
     loadAll: _loadAll,
     loadAllIfNeeded: _loadAllIfNeeded,
     loadAllStatus,
@@ -10896,7 +10916,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 +10964,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 +11013,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 +11797,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 +11817,7 @@ function useTable(props, externalRef, renderers, meta) {
       toolbarRight: props.toolbarRight
     },
     renderer,
+    style,
     stylesheet,
     ref
   };
@@ -12361,11 +12404,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,17 +15752,19 @@ 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-grouped": !!((_table$state$grouping = table.state.grouping) !== null && _table$state$grouping !== void 0 && _table$state$grouping.length),
     "data-table-horizontally-scrolled": table.meta.columnFreezing.isHorizontallyScrolled ? true : undefined,
+    "data-table-status": table.meta.server.isEnabled ? table.meta.server.isReady ? 'ready' : undefined : 'ready',
     "data-table-pause-hover": table.meta.rowActive.isHoverStatePaused ? true : undefined,
     "data-table-resizing": table.state.columnSizingInfo.isResizingColumn ? true : undefined,
     "data-table-row-height": table.meta.rowHeight.height,
-    "data-table-grouped": !!((_table$state$grouping = table.state.grouping) !== null && _table$state$grouping !== void 0 && _table$state$grouping.length),
     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
@@ -18251,8 +18296,8 @@ function Row$2(props) {
     }
   }, [tableMeta.editing.isEditing, isActiveRow]);
   const attributes = {
-    'data-row-editing-invalid': tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsSeen(row.id) ? 'unseen' : true : undefined,
-    'data-row-editing-status': tableMeta.editing.getRowSaveStatus(row.id),
+    'data-row-editing-invalid': tableMeta.editing.isEnabled && tableMeta.editing.hasRowErrors(row.id) ? !tableMeta.editing.hasRowErrorsSeen(row.id) ? 'unseen' : true : undefined,
+    'data-row-editing-status': tableMeta.editing.isEnabled && tableMeta.editing.getRowSaveStatus(row.id) ? tableMeta.editing.getRowSaveStatus(row.id) : undefined,
     onFocus: handleFocus
   };
   return /*#__PURE__*/React__default.createElement(DisplayRow, Object.assign({}, props, attributes), tableMeta.editing.getRowSaveStatus(row.id) ? /*#__PURE__*/React__default.createElement(SaveStatus, {