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

package/dist/primitives/Table/Core/components/Toolbar/components/Print/PrintDialog.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { Select2Value } from '../../../../../../../components/Select2/Select2';
 import { RadioGroupItemValue } from '../../../../../../../components/RadioGroup/RadioGroup';
@@ -14,4 +14,4 @@ export declare type PrintDialogProps<TType = unknown> = {
     splitGroups: boolean;
     setSplitGroups: (splitGroups: boolean) => void;
 };
-export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): JSX.Element;
+export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Search/Search.d.ts

@@ -6,5 +6,5 @@ declare type SearchProps<TType = unknown> = {
     table: ReactTable<TType>;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function Search<TType = unknown>(props: SearchProps<TType>): JSX.Element;
+export declare function Search<TType = unknown>(props: SearchProps<TType>): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { PopoverProps } from '../../../../../../../components/Popover/Popover';
 export declare type HideOrOrderPopoverProps<TType = unknown> = PopoverProps & {
     table: ReactTable<TType>;
 };
-export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): JSX.Element;
+export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/Settings.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { TableCustomSettingsRenderer } from '../../../../../types';
 export declare type SettingsProps<TType = unknown> = {
     customSettings?: TableCustomSettingsRenderer;
     table: ReactTable<TType>;
 };
-export declare function Settings<TType = unknown>(props: SettingsProps<TType>): JSX.Element;
+export declare function Settings<TType = unknown>(props: SettingsProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/types.d.ts

@@ -12,7 +12,7 @@ export declare type TableRowRendererProps<TType = unknown> = {
     hideInternalColumns?: boolean;
     hideRowActions?: boolean;
     index: number;
-    measureRow: (size: number, expansionHeight?: number) => void;
+    measureRow: (size: number) => void;
     row: ReactTableRow<TType>;
     table: ReactTable<TType>;
 };

package/dist/taco.cjs.development.js

@@ -4328,10 +4328,11 @@ function isElementTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     if (elementInDocument === container) {
       return true;
     }
@@ -6002,22 +6003,23 @@ const useCombobox = ({
   const data = React.useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, event) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+        const eventType = event !== null && event !== void 0 ? event : 'focusout';
+        setInputValueByRef$1(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, event) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, event);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -6113,7 +6115,8 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
+            // default focusout will trigger onBlur and we don't want to trigger it twice
+            setCurrentValue(currentIndex, 'change');
             setOpen(false);
             return;
           }
@@ -6128,7 +6131,8 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              // we need to focusout to trigger onBlur as we are not actually blurring the input
+              setCurrentValue(currentIndex, 'focusout');
               setOpen(false);
             }
             return;
@@ -7056,12 +7060,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,
@@ -11183,10 +11187,10 @@ function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFi
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting
@@ -12433,16 +12437,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 +12451,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 +12546,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 +12567,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 +13253,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 +13281,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 +13556,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 +13917,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,
@@ -14055,6 +14018,8 @@ function Body(props) {
     onKeyDown: handleKeyDown,
     onMouseLeave: handleMouseLeave,
     onMouseMove: handleMouseMove,
+    // Prevents menu dropdowns inside the row from being closed straight after being opened, wehn clicked on a menu trigger
+    onFocus: e => e.stopPropagation(),
     ref: ref
   }));
 }
@@ -15375,7 +15340,6 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
-    onClick,
     onKeyDown
   } = props;
   const {
@@ -15384,7 +15348,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
@@ -17352,9 +17315,8 @@ function useTableSettingsPreloader(tableId) {
   };
 }
 
-function Column$1(_) {
-  return null;
-}
+const Column$1 = () => null;
+Column$1.displayName = 'Table3Column';
 function Group$4(_) {
   return null;
 }
@@ -19891,8 +19853,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)) {
@@ -20262,7 +20226,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 => {
@@ -20695,9 +20662,7 @@ function TemporaryRow(props) {
   }))));
 }
 
-function Column$3(_) {
-  return null;
-}
+const Column$3 = () => null;
 Column$3.displayName = 'Table3Column';
 function Group$5(_) {
   return null;
@@ -20901,7 +20866,7 @@ const Tooltip$1 = ({
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute top-0 right-0 mt-1 mr-1"
+    className: "absolute right-0 top-0 mr-1 mt-1"
   })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
     className: "mt-4 justify-end"
   }, index > 0 && (/*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
@@ -22131,7 +22096,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]"
@@ -22297,9 +22262,9 @@ const Top = props => {
     setSidebarOpen
   } = React__default.useContext(LayoutContext);
   const toggleSidebar = () => setSidebarOpen(open => !open);
-  return typeof props.children === 'function' ? props.children({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof props.children === 'function' ? props.children({
     toggleSidebar
-  }) : props.children;
+  }) : props.children);
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {