@economic/taco 2.22.2 → 2.23.0

package/dist/taco.cjs.development.js

@@ -26,6 +26,7 @@ var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
+var reactPortal = require('@radix-ui/react-portal');
 var reactTable = require('@tanstack/react-table');
 var core = require('@dnd-kit/core');
 var SortablePrimitive = require('@dnd-kit/sortable');
@@ -4818,6 +4819,49 @@ const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
+const isElementTruncated = targetElement => {
+  if (targetElement !== null) {
+    return targetElement.offsetWidth < targetElement.scrollWidth;
+  }
+  return false;
+};
+const useTruncated = (element, deps = []) => {
+  const [isTruncated, setIsTruncated] = React__default.useState(isElementTruncated(element));
+  React__default.useEffect(() => {
+    setIsTruncated(isElementTruncated(element));
+  }, [element, ...deps]);
+  return {
+    isTruncated
+  };
+};
+
+const Truncate = ({
+  children,
+  tooltip
+}) => {
+  const ref = React__default.useRef(null);
+  const [mounted, setMounted] = React__default.useState(false);
+  const {
+    isTruncated
+  } = useTruncated(ref.current, [mounted]);
+  React__default.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  const clonedChildrenWithRef = /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+    ref,
+    className: cn(children.props.className, 'truncate', {
+      'hover:cursor-pointer': isTruncated
+    })
+  });
+  if (isTruncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, clonedChildrenWithRef);
+  }
+  return clonedChildrenWithRef;
+};
+
 const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
   const {
     noPadding,
@@ -4844,9 +4888,11 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: "mx-4 mb-2 mt-4 flex"
-  }, title && /*#__PURE__*/React.createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
+  }, title && ( /*#__PURE__*/React.createElement(Truncate, {
+    tooltip: title
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "mb-0 flex-grow truncate text-left"
+  }, title))), menu ? /*#__PURE__*/React.createElement(IconButton, {
     icon: "ellipsis-horizontal",
     appearance: "discrete",
     menu: menu,
@@ -7001,30 +7047,8 @@ Drawer.Close = Close$3;
 Drawer.Actions = Actions;
 Drawer.Outlet = Outlet;
 
-const isTruncated = targetElement => {
-  if (targetElement !== null) {
-    return targetElement.offsetWidth < targetElement.scrollWidth;
-  }
-  return false;
-};
-const useTruncated = (element, deps = []) => {
-  const [truncated, setTruncated] = React__default.useState(isTruncated(element));
-  React__default.useEffect(() => {
-    setTruncated(isTruncated(element));
-  }, [element, ...deps]);
-  return {
-    truncated
-  };
-};
-
 const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  const [showTooltip, setShowTooltip] = React.useState(false);
   const messageRef = React.useRef(null);
-  React.useEffect(() => {
-    // refs are null on the first render so setting showTooltip state forces the rerender to see if message is
-    // truncated or not
-    setShowTooltip(true);
-  }, []);
   const {
     disabled,
     children,
@@ -7042,16 +7066,12 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
-  const {
-    truncated: isMessageTrucated
-  } = useTruncated(messageRef.current, [message, showTooltip]);
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
     ref: ref
-  }), children, message && ( /*#__PURE__*/React.createElement(Tooltip, {
-    title: message,
-    hide: !isMessageTrucated
+  }), children, message && ( /*#__PURE__*/React.createElement(Truncate, {
+    tooltip: message
   }, /*#__PURE__*/React.createElement("span", {
     className: messageClassName,
     ref: messageRef,
@@ -8421,8 +8441,9 @@ const sanitizeButtonPropsForMenuItem = (button, index) => {
 };
 const DEFAULT_OFFSET = 32 + 8;
 const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGroup(props, ref) {
+  var _moreButton;
   const {
-    moreButton: MoreButton,
+    moreButton,
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
@@ -8432,12 +8453,17 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
     var _el$getBoundingClient;
     return setButtonWidth(el === null || el === void 0 ? void 0 : (_el$getBoundingClient = el.getBoundingClientRect()) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.width);
   }, []);
-  const button = MoreButton !== null && MoreButton !== void 0 ? MoreButton : /*#__PURE__*/React__default.createElement(IconButton, {
-    icon: "more"
-  });
+  const {
+    texts
+  } = useLocalization();
   const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);
   const children = React__default.Children.toArray(props.children);
   const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  const hiddenChildrenCount = hiddenChildren.length;
+  const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';
+  const MoreButton = (_moreButton = moreButton === null || moreButton === void 0 ? void 0 : moreButton(moreButtonText)) !== null && _moreButton !== void 0 ? _moreButton : /*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "more"
+  });
   const className = cn('flex overflow-hidden', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
@@ -8448,8 +8474,8 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
       visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
       'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
     })
-  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
-    className: cn('sticky right-0 order-[99]', button.props.className),
+  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
+    className: cn('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
     menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
     ref: buttonRefCallback
@@ -9141,9 +9167,9 @@ const ToastProvider = ({
   }, []);
   return /*#__PURE__*/React.createElement(ToastContext.Provider, Object.assign({}, props, {
     value: toaster
-  }), children, /*#__PURE__*/React.createElement("div", {
+  }), children, /*#__PURE__*/React.createElement(reactPortal.Portal, null, /*#__PURE__*/React.createElement("div", {
     id: "yt-toast__container",
-    className: "pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
+    className: "pointer-events-all absolute !left-auto bottom-0 right-0 z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
     role: "log"
   }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
     initial: false
@@ -9173,7 +9199,7 @@ const ToastProvider = ({
     }
   }, /*#__PURE__*/React.createElement(Toast, Object.assign({}, toast, {
     onClose: () => handleClose(toast.id)
-  }))))))));
+  })))))))));
 };
 const useToast = () => React.useContext(ToastContext);
 
@@ -9726,7 +9752,7 @@ const DEFAULT_PRESET = {
   enableRowClick: false,
   enableRowGoto: false,
   enableRowHeight: false,
-  enableSettings: false
+  enableSaveSettings: false
 };
 const presets = {
   lite: {
@@ -9750,7 +9776,7 @@ const presets = {
     enableRowClick: true,
     enableRowGoto: true,
     enableRowHeight: false,
-    enableSettings: true
+    enableSaveSettings: true
   },
   complex: {
     // react-table built-in
@@ -9773,11 +9799,11 @@ const presets = {
     enableRowClick: true,
     enableRowGoto: true,
     enableRowHeight: true,
-    enableSettings: true
+    enableSaveSettings: true
   }
 };
 function useTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _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$rowActions2, _props$enableRowHeigh, _props$enableSettings;
+  var _props$enableRowActio, _props$enableRowClick, _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$rowActions2, _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;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -9828,7 +9854,7 @@ function useTableFeaturePreset(props) {
     enableRowClick: enableRowClick && !!props.onRowClick,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
-    enableSettings: (_props$enableSettings = props.enableSettings) !== null && _props$enableSettings !== void 0 ? _props$enableSettings : presetOptions.enableSettings
+    enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
 }
 
@@ -10140,6 +10166,130 @@ function _finallyRethrows(body, finalizer) {
 }
 
 const DEFAULT_PAGE_SIZE = 100;
+function useTableDataLoader(fetch, fetchAll, options = {
+  pageSize: DEFAULT_PAGE_SIZE
+}) {
+  const {
+    pageSize
+  } = options;
+  // track the data length, we don't know it until the first request
+  const length = React__default.useRef(undefined);
+  // data will be filled after the first request, then we'll update values in place
+  const [data, setData] = React__default.useState([]);
+  // track which pages have been loaded to dedupe requests
+  const _pendingPageRequests = React__default.useRef({});
+  const _lastUsedSorting = React__default.useRef([]);
+  const _lastUsedFilters = React__default.useRef([]);
+  const _lastUsedSearch = React__default.useRef();
+  const _forceReset = React__default.useRef(false);
+  const loadPage = function (pageIndex, sorting, filters, search) {
+    try {
+      let reset = false;
+      // sorting or filters changed, reset everything
+      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+        _pendingPageRequests.current = {};
+        // nuke the dataset so that we "start again" after sorting
+        reset = true;
+      }
+      if (_pendingPageRequests.current[pageIndex]) {
+        // if page is already loaded/loading, abort, otherwise mark it as loading
+        return Promise.resolve();
+      } else {
+        _pendingPageRequests.current[pageIndex] = true;
+      }
+      _forceReset.current = false;
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
+      // set the search so we can track if it changed between loads
+      _lastUsedSearch.current = search;
+      const _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(fetch(pageIndex, pageSize, sorting, filters, search)).then(function (response) {
+            // update state, here we do some "magic" to support "load in place"
+            setData(currentData => {
+              let nextData;
+              // reset table state if:
+              // - the length isn't set at all (first load)
+              // - the client length and server length are different (the data changed)
+              if (reset || length.current !== response.length) {
+                length.current = response.length;
+                nextData = Array(length.current).fill(undefined);
+              } else {
+                nextData = [...currentData];
+              }
+              const startIndex = pageIndex * pageSize;
+              nextData.splice(startIndex, pageSize, ...response.data);
+              return nextData;
+            });
+          });
+        }, function () {});
+      }, function (_wasThrown, _result) {
+        _pendingPageRequests.current[pageIndex] = false;
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const loadAll = function (sorting, filters, search) {
+    try {
+      const _temp2 = _catch(function () {
+        return Promise.resolve(fetchAll(sorting, filters, search)).then(function (response) {
+          length.current = response.length;
+          setData(() => {
+            let nextData;
+            if (response.data.length !== response.length) {
+              nextData = Array(response.length).fill(undefined);
+              nextData.splice(0, response.data.length, ...response.data);
+            } else {
+              nextData = [...response.data];
+            }
+            return nextData;
+          });
+        });
+      }, function () {});
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const invalidate = function () {
+    try {
+      _forceReset.current = true;
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  // we reset the page to 0 whenever sorting, filtering or search changes
+  const handleSort = function (sorting) {
+    try {
+      return loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleFilter = function (filters) {
+    try {
+      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return [{
+    data,
+    length: length.current,
+    loadAll,
+    loadPage,
+    onChangeFilter: handleFilter,
+    onChangeSort: handleSort,
+    pageSize
+  }, invalidate];
+}
 
 function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
   const isEnabled = !!loadPage && !!loadAll;
@@ -10230,27 +10380,69 @@ function useTacoSettings() {
   return React__default.useContext(TacoContext);
 }
 
+const DEFAULT_ENABLED_OPTIONS = {
+  columnOrder: true,
+  columnPinning: true,
+  columnSizing: true,
+  columnVisibility: true,
+  excludeUnmatchedRecordsInSearch: true,
+  fontSize: true,
+  grouping: true,
+  rowHeight: true,
+  showWarningWhenPrintingLargeDataset: true,
+  sorting: true
+};
 function useUniqueTableId(tableId) {
   const tacoSettings = useTacoSettings();
   return `taco.${tacoSettings.uniqueUserIdentifier}.table.${tableId}.settings`;
 }
+function useEnabledSettings(isEnabled) {
+  return React__default.useMemo(() => {
+    if (isEnabled === false) {
+      return [Object.keys(DEFAULT_ENABLED_OPTIONS).reduce((o, key) => ({
+        ...o,
+        [key]: false
+      }), {}), false];
+    } else if (isEnabled === true) {
+      return [DEFAULT_ENABLED_OPTIONS, true];
+    }
+    const options = {
+      ...DEFAULT_ENABLED_OPTIONS,
+      ...isEnabled
+    };
+    return [options, Object.values(options).some(o => o === true)];
+  }, [isEnabled]);
+}
 function useTableSettings(isEnabled = false, id, defaultSettings = {}, onChangeSettings) {
   const uniqueId = useUniqueTableId(id);
-  const [persistedSettings, _setPersistedSettings] = useLocalStorage(isEnabled ? uniqueId : undefined, defaultSettings);
+  const [enabledSettings, hasSomeEnabledSettings] = useEnabledSettings(isEnabled);
+  const [persistedSettings, _setPersistedSettings] = useLocalStorage(hasSomeEnabledSettings ? uniqueId : undefined, removeDisabledSettings(defaultSettings, enabledSettings));
   const setPersistedSettings = React__default.useCallback(value => {
-    if (!isEnabled) {
+    if (!hasSomeEnabledSettings) {
       return;
     }
-    _setPersistedSettings(value);
+    const sanitizedSettings = removeDisabledSettings(value, enabledSettings);
+    _setPersistedSettings(sanitizedSettings);
     if (typeof onChangeSettings === 'function') {
-      onChangeSettings(value);
+      onChangeSettings(sanitizedSettings);
     }
-  }, [isEnabled, onChangeSettings]);
-  if (!isEnabled) {
+  }, [hasSomeEnabledSettings, onChangeSettings, JSON.stringify(enabledSettings)]);
+  if (!hasSomeEnabledSettings) {
     return [defaultSettings, () => undefined];
   }
   return [persistedSettings, setPersistedSettings];
 }
+function removeDisabledSettings(settings, enabledSettings) {
+  const sanitizedSettings = {
+    ...settings
+  };
+  Object.keys(enabledSettings).forEach(setting => {
+    if (!enabledSettings[setting]) {
+      delete sanitizedSettings[setting];
+    }
+  });
+  return sanitizedSettings;
+}
 
 // augments useEffect to not run on the initial mount
 function useLazyEffect(effect, deps) {
@@ -10357,12 +10549,25 @@ function resetHighlightedColumnIndexes(value, table) {
   if (value) {
     const indexes = [];
     const columns = table.getVisibleLeafColumns();
+    const rowGrouping = table.getState().grouping;
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          if (column.getIsVisible() && column.columnDef.enableGlobalFilter) {
+          let allowSearch = true;
+          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
+            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
+            if (row.getIsGrouped()) {
+              allowSearch = column.getIsGrouped();
+            }
+            // otherwise for other rows, don't search the grouped column - because it isn't visible
+            else if (rowGrouping.includes(column.id)) {
+              allowSearch = false;
+            }
+          }
+          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
             var _row$original, _column$columnDef$met;
             const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
+            // indexes don't map to sorted data
             if (cellValue !== undefined && isWeakContains(cellValue, value)) {
               indexes.push([rowIndex, columnIndex]);
             }
@@ -10526,10 +10731,12 @@ function useTableRef(table, ref) {
 
 function useTable(props, ref, meta, internalColumns) {
   var _props$length, _instance$options$met;
+  // 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);
   // load any persisted table settings and merge them with any defaults
-  const [settings, setSettings] = useTableSettings(options.enableSettings, props.id, props.defaultSettings, props.onChangeSettings);
+  const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
   // configure common custom features
   const columnFreezing = useTableColumnFreezing(options.enableColumnFreezing);
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
@@ -10601,6 +10808,7 @@ function useTable(props, ref, meta, internalColumns) {
   // configure ref with reset functions
   useTableRef(instance, ref);
   return {
+    id: safeId,
     instance,
     length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length,
     meta: (_instance$options$met = instance.options.meta) !== null && _instance$options$met !== void 0 ? _instance$options$met : {},
@@ -12865,6 +13073,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     children,
     onClick,
     tabIndex = 0,
+    fontSize,
     ...otherProps
   } = props;
   const {
@@ -12874,14 +13083,17 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('cursor-pointer !px-1 h-fit', getInputClasses({
+  const className = cn('cursor-pointer px-1.5 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
     invalid,
     readOnly
-  }).replace('w-full', ''), {
-    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
+  }).replace('w-full', '').replace('px-2', ''), {
+    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-')),
+    'text-xs': fontSize === exports.FontSizes.small,
+    'text-sm': fontSize === exports.FontSizes.medium,
+    'text-base': fontSize === exports.FontSizes.large
   }, props.className);
   const handleClick = event => {
     if (disabled || readOnly) {
@@ -12975,7 +13187,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('!absolute z-20', buttonProps.className);
+    className = cn('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -13542,6 +13754,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef,
+    fontSize: fontSize,
     placeholder: placeholder
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
@@ -14420,7 +14633,8 @@ function useCssGridStylesheet(tableId, table, fontSize) {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
   const globalMinSize = getCellMinWidth(fontSize);
-  const gridTemplateRows = 'min-content 1fr min-content'; // header body footer;
+  // header body ?footer
+  const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
   return React__default.useMemo(() => {
     let printGridTemplateColumns = '';
     const printHiddenColumns = [];
@@ -14460,7 +14674,7 @@ function useCssGridStylesheet(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='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
     return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }
-@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns} { display: none; } }`;
+@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''} }`;
   }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
 }
 
@@ -14658,7 +14872,10 @@ function getCellAttributes(cell, isHighlighted) {
   }
   return attributes;
 }
-function useSearchHighlighting(cell, index, ref) {
+function useSearchHighlighting(cell, cellIndex, ref) {
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
   const context = cell.getContext();
   const tableMeta = context.table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
@@ -14674,7 +14891,7 @@ function useSearchHighlighting(cell, index, ref) {
       return undefined;
     }
     const [rowActiveIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
-    if (rowActiveIndex === cell.row.index && currentColumnIndex === index) {
+    if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {
       return 'current';
     }
     return true;
@@ -15097,6 +15314,20 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
   [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
 }
 
+function EmptyStateBody(props) {
+  const {
+    emptyState: Placeholder = null,
+    ...attributes
+  } = props;
+  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
+    className: "!auto-rows-fr"
+  }), /*#__PURE__*/React__default.createElement("tr", {
+    className: "!auto-rows-fr"
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "col-span-full !border-0 !p-0 hover:!bg-white"
+  }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, null) : null)));
+}
+
 function Column$1(_) {
   return null;
 }
@@ -15104,11 +15335,11 @@ function Group$3(_) {
   return null;
 }
 const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
-  var _report$state$groupin;
+  var _report$state$groupin, _renderer$rows;
   const tableRef = useMergedRef(ref);
   const report = useReport(props, tableRef);
   const renderer = useTableRenderer(report.instance, tableRef, props.defaultRowActiveIndex);
-  const stylesheet = useStylesheet(props.id, report.instance);
+  const stylesheet = useStylesheet(report.id, report.instance);
   useTableGlobalShortcuts(report.instance, tableRef, renderer.scrollToIndex);
   const handleFocus = report.meta.rowActive.rowActiveIndex === undefined ? event => {
     report.meta.rowActive.handleFocus(event, report.length, renderer.scrollToIndex);
@@ -15120,12 +15351,12 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     right: props.toolbarRight,
     scrollToIndex: renderer.scrollToIndex,
     table: report.instance,
-    tableId: props.id,
+    tableId: report.id,
     tableRef: tableRef
   }), props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
   }, props.toolbarPanel) : undefined, /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", {
-    id: props.id,
+    id: report.id,
     "data-taco": "report",
     "data-table-font-size": report.meta.fontSize.size,
     "data-table-horizontally-scrolled": report.meta.columnFreezing.isHorizontallyScrolled ? true : undefined,
@@ -15139,11 +15370,13 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("thead", null, report.instance.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("tr", {
     key: headerGroup.id
-  }, headerGroup.headers.map(Header$4))))), /*#__PURE__*/React__default.createElement(Body, {
+  }, headerGroup.headers.map(Header$4))))), (_renderer$rows = renderer.rows) !== null && _renderer$rows !== void 0 && _renderer$rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     length: report.length,
     table: report.instance,
     style: renderer.style
-  }, renderer.rows), report.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, report.instance.getFooterGroups()[0].headers.map(Footer$3)))) : null), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
+  }, renderer.rows), report.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, report.instance.getFooterGroups()[0].headers.map(Footer$3)))) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
+    emptyState: props.emptyState
+  }))), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
     length: report.length,
     table: report.instance
   }) : null));
@@ -19172,7 +19405,7 @@ function EditingCell(props) {
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met, _column$columnDef$met2;
   const {
     cell,
     column,
@@ -19307,7 +19540,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   }));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? ( /*#__PURE__*/React__default.createElement(Indicator, {
     reason: moveReason,
-    columnName: String(cell.column.columnDef.header),
+    columnName: String((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header),
     mountNode: mountNode,
     validationErrors: []
   })) : null, /*#__PURE__*/React__default.createElement("div", {
@@ -23039,9 +23272,9 @@ const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function Primar
   } = useLocalization();
   const internalRef = useMergedRef(ref);
   const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
-  const moreButton = /*#__PURE__*/React__default.createElement(Button$1, {
+  const moreButton = () => ( /*#__PURE__*/React__default.createElement(Button$1, {
     className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
-  }, texts.header.more);
+  }, texts.header.more));
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
     ref: internalRef
@@ -23651,6 +23884,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
+exports.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
@@ -23739,6 +23973,7 @@ exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;
 exports.useRadioGroup = useRadioGroup;
 exports.useTable3DataLoader = useTable3DataLoader;
+exports.useTableDataLoader = useTableDataLoader;
 exports.useTableRowCreation = useTableRowCreation;
 exports.useToast = useToast;
 //# sourceMappingURL=taco.cjs.development.js.map