@economic/taco 1.30.2 → 1.31.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/dist/components/Button/Button.d.ts +1 -0
  2. package/dist/components/Header/components/Button.d.ts +1 -1
  3. package/dist/components/IconButton/IconButton.d.ts +2 -2
  4. package/dist/components/Menu/components/Item.d.ts +0 -1
  5. package/dist/components/Shortcut/Shortcut.d.ts +2 -1
  6. package/dist/components/Table2/Table2.d.ts +1 -1
  7. package/dist/components/Table2/hooks/useColumnDefinitions.d.ts +3 -2
  8. package/dist/components/Table2/hooks/useTable.d.ts +0 -1
  9. package/dist/components/Table2/types.d.ts +3 -11
  10. package/dist/components/Table2/utilities/columns.d.ts +1 -1
  11. package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +1 -1
  12. package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +1 -1
  13. package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +1 -1
  14. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +3 -7
  15. package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
  16. package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js +1 -1
  17. package/dist/esm/packages/taco/src/components/Input/Input.js +1 -1
  18. package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js +1 -1
  19. package/dist/esm/packages/taco/src/components/Listbox/useListbox.js +1 -1
  20. package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js +1 -1
  21. package/dist/esm/packages/taco/src/components/Menu/components/Item.js +9 -8
  22. package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map +1 -1
  23. package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js +1 -1
  24. package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js +1 -1
  25. package/dist/esm/packages/taco/src/components/Select/useSelect.js +1 -1
  26. package/dist/esm/packages/taco/src/components/Select2/Select2.js +1 -1
  27. package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +1 -1
  28. package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +30 -6
  29. package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -1
  30. package/dist/esm/packages/taco/src/components/Table/components/WindowedTable.js +1 -1
  31. package/dist/esm/packages/taco/src/components/Table2/Table2.js +3 -12
  32. package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +1 -1
  33. package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +13 -9
  34. package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +1 -1
  35. package/dist/esm/packages/taco/src/components/Table2/components/Search.js +10 -8
  36. package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +1 -1
  37. package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +14 -8
  38. package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +1 -1
  39. package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +1 -1
  40. package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +1 -1
  41. package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js +4 -11
  42. package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js.map +1 -1
  43. package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -1
  44. package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +36 -52
  45. package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +1 -1
  46. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js +15 -0
  47. package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js.map +1 -0
  48. package/dist/esm/packages/taco/src/index.js +3 -2
  49. package/dist/esm/packages/taco/src/index.js.map +1 -1
  50. package/dist/esm/packages/taco/src/primitives/Button.js +21 -2
  51. package/dist/esm/packages/taco/src/primitives/Button.js.map +1 -1
  52. package/dist/esm/packages/taco/src/utils/keyboard.js +35 -0
  53. package/dist/esm/packages/taco/src/utils/keyboard.js.map +1 -0
  54. package/dist/hooks/useGlobalKeyDown.d.ts +2 -0
  55. package/dist/index.d.ts +1 -0
  56. package/dist/primitives/Button.d.ts +3 -0
  57. package/dist/taco.cjs.development.js +210 -158
  58. package/dist/taco.cjs.development.js.map +1 -1
  59. package/dist/taco.cjs.production.min.js +1 -1
  60. package/dist/taco.cjs.production.min.js.map +1 -1
  61. package/dist/utils/keyboard.d.ts +8 -0
  62. package/package.json +2 -2
  63. package/types.json +22 -122
  64. package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js +0 -13
  65. package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js.map +0 -1
  66. package/dist/hooks/useGlobalKeyboardShortcut.d.ts +0 -1
@@ -3642,20 +3642,85 @@ const getBannerIcon = type => {
3642
3642
  })());
3643
3643
  };
3644
3644
 
3645
+ const WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];
3646
+ function createShortcutKeyDownHandler(key, handler) {
3647
+ return function (event) {
3648
+ let condition = false;
3649
+ if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes(event.target.tagName)) {
3650
+ return;
3651
+ }
3652
+ if (typeof key === 'string') {
3653
+ condition = event.key.toLowerCase() === key.toLowerCase();
3654
+ } else {
3655
+ if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
3656
+ return;
3657
+ }
3658
+ if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
3659
+ return;
3660
+ }
3661
+ condition = event.key.toLowerCase() === key.key.toLowerCase();
3662
+ }
3663
+ if (condition) {
3664
+ var _event$stopImmediateP;
3665
+ // stops react handlers bubbling up to global
3666
+ event.stopPropagation();
3667
+ // stops global handlers bubbling up to other global
3668
+ (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
3669
+ handler(event);
3670
+ }
3671
+ };
3672
+ }
3673
+ const isMacOs = () => {
3674
+ var _window;
3675
+ return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
3676
+ };
3677
+
3678
+ // merges an external ref (optional) with an internal ref (required)
3679
+ const useMergedRef = ref => {
3680
+ const internalRef = React__default.useRef(null);
3681
+ React__default.useEffect(() => {
3682
+ if (ref) {
3683
+ if (typeof ref === 'function') {
3684
+ ref(internalRef.current);
3685
+ } else {
3686
+ ref.current = internalRef.current;
3687
+ }
3688
+ }
3689
+ }, [ref]);
3690
+ return internalRef;
3691
+ };
3692
+
3645
3693
  const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
3646
3694
  const {
3647
3695
  disabled,
3696
+ shortcut,
3648
3697
  target,
3649
3698
  type = 'button',
3650
3699
  ...otherProps
3651
3700
  } = props;
3701
+ const internalRef = useMergedRef(ref);
3702
+ React.useEffect(() => {
3703
+ let handleKeyDown;
3704
+ if (shortcut) {
3705
+ handleKeyDown = createShortcutKeyDownHandler(shortcut, () => {
3706
+ var _internalRef$current;
3707
+ (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
3708
+ });
3709
+ document.addEventListener('keydown', handleKeyDown);
3710
+ }
3711
+ return () => {
3712
+ if (handleKeyDown) {
3713
+ document.removeEventListener('keydown', handleKeyDown);
3714
+ }
3715
+ };
3716
+ }, [shortcut]);
3652
3717
  const Tag = props.href ? 'a' : 'button';
3653
3718
  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
3654
3719
  "aria-disabled": disabled ? 'true' : undefined,
3655
3720
  disabled: disabled,
3656
3721
  target: Tag === 'a' ? target : undefined,
3657
3722
  type: Tag !== 'a' ? type : undefined,
3658
- ref: ref
3723
+ ref: internalRef
3659
3724
  }), React.Children.count(props.children) > 1 ? React.Children.map(props.children, child => typeof child === 'string' ? /*#__PURE__*/React.createElement("span", null, child) : child) : props.children);
3660
3725
  });
3661
3726
 
@@ -4391,21 +4456,6 @@ const useBoundingClientRectListener = (ref, dependencies) => {
4391
4456
  return dimensions;
4392
4457
  };
4393
4458
 
4394
- // merges an external ref (optional) with an internal ref (required)
4395
- const useMergedRef = ref => {
4396
- const internalRef = React__default.useRef(null);
4397
- React__default.useEffect(() => {
4398
- if (ref) {
4399
- if (typeof ref === 'function') {
4400
- ref(internalRef.current);
4401
- } else {
4402
- ref.current = internalRef.current;
4403
- }
4404
- }
4405
- }, [ref]);
4406
- return internalRef;
4407
- };
4408
-
4409
4459
  const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
4410
4460
  const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
4411
4461
  const {
@@ -5937,15 +5987,6 @@ const getBackdropClassNames = open => {
5937
5987
  });
5938
5988
  };
5939
5989
 
5940
- const useGlobalKeyboardShortcut = handler => {
5941
- React__default.useEffect(() => {
5942
- document.addEventListener('keydown', handler);
5943
- return () => {
5944
- document.removeEventListener('keydown', handler);
5945
- };
5946
- }, [handler]);
5947
- };
5948
-
5949
5990
  const Bar = props => {
5950
5991
  const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {
5951
5992
  'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',
@@ -5977,6 +6018,16 @@ const ScrollArea = props => {
5977
6018
  }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Corner, null));
5978
6019
  };
5979
6020
 
6021
+ const useGlobalKeyDown = (key, handler) => {
6022
+ React__default.useEffect(() => {
6023
+ const handleKeyDown = createShortcutKeyDownHandler(key, handler);
6024
+ document.addEventListener('keydown', handleKeyDown);
6025
+ return () => {
6026
+ document.removeEventListener('keydown', handleKeyDown);
6027
+ };
6028
+ }, [handler]);
6029
+ };
6030
+
5980
6031
  const RESIZE_MIN = 360;
5981
6032
  const RESIZE_MAX = 1000;
5982
6033
  var DrawerAnimationDefinition;
@@ -6100,11 +6151,7 @@ const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(funct
6100
6151
  children,
6101
6152
  ...otherProps
6102
6153
  } = props;
6103
- useGlobalKeyboardShortcut(event => {
6104
- if (event.key === 'Escape') {
6105
- onEscape(event);
6106
- }
6107
- });
6154
+ useGlobalKeyDown('Escape', onEscape);
6108
6155
  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
6109
6156
  ref: ref
6110
6157
  }), /*#__PURE__*/React__default.createElement(focus.FocusScope, {
@@ -6958,6 +7005,48 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
6958
7005
  }), children));
6959
7006
  });
6960
7007
 
7008
+ const replaceWithShortform = key => {
7009
+ switch (key) {
7010
+ case 'Delete':
7011
+ return 'Del';
7012
+ case 'Space':
7013
+ case ' ':
7014
+ return '␣';
7015
+ default:
7016
+ return key;
7017
+ }
7018
+ };
7019
+ const getShortcutText = key => {
7020
+ if (!key) {
7021
+ return [];
7022
+ }
7023
+ if (typeof key === 'string') {
7024
+ return [replaceWithShortform(key)];
7025
+ }
7026
+ const keys = [];
7027
+ if (key.shift) {
7028
+ keys.push(isMacOs() ? '⇧' : 'Shift');
7029
+ }
7030
+ if (key.meta) {
7031
+ keys.push(isMacOs() ? '⌘' : 'Ctrl');
7032
+ }
7033
+ keys.push(replaceWithShortform(key.key));
7034
+ return keys;
7035
+ };
7036
+ const Shortcut = ({
7037
+ keys,
7038
+ ...props
7039
+ }) => {
7040
+ const className = cn('inline-flex gap-0.5', props.className);
7041
+ const texts = getShortcutText(keys);
7042
+ return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
7043
+ className: className
7044
+ }), texts.map(key => /*#__PURE__*/React__default.createElement("kbd", {
7045
+ key: key,
7046
+ className: "font-display bg-grey-300/[0.25] rounded px-1 text-center"
7047
+ }, key)));
7048
+ };
7049
+
6961
7050
  const Icon$1 = ({
6962
7051
  name
6963
7052
  }) => /*#__PURE__*/React.createElement("span", {
@@ -6984,11 +7073,6 @@ const useItemStyling = ({
6984
7073
  'cursor-not-allowed hover:bg-white text-grey-300': disabled
6985
7074
  }, className);
6986
7075
  };
6987
- const Shortcut = props => {
6988
- return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
6989
- className: "text-grey-700 ml-auto pl-3"
6990
- }));
6991
- };
6992
7076
  const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
6993
7077
  var _props$disabled;
6994
7078
  const {
@@ -7026,9 +7110,14 @@ const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
7026
7110
  onClick: handleClick,
7027
7111
  onSelect: handleSelect,
7028
7112
  ref: ref
7029
- }), icon && /*#__PURE__*/React.createElement(Icon$1, {
7113
+ }), icon ? /*#__PURE__*/React.createElement(Icon$1, {
7030
7114
  name: icon
7031
- }), props.children, shortcut && /*#__PURE__*/React.createElement(Shortcut, null, shortcut));
7115
+ }) : null, props.children, shortcut ? /*#__PURE__*/React.createElement("span", {
7116
+ className: "ml-auto pl-5"
7117
+ }, /*#__PURE__*/React.createElement(Shortcut, {
7118
+ keys: shortcut,
7119
+ className: "text-grey-700"
7120
+ })) : null);
7032
7121
  if (typeof dialog === 'function') {
7033
7122
  button = dialog({
7034
7123
  trigger: button,
@@ -9828,25 +9917,6 @@ const ControlledHiddenField = props => {
9828
9917
  };
9829
9918
  Select2.displayName = 'Select2';
9830
9919
 
9831
- const replaceWithShortform = key => {
9832
- if (key === 'Delete') {
9833
- return 'Del';
9834
- }
9835
- return key;
9836
- };
9837
- const Shortcut$1 = ({
9838
- keys,
9839
- ...props
9840
- }) => {
9841
- const className = cn('inline-flex gap-0.5', props.className);
9842
- return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
9843
- className: className
9844
- }), keys.map(key => /*#__PURE__*/React__default.createElement("kbd", {
9845
- key: key,
9846
- className: "wcag-blue-900 inline-flex h-4 items-center rounded px-1 font-mono text-xs font-normal"
9847
- }, replaceWithShortform(key))));
9848
- };
9849
-
9850
9920
  const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
9851
9921
  const {
9852
9922
  label,
@@ -11502,9 +11572,9 @@ const SelectCell = /*#__PURE__*/React__default.memo(({
11502
11572
  (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
11503
11573
  };
11504
11574
  return /*#__PURE__*/React__default.createElement(Tooltip, {
11505
- 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, {
11575
+ 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, {
11506
11576
  className: "ml-2",
11507
- keys: ['Space']
11577
+ keys: "Space"
11508
11578
  }))
11509
11579
  }, /*#__PURE__*/React__default.createElement(Checkbox, {
11510
11580
  "aria-label": isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
@@ -11523,9 +11593,12 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
11523
11593
  header = ({
11524
11594
  table
11525
11595
  }) => /*#__PURE__*/React__default.createElement(Tooltip, {
11526
- 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, {
11596
+ 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, {
11527
11597
  className: "ml-2",
11528
- keys: ['Ctrl', 'A']
11598
+ keys: {
11599
+ key: 'a',
11600
+ meta: true
11601
+ }
11529
11602
  }))
11530
11603
  }, /*#__PURE__*/React__default.createElement(Checkbox, {
11531
11604
  "aria-label": table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll,
@@ -11602,9 +11675,12 @@ const ExpandCell = /*#__PURE__*/React__default.memo(({
11602
11675
  return null;
11603
11676
  }
11604
11677
  return /*#__PURE__*/React__default.createElement(Tooltip, {
11605
- 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, {
11678
+ 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, {
11606
11679
  className: "ml-2",
11607
- keys: ['Ctrl', isExpanded ? '←' : '→']
11680
+ keys: {
11681
+ key: isExpanded ? 'ArrowLeft' : 'ArrowRight',
11682
+ meta: true
11683
+ }
11608
11684
  }))
11609
11685
  }, /*#__PURE__*/React__default.createElement(IconButton, {
11610
11686
  title: isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand,
@@ -11657,11 +11733,10 @@ function createRowExpansionColumn(expandedRowRenderer, texts) {
11657
11733
  size: 36
11658
11734
  };
11659
11735
  }
11660
- const getActionPropertyValue = (property, row) => typeof property === 'function' ? property(row) : property;
11661
11736
  const RowActionsCell = /*#__PURE__*/React__default.memo(({
11662
11737
  row,
11663
11738
  actions,
11664
- moreActions,
11739
+ actionsLength,
11665
11740
  isEditing,
11666
11741
  shouldPauseHoverState,
11667
11742
  table,
@@ -11669,67 +11744,46 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
11669
11744
  }) => {
11670
11745
  const {
11671
11746
  isActive,
11672
- isHovered,
11673
- rowIndex
11747
+ isHovered
11674
11748
  } = useRowContext();
11675
11749
  if (!isActive && (!isHovered || shouldPauseHoverState) || isEditing) {
11676
11750
  return null;
11677
11751
  }
11678
- const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
11679
- const visibleActions = actions.filter(isVisible);
11680
- const visibleMoreActions = moreActions.filter(isVisible);
11752
+ const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
11753
+ const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
11754
+ const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
11681
11755
  // If the row is not the active row or the hovered row then actions are hidden.
11682
11756
  const actionClassName = 'group-hover/row:flex group-[[aria-current]]/row:flex hidden';
11683
11757
  // only actions in the active row should be tabbable
11684
11758
  const tabIndex = table.options.meta.activeRowIndex === row.index ? 0 : -1;
11685
11759
  return /*#__PURE__*/React__default.createElement("span", {
11686
11760
  className: "-mb-2 -mt-2 flex justify-end text-right"
11687
- }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
11688
- key: i,
11689
- className: actionClassName,
11690
- "aria-label": getActionPropertyValue(action.ariaLabel, row.original),
11761
+ }, actionsOnRow.map((button, index) => {
11762
+ var _button$props$tooltip, _button$props$tooltip2;
11763
+ return /*#__PURE__*/React__default.cloneElement(button, {
11764
+ appearance: 'discrete',
11765
+ className: cn(actionClassName, button.props.className),
11766
+ key: index,
11767
+ tabIndex,
11768
+ 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, {
11769
+ className: "ml-2",
11770
+ keys: button.props.shortcut
11771
+ })) : (_button$props$tooltip2 = button.props.tooltip) !== null && _button$props$tooltip2 !== void 0 ? _button$props$tooltip2 : button.props['aria-label']
11772
+ });
11773
+ }), actionsInMenu.length ? /*#__PURE__*/React__default.createElement(IconButton, {
11691
11774
  appearance: "discrete",
11692
- dialog: action.dialog ? action.dialog(row.original) : undefined,
11693
- disabled: getActionPropertyValue(action.disabled, row.original),
11694
- icon: getActionPropertyValue(action.icon, row.original),
11695
- onClick: event => {
11696
- event.stopPropagation();
11697
- if (action.onClick) {
11698
- action.onClick(row.original);
11699
- }
11700
- },
11701
- tabIndex: tabIndex,
11702
- tooltip: action.shortcutKey ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, getActionPropertyValue(action.text, row.original), /*#__PURE__*/React__default.createElement(Shortcut$1, {
11703
- className: "ml-2",
11704
- keys: [action.shortcutKey]
11705
- })) : getActionPropertyValue(action.text, row.original)
11706
- })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
11707
- className: actionClassName,
11708
11775
  "aria-label": texts.table2.columns.actions.tooltip,
11709
- appearance: "discrete",
11710
11776
  icon: "more",
11711
- onClick: event => {
11712
- event.preventDefault();
11713
- table.options.meta.setActiveRowIndex(rowIndex);
11714
- },
11715
11777
  tabIndex: tabIndex,
11716
- 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, {
11717
- key: i,
11718
- dialog: action.dialog ? action.dialog(row.original) : undefined,
11719
- disabled: getActionPropertyValue(action.disabled, row.original),
11720
- icon: getActionPropertyValue(action.icon, row.original),
11721
- onClick: () => {
11722
- if (action.onClick) {
11723
- action.onClick(row.original);
11724
- }
11725
- }
11726
- }, getActionPropertyValue(action.text, row.original))))),
11778
+ 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({
11779
+ key: i
11780
+ }, action.props, {
11781
+ shortcut: action.props.shortcut
11782
+ }), action.props['aria-label'])))),
11727
11783
  tooltip: texts.table2.columns.actions.tooltip
11728
11784
  }) : null);
11729
11785
  });
11730
- function createRowActionsColumn(rowActions, texts) {
11731
- const actions = rowActions.length === 4 ? rowActions : rowActions.slice(0, 3);
11732
- const moreActions = rowActions.slice(rowActions.length === 4 ? 4 : 3);
11786
+ function createRowActionsColumn(rowActions, rowActionsLength, texts) {
11733
11787
  return {
11734
11788
  id: COLUMN_ID_FOR_ACTIONS,
11735
11789
  cell: ({
@@ -11739,8 +11793,8 @@ function createRowActionsColumn(rowActions, texts) {
11739
11793
  var _table$options$meta, _table$options$meta2;
11740
11794
  return /*#__PURE__*/React__default.createElement(RowActionsCell, {
11741
11795
  row: row,
11742
- actions: actions,
11743
- moreActions: moreActions,
11796
+ actions: rowActions,
11797
+ actionsLength: rowActionsLength,
11744
11798
  texts: texts,
11745
11799
  table: table,
11746
11800
  isEditing: !!((_table$options$meta = table.options.meta) !== null && _table$options$meta !== void 0 && _table$options$meta.editMode.isEditing),
@@ -13078,7 +13132,7 @@ function useColumnDefinitions(children, options, tableRef) {
13078
13132
  internalFrozenColumnCount++;
13079
13133
  }
13080
13134
  if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
13081
- columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
13135
+ columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));
13082
13136
  }
13083
13137
  return {
13084
13138
  columns,
@@ -13206,10 +13260,12 @@ const useFilterStateListener = (table, onRowSelect) => {
13206
13260
  }, [table.getState().columnFilters, table.getState().globalFilter]);
13207
13261
  };
13208
13262
 
13263
+ const ACTIONS_ON_ROW_LENGTH = 4;
13209
13264
  function useTable$1(children, props, ref) {
13210
13265
  var _settings$frozenColum, _settings$columnOrder, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
13211
13266
  const {
13212
13267
  actionsForRow = [],
13268
+ actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
13213
13269
  data,
13214
13270
  defaultActiveRowIndex,
13215
13271
  disableColumnFiltering = false,
@@ -13248,6 +13304,7 @@ function useTable$1(children, props, ref) {
13248
13304
  footers
13249
13305
  } = useColumnDefinitions(children, {
13250
13306
  actionsForRow,
13307
+ actionsForRowLength,
13251
13308
  enableColumnFiltering: !disableColumnFiltering,
13252
13309
  enableColumnHiding: !disableColumnHiding,
13253
13310
  enableColumnFreezing: !disableColumnFreezing,
@@ -13257,15 +13314,6 @@ function useTable$1(children, props, ref) {
13257
13314
  expandedRowRenderer,
13258
13315
  onRowDrag
13259
13316
  }, ref);
13260
- const actionShortcuts = actionsForRow === null || actionsForRow === void 0 ? void 0 : actionsForRow.reduce((shortcuts, action) => {
13261
- if (action.shortcutKey) {
13262
- return {
13263
- ...shortcuts,
13264
- [action.shortcutKey]: action.ariaLabel
13265
- };
13266
- }
13267
- return shortcuts;
13268
- }, {});
13269
13317
  const lastSortedOrFilteredRows = React__default.useRef(null);
13270
13318
  const totalFrozenColumns = internalFrozenColumnCount + ((_settings$frozenColum = settings === null || settings === void 0 ? void 0 : settings.frozenColumnCount) !== null && _settings$frozenColum !== void 0 ? _settings$frozenColum : 0);
13271
13319
  const frozenColumns = columns.slice(0, totalFrozenColumns).map(column => column.id);
@@ -13411,8 +13459,7 @@ function useTable$1(children, props, ref) {
13411
13459
  return {
13412
13460
  rows,
13413
13461
  table,
13414
- footers,
13415
- actionShortcuts
13462
+ footers
13416
13463
  };
13417
13464
  }
13418
13465
 
@@ -14489,12 +14536,14 @@ const FiltersButton = ({
14489
14536
  const handleReset = () => {
14490
14537
  table.resetColumnFilters();
14491
14538
  };
14492
- useGlobalKeyboardShortcut(event => {
14493
- if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
14494
- var _ref$current;
14495
- event.preventDefault();
14496
- (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
14497
- }
14539
+ useGlobalKeyDown({
14540
+ key: 'f',
14541
+ meta: true,
14542
+ shift: true
14543
+ }, event => {
14544
+ var _ref$current;
14545
+ event.preventDefault();
14546
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
14498
14547
  });
14499
14548
  return /*#__PURE__*/React__default.createElement(Button$1, {
14500
14549
  "aria-label": texts.table2.filters.tooltip,
@@ -14528,9 +14577,13 @@ const FiltersButton = ({
14528
14577
  onClick: handleReset
14529
14578
  }, texts.table2.filters.buttons.clearFilters) : null)))),
14530
14579
  ref: ref,
14531
- tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
14580
+ tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
14532
14581
  className: "ml-2",
14533
- keys: ['Ctrl', 'Shift', 'F']
14582
+ keys: {
14583
+ key: 'f',
14584
+ meta: true,
14585
+ shift: true
14586
+ }
14534
14587
  }))
14535
14588
  }, /*#__PURE__*/React__default.createElement(Icon, {
14536
14589
  name: columnFilters.length ? 'filter-solid' : 'filter'
@@ -14567,13 +14620,15 @@ const Search$2 = props => {
14567
14620
  const value = event.target.value;
14568
14621
  (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
14569
14622
  };
14570
- useGlobalKeyboardShortcut(event => {
14571
- if (event.key === 'f' && (event.ctrlKey || event.metaKey) && !event.shiftKey) {
14572
- if (document.activeElement !== ref.current) {
14573
- var _ref$current;
14574
- event.preventDefault();
14575
- (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
14576
- }
14623
+ useGlobalKeyDown({
14624
+ key: 'f',
14625
+ meta: true,
14626
+ shift: false
14627
+ }, event => {
14628
+ if (document.activeElement !== ref.current) {
14629
+ var _ref$current;
14630
+ event.preventDefault();
14631
+ (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
14577
14632
  }
14578
14633
  });
14579
14634
  const className = cn('w-48', {
@@ -14610,12 +14665,13 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
14610
14665
  }
14611
14666
  return false;
14612
14667
  }, [isEditing]);
14613
- useGlobalKeyboardShortcut(event => {
14614
- if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
14615
- var _internalRef$current;
14616
- event.preventDefault();
14617
- (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
14618
- }
14668
+ useGlobalKeyDown({
14669
+ key: 'e',
14670
+ meta: true
14671
+ }, event => {
14672
+ var _internalRef$current;
14673
+ event.preventDefault();
14674
+ (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
14619
14675
  });
14620
14676
  React__default.useEffect(() => {
14621
14677
  window.addEventListener('beforeunload', showWarning);
@@ -14646,9 +14702,12 @@ const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeB
14646
14702
  }),
14647
14703
  disabled: !hasVisibleEditableColumns,
14648
14704
  ref: internalRef,
14649
- tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut$1, {
14705
+ tooltip: hasVisibleEditableColumns ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.editing.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
14650
14706
  className: "ml-2",
14651
- keys: ['Ctrl', 'E']
14707
+ keys: {
14708
+ key: 'e',
14709
+ meta: true
14710
+ }
14652
14711
  })) : texts.table2.editing.tooltipDisabled
14653
14712
  }, /*#__PURE__*/React__default.createElement(Icon, {
14654
14713
  name: "edit"
@@ -14679,8 +14738,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
14679
14738
  const {
14680
14739
  rows,
14681
14740
  table,
14682
- footers,
14683
- actionShortcuts
14741
+ footers
14684
14742
  } = useTable$1(props.children, props, tableRef);
14685
14743
  const meta = table.options.meta;
14686
14744
  const {
@@ -14719,14 +14777,6 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
14719
14777
  const editButtonRef = React__default.useRef(null);
14720
14778
  // support grid like keyboard navigation between cells
14721
14779
  const handleKeyDown = event => {
14722
- if (!meta.editMode.isEditing && actionShortcuts[event.key]) {
14723
- var _tableRef$current;
14724
- const rowAction = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`[role="row"][aria-current="true"] [role="cell"]:last-child [aria-label="${actionShortcuts[event.key]}"]`);
14725
- if (rowAction) {
14726
- rowAction.click();
14727
- }
14728
- return;
14729
- }
14730
14780
  if (document.activeElement === tableRef.current) {
14731
14781
  if (event.key === 'ArrowUp') {
14732
14782
  event.preventDefault();
@@ -14750,8 +14800,8 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
14750
14800
  meta.setShouldPauseHoverState(true);
14751
14801
  // the virtualiser doesn't always scroll right to the bottom for the last row
14752
14802
  if (nextIndex === rows.length - 1) {
14753
- var _tableRef$current2;
14754
- (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.scrollTo(0, tableRef.current.scrollHeight);
14803
+ var _tableRef$current;
14804
+ (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.scrollTo(0, tableRef.current.scrollHeight);
14755
14805
  } else {
14756
14806
  virtualiser.scrollToIndex(nextIndex + 2);
14757
14807
  }
@@ -16038,7 +16088,7 @@ exports.RadioGroup = RadioGroup;
16038
16088
  exports.SearchInput = SearchInput;
16039
16089
  exports.Select = Select;
16040
16090
  exports.Select2 = Select2;
16041
- exports.Shortcut = Shortcut$1;
16091
+ exports.Shortcut = Shortcut;
16042
16092
  exports.Spinner = Spinner;
16043
16093
  exports.Switch = Switch;
16044
16094
  exports.Table = Table;
@@ -16055,6 +16105,7 @@ exports.Treeview = Treeview;
16055
16105
  exports.VisuallyHidden = VisuallyHidden;
16056
16106
  exports.WindowedTable = WindowedTable;
16057
16107
  exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
16108
+ exports.createShortcutKeyDownHandler = createShortcutKeyDownHandler;
16058
16109
  exports.defaultLocalisationTexts = defaultLocalisationTexts;
16059
16110
  exports.defaultLocalizationContext = defaultLocalizationContext;
16060
16111
  exports.findByValue = findByValue$1;
@@ -16066,6 +16117,7 @@ exports.getParentRowIndexPath = getParentRowIndexPath;
16066
16117
  exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
16067
16118
  exports.icons = icons;
16068
16119
  exports.insertChildTableRow = insertChildTableRow;
16120
+ exports.isMacOs = isMacOs;
16069
16121
  exports.isWeakEqual = isWeakEqual;
16070
16122
  exports.mergeRefs = mergeRefs;
16071
16123
  exports.parseFromCustomString = parseFromCustomString;