@snack-uikit/list 0.26.4-preview-bc9ca5dd.0 → 0.27.0
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 +20 -0
- package/dist/cjs/components/Items/SearchItem/SearchItem.js +2 -4
- package/dist/cjs/components/Items/hooks.js +7 -7
- 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/SearchItem/SearchItem.js +2 -4
- package/dist/esm/components/Items/hooks.js +1 -1
- 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 +7 -7
- package/src/components/Items/SearchItem/SearchItem.tsx +3 -6
- package/src/components/Items/hooks.tsx +1 -1
- 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,26 @@
|
|
|
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.0 (2025-03-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PDS-1767:** custom label for clear all button in List ([ca00030](https://github.com/cloud-ru-tech/snack-uikit/commit/ca000303e274e371e540e8b23598c4dea6ac49e0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## 0.26.4 (2025-03-05)
|
|
18
|
+
|
|
19
|
+
### Only dependencies have been changed
|
|
20
|
+
* [@snack-uikit/truncate-string@0.6.13](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
## 0.26.3 (2025-03-04)
|
|
7
27
|
|
|
8
28
|
### Only dependencies have been changed
|
|
@@ -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: [],
|
|
@@ -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;
|
|
@@ -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';
|
|
@@ -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.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"@snack-uikit/button": "0.19.8",
|
|
40
40
|
"@snack-uikit/divider": "3.2.4",
|
|
41
41
|
"@snack-uikit/dropdown": "0.4.6",
|
|
42
|
-
"@snack-uikit/icons": "0.25.
|
|
43
|
-
"@snack-uikit/info-block": "0.6.
|
|
42
|
+
"@snack-uikit/icons": "0.25.1",
|
|
43
|
+
"@snack-uikit/info-block": "0.6.16",
|
|
44
44
|
"@snack-uikit/loaders": "0.9.2",
|
|
45
45
|
"@snack-uikit/scroll": "0.9.4",
|
|
46
|
-
"@snack-uikit/search-private": "0.4.
|
|
47
|
-
"@snack-uikit/toggles": "0.13.
|
|
48
|
-
"@snack-uikit/truncate-string": "0.6.13
|
|
46
|
+
"@snack-uikit/search-private": "0.4.12",
|
|
47
|
+
"@snack-uikit/toggles": "0.13.8",
|
|
48
|
+
"@snack-uikit/truncate-string": "0.6.13",
|
|
49
49
|
"@snack-uikit/utils": "3.8.0",
|
|
50
50
|
"@tanstack/react-virtual": "3.11.2",
|
|
51
51
|
"classnames": "2.5.1",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@snack-uikit/locale": "*"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "d8510c4d566cee9fd0e96ff969fdefb7fb11ac49"
|
|
58
58
|
}
|
|
@@ -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';
|
|
@@ -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
|
+
};
|