@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.
- package/dist/components/Button/Button.d.ts +1 -0
- package/dist/components/Header/components/Button.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +0 -1
- package/dist/components/Shortcut/Shortcut.d.ts +2 -1
- package/dist/components/Table2/Table2.d.ts +1 -1
- package/dist/components/Table2/hooks/useColumnDefinitions.d.ts +3 -2
- package/dist/components/Table2/hooks/useTable.d.ts +0 -1
- package/dist/components/Table2/types.d.ts +3 -11
- package/dist/components/Table2/utilities/columns.d.ts +1 -1
- package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js +1 -1
- package/dist/esm/packages/taco/src/components/Datepicker/useDatepicker.js +1 -1
- package/dist/esm/packages/taco/src/components/Dialog/components/Content.js +1 -1
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js +3 -7
- package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js +1 -1
- package/dist/esm/packages/taco/src/components/Input/Input.js +1 -1
- package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js +1 -1
- package/dist/esm/packages/taco/src/components/Listbox/useListbox.js +1 -1
- package/dist/esm/packages/taco/src/components/Listbox/useMultiListbox.js +1 -1
- package/dist/esm/packages/taco/src/components/Menu/components/Item.js +9 -8
- package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js +1 -1
- package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js +1 -1
- package/dist/esm/packages/taco/src/components/Select/useSelect.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +30 -6
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table/components/WindowedTable.js +1 -1
- package/dist/esm/packages/taco/src/components/Table2/Table2.js +3 -12
- package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +13 -9
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js +10 -8
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +14 -8
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +1 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js +4 -11
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +36 -52
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +1 -1
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js +15 -0
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyDown.js.map +1 -0
- package/dist/esm/packages/taco/src/index.js +3 -2
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Button.js +21 -2
- package/dist/esm/packages/taco/src/primitives/Button.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/keyboard.js +35 -0
- package/dist/esm/packages/taco/src/utils/keyboard.js.map +1 -0
- package/dist/hooks/useGlobalKeyDown.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/primitives/Button.d.ts +3 -0
- package/dist/taco.cjs.development.js +210 -158
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/keyboard.d.ts +8 -0
- package/package.json +2 -2
- package/types.json +22 -122
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js +0 -13
- package/dist/esm/packages/taco/src/hooks/useGlobalKeyboardShortcut.js.map +0 -1
- 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:
|
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
|
-
|
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
|
7113
|
+
}), icon ? /*#__PURE__*/React.createElement(Icon$1, {
|
7030
7114
|
name: icon
|
7031
|
-
}), props.children, 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
|
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:
|
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
|
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:
|
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
|
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:
|
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
|
-
|
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
|
11679
|
-
const
|
11680
|
-
const
|
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
|
-
},
|
11688
|
-
|
11689
|
-
|
11690
|
-
|
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,
|
11717
|
-
key: i
|
11718
|
-
|
11719
|
-
|
11720
|
-
|
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:
|
11743
|
-
|
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
|
-
|
14493
|
-
|
14494
|
-
|
14495
|
-
|
14496
|
-
|
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
|
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:
|
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
|
-
|
14571
|
-
|
14572
|
-
|
14573
|
-
|
14574
|
-
|
14575
|
-
|
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
|
-
|
14614
|
-
|
14615
|
-
|
14616
|
-
|
14617
|
-
|
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
|
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:
|
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$
|
14754
|
-
(_tableRef$
|
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
|
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;
|