@economic/taco 2.53.0-settings.6 → 2.53.0-settings.7

package/dist/taco.cjs.development.js

@@ -7056,12 +7056,12 @@ const Bar = props => {
     className: className
   }));
 };
-const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
+const Thumb = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, {
   className: "flex-[1] rounded bg-black opacity-50"
-}));
-const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
+});
+const Corner = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, {
   className: "bg-grey-500"
-}));
+});
 const ScrollArea = props => {
   const {
     children,
@@ -12433,16 +12433,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
@@ -12450,15 +12447,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 = {
@@ -12540,7 +12542,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,
@@ -12559,43 +12563,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;
@@ -13282,8 +13249,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'
@@ -13306,18 +13277,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 {
@@ -13593,11 +13552,11 @@ function HeaderMenu(props) {
                 return Promise.reject(e);
               }
             };
-            popoverElement = props => /*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
+            popoverElement = props => (/*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
               open: true,
               onChange: handleClosePopover,
               onGoto: goto
-            }));
+            })));
           }
         }
     }
@@ -13954,10 +13913,10 @@ const FOCUS_MANAGER_OPTIONS_ARROW_KEYS = {
 };
 function useAugmentedFocusManager() {
   const focusManager = focus.useFocusManager();
-  const focusPrevious = (arrowNavigation = false) => focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusNext = (arrowNavigation = false) => focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
-  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusPrevious = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusNext = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusFirst = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusLast = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
   return {
     focusPrevious,
     focusNext,
@@ -15375,7 +15334,6 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
-    onClick,
     onKeyDown
   } = props;
   const {
@@ -15384,7 +15342,6 @@ const Colours = props => {
   return /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Root, {
     "aria-label": texts.select2.chooseColor,
     className: "grid grid-cols-4 gap-2 focus:outline-none",
-    onClick: onClick,
     onKeyDown: onKeyDown,
     onValueChange: color => onChangeColor(color),
     value: color
@@ -20262,7 +20219,10 @@ function Row$2(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      setDataFocusAttribute(focusManager.focusFirst());
+      const element = focusManager.focusFirst();
+      if (element) {
+        setDataFocusAttribute(element);
+      }
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -22131,7 +22091,7 @@ function AgreementSelector(props) {
     }
     return button;
   })), handleAddAgreement ? (/*#__PURE__*/React__default.createElement(Button$1, {
-    className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
+    className: "focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
     onClick: handleAddAgreement
   }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
     className: "my-0 h-px w-full bg-white/[0.08]"