@economic/taco 1.30.1 → 1.31.0

package/dist/taco.cjs.development.js

@@ -3642,20 +3642,85 @@ const getBannerIcon = type => {
   })());
 };
 
+const WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];
+function createShortcutKeyDownHandler(key, handler) {
+  return function (event) {
+    let condition = false;
+    if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes(event.target.tagName)) {
+      return;
+    }
+    if (typeof key === 'string') {
+      condition = event.key.toLowerCase() === key.toLowerCase();
+    } else {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+        return;
+      }
+      if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
+        return;
+      }
+      condition = event.key.toLowerCase() === key.key.toLowerCase();
+    }
+    if (condition) {
+      var _event$stopImmediateP;
+      // stops react handlers bubbling up to global
+      event.stopPropagation();
+      // stops global handlers bubbling up to other global
+      (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
+      handler(event);
+    }
+  };
+}
+const isMacOs = () => {
+  var _window;
+  return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
+};
+
+// merges an external ref (optional) with an internal ref (required)
+const useMergedRef = ref => {
+  const internalRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(internalRef.current);
+      } else {
+        ref.current = internalRef.current;
+      }
+    }
+  }, [ref]);
+  return internalRef;
+};
+
 const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   const {
     disabled,
+    shortcut,
     target,
     type = 'button',
     ...otherProps
   } = props;
+  const internalRef = useMergedRef(ref);
+  React.useEffect(() => {
+    let handleKeyDown;
+    if (shortcut) {
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, () => {
+        var _internalRef$current;
+        (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
+      });
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      if (handleKeyDown) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [shortcut]);
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     "aria-disabled": disabled ? 'true' : undefined,
     disabled: disabled,
     target: Tag === 'a' ? target : undefined,
     type: Tag !== 'a' ? type : undefined,
-    ref: ref
+    ref: internalRef
   }), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? /*#__PURE__*/React.createElement("span", null, child) : child) : props.children);
 });
 
@@ -4041,10 +4106,11 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
 
 const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   const {
+    appearance,
     fluid,
     ...otherProps
   } = props;
-  const className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
+  const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
@@ -4390,21 +4456,6 @@ const useBoundingClientRectListener = (ref, dependencies) => {
   return dimensions;
 };
 
-// merges an external ref (optional) with an internal ref (required)
-const useMergedRef = ref => {
-  const internalRef = React__default.useRef(null);
-  React__default.useEffect(() => {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(internalRef.current);
-      } else {
-        ref.current = internalRef.current;
-      }
-    }
-  }, [ref]);
-  return internalRef;
-};
-
 const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
 const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
   const {
@@ -5936,15 +5987,6 @@ const getBackdropClassNames = open => {
   });
 };
 
-const useGlobalKeyboardShortcut = handler => {
-  React__default.useEffect(() => {
-    document.addEventListener('keydown', handler);
-    return () => {
-      document.removeEventListener('keydown', handler);
-    };
-  }, [handler]);
-};
-
 const Bar = props => {
   const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {
     'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',
@@ -5976,6 +6018,16 @@ const ScrollArea = props => {
   }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Corner, null));
 };
 
+const useGlobalKeyDown = (key, handler) => {
+  React__default.useEffect(() => {
+    const handleKeyDown = createShortcutKeyDownHandler(key, handler);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handler]);
+};
+
 const RESIZE_MIN = 360;
 const RESIZE_MAX = 1000;
 var DrawerAnimationDefinition;
@@ -6099,11 +6151,7 @@ const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(funct
     children,
     ...otherProps
   } = props;
-  useGlobalKeyboardShortcut(event => {
-    if (event.key === 'Escape') {
-      onEscape(event);
-    }
-  });
+  useGlobalKeyDown('Escape', onEscape);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     ref: ref
   }), /*#__PURE__*/React__default.createElement(focus.FocusScope, {
@@ -6957,6 +7005,48 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
   }), children));
 });
 
+const replaceWithShortform = key => {
+  switch (key) {
+    case 'Delete':
+      return 'Del';
+    case 'Space':
+    case ' ':
+      return '␣';
+    default:
+      return key;
+  }
+};
+const getShortcutText = key => {
+  if (!key) {
+    return [];
+  }
+  if (typeof key === 'string') {
+    return [replaceWithShortform(key)];
+  }
+  const keys = [];
+  if (key.shift) {
+    keys.push(isMacOs() ? '⇧' : 'Shift');
+  }
+  if (key.meta) {
+    keys.push(isMacOs() ? '⌘' : 'Ctrl');
+  }
+  keys.push(replaceWithShortform(key.key));
+  return keys;
+};
+const Shortcut = ({
+  keys,
+  ...props
+}) => {
+  const className = cn('inline-flex gap-0.5', props.className);
+  const texts = getShortcutText(keys);
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
+    className: className
+  }), texts.map(key => /*#__PURE__*/React__default.createElement("kbd", {
+    key: key,
+    className: "font-display bg-grey-300/[0.25] rounded px-1 text-center"
+  }, key)));
+};
+
 const Icon$1 = ({
   name
 }) => /*#__PURE__*/React.createElement("span", {
@@ -6983,11 +7073,6 @@ const useItemStyling = ({
     'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };
-const Shortcut = props => {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    className: "text-grey-700 ml-auto pl-3"
-  }));
-};
 const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
   var _props$disabled;
   const {
@@ -7025,9 +7110,14 @@ const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
     onClick: handleClick,
     onSelect: handleSelect,
     ref: ref
-  }), icon && /*#__PURE__*/React.createElement(Icon$1, {
+  }), icon ? /*#__PURE__*/React.createElement(Icon$1, {
     name: icon
-  }), props.children, shortcut && /*#__PURE__*/React.createElement(Shortcut, null, shortcut));
+  }) : null, props.children, shortcut ? /*#__PURE__*/React.createElement("span", {
+    className: "ml-auto pl-5"
+  }, /*#__PURE__*/React.createElement(Shortcut, {
+    keys: shortcut,
+    className: "text-grey-700"
+  })) : null);
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button,
@@ -9827,19 +9917,6 @@ const ControlledHiddenField = props => {
 };
 Select2.displayName = 'Select2';
 
-const Shortcut$1 = ({
-  keys,
-  ...props
-}) => {
-  const className = cn('inline-flex gap-0.5', props.className);
-  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
-    className: className
-  }), keys.map(key => /*#__PURE__*/React__default.createElement("kbd", {
-    key: key,
-    className: "wcag-blue-900 inline-flex h-4 items-center rounded px-1 font-mono text-xs font-normal"
-  }, key)));
-};
-
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   const {
     label,
@@ -11495,9 +11572,9 @@ const SelectCell = /*#__PURE__*/React__default.memo(({
     (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
   };
   return /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
-      keys: ['Space']
+      keys: "Space"
     }))
   }, /*#__PURE__*/React__default.createElement(Checkbox, {
     "aria-label": isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
@@ -11516,9 +11593,12 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
     header = ({
       table
     }) => /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll, /*#__PURE__*/React__default.createElement(Shortcut, {
         className: "ml-2",
-        keys: ['Ctrl', 'A']
+        keys: {
+          key: 'a',
+          meta: true
+        }
       }))
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
       "aria-label": table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll,
@@ -11595,9 +11675,12 @@ const ExpandCell = /*#__PURE__*/React__default.memo(({
     return null;
   }
   return /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
-      keys: ['Ctrl', isExpanded ? '←' : '→']
+      keys: {
+        key: isExpanded ? 'ArrowLeft' : 'ArrowRight',
+        meta: true
+      }
     }))
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     title: isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand,
@@ -11650,11 +11733,10 @@ function createRowExpansionColumn(expandedRowRenderer, texts) {
     size: 36
   };
 }
-const getActionPropertyValue = (property, row) => typeof property === 'function' ? property(row) : property;
 const RowActionsCell = /*#__PURE__*/React__default.memo(({
   row,
   actions,
-  moreActions,
+  actionsLength,
   isEditing,
   shouldPauseHoverState,
   table,
@@ -11662,64 +11744,46 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
 }) => {
   const {
     isActive,
-    isHovered,
-    rowIndex
+    isHovered
   } = useRowContext();
   if (!isActive && (!isHovered || shouldPauseHoverState) || isEditing) {
     return null;
   }
-  const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
-  const visibleActions = actions.filter(isVisible);
-  const visibleMoreActions = moreActions.filter(isVisible);
+  const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
+  const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
+  const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
   // If the row is not the active row or the hovered row then actions are hidden.
   const actionClassName = 'group-hover/row:flex group-[[aria-current]]/row:flex hidden';
   // only actions in the active row should be tabbable
   const tabIndex = table.options.meta.activeRowIndex === row.index ? 0 : -1;
   return /*#__PURE__*/React__default.createElement("span", {
     className: "-mb-2 -mt-2 flex justify-end text-right"
-  }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
-    key: i,
-    className: actionClassName,
-    "aria-label": getActionPropertyValue(action.ariaLabel, row.original),
+  }, actionsOnRow.map((button, index) => {
+    var _button$props$tooltip, _button$props$tooltip2;
+    return /*#__PURE__*/React__default.cloneElement(button, {
+      appearance: 'discrete',
+      className: cn(actionClassName, button.props.className),
+      key: index,
+      tabIndex,
+      tooltip: button.props.shortcut ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (_button$props$tooltip = button.props.tooltip) !== null && _button$props$tooltip !== void 0 ? _button$props$tooltip : button.props['aria-label'], /*#__PURE__*/React__default.createElement(Shortcut, {
+        className: "ml-2",
+        keys: button.props.shortcut
+      })) : (_button$props$tooltip2 = button.props.tooltip) !== null && _button$props$tooltip2 !== void 0 ? _button$props$tooltip2 : button.props['aria-label']
+    });
+  }), actionsInMenu.length ? /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
-    dialog: action.dialog ? action.dialog(row.original) : undefined,
-    disabled: getActionPropertyValue(action.disabled, row.original),
-    icon: getActionPropertyValue(action.icon, row.original),
-    onClick: event => {
-      event.stopPropagation();
-      if (action.onClick) {
-        action.onClick(row.original);
-      }
-    },
-    tabIndex: tabIndex,
-    tooltip: getActionPropertyValue(action.text, row.original)
-  })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
-    className: actionClassName,
     "aria-label": texts.table2.columns.actions.tooltip,
-    appearance: "discrete",
     icon: "more",
-    onClick: event => {
-      event.preventDefault();
-      table.options.meta.setActiveRowIndex(rowIndex);
-    },
     tabIndex: tabIndex,
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, visibleMoreActions.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-      key: i,
-      dialog: action.dialog ? action.dialog(row.original) : undefined,
-      disabled: getActionPropertyValue(action.disabled, row.original),
-      icon: getActionPropertyValue(action.icon, row.original),
-      onClick: () => {
-        if (action.onClick) {
-          action.onClick(row.original);
-        }
-      }
-    }, getActionPropertyValue(action.text, row.original))))),
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, actionsInMenu.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
+      key: i
+    }, action.props, {
+      shortcut: action.props.shortcut
+    }), action.props['aria-label'])))),
     tooltip: texts.table2.columns.actions.tooltip
   }) : null);
 });
-function createRowActionsColumn(rowActions, texts) {
-  const actions = rowActions.length === 4 ? rowActions : rowActions.slice(0, 3);
-  const moreActions = rowActions.slice(rowActions.length === 4 ? 4 : 3);
+function createRowActionsColumn(rowActions, rowActionsLength, texts) {
   return {
     id: COLUMN_ID_FOR_ACTIONS,
     cell: ({
@@ -11729,8 +11793,8 @@ function createRowActionsColumn(rowActions, texts) {
       var _table$options$meta, _table$options$meta2;
       return /*#__PURE__*/React__default.createElement(RowActionsCell, {
         row: row,
-        actions: actions,
-        moreActions: moreActions,
+        actions: rowActions,
+        actionsLength: rowActionsLength,
         texts: texts,
         table: table,
         isEditing: !!((_table$options$meta = table.options.meta) !== null && _table$options$meta !== void 0 && _table$options$meta.editMode.isEditing),
@@ -13068,7 +13132,7 @@ function useColumnDefinitions(children, options, tableRef) {
       internalFrozenColumnCount++;
     }
     if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
-      columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
+      columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));
     }
     return {
       columns,
@@ -13188,10 +13252,20 @@ const useActiveRowStateListener = (table, rows, activeRowIndex) => {
   }, [table.getState().columnFilters, rows.length]);
 };
 
+const useFilterStateListener = (table, onRowSelect) => {
+  React__default.useEffect(() => {
+    if (onRowSelect) {
+      table.resetRowSelection();
+    }
+  }, [table.getState().columnFilters, table.getState().globalFilter]);
+};
+
+const ACTIONS_ON_ROW_LENGTH = 4;
 function useTable$1(children, props, ref) {
   var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
     actionsForRow = [],
+    actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
     data,
     defaultActiveRowIndex,
     disableColumnFiltering = false,
@@ -13230,6 +13304,7 @@ function useTable$1(children, props, ref) {
     footers
   } = useColumnDefinitions(children, {
     actionsForRow,
+    actionsForRowLength,
     enableColumnFiltering: !disableColumnFiltering,
     enableColumnHiding: !disableColumnHiding,
     enableColumnFreezing: !disableColumnFreezing,
@@ -13378,6 +13453,7 @@ function useTable$1(children, props, ref) {
   // state listeners
   useActiveRowStateListener(table, rows, activeRow);
   useColumnOffsetStateListener(table, setColumnOffsets);
+  useFilterStateListener(table, onRowSelect);
   useRowSelectionListener(table, onRowSelect);
   useSettingsStateListener(table, onChangeSettings);
   return {
@@ -14460,12 +14536,14 @@ const FiltersButton = ({
   const handleReset = () => {
     table.resetColumnFilters();
   };
-  useGlobalKeyboardShortcut(event => {
-    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
-      var _ref$current;
-      event.preventDefault();
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
-    }
+  useGlobalKeyDown({
+    key: 'f',
+    meta: true,
+    shift: true
+  }, event => {
+    var _ref$current;
+    event.preventDefault();
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-label": texts.table2.filters.tooltip,
@@ -14499,9 +14577,13 @@ const FiltersButton = ({
       onClick: handleReset
     }, texts.table2.filters.buttons.clearFilters) : null)))),
     ref: ref,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
-      keys: ['Ctrl', 'Shift', 'F']
+      keys: {
+        key: 'f',
+        meta: true,
+        shift: true
+      }
     }))
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: columnFilters.length ? 'filter-solid' : 'filter'
@@ -14538,13 +14620,15 @@ const Search$2 = props => {
     const value = event.target.value;
     (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
   };
-  useGlobalKeyboardShortcut(event => {
-    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && !event.shiftKey) {
-      if (document.activeElement !== ref.current) {
-        var _ref$current;
-        event.preventDefault();
-        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-      }
+  useGlobalKeyDown({
+    key: 'f',
+    meta: true,
+    shift: false
+  }, event => {
+    if (document.activeElement !== ref.current) {
+      var _ref$current;
+      event.preventDefault();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   });
   const className = cn('w-48', {
@@ -14581,12 +14665,13 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
     }
     return false;
   }, [isEditing]);
-  useGlobalKeyboardShortcut(event => {
-    if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
-      var _internalRef$current;
-      event.preventDefault();
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-    }
+  useGlobalKeyDown({
+    key: 'e',
+    meta: true
+  }, event => {
+    var _internalRef$current;
+    event.preventDefault();
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
   });
   React__default.useEffect(() => {
     window.addEventListener('beforeunload', showWarning);
@@ -14617,9 +14702,12 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
     }),
     disabled: !hasVisibleEditableColumns,
     ref: internalRef,
-    tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+    tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
-      keys: ['Ctrl', 'E']
+      keys: {
+        key: 'e',
+        meta: true
+      }
     })) : texts.table2.editing.tooltipDisabled
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "edit"
@@ -14817,14 +14905,11 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
               const _temp3 = function () {
                 if (typeof loadMore === 'function') {
                   const scrollY = event.currentTarget.scrollTop;
-                  const isVerticalScrolling = scrollY !== prevScrollY.current;
+                  const isScrollingDown = scrollY > prevScrollY.current;
                   prevScrollY.current = scrollY;
+                  const scrolledPercentage = Math.round(100 / event.currentTarget.scrollHeight * scrollY);
                   const _temp2 = function () {
-                    if (
-                    // This condition will also prevent triggering of loadMore function when scrolled upwards
-                    event.currentTarget.scrollHeight - event.currentTarget.scrollTop - event.currentTarget.clientHeight < 600 && !loadingRef.current &&
-                    // We don't want to trigger loadMore function on horizontal scrolling
-                    isVerticalScrolling) {
+                    if (isScrollingDown && !loadingRef.current && scrolledPercentage >= 80) {
                       const _temp = _finallyRethrows(function () {
                         return _catch(function () {
                           const isAllRowsSelected = table.getIsAllRowsSelected();
@@ -16003,7 +16088,7 @@ exports.RadioGroup = RadioGroup;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Select2 = Select2;
-exports.Shortcut = Shortcut$1;
+exports.Shortcut = Shortcut;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.Table = Table;
@@ -16020,6 +16105,7 @@ exports.Treeview = Treeview;
 exports.VisuallyHidden = VisuallyHidden;
 exports.WindowedTable = WindowedTable;
 exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
+exports.createShortcutKeyDownHandler = createShortcutKeyDownHandler;
 exports.defaultLocalisationTexts = defaultLocalisationTexts;
 exports.defaultLocalizationContext = defaultLocalizationContext;
 exports.findByValue = findByValue$1;
@@ -16031,6 +16117,7 @@ exports.getParentRowIndexPath = getParentRowIndexPath;
 exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
 exports.icons = icons;
 exports.insertChildTableRow = insertChildTableRow;
+exports.isMacOs = isMacOs;
 exports.isWeakEqual = isWeakEqual;
 exports.mergeRefs = mergeRefs;
 exports.parseFromCustomString = parseFromCustomString;