@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.
- 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;
|