@snack-uikit/list 0.26.4 → 0.27.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/CHANGELOG.md +22 -0
- package/dist/cjs/components/Items/BaseItem/BaseItem.d.ts +1 -1
- package/dist/cjs/components/Items/BaseItem/BaseItem.js +4 -2
- package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.d.ts +1 -1
- package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.js +4 -2
- package/dist/cjs/components/Items/SearchItem/SearchItem.js +2 -4
- package/dist/cjs/components/Items/hooks.js +7 -7
- package/dist/cjs/components/Items/types.d.ts +5 -0
- package/dist/cjs/components/Items/utils.js +2 -2
- package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +2 -1
- package/dist/cjs/helperComponents/HiddenTabButton/HiddenTabButton.js +2 -4
- package/dist/cjs/helperComponents/Separator/Separator.d.ts +1 -0
- package/dist/cjs/helperComponents/Separator/Separator.js +5 -5
- package/dist/cjs/helpers.d.ts +16 -0
- package/dist/cjs/helpers.js +25 -0
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/utils.d.ts +2 -16
- package/dist/cjs/utils.js +5 -20
- package/dist/esm/components/Items/BaseItem/BaseItem.d.ts +1 -1
- package/dist/esm/components/Items/BaseItem/BaseItem.js +2 -2
- package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.d.ts +1 -1
- package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.js +2 -1
- package/dist/esm/components/Items/SearchItem/SearchItem.js +2 -4
- package/dist/esm/components/Items/hooks.js +1 -1
- package/dist/esm/components/Items/types.d.ts +5 -0
- package/dist/esm/components/Items/utils.js +1 -1
- package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +2 -1
- package/dist/esm/helperComponents/HiddenTabButton/HiddenTabButton.js +2 -4
- package/dist/esm/helperComponents/Separator/Separator.d.ts +1 -0
- package/dist/esm/helperComponents/Separator/Separator.js +3 -4
- package/dist/esm/helpers.d.ts +16 -0
- package/dist/esm/helpers.js +16 -0
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/utils.d.ts +2 -16
- package/dist/esm/utils.js +3 -16
- package/package.json +2 -2
- package/src/components/Items/BaseItem/BaseItem.tsx +7 -1
- package/src/components/Items/GroupSelectItem/GroupSelectItem.tsx +2 -0
- package/src/components/Items/SearchItem/SearchItem.tsx +3 -6
- package/src/components/Items/hooks.tsx +1 -1
- package/src/components/Items/types.ts +5 -0
- package/src/components/Items/utils.ts +1 -1
- package/src/components/Lists/ListPrivate/ListPrivate.tsx +2 -1
- package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx +3 -6
- package/src/helperComponents/Separator/Separator.tsx +5 -5
- package/src/helpers.ts +20 -0
- package/src/index.ts +1 -1
- package/src/utils.ts +4 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.27.1 (2025-03-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **PDS-1483:** ability to provide label for toggle button for list ([bc76b1f](https://github.com/cloud-ru-tech/snack-uikit/commit/bc76b1f07a342c73809bc69816cd11423b1c6454))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# 0.27.0 (2025-03-05)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **PDS-1767:** custom label for clear all button in List ([ca00030](https://github.com/cloud-ru-tech/snack-uikit/commit/ca000303e274e371e540e8b23598c4dea6ac49e0))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## 0.26.4 (2025-03-05)
|
|
7
29
|
|
|
8
30
|
### Only dependencies have been changed
|
|
@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
|
|
|
8
8
|
isParentNode?: boolean;
|
|
9
9
|
onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
|
|
10
10
|
};
|
|
11
|
-
export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
11
|
+
export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
12
12
|
export {};
|
|
@@ -41,6 +41,7 @@ function BaseItem(_a) {
|
|
|
41
41
|
open,
|
|
42
42
|
itemRef,
|
|
43
43
|
switch: switchProp,
|
|
44
|
+
showSwitchIcon,
|
|
44
45
|
onKeyDown,
|
|
45
46
|
onFocus,
|
|
46
47
|
indeterminate,
|
|
@@ -52,7 +53,7 @@ function BaseItem(_a) {
|
|
|
52
53
|
inactive,
|
|
53
54
|
itemWrapRender
|
|
54
55
|
} = _a,
|
|
55
|
-
rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
|
|
56
|
+
rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
|
|
56
57
|
const interactive = !inactive;
|
|
57
58
|
const {
|
|
58
59
|
size = 's',
|
|
@@ -189,7 +190,8 @@ function BaseItem(_a) {
|
|
|
189
190
|
}), afterContent, switchProp && interactive && (0, jsx_runtime_1.jsx)(toggles_1.Switch, {
|
|
190
191
|
disabled: disabled,
|
|
191
192
|
checked: isChecked,
|
|
192
|
-
"data-test-id": 'list__base-item-switch'
|
|
193
|
+
"data-test-id": 'list__base-item-switch',
|
|
194
|
+
showIcon: showSwitchIcon
|
|
193
195
|
}), !switchProp && expandIcon && (0, jsx_runtime_1.jsx)("span", {
|
|
194
196
|
className: styles_module_scss_2.default.expandableIcon,
|
|
195
197
|
children: expandIcon
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
|
|
2
2
|
type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
|
|
3
|
-
export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|
|
@@ -16,7 +16,8 @@ function GroupSelectItem(_ref) {
|
|
|
16
16
|
mode,
|
|
17
17
|
id,
|
|
18
18
|
itemRef,
|
|
19
|
-
allChildIds
|
|
19
|
+
allChildIds,
|
|
20
|
+
selectButtonLabel
|
|
20
21
|
} = _ref;
|
|
21
22
|
const {
|
|
22
23
|
indeterminate,
|
|
@@ -39,7 +40,8 @@ function GroupSelectItem(_ref) {
|
|
|
39
40
|
indeterminate,
|
|
40
41
|
checked,
|
|
41
42
|
itemRef,
|
|
42
|
-
onClick: handleOnSelect
|
|
43
|
+
onClick: handleOnSelect,
|
|
44
|
+
label: selectButtonLabel
|
|
43
45
|
}
|
|
44
46
|
}), itemsJSX]
|
|
45
47
|
});
|
|
@@ -13,6 +13,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
13
13
|
const classnames_1 = __importDefault(require("classnames"));
|
|
14
14
|
const search_private_1 = require("@snack-uikit/search-private");
|
|
15
15
|
const constants_1 = require("../../../constants");
|
|
16
|
+
const utils_1 = require("../../../utils");
|
|
16
17
|
const contexts_1 = require("../../Lists/contexts");
|
|
17
18
|
const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
|
|
18
19
|
const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
|
|
@@ -30,9 +31,6 @@ function SearchItem(_ref) {
|
|
|
30
31
|
e.preventDefault();
|
|
31
32
|
}
|
|
32
33
|
};
|
|
33
|
-
const handleFocus = e => {
|
|
34
|
-
e.stopPropagation();
|
|
35
|
-
};
|
|
36
34
|
if (!search) {
|
|
37
35
|
return null;
|
|
38
36
|
}
|
|
@@ -44,7 +42,7 @@ function SearchItem(_ref) {
|
|
|
44
42
|
size: size,
|
|
45
43
|
tabIndex: constants_1.ITEM_PREFIXES.search === firstItemId ? 0 : -1,
|
|
46
44
|
onKeyDown: handleKeyDown,
|
|
47
|
-
onFocus:
|
|
45
|
+
onFocus: utils_1.stopPropagation
|
|
48
46
|
}, search, {
|
|
49
47
|
ref: itemRef
|
|
50
48
|
}))
|
|
@@ -11,13 +11,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
11
11
|
const react_2 = require("react");
|
|
12
12
|
const constants_1 = require("../../constants");
|
|
13
13
|
const helperComponents_1 = require("../../helperComponents");
|
|
14
|
-
const
|
|
14
|
+
const helpers_1 = require("../../helpers");
|
|
15
15
|
const contexts_1 = require("../Lists/contexts");
|
|
16
16
|
const AccordionItem_1 = require("./AccordionItem");
|
|
17
17
|
const BaseItem_1 = require("./BaseItem");
|
|
18
18
|
const GroupSelectItem_1 = require("./GroupSelectItem");
|
|
19
19
|
const NextListItem_1 = require("./NextListItem");
|
|
20
|
-
const
|
|
20
|
+
const utils_1 = require("./utils");
|
|
21
21
|
function getRenderItems(_ref) {
|
|
22
22
|
let {
|
|
23
23
|
focusCloseChildIds,
|
|
@@ -36,7 +36,7 @@ function getRenderItems(_ref) {
|
|
|
36
36
|
items
|
|
37
37
|
} = focusFlattenItems[id];
|
|
38
38
|
const flattenItem = flattenItems[originalId];
|
|
39
|
-
if ((0,
|
|
39
|
+
if ((0, utils_1.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_1.isGroupSelectItem)(flattenItem)) {
|
|
40
40
|
const innerItemsJSX = getRenderItems({
|
|
41
41
|
focusCloseChildIds: items,
|
|
42
42
|
focusFlattenItems,
|
|
@@ -50,21 +50,21 @@ function getRenderItems(_ref) {
|
|
|
50
50
|
mode: flattenItem.mode
|
|
51
51
|
}, key + '_separator'), ...innerItemsJSX];
|
|
52
52
|
}
|
|
53
|
-
if ((0,
|
|
53
|
+
if ((0, utils_1.isGroupSelectItem)(flattenItem)) {
|
|
54
54
|
return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
|
|
55
55
|
items: items,
|
|
56
56
|
itemRef: itemRef,
|
|
57
57
|
key: key
|
|
58
58
|
}));
|
|
59
59
|
}
|
|
60
|
-
if ((0,
|
|
60
|
+
if ((0, utils_1.isAccordionItem)(flattenItem)) {
|
|
61
61
|
return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
|
|
62
62
|
items: items,
|
|
63
63
|
itemRef: itemRef,
|
|
64
64
|
key: key
|
|
65
65
|
}));
|
|
66
66
|
}
|
|
67
|
-
if ((0,
|
|
67
|
+
if ((0, utils_1.isNextListItem)(flattenItem)) {
|
|
68
68
|
return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
|
|
69
69
|
focusId: id,
|
|
70
70
|
items: items,
|
|
@@ -108,7 +108,7 @@ function useCreateBaseItems(_ref2) {
|
|
|
108
108
|
allChildIds: []
|
|
109
109
|
},
|
|
110
110
|
footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
|
|
111
|
-
id: (0,
|
|
111
|
+
id: (0, helpers_1.getFooterItemId)(idx),
|
|
112
112
|
itemRef,
|
|
113
113
|
parentId: constants_1.ITEM_PREFIXES.default,
|
|
114
114
|
items: [],
|
|
@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
|
|
|
49
49
|
* Флаг отображения состояния выбранного элемента через switch
|
|
50
50
|
*/
|
|
51
51
|
switch?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Флаг отображения иконки у чекбоксов
|
|
54
|
+
*/
|
|
55
|
+
showSwitchIcon?: boolean;
|
|
52
56
|
itemWrapRender?(item: ReactNode): ReactNode;
|
|
53
57
|
checked?: boolean;
|
|
54
58
|
}>;
|
|
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
|
|
|
83
87
|
export type GroupSelectItem = CommonGroupItem & {
|
|
84
88
|
items: Item[];
|
|
85
89
|
type: 'group-select';
|
|
90
|
+
selectButtonLabel?: string;
|
|
86
91
|
id?: ItemId;
|
|
87
92
|
itemRef?: RefObject<HTMLElement>;
|
|
88
93
|
};
|
|
@@ -22,7 +22,7 @@ exports.kindFlattenItems = kindFlattenItems;
|
|
|
22
22
|
exports.extractActiveItems = extractActiveItems;
|
|
23
23
|
const react_1 = require("react");
|
|
24
24
|
const constants_1 = require("../../constants");
|
|
25
|
-
const
|
|
25
|
+
const helpers_1 = require("../../helpers");
|
|
26
26
|
function isBaseItem(item) {
|
|
27
27
|
return item && !('items' in item);
|
|
28
28
|
}
|
|
@@ -61,7 +61,7 @@ function kindFlattenItems(_ref) {
|
|
|
61
61
|
parentId = constants_1.ITEM_PREFIXES.default
|
|
62
62
|
} = _ref2;
|
|
63
63
|
var _a, _b;
|
|
64
|
-
const autoId = prefix !== undefined ? (0,
|
|
64
|
+
const autoId = prefix !== undefined ? (0, helpers_1.getItemAutoId)(prefix, idx) : String(idx);
|
|
65
65
|
const itemId = (_a = !isGroupItem(item) ? item.id : undefined) !== null && _a !== void 0 ? _a : autoId;
|
|
66
66
|
if (isBaseItem(item)) {
|
|
67
67
|
flattenItems[itemId] = Object.assign(Object.assign({}, item), {
|
|
@@ -25,6 +25,7 @@ const loaders_1 = require("@snack-uikit/loaders");
|
|
|
25
25
|
const scroll_1 = require("@snack-uikit/scroll");
|
|
26
26
|
const utils_1 = require("@snack-uikit/utils");
|
|
27
27
|
const helperComponents_1 = require("../../../helperComponents");
|
|
28
|
+
const utils_2 = require("../../../utils");
|
|
28
29
|
const Items_1 = require("../../Items");
|
|
29
30
|
const contexts_1 = require("../contexts");
|
|
30
31
|
const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
|
|
@@ -190,7 +191,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
190
191
|
children: itemsPinBottomJSX
|
|
191
192
|
}), footer && (0, jsx_runtime_1.jsx)("div", {
|
|
192
193
|
className: styles_module_scss_2.default.footer,
|
|
193
|
-
onFocus:
|
|
194
|
+
onFocus: utils_2.stopPropagation,
|
|
194
195
|
children: footer
|
|
195
196
|
})]
|
|
196
197
|
}));
|
|
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
11
11
|
exports.HiddenTabButton = void 0;
|
|
12
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
13
13
|
const react_1 = require("react");
|
|
14
|
+
const utils_1 = require("../../utils");
|
|
14
15
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
15
16
|
exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
|
|
16
17
|
let {
|
|
@@ -25,14 +26,11 @@ exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
|
|
|
25
26
|
e.preventDefault();
|
|
26
27
|
e.stopPropagation();
|
|
27
28
|
}, [listRef]);
|
|
28
|
-
const handleKeyDown = (0, react_1.useCallback)(e => {
|
|
29
|
-
e.stopPropagation();
|
|
30
|
-
}, []);
|
|
31
29
|
return (0, jsx_runtime_1.jsx)("button", {
|
|
32
30
|
type: 'button',
|
|
33
31
|
"aria-hidden": true,
|
|
34
32
|
ref: ref,
|
|
35
|
-
onKeyDown:
|
|
33
|
+
onKeyDown: utils_1.stopPropagation,
|
|
36
34
|
onFocus: handleFocus,
|
|
37
35
|
className: styles_module_scss_1.default.hiddenBtn,
|
|
38
36
|
tabIndex: tabIndex
|
|
@@ -12,6 +12,7 @@ export type SeparatorProps = {
|
|
|
12
12
|
indeterminate?: boolean;
|
|
13
13
|
checked?: boolean;
|
|
14
14
|
itemRef?: ForwardedRef<HTMLElement>;
|
|
15
|
+
label?: string;
|
|
15
16
|
};
|
|
16
17
|
};
|
|
17
18
|
export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -16,6 +16,7 @@ const divider_1 = require("@snack-uikit/divider");
|
|
|
16
16
|
const locale_1 = require("@snack-uikit/locale");
|
|
17
17
|
const truncate_string_1 = require("@snack-uikit/truncate-string");
|
|
18
18
|
const contexts_1 = require("../../components/Lists/contexts");
|
|
19
|
+
const utils_1 = require("../../utils");
|
|
19
20
|
const constants_1 = require("./constants");
|
|
20
21
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
21
22
|
function Separator(_ref) {
|
|
@@ -39,7 +40,8 @@ function Separator(_ref) {
|
|
|
39
40
|
const {
|
|
40
41
|
onClick,
|
|
41
42
|
checked,
|
|
42
|
-
itemRef
|
|
43
|
+
itemRef,
|
|
44
|
+
label
|
|
43
45
|
} = selectButton;
|
|
44
46
|
return (0, jsx_runtime_1.jsx)("span", {
|
|
45
47
|
className: styles_module_scss_1.default.selectButton,
|
|
@@ -53,11 +55,9 @@ function Separator(_ref) {
|
|
|
53
55
|
e.preventDefault();
|
|
54
56
|
e.stopPropagation();
|
|
55
57
|
},
|
|
56
|
-
onFocus:
|
|
57
|
-
e.stopPropagation();
|
|
58
|
-
},
|
|
58
|
+
onFocus: utils_1.stopPropagation,
|
|
59
59
|
ref: itemRef,
|
|
60
|
-
label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
|
|
60
|
+
label: label !== null && label !== void 0 ? label : checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
|
|
61
61
|
})
|
|
62
62
|
});
|
|
63
63
|
}, [divider, mode, selectButton, size, t]);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ItemId } from './components';
|
|
2
|
+
/**
|
|
3
|
+
* Возвращает id для элемента футера
|
|
4
|
+
* @function helper
|
|
5
|
+
*/
|
|
6
|
+
export declare const getFooterItemId: (id: ItemId) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
+
* @function helper
|
|
10
|
+
*/
|
|
11
|
+
export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
|
|
12
|
+
/**
|
|
13
|
+
* Возвращает id для дефолтного элемента
|
|
14
|
+
* @function helper
|
|
15
|
+
*/
|
|
16
|
+
export declare const getDefaultItemId: (id: ItemId) => string;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
|
|
7
|
+
const constants_1 = require("./constants");
|
|
8
|
+
/**
|
|
9
|
+
* Возвращает id для элемента футера
|
|
10
|
+
* @function helper
|
|
11
|
+
*/
|
|
12
|
+
const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
|
|
13
|
+
exports.getFooterItemId = getFooterItemId;
|
|
14
|
+
/**
|
|
15
|
+
* Возвращает id для элемента, подставляя перфикс
|
|
16
|
+
* @function helper
|
|
17
|
+
*/
|
|
18
|
+
const getItemAutoId = (prefix, id) => [prefix, id].join('-');
|
|
19
|
+
exports.getItemAutoId = getItemAutoId;
|
|
20
|
+
/**
|
|
21
|
+
* Возвращает id для дефолтного элемента
|
|
22
|
+
* @function helper
|
|
23
|
+
*/
|
|
24
|
+
const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
|
|
25
|
+
exports.getDefaultItemId = getDefaultItemId;
|
package/dist/cjs/index.d.ts
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -32,5 +32,5 @@ Object.defineProperty(exports, "kindFlattenItems", {
|
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
__exportStar(require("./helperComponents/ItemContent"), exports);
|
|
35
|
-
__exportStar(require("./
|
|
35
|
+
__exportStar(require("./helpers"), exports);
|
|
36
36
|
__exportStar(require("./constants"), exports);
|
package/dist/cjs/utils.d.ts
CHANGED
|
@@ -1,16 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
* Возвращает id для элемента футера
|
|
4
|
-
* @function helper
|
|
5
|
-
*/
|
|
6
|
-
export declare const getFooterItemId: (id: ItemId) => string;
|
|
7
|
-
/**
|
|
8
|
-
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
-
* @function helper
|
|
10
|
-
*/
|
|
11
|
-
export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
|
|
12
|
-
/**
|
|
13
|
-
* Возвращает id для дефолтного элемента
|
|
14
|
-
* @function helper
|
|
15
|
-
*/
|
|
16
|
-
export declare const getDefaultItemId: (id: ItemId) => string;
|
|
1
|
+
import { ReactEventHandler } from 'react';
|
|
2
|
+
export declare const stopPropagation: ReactEventHandler;
|
package/dist/cjs/utils.js
CHANGED
|
@@ -3,23 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
|
|
13
|
-
exports.getFooterItemId = getFooterItemId;
|
|
14
|
-
/**
|
|
15
|
-
* Возвращает id для элемента, подставляя перфикс
|
|
16
|
-
* @function helper
|
|
17
|
-
*/
|
|
18
|
-
const getItemAutoId = (prefix, id) => [prefix, id].join('-');
|
|
19
|
-
exports.getItemAutoId = getItemAutoId;
|
|
20
|
-
/**
|
|
21
|
-
* Возвращает id для дефолтного элемента
|
|
22
|
-
* @function helper
|
|
23
|
-
*/
|
|
24
|
-
const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
|
|
25
|
-
exports.getDefaultItemId = getDefaultItemId;
|
|
6
|
+
exports.stopPropagation = void 0;
|
|
7
|
+
const stopPropagation = e => {
|
|
8
|
+
e.stopPropagation();
|
|
9
|
+
};
|
|
10
|
+
exports.stopPropagation = stopPropagation;
|
|
@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
|
|
|
8
8
|
isParentNode?: boolean;
|
|
9
9
|
onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
|
|
10
10
|
};
|
|
11
|
-
export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
11
|
+
export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
12
12
|
export {};
|
|
@@ -21,7 +21,7 @@ import { CHECKBOX_SIZE_MAP } from './constants';
|
|
|
21
21
|
import styles from './styles.module.css';
|
|
22
22
|
export function BaseItem(_a) {
|
|
23
23
|
var _b;
|
|
24
|
-
var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
|
|
24
|
+
var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
|
|
25
25
|
const interactive = !inactive;
|
|
26
26
|
const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
|
|
27
27
|
const { level = 0 } = useCollapseLevelContext();
|
|
@@ -86,7 +86,7 @@ export function BaseItem(_a) {
|
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
const props = extractSupportProps(rest);
|
|
89
|
-
const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
|
|
89
|
+
const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId].originalId ? 0 : -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch', showIcon: showSwitchIcon })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
|
|
90
90
|
if (!itemWrapRender) {
|
|
91
91
|
return itemJSX;
|
|
92
92
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
|
|
2
2
|
type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
|
|
3
|
-
export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Separator } from '../../../helperComponents';
|
|
3
3
|
import { useGroupItemSelection, useRenderItems } from '../hooks';
|
|
4
|
-
export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }) {
|
|
4
|
+
export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }) {
|
|
5
5
|
const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
|
|
6
6
|
items,
|
|
7
7
|
id,
|
|
@@ -14,5 +14,6 @@ export function GroupSelectItem({ label, truncate, divider, items, mode, id, ite
|
|
|
14
14
|
checked,
|
|
15
15
|
itemRef,
|
|
16
16
|
onClick: handleOnSelect,
|
|
17
|
+
label: selectButtonLabel,
|
|
17
18
|
} }), itemsJSX] }));
|
|
18
19
|
}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { SearchPrivate } from '@snack-uikit/search-private';
|
|
4
4
|
import { ITEM_PREFIXES } from '../../../constants';
|
|
5
|
+
import { stopPropagation } from '../../../utils';
|
|
5
6
|
import { useNewListContext } from '../../Lists/contexts';
|
|
6
7
|
import commonStyles from '../styles.module.css';
|
|
7
8
|
import styles from './styles.module.css';
|
|
@@ -12,11 +13,8 @@ export function SearchItem({ search, itemRef }) {
|
|
|
12
13
|
e.preventDefault();
|
|
13
14
|
}
|
|
14
15
|
};
|
|
15
|
-
const handleFocus = (e) => {
|
|
16
|
-
e.stopPropagation();
|
|
17
|
-
};
|
|
18
16
|
if (!search) {
|
|
19
17
|
return null;
|
|
20
18
|
}
|
|
21
|
-
return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus:
|
|
19
|
+
return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus: stopPropagation }, search, { ref: itemRef })) }));
|
|
22
20
|
}
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { createRef, useMemo } from 'react';
|
|
4
4
|
import { ITEM_PREFIXES } from '../../constants';
|
|
5
5
|
import { Separator } from '../../helperComponents';
|
|
6
|
-
import { getFooterItemId } from '../../
|
|
6
|
+
import { getFooterItemId } from '../../helpers';
|
|
7
7
|
import { useNewListContext, useSelectionContext } from '../Lists/contexts';
|
|
8
8
|
import { AccordionItem } from './AccordionItem';
|
|
9
9
|
import { BaseItem } from './BaseItem';
|
|
@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
|
|
|
49
49
|
* Флаг отображения состояния выбранного элемента через switch
|
|
50
50
|
*/
|
|
51
51
|
switch?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Флаг отображения иконки у чекбоксов
|
|
54
|
+
*/
|
|
55
|
+
showSwitchIcon?: boolean;
|
|
52
56
|
itemWrapRender?(item: ReactNode): ReactNode;
|
|
53
57
|
checked?: boolean;
|
|
54
58
|
}>;
|
|
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
|
|
|
83
87
|
export type GroupSelectItem = CommonGroupItem & {
|
|
84
88
|
items: Item[];
|
|
85
89
|
type: 'group-select';
|
|
90
|
+
selectButtonLabel?: string;
|
|
86
91
|
id?: ItemId;
|
|
87
92
|
itemRef?: RefObject<HTMLElement>;
|
|
88
93
|
};
|
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { createRef } from 'react';
|
|
13
13
|
import { ITEM_PREFIXES } from '../../constants';
|
|
14
|
-
import { getItemAutoId } from '../../
|
|
14
|
+
import { getItemAutoId } from '../../helpers';
|
|
15
15
|
export function isBaseItem(item) {
|
|
16
16
|
return item && !('items' in item);
|
|
17
17
|
}
|
|
@@ -17,6 +17,7 @@ import { Spinner } from '@snack-uikit/loaders';
|
|
|
17
17
|
import { Scroll } from '@snack-uikit/scroll';
|
|
18
18
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
19
19
|
import { ListEmptyState, useEmptyState } from '../../../helperComponents';
|
|
20
|
+
import { stopPropagation } from '../../../utils';
|
|
20
21
|
import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
|
|
21
22
|
import { useNewListContext, useSelectionContext } from '../contexts';
|
|
22
23
|
import commonStyles from '../styles.module.css';
|
|
@@ -81,7 +82,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
|
|
|
81
82
|
innerScrollRef.current = ref;
|
|
82
83
|
if (scrollContainerRef)
|
|
83
84
|
scrollContainerRef.current = ref;
|
|
84
|
-
}, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus:
|
|
85
|
+
}, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: stopPropagation, children: footer }))] })));
|
|
85
86
|
if (!nested) {
|
|
86
87
|
return listJSX;
|
|
87
88
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback } from 'react';
|
|
3
|
+
import { stopPropagation } from '../../utils';
|
|
3
4
|
import styles from './styles.module.css';
|
|
4
5
|
export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
|
|
5
6
|
const handleFocus = useCallback((e) => {
|
|
@@ -10,8 +11,5 @@ export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
|
|
|
10
11
|
e.preventDefault();
|
|
11
12
|
e.stopPropagation();
|
|
12
13
|
}, [listRef]);
|
|
13
|
-
|
|
14
|
-
e.stopPropagation();
|
|
15
|
-
}, []);
|
|
16
|
-
return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
|
|
14
|
+
return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: stopPropagation, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
|
|
17
15
|
});
|
|
@@ -12,6 +12,7 @@ export type SeparatorProps = {
|
|
|
12
12
|
indeterminate?: boolean;
|
|
13
13
|
checked?: boolean;
|
|
14
14
|
itemRef?: ForwardedRef<HTMLElement>;
|
|
15
|
+
label?: string;
|
|
15
16
|
};
|
|
16
17
|
};
|
|
17
18
|
export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -5,6 +5,7 @@ import { Divider } from '@snack-uikit/divider';
|
|
|
5
5
|
import { useLocale } from '@snack-uikit/locale';
|
|
6
6
|
import { TruncateString } from '@snack-uikit/truncate-string';
|
|
7
7
|
import { useNewListContext } from '../../components/Lists/contexts';
|
|
8
|
+
import { stopPropagation } from '../../utils';
|
|
8
9
|
import { SELECT_BUTTON_SIZE_MAP } from './constants';
|
|
9
10
|
import styles from './styles.module.css';
|
|
10
11
|
export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }) {
|
|
@@ -14,14 +15,12 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
|
|
|
14
15
|
if (!selectButton) {
|
|
15
16
|
return null;
|
|
16
17
|
}
|
|
17
|
-
const { onClick, checked, itemRef } = selectButton;
|
|
18
|
+
const { onClick, checked, itemRef, label } = selectButton;
|
|
18
19
|
return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && mode) || undefined, children: _jsx(ButtonFunction, { size: SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, onClick: e => {
|
|
19
20
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
20
21
|
e.preventDefault();
|
|
21
22
|
e.stopPropagation();
|
|
22
|
-
}, onFocus:
|
|
23
|
-
e.stopPropagation();
|
|
24
|
-
}, ref: itemRef, label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select') }) }));
|
|
23
|
+
}, onFocus: stopPropagation, ref: itemRef, label: label !== null && label !== void 0 ? label : (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
|
|
25
24
|
}, [divider, mode, selectButton, size, t]);
|
|
26
25
|
if (label) {
|
|
27
26
|
return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), _jsxs("div", { style: { flex: 1 }, children: [selectButtonJSX, divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] })] }));
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ItemId } from './components';
|
|
2
|
+
/**
|
|
3
|
+
* Возвращает id для элемента футера
|
|
4
|
+
* @function helper
|
|
5
|
+
*/
|
|
6
|
+
export declare const getFooterItemId: (id: ItemId) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
+
* @function helper
|
|
10
|
+
*/
|
|
11
|
+
export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
|
|
12
|
+
/**
|
|
13
|
+
* Возвращает id для дефолтного элемента
|
|
14
|
+
* @function helper
|
|
15
|
+
*/
|
|
16
|
+
export declare const getDefaultItemId: (id: ItemId) => string;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ITEM_PREFIXES } from './constants';
|
|
2
|
+
/**
|
|
3
|
+
* Возвращает id для элемента футера
|
|
4
|
+
* @function helper
|
|
5
|
+
*/
|
|
6
|
+
export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
|
|
7
|
+
/**
|
|
8
|
+
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
+
* @function helper
|
|
10
|
+
*/
|
|
11
|
+
export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
|
|
12
|
+
/**
|
|
13
|
+
* Возвращает id для дефолтного элемента
|
|
14
|
+
* @function helper
|
|
15
|
+
*/
|
|
16
|
+
export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.js
CHANGED
package/dist/esm/utils.d.ts
CHANGED
|
@@ -1,16 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
* Возвращает id для элемента футера
|
|
4
|
-
* @function helper
|
|
5
|
-
*/
|
|
6
|
-
export declare const getFooterItemId: (id: ItemId) => string;
|
|
7
|
-
/**
|
|
8
|
-
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
-
* @function helper
|
|
10
|
-
*/
|
|
11
|
-
export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
|
|
12
|
-
/**
|
|
13
|
-
* Возвращает id для дефолтного элемента
|
|
14
|
-
* @function helper
|
|
15
|
-
*/
|
|
16
|
-
export declare const getDefaultItemId: (id: ItemId) => string;
|
|
1
|
+
import { ReactEventHandler } from 'react';
|
|
2
|
+
export declare const stopPropagation: ReactEventHandler;
|
package/dist/esm/utils.js
CHANGED
|
@@ -1,16 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* @function helper
|
|
5
|
-
*/
|
|
6
|
-
export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
|
|
7
|
-
/**
|
|
8
|
-
* Возвращает id для элемента, подставляя перфикс
|
|
9
|
-
* @function helper
|
|
10
|
-
*/
|
|
11
|
-
export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
|
|
12
|
-
/**
|
|
13
|
-
* Возвращает id для дефолтного элемента
|
|
14
|
-
* @function helper
|
|
15
|
-
*/
|
|
16
|
-
export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);
|
|
1
|
+
export const stopPropagation = e => {
|
|
2
|
+
e.stopPropagation();
|
|
3
|
+
};
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "List",
|
|
7
|
-
"version": "0.
|
|
7
|
+
"version": "0.27.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@snack-uikit/locale": "*"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "cafb29b74a6ac4d38594e9d46599617925165935"
|
|
58
58
|
}
|
|
@@ -38,6 +38,7 @@ export function BaseItem({
|
|
|
38
38
|
open,
|
|
39
39
|
itemRef,
|
|
40
40
|
switch: switchProp,
|
|
41
|
+
showSwitchIcon,
|
|
41
42
|
onKeyDown,
|
|
42
43
|
onFocus,
|
|
43
44
|
indeterminate,
|
|
@@ -188,7 +189,12 @@ export function BaseItem({
|
|
|
188
189
|
{afterContent}
|
|
189
190
|
|
|
190
191
|
{switchProp && interactive && (
|
|
191
|
-
<Switch
|
|
192
|
+
<Switch
|
|
193
|
+
disabled={disabled}
|
|
194
|
+
checked={isChecked}
|
|
195
|
+
data-test-id='list__base-item-switch'
|
|
196
|
+
showIcon={showSwitchIcon}
|
|
197
|
+
/>
|
|
192
198
|
)}
|
|
193
199
|
|
|
194
200
|
{!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
|
|
@@ -13,6 +13,7 @@ export function GroupSelectItem({
|
|
|
13
13
|
id,
|
|
14
14
|
itemRef,
|
|
15
15
|
allChildIds,
|
|
16
|
+
selectButtonLabel,
|
|
16
17
|
}: GroupSelectItemProps) {
|
|
17
18
|
const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
|
|
18
19
|
items,
|
|
@@ -35,6 +36,7 @@ export function GroupSelectItem({
|
|
|
35
36
|
checked,
|
|
36
37
|
itemRef,
|
|
37
38
|
onClick: handleOnSelect,
|
|
39
|
+
label: selectButtonLabel,
|
|
38
40
|
}}
|
|
39
41
|
/>
|
|
40
42
|
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import cn from 'classnames';
|
|
2
|
-
import {
|
|
2
|
+
import { KeyboardEvent, RefObject } from 'react';
|
|
3
3
|
|
|
4
4
|
import { SearchPrivate } from '@snack-uikit/search-private';
|
|
5
5
|
|
|
6
6
|
import { ITEM_PREFIXES } from '../../../constants';
|
|
7
7
|
import { SearchState } from '../../../types';
|
|
8
|
+
import { stopPropagation } from '../../../utils';
|
|
8
9
|
import { useNewListContext } from '../../Lists/contexts';
|
|
9
10
|
import commonStyles from '../styles.module.scss';
|
|
10
11
|
import styles from './styles.module.scss';
|
|
@@ -23,10 +24,6 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
|
|
|
23
24
|
}
|
|
24
25
|
};
|
|
25
26
|
|
|
26
|
-
const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
|
|
27
|
-
e.stopPropagation();
|
|
28
|
-
};
|
|
29
|
-
|
|
30
27
|
if (!search) {
|
|
31
28
|
return null;
|
|
32
29
|
}
|
|
@@ -37,7 +34,7 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
|
|
|
37
34
|
size={size}
|
|
38
35
|
tabIndex={ITEM_PREFIXES.search === firstItemId ? 0 : -1}
|
|
39
36
|
onKeyDown={handleKeyDown}
|
|
40
|
-
onFocus={
|
|
37
|
+
onFocus={stopPropagation}
|
|
41
38
|
{...search}
|
|
42
39
|
ref={itemRef as RefObject<HTMLInputElement>}
|
|
43
40
|
/>
|
|
@@ -2,7 +2,7 @@ import { createRef, RefObject, useMemo } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { ITEM_PREFIXES } from '../../constants';
|
|
4
4
|
import { Separator } from '../../helperComponents';
|
|
5
|
-
import { getFooterItemId } from '../../
|
|
5
|
+
import { getFooterItemId } from '../../helpers';
|
|
6
6
|
import { useNewListContext, useSelectionContext } from '../Lists/contexts';
|
|
7
7
|
import { AccordionItem } from './AccordionItem';
|
|
8
8
|
import { BaseItem } from './BaseItem';
|
|
@@ -58,6 +58,10 @@ export type BaseItem = WithSupportProps<{
|
|
|
58
58
|
* Флаг отображения состояния выбранного элемента через switch
|
|
59
59
|
*/
|
|
60
60
|
switch?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Флаг отображения иконки у чекбоксов
|
|
63
|
+
*/
|
|
64
|
+
showSwitchIcon?: boolean;
|
|
61
65
|
|
|
62
66
|
itemWrapRender?(item: ReactNode): ReactNode;
|
|
63
67
|
|
|
@@ -106,6 +110,7 @@ export type GroupItem = CommonGroupItem & {
|
|
|
106
110
|
export type GroupSelectItem = CommonGroupItem & {
|
|
107
111
|
items: Item[];
|
|
108
112
|
type: 'group-select';
|
|
113
|
+
selectButtonLabel?: string;
|
|
109
114
|
|
|
110
115
|
id?: ItemId;
|
|
111
116
|
itemRef?: RefObject<HTMLElement>;
|
|
@@ -2,7 +2,7 @@ import { createRef } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { ITEM_PREFIXES } from '../../constants';
|
|
4
4
|
import { ItemContentProps } from '../../helperComponents';
|
|
5
|
-
import { getItemAutoId } from '../../
|
|
5
|
+
import { getItemAutoId } from '../../helpers';
|
|
6
6
|
import {
|
|
7
7
|
AccordionItem,
|
|
8
8
|
AnyType,
|
|
@@ -7,6 +7,7 @@ import { Scroll } from '@snack-uikit/scroll';
|
|
|
7
7
|
import { extractSupportProps } from '@snack-uikit/utils';
|
|
8
8
|
|
|
9
9
|
import { ListEmptyState, useEmptyState } from '../../../helperComponents';
|
|
10
|
+
import { stopPropagation } from '../../../utils';
|
|
10
11
|
import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
|
|
11
12
|
import { useNewListContext, useSelectionContext } from '../contexts';
|
|
12
13
|
import commonStyles from '../styles.module.scss';
|
|
@@ -209,7 +210,7 @@ export const ListPrivate = forwardRef(
|
|
|
209
210
|
{Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
|
|
210
211
|
|
|
211
212
|
{footer && (
|
|
212
|
-
<div className={styles.footer} onFocus={
|
|
213
|
+
<div className={styles.footer} onFocus={stopPropagation}>
|
|
213
214
|
{footer}
|
|
214
215
|
</div>
|
|
215
216
|
)}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { FocusEvent, forwardRef,
|
|
1
|
+
import { FocusEvent, forwardRef, RefObject, useCallback } from 'react';
|
|
2
2
|
|
|
3
|
+
import { stopPropagation } from '../../utils';
|
|
3
4
|
import styles from './styles.module.scss';
|
|
4
5
|
|
|
5
6
|
type HiddenTabButtonProps = {
|
|
@@ -20,16 +21,12 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
|
|
|
20
21
|
[listRef],
|
|
21
22
|
);
|
|
22
23
|
|
|
23
|
-
const handleKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {
|
|
24
|
-
e.stopPropagation();
|
|
25
|
-
}, []);
|
|
26
|
-
|
|
27
24
|
return (
|
|
28
25
|
<button
|
|
29
26
|
type='button'
|
|
30
27
|
aria-hidden
|
|
31
28
|
ref={ref}
|
|
32
|
-
onKeyDown={
|
|
29
|
+
onKeyDown={stopPropagation}
|
|
33
30
|
onFocus={handleFocus}
|
|
34
31
|
className={styles.hiddenBtn}
|
|
35
32
|
tabIndex={tabIndex}
|
|
@@ -6,6 +6,7 @@ import { useLocale } from '@snack-uikit/locale';
|
|
|
6
6
|
import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
|
|
7
7
|
|
|
8
8
|
import { useNewListContext } from '../../components/Lists/contexts';
|
|
9
|
+
import { stopPropagation } from '../../utils';
|
|
9
10
|
import { SELECT_BUTTON_SIZE_MAP } from './constants';
|
|
10
11
|
import styles from './styles.module.scss';
|
|
11
12
|
|
|
@@ -21,6 +22,7 @@ export type SeparatorProps = {
|
|
|
21
22
|
indeterminate?: boolean;
|
|
22
23
|
checked?: boolean;
|
|
23
24
|
itemRef?: ForwardedRef<HTMLElement>;
|
|
25
|
+
label?: string;
|
|
24
26
|
};
|
|
25
27
|
};
|
|
26
28
|
|
|
@@ -34,7 +36,7 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
|
|
|
34
36
|
return null;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
|
-
const { onClick, checked, itemRef } = selectButton;
|
|
39
|
+
const { onClick, checked, itemRef, label } = selectButton;
|
|
38
40
|
|
|
39
41
|
return (
|
|
40
42
|
<span className={styles.selectButton} data-size={size} data-weight={(divider && mode) || undefined}>
|
|
@@ -46,11 +48,9 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
|
|
|
46
48
|
e.preventDefault();
|
|
47
49
|
e.stopPropagation();
|
|
48
50
|
}}
|
|
49
|
-
onFocus={
|
|
50
|
-
e.stopPropagation();
|
|
51
|
-
}}
|
|
51
|
+
onFocus={stopPropagation}
|
|
52
52
|
ref={itemRef as RefObject<HTMLButtonElement>}
|
|
53
|
-
label={checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')}
|
|
53
|
+
label={label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select'))}
|
|
54
54
|
/>
|
|
55
55
|
</span>
|
|
56
56
|
);
|
package/src/helpers.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ItemId } from './components';
|
|
2
|
+
import { ITEM_PREFIXES } from './constants';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Возвращает id для элемента футера
|
|
6
|
+
* @function helper
|
|
7
|
+
*/
|
|
8
|
+
export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Возвращает id для элемента, подставляя перфикс
|
|
12
|
+
* @function helper
|
|
13
|
+
*/
|
|
14
|
+
export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Возвращает id для дефолтного элемента
|
|
18
|
+
* @function helper
|
|
19
|
+
*/
|
|
20
|
+
export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);
|
package/src/index.ts
CHANGED
package/src/utils.ts
CHANGED
|
@@ -1,20 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ITEM_PREFIXES } from './constants';
|
|
1
|
+
import { ReactEventHandler } from 'react';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Возвращает id для элемента, подставляя перфикс
|
|
12
|
-
* @function helper
|
|
13
|
-
*/
|
|
14
|
-
export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Возвращает id для дефолтного элемента
|
|
18
|
-
* @function helper
|
|
19
|
-
*/
|
|
20
|
-
export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);
|
|
3
|
+
export const stopPropagation: ReactEventHandler = e => {
|
|
4
|
+
e.stopPropagation();
|
|
5
|
+
};
|