@economic/taco 2.45.0-alpha.30 → 2.45.0-alpha.31

package/dist/taco.cjs.development.js

@@ -6431,7 +6431,6 @@ const useDatepicker = ({
     setInternalValue(event.target.value);
   };
   const handleChange = date => {
-    // Update both the input value and calendar view date when selecting a date
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
   const handleKeyDown = event => {
@@ -6853,7 +6852,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   }), /*#__PURE__*/React.createElement("div", {
     className: containerClassName,
     "data-taco": "dialog"
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+  }, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
     role: "button",
     draggable: true,
     "aria-grabbed": dragging,
@@ -6867,7 +6866,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     "aria-label": texts.dialog.close,
     className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
-  }))) : null)), dialog.elements.drawer, dialog.elements.extra))));
+  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -7345,7 +7344,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
@@ -7358,7 +7357,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     "aria-label": texts.drawer.close,
     className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
-  }))) : null));
+  }))) : null);
   const styleProp = {
     ...style,
     ...{
@@ -12449,16 +12448,13 @@ function getPaddingEndOffset(table, options) {
   const bottomRows = (_table$getBottomRows = table.getBottomRows()) !== null && _table$getBottomRows !== void 0 ? _table$getBottomRows : [];
   return ROW_HEIGHT_ESTIMATES.medium * ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 1) * bottomRows.length;
 }
+// A higher number ensure less scroll jumping for dynamic row heights, but too high can reduce performance. 8 worked well
+const OVERSCAN_ROW_COUNT = 8;
 function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
   var _table$getState$group, _table$getCenterRows, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _virtualItems$end, _virtualItems;
   const tableMeta = table.options.meta;
   const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   const rows = (_table$getCenterRows = table.getCenterRows()) !== null && _table$getCenterRows !== void 0 ? _table$getCenterRows : [];
-  // expanded rows
-  const {
-    createRowMeasurer,
-    estimateSize
-  } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
   // account for thead and tfoot in the scroll area - both are always medium row height
@@ -12466,15 +12462,20 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   const count = tableMeta.server.isEnabled && tableMeta.server._experimentalDataLoader2 ? length : rows.length;
   const virtualiser = reactVirtual.useVirtualizer({
     count,
-    estimateSize,
+    estimateSize: () => {
+      return tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;
+    },
     getScrollElement: () => tableRef.current,
-    overscan: tableMeta.printing.isPrinting ? count : undefined,
+    overscan: tableMeta.printing.isPrinting ? count : OVERSCAN_ROW_COUNT,
     rangeExtractor,
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
     scrollPaddingEnd: getScrollPaddingEndOffset(table),
     paddingEnd: getPaddingEndOffset(table, options)
   });
+  React__default.useEffect(() => {
+    virtualiser.measure();
+  }, [table.getState().expanded]);
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
   const scrollToIndex = React__default.useCallback((index, options = {
@@ -12553,7 +12554,9 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
           table: table
         });
       }
-      const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
+      const measureRow = rowHeight => {
+        virtualiser.resizeItem(virtualRow, rowHeight);
+      };
       return /*#__PURE__*/React__default.createElement(Row, {
         key: row.id,
         row: row,
@@ -12572,43 +12575,6 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
     scrollToIndex
   };
 }
-// support varying row heights - variable row heights, row expansion
-function useRowHeightVirtualisation(table) {
-  const tableMeta = table.options.meta;
-  const rows = table.getRowModel().rows;
-  const expandedState = table.getState().expanded;
-  const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React__default.useState({});
-  // look at all registered expanded row heights and use them to form a more accurate average size
-  // it might be worth considering if taking the max, or an upper bound, would be better
-  const averageExpandedRowHeight = React__default.useMemo(() => {
-    const values = Object.values(expandedRowHeightsCache);
-    return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
-  }, [expandedRowHeightsCache]);
-  // row heights
-  const estimateSize = React__default.useCallback(index => {
-    var _rows$index, _rows$index$getIsExpa;
-    const rowHeight = tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;
-    if (expandedState === true || (_rows$index = rows[index]) !== null && _rows$index !== void 0 && (_rows$index$getIsExpa = _rows$index.getIsExpanded) !== null && _rows$index$getIsExpa !== void 0 && _rows$index$getIsExpa.call(_rows$index)) {
-      return rowHeight + averageExpandedRowHeight;
-    }
-    return rowHeight;
-  }, [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]);
-  const createRowMeasurer = React__default.useCallback((resizeItem, virtualRow) => (rowHeight, expansionHeight) => {
-    // register the expansion height so that it can be used to determine an average
-    if (expansionHeight) {
-      setExpandedRowHeightsCache(cache => ({
-        ...cache,
-        [virtualRow.index]: expansionHeight
-      }));
-    }
-    // update the whole row's size to include the expanded height
-    resizeItem(virtualRow, rowHeight + (expansionHeight !== null && expansionHeight !== void 0 ? expansionHeight : 0));
-  }, []);
-  return {
-    estimateSize,
-    createRowMeasurer
-  };
-}
 // support virtualised row groups (where the row group headers are sticky)
 function useRowGroupVirtualisation(table) {
   const rows = table.getRowModel().rows;
@@ -13295,8 +13261,12 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   }
   const ref = React__default.useRef(null);
   const expansionRef = React__default.useRef(null);
-  const isExpanded = !!attributes['data-row-expanded'];
-  useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
+  React__default.useEffect(() => {
+    var _ref$current$getBound, _ref$current, _expansionRef$current, _expansionRef$current2;
+    const rowHeight = (_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().height) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0;
+    const expansionHeight = (_expansionRef$current = (_expansionRef$current2 = expansionRef.current) === null || _expansionRef$current2 === void 0 ? void 0 : _expansionRef$current2.getBoundingClientRect().height) !== null && _expansionRef$current !== void 0 ? _expansionRef$current : 0;
+    measureRow(rowHeight + expansionHeight);
+  }, [expansionRef.current]);
   const className = cn('group/row', otherAttributes.className, {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
@@ -13319,18 +13289,6 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     className: "col-span-full"
   }, expandedRow))) : null);
 });
-function useSetVirtualisedRowHeight(measureRow, rowEl, expansionEl, isExpanded) {
-  React__default.useEffect(() => {
-    if (rowEl) {
-      const height = rowEl.getBoundingClientRect().height;
-      if (isExpanded && expansionEl) {
-        measureRow(height, expansionEl.getBoundingClientRect().height);
-      } else {
-        measureRow(height);
-      }
-    }
-  }, [isExpanded, rowEl, expansionEl]);
-}
 
 function DisplayCell(props) {
   const {
@@ -13693,9 +13651,7 @@ function HeaderMenu(props) {
   return /*#__PURE__*/React__default.createElement(IconButton, {
     className: className,
     icon: "more",
-    menu: popoverElement ? undefined : menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
-      onFocusOutside: event => event.preventDefault()
-    }, memoedMenuItems))),
+    menu: popoverElement ? undefined : menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, memoedMenuItems))),
     popover: popoverElement,
     onClickCapture: event => event.preventDefault(),
     onKeyDown: event => {
@@ -14546,7 +14502,7 @@ function Container(externalProps) {
     if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id === overList.id) {
       return;
     }
-    move === null || move === void 0 ? void 0 : move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
+    move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
   }
   function handleDragEnd(event) {
     const {
@@ -16899,7 +16855,6 @@ function Control(props) {
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
   const filters = React__default.useContext(FilterContext);
-  const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
     if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
@@ -16910,8 +16865,7 @@ function Control(props) {
     return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
       setValue: value => onChange(value),
-      value,
-      ref
+      value
     }, undefined, filters), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
@@ -18885,7 +18839,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   if (rowIndex < rows.length - 1) {
     miniSortRows.push(rows[rowIndex + 1]);
   }
-  const sortRows = (rowA, rowB) => {
+  const resortedRows = [...miniSortRows].sort((rowA, rowB) => {
     const sortFn = cell.column.getSortingFn();
     const sortUndefined = cell.column.columnDef.sortUndefined;
     if (!table.options.manualSorting && sortUndefined) {
@@ -18900,8 +18854,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       }
     }
     return sortFn(rowA, rowB, cell.column.id);
-  };
-  const resortedRows = [...miniSortRows].sort(sortRows);
+  });
   if (cell.column.getIsSorted() === 'desc') {
     resortedRows.reverse();
   }
@@ -19063,7 +19016,7 @@ function reducer$2(state, action) {
           changes: {
             ...state.changes,
             rows: setWith(state.changes.rows, rowId, value, Object),
-            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors[rowId], Object),
+            errors: setWith(state.changes.errors, `${rowId}.cells`, cellErrors !== null && cellErrors !== void 0 ? cellErrors : state.changes.errors.cells[rowId], Object),
             originals: setWith(state.changes.originals, rowId, original !== null && original !== void 0 ? original : state.changes.originals[rowId], Object),
             moveReasons: setWith(state.changes.moveReasons, rowId, moveReasons !== null && moveReasons !== void 0 ? moveReasons : state.changes.moveReasons[rowId], Object),
             // status can be undefined, so don't use ??
@@ -19863,8 +19816,10 @@ function EditingControlCell(props) {
     }
   }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]);
   const blur = React__default.useCallback(function blur() {
-    tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+    requestAnimationFrame(() => {
+      tableMeta.editing.toggleDetailedMode(false);
+      tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+    });
   }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]);
   const handleBlur = React__default.useCallback(event => {
     if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
@@ -20173,8 +20128,7 @@ function EditingActionsMenu(props) {
     icon: "more",
     onKeyDown: handleKeyDown,
     menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
-      onKeyDown: handleMenuContentKeyDown,
-      onFocusOutside: event => event.preventDefault()
+      onKeyDown: handleMenuContentKeyDown
     }, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "tick",
       disabled: !hasChanges || hasErrors,
@@ -20421,7 +20375,7 @@ function Alert$1(props) {
       const columnName = (_table$getAllColumns$ = table.getAllColumns().find(column => column.id === firstCellErrorColumnId)) === null || _table$getAllColumns$ === void 0 ? void 0 : (_table$getAllColumns$2 = _table$getAllColumns$.columnDef.meta) === null || _table$getAllColumns$2 === void 0 ? void 0 : _table$getAllColumns$2.header;
       tooltip = `${columnName}: ${pendingChangeWithError.errors.cells[firstCellErrorColumnId]}`;
     }
-    let row = undefined;
+    let row;
     try {
       row = table.getRow(pendingChangeWithError.rowId).original;
     } catch {
@@ -21309,8 +21263,8 @@ const BarChart = function BarChart(externalProps) {
     ...props
   } = externalProps;
   const [activeIndex, setActiveIndex] = React__default.useState(undefined);
-  const [hoveredBar, setHoveredBar] = React__default.useState(null);
-  const [activeBars, setActiveBars] = React__default.useState(() => {
+  const [hoveredBar, setHoveredBar] = React.useState(null);
+  const [activeBars, setActiveBars] = React.useState(() => {
     const keys = {};
     React__default.Children.forEach(children, child => {
       keys[child.props.accessor] = true;