@economic/taco 1.30.2 → 1.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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;