@alfalab/core-components-select 13.2.1 → 13.2.3
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/{Component-d956e288.d.ts → Component-01370e34.d.ts} +0 -0
- package/{Component-d956e288.js → Component-01370e34.js} +18 -18
- package/{Component-696851ef.d.ts → Component-8f5f4c7a.d.ts} +0 -0
- package/{Component-696851ef.js → Component-8f5f4c7a.js} +84 -84
- package/Component.d.ts +4 -26
- package/Component.js +12 -14
- package/Component.responsive.d.ts +19 -0
- package/Component.responsive.js +54 -0
- package/components/arrow/Component.js +5 -7
- package/components/arrow/index.css +3 -3
- package/components/arrow/index.js +1 -3
- package/components/base-checkmark/Component.js +7 -9
- package/components/base-checkmark/index.css +4 -4
- package/components/base-checkmark/index.js +2 -4
- package/components/base-option/Component.js +10 -12
- package/components/base-option/index.css +11 -11
- package/components/base-option/index.js +4 -6
- package/components/base-select/Component.js +3 -5
- package/components/base-select/index.css +7 -7
- package/components/base-select/index.d.ts +1 -1
- package/components/base-select/index.js +3 -5
- package/components/base-select-mobile/Component.js +25 -27
- package/components/base-select-mobile/checkmark/Component.js +7 -9
- package/components/base-select-mobile/checkmark/index.css +6 -6
- package/components/base-select-mobile/checkmark/index.js +1 -3
- package/components/base-select-mobile/index.css +11 -11
- package/components/base-select-mobile/index.d.ts +1 -1
- package/components/base-select-mobile/index.js +19 -21
- package/components/base-select-mobile/options-list/Component.js +14 -16
- package/components/base-select-mobile/options-list/index.css +9 -9
- package/components/base-select-mobile/options-list/index.js +4 -6
- package/components/checkmark/Component.js +8 -10
- package/components/checkmark/index.css +8 -8
- package/components/checkmark/index.js +2 -4
- package/components/field/Component.js +14 -16
- package/components/field/index.css +9 -9
- package/components/field/index.js +3 -5
- package/components/index.js +21 -23
- package/components/native-select/Component.js +7 -9
- package/components/native-select/index.js +2 -4
- package/components/optgroup/Component.js +7 -9
- package/components/optgroup/index.css +6 -6
- package/components/optgroup/index.js +1 -3
- package/components/option/Component.js +11 -13
- package/components/option/index.css +20 -20
- package/components/option/index.js +4 -6
- package/components/options-list/Component.js +15 -17
- package/components/options-list/index.css +6 -6
- package/components/options-list/index.js +4 -6
- package/components/select-mobile/Component.js +21 -23
- package/components/select-mobile/index.d.ts +1 -1
- package/components/select-mobile/index.js +19 -21
- package/components/select-modal-mobile/Component.js +21 -23
- package/components/select-modal-mobile/index.d.ts +1 -1
- package/components/select-modal-mobile/index.js +19 -21
- package/components/virtual-options-list/Component.js +17 -19
- package/components/virtual-options-list/index.css +12 -12
- package/components/virtual-options-list/index.js +4 -6
- package/cssm/{Component-a41f165e.d.ts → Component-88843cc2.d.ts} +0 -0
- package/cssm/{Component-a41f165e.js → Component-88843cc2.js} +88 -88
- package/cssm/{Component-f4dd589a.d.ts → Component-d0e84442.d.ts} +0 -0
- package/cssm/{Component-f4dd589a.js → Component-d0e84442.js} +18 -18
- package/cssm/Component.d.ts +4 -26
- package/cssm/Component.js +12 -14
- package/cssm/Component.responsive.d.ts +19 -0
- package/cssm/Component.responsive.js +70 -0
- package/cssm/components/arrow/Component.js +5 -7
- package/cssm/components/arrow/index.js +1 -3
- package/cssm/components/base-checkmark/Component.js +10 -12
- package/cssm/components/base-checkmark/index.js +2 -4
- package/cssm/components/base-option/Component.js +18 -20
- package/cssm/components/base-option/index.js +4 -6
- package/cssm/components/base-select/Component.js +3 -5
- package/cssm/components/base-select/index.d.ts +1 -1
- package/cssm/components/base-select/index.js +3 -5
- package/cssm/components/base-select-mobile/Component.js +31 -33
- package/cssm/components/base-select-mobile/checkmark/Component.js +8 -10
- package/cssm/components/base-select-mobile/checkmark/index.js +1 -3
- package/cssm/components/base-select-mobile/index.d.ts +1 -1
- package/cssm/components/base-select-mobile/index.js +25 -27
- package/cssm/components/base-select-mobile/options-list/Component.js +16 -18
- package/cssm/components/base-select-mobile/options-list/index.js +5 -7
- package/cssm/components/checkmark/Component.js +11 -13
- package/cssm/components/checkmark/index.js +2 -4
- package/cssm/components/field/Component.js +16 -18
- package/cssm/components/field/index.js +3 -5
- package/cssm/components/index.js +26 -28
- package/cssm/components/native-select/Component.js +7 -9
- package/cssm/components/native-select/index.js +2 -4
- package/cssm/components/optgroup/Component.js +7 -9
- package/cssm/components/optgroup/index.js +1 -3
- package/cssm/components/option/Component.js +16 -18
- package/cssm/components/option/index.js +4 -6
- package/cssm/components/options-list/Component.js +16 -18
- package/cssm/components/options-list/index.js +5 -7
- package/cssm/components/select-mobile/Component.js +28 -30
- package/cssm/components/select-mobile/index.d.ts +1 -1
- package/cssm/components/select-mobile/index.js +25 -27
- package/cssm/components/select-modal-mobile/Component.js +28 -30
- package/cssm/components/select-modal-mobile/index.d.ts +1 -1
- package/cssm/components/select-modal-mobile/index.js +25 -27
- package/cssm/components/virtual-options-list/Component.js +20 -22
- package/cssm/components/virtual-options-list/index.js +5 -7
- package/cssm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/cssm/index.js +37 -39
- package/cssm/{intersection-observer-8c55e13a.d.ts → intersection-observer-9ec5cf59.d.ts} +0 -0
- package/cssm/{intersection-observer-8c55e13a.js → intersection-observer-9ec5cf59.js} +0 -0
- package/cssm/presets/index.js +36 -38
- package/cssm/presets/useLazyLoading/hook.js +13 -15
- package/cssm/presets/useSelectWithApply/hook.js +31 -33
- package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.js +32 -34
- package/cssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/cssm/presets/useSelectWithApply/options-list-with-apply/index.js +25 -27
- package/cssm/presets/useSelectWithLoading/hook.js +12 -14
- package/cssm/responsive.d.ts +2 -0
- package/cssm/responsive.js +60 -0
- package/cssm/{tslib.es6-0857346e.d.ts → tslib.es6-0e9bf404.d.ts} +0 -0
- package/cssm/{tslib.es6-0857346e.js → tslib.es6-0e9bf404.js} +0 -0
- package/cssm/utils.js +1 -3
- package/esm/{Component-5f7d1f74.d.ts → Component-0b4ed6c1.d.ts} +0 -0
- package/esm/{Component-5f7d1f74.js → Component-0b4ed6c1.js} +71 -71
- package/esm/{Component-e500d89a.d.ts → Component-7af289a2.d.ts} +0 -0
- package/esm/{Component-e500d89a.js → Component-7af289a2.js} +6 -6
- package/esm/Component.d.ts +4 -26
- package/esm/Component.js +9 -9
- package/esm/Component.responsive.d.ts +19 -0
- package/esm/Component.responsive.js +48 -0
- package/esm/components/arrow/Component.js +1 -1
- package/esm/components/arrow/index.css +3 -3
- package/esm/components/arrow/index.js +1 -1
- package/esm/components/base-checkmark/Component.js +2 -2
- package/esm/components/base-checkmark/index.css +4 -4
- package/esm/components/base-checkmark/index.js +2 -2
- package/esm/components/base-option/Component.js +4 -4
- package/esm/components/base-option/index.css +11 -11
- package/esm/components/base-option/index.js +4 -4
- package/esm/components/base-select/Component.js +3 -3
- package/esm/components/base-select/index.css +7 -7
- package/esm/components/base-select/index.d.ts +1 -1
- package/esm/components/base-select/index.js +3 -3
- package/esm/components/base-select-mobile/Component.js +24 -24
- package/esm/components/base-select-mobile/checkmark/Component.js +1 -1
- package/esm/components/base-select-mobile/checkmark/index.css +6 -6
- package/esm/components/base-select-mobile/checkmark/index.js +1 -1
- package/esm/components/base-select-mobile/index.css +11 -11
- package/esm/components/base-select-mobile/index.d.ts +1 -1
- package/esm/components/base-select-mobile/index.js +18 -18
- package/esm/components/base-select-mobile/options-list/Component.js +4 -4
- package/esm/components/base-select-mobile/options-list/index.css +9 -9
- package/esm/components/base-select-mobile/options-list/index.js +4 -4
- package/esm/components/checkmark/Component.js +2 -2
- package/esm/components/checkmark/index.css +8 -8
- package/esm/components/checkmark/index.js +2 -2
- package/esm/components/field/Component.js +4 -4
- package/esm/components/field/index.css +9 -9
- package/esm/components/field/index.js +3 -3
- package/esm/components/index.js +19 -19
- package/esm/components/native-select/Component.js +1 -1
- package/esm/components/native-select/index.js +2 -2
- package/esm/components/optgroup/Component.js +1 -1
- package/esm/components/optgroup/index.css +6 -6
- package/esm/components/optgroup/index.js +1 -1
- package/esm/components/option/Component.js +4 -4
- package/esm/components/option/index.css +20 -20
- package/esm/components/option/index.js +4 -4
- package/esm/components/options-list/Component.js +4 -4
- package/esm/components/options-list/index.css +6 -6
- package/esm/components/options-list/index.js +4 -4
- package/esm/components/select-mobile/Component.js +20 -20
- package/esm/components/select-mobile/index.d.ts +1 -1
- package/esm/components/select-mobile/index.js +18 -18
- package/esm/components/select-modal-mobile/Component.js +20 -20
- package/esm/components/select-modal-mobile/index.d.ts +1 -1
- package/esm/components/select-modal-mobile/index.js +18 -18
- package/esm/components/virtual-options-list/Component.js +6 -6
- package/esm/components/virtual-options-list/index.css +12 -12
- package/esm/components/virtual-options-list/index.js +4 -4
- package/esm/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/esm/index.js +20 -20
- package/esm/{intersection-observer-3551ee02.d.ts → intersection-observer-64ad570b.d.ts} +0 -0
- package/esm/{intersection-observer-3551ee02.js → intersection-observer-64ad570b.js} +0 -0
- package/esm/presets/index.js +25 -25
- package/esm/presets/useLazyLoading/hook.js +8 -8
- package/esm/presets/useLazyLoading/index.css +2 -2
- package/esm/presets/useSelectWithApply/hook.js +23 -23
- package/esm/presets/useSelectWithApply/options-list-with-apply/Component.js +22 -22
- package/esm/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/index.js +18 -18
- package/esm/presets/useSelectWithLoading/hook.js +7 -7
- package/esm/presets/useSelectWithLoading/index.css +2 -2
- package/esm/responsive.d.ts +2 -0
- package/esm/responsive.js +38 -0
- package/esm/{tslib.es6-cba5aa0b.d.ts → tslib.es6-e195d064.d.ts} +0 -0
- package/esm/{tslib.es6-cba5aa0b.js → tslib.es6-e195d064.js} +0 -0
- package/esm/utils.js +1 -1
- package/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/index.js +32 -34
- package/{intersection-observer-54f0cbb3.d.ts → intersection-observer-1891d844.d.ts} +0 -0
- package/{intersection-observer-54f0cbb3.js → intersection-observer-1891d844.js} +0 -0
- package/modern/{Component-24030f26.d.ts → Component-631f295c.d.ts} +0 -0
- package/modern/{Component-24030f26.js → Component-631f295c.js} +2 -2
- package/modern/{Component-ef0fece1.d.ts → Component-f689c416.d.ts} +0 -0
- package/modern/{Component-ef0fece1.js → Component-f689c416.js} +71 -71
- package/modern/Component.d.ts +4 -26
- package/modern/Component.js +8 -8
- package/modern/Component.responsive.d.ts +19 -0
- package/modern/Component.responsive.js +46 -0
- package/modern/components/arrow/Component.js +1 -1
- package/modern/components/arrow/index.css +3 -3
- package/modern/components/arrow/index.js +1 -1
- package/modern/components/base-checkmark/Component.js +2 -2
- package/modern/components/base-checkmark/index.css +4 -4
- package/modern/components/base-checkmark/index.js +2 -2
- package/modern/components/base-option/Component.js +3 -3
- package/modern/components/base-option/index.css +11 -11
- package/modern/components/base-option/index.js +3 -3
- package/modern/components/base-select/Component.js +2 -2
- package/modern/components/base-select/index.css +7 -7
- package/modern/components/base-select/index.d.ts +1 -1
- package/modern/components/base-select/index.js +2 -2
- package/modern/components/base-select-mobile/Component.js +23 -23
- package/modern/components/base-select-mobile/checkmark/Component.js +1 -1
- package/modern/components/base-select-mobile/checkmark/index.css +6 -6
- package/modern/components/base-select-mobile/checkmark/index.js +1 -1
- package/modern/components/base-select-mobile/index.css +11 -11
- package/modern/components/base-select-mobile/index.d.ts +1 -1
- package/modern/components/base-select-mobile/index.js +17 -17
- package/modern/components/base-select-mobile/options-list/Component.js +3 -3
- package/modern/components/base-select-mobile/options-list/index.css +9 -9
- package/modern/components/base-select-mobile/options-list/index.js +3 -3
- package/modern/components/checkmark/Component.js +2 -2
- package/modern/components/checkmark/index.css +8 -8
- package/modern/components/checkmark/index.js +2 -2
- package/modern/components/field/Component.js +2 -2
- package/modern/components/field/index.css +9 -9
- package/modern/components/field/index.js +2 -2
- package/modern/components/index.js +18 -18
- package/modern/components/native-select/index.js +1 -1
- package/modern/components/optgroup/Component.js +1 -1
- package/modern/components/optgroup/index.css +6 -6
- package/modern/components/optgroup/index.js +1 -1
- package/modern/components/option/Component.js +3 -3
- package/modern/components/option/index.css +20 -20
- package/modern/components/option/index.js +3 -3
- package/modern/components/options-list/Component.js +3 -3
- package/modern/components/options-list/index.css +6 -6
- package/modern/components/options-list/index.js +3 -3
- package/modern/components/select-mobile/Component.js +19 -19
- package/modern/components/select-mobile/index.d.ts +1 -1
- package/modern/components/select-mobile/index.js +17 -17
- package/modern/components/select-modal-mobile/Component.js +19 -19
- package/modern/components/select-modal-mobile/index.d.ts +1 -1
- package/modern/components/select-modal-mobile/index.js +17 -17
- package/modern/components/virtual-options-list/Component.js +3 -3
- package/modern/components/virtual-options-list/index.css +12 -12
- package/modern/components/virtual-options-list/index.js +3 -3
- package/modern/getDataTestId-3fe0d3e6.d.ts +1 -1
- package/modern/index.js +19 -19
- package/modern/{intersection-observer-3551ee02.d.ts → intersection-observer-64ad570b.d.ts} +0 -0
- package/modern/{intersection-observer-3551ee02.js → intersection-observer-64ad570b.js} +0 -0
- package/modern/presets/index.js +24 -24
- package/modern/presets/useLazyLoading/hook.js +6 -6
- package/modern/presets/useLazyLoading/index.css +2 -2
- package/modern/presets/useSelectWithApply/hook.js +22 -22
- package/modern/presets/useSelectWithApply/options-list-with-apply/Component.js +21 -21
- package/modern/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/index.js +17 -17
- package/modern/presets/useSelectWithLoading/hook.js +5 -5
- package/modern/presets/useSelectWithLoading/index.css +2 -2
- package/modern/responsive.d.ts +2 -0
- package/modern/responsive.js +37 -0
- package/package.json +12 -12
- package/presets/index.js +27 -29
- package/presets/useLazyLoading/hook.js +12 -14
- package/presets/useLazyLoading/index.css +2 -2
- package/presets/useSelectWithApply/hook.js +25 -27
- package/presets/useSelectWithApply/options-list-with-apply/Component.js +23 -25
- package/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/index.js +19 -21
- package/presets/useSelectWithLoading/hook.js +11 -13
- package/presets/useSelectWithLoading/index.css +2 -2
- package/responsive.d.ts +2 -0
- package/responsive.js +44 -0
- package/{tslib.es6-ff15dcdb.d.ts → tslib.es6-84fcf750.d.ts} +0 -0
- package/{tslib.es6-ff15dcdb.js → tslib.es6-84fcf750.js} +0 -0
- package/utils.js +1 -3
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-ff15dcdb.js');
|
|
3
|
+
var tslib_es6 = require('../../tslib.es6-84fcf750.js');
|
|
6
4
|
var React = require('react');
|
|
5
|
+
var reactVirtual = require('react-virtual');
|
|
7
6
|
var cn = require('classnames');
|
|
7
|
+
var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
|
|
8
8
|
var hooks = require('@alfalab/hooks');
|
|
9
9
|
var utils = require('../../utils.js');
|
|
10
10
|
var components_optgroup_Component = require('../optgroup/Component.js');
|
|
11
|
-
var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
|
|
12
|
-
var reactVirtual = require('react-virtual');
|
|
13
11
|
|
|
14
|
-
function
|
|
12
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
13
|
|
|
16
|
-
var React__default = /*#__PURE__*/
|
|
17
|
-
var cn__default = /*#__PURE__*/
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
16
|
|
|
19
|
-
var styles = {"virtualOptionsList":"
|
|
17
|
+
var styles = {"virtualOptionsList":"select__virtualOptionsList_1rcxj","scrollable":"select__scrollable_1rcxj","inner":"select__inner_1rcxj","virtualRow":"select__virtualRow_1rcxj","highlighted":"select__highlighted_1rcxj","emptyPlaceholder":"select__emptyPlaceholder_1rcxj","l":"select__l_1rcxj","xl":"select__xl_1rcxj"};
|
|
20
18
|
require('./index.css')
|
|
21
19
|
|
|
22
20
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
@@ -94,7 +92,7 @@ var VirtualOptionsList = function (_a) {
|
|
|
94
92
|
}, [options]);
|
|
95
93
|
var contentNodeProps = {
|
|
96
94
|
className: styles.inner,
|
|
97
|
-
style: { height: rowVirtualizer.totalSize
|
|
95
|
+
style: { height: "".concat(rowVirtualizer.totalSize, "px") },
|
|
98
96
|
ref: listRef,
|
|
99
97
|
};
|
|
100
98
|
var renderList = function () {
|
|
@@ -102,22 +100,22 @@ var VirtualOptionsList = function (_a) {
|
|
|
102
100
|
var _a;
|
|
103
101
|
var option = flatOptions[virtualRow.index];
|
|
104
102
|
var group = options[groupStartIndexes[virtualRow.index]];
|
|
105
|
-
return (React__default
|
|
103
|
+
return (React__default.default.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn__default.default(styles.virtualRow, (_a = {},
|
|
106
104
|
_a[styles.highlighted] = highlightedIndex === virtualRow.index,
|
|
107
105
|
_a)), style: {
|
|
108
|
-
transform: "translateY("
|
|
106
|
+
transform: "translateY(".concat(virtualRow.start, "px)"),
|
|
109
107
|
} },
|
|
110
|
-
group && React__default
|
|
111
|
-
!utils.isGroup(option) && React__default
|
|
108
|
+
group && React__default.default.createElement(Optgroup, { label: group.label }),
|
|
109
|
+
!utils.isGroup(option) && React__default.default.createElement(Option, tslib_es6.__assign({}, getOptionProps(option, virtualRow.index)))));
|
|
112
110
|
});
|
|
113
111
|
};
|
|
114
|
-
var renderWithCustomScrollbar = function () { return (React__default
|
|
115
|
-
var renderWithNativeScrollbar = function () { return (React__default
|
|
116
|
-
React__default
|
|
117
|
-
return (React__default
|
|
112
|
+
var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: styles.scrollable, ref: scrollbarRef, scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
|
|
113
|
+
var renderWithNativeScrollbar = function () { return (React__default.default.createElement("div", { className: styles.scrollable, ref: parentRef, onScroll: onScroll },
|
|
114
|
+
React__default.default.createElement("div", tslib_es6.__assign({}, contentNodeProps), renderList()))); };
|
|
115
|
+
return (React__default.default.createElement("div", { className: cn__default.default(styles.virtualOptionsList, styles[size], className), "data-test-id": dataTestId },
|
|
118
116
|
header,
|
|
119
117
|
nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
|
|
120
|
-
emptyPlaceholder && options.length === 0 && (React__default
|
|
118
|
+
emptyPlaceholder && options.length === 0 && (React__default.default.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder)),
|
|
121
119
|
footer));
|
|
122
120
|
};
|
|
123
121
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: zjald */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-border-primary: #dbdee1;
|
|
4
4
|
--color-light-text-secondary: rgba(11, 31, 53, 0.7);
|
|
@@ -32,27 +32,27 @@
|
|
|
32
32
|
|
|
33
33
|
/* optgroup */
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.select__virtualOptionsList_1rcxj {
|
|
36
36
|
width: 100%;
|
|
37
37
|
outline: none;
|
|
38
38
|
box-sizing: border-box;
|
|
39
39
|
position: relative;
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.select__scrollable_1rcxj {
|
|
42
42
|
overflow: auto;
|
|
43
43
|
width: 100%;
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.select__inner_1rcxj {
|
|
46
46
|
position: relative;
|
|
47
47
|
width: 100%;
|
|
48
48
|
}
|
|
49
|
-
.
|
|
49
|
+
.select__virtualRow_1rcxj {
|
|
50
50
|
position: absolute;
|
|
51
51
|
top: 0;
|
|
52
52
|
left: 0;
|
|
53
53
|
width: 100%
|
|
54
54
|
}
|
|
55
|
-
.
|
|
55
|
+
.select__virtualRow_1rcxj:before {
|
|
56
56
|
content: '';
|
|
57
57
|
position: absolute;
|
|
58
58
|
z-index: 1;
|
|
@@ -63,18 +63,18 @@
|
|
|
63
63
|
background: var(--select-option-divider-background);
|
|
64
64
|
display: var(--select-option-divider-display);
|
|
65
65
|
}
|
|
66
|
-
.
|
|
66
|
+
.select__virtualRow_1rcxj:first-child:before {
|
|
67
67
|
display: none;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
70
|
-
.
|
|
69
|
+
.select__highlighted_1rcxj:before,
|
|
70
|
+
.select__highlighted_1rcxj + .select__virtualRow_1rcxj:before {
|
|
71
71
|
display: none;
|
|
72
72
|
}
|
|
73
|
-
.
|
|
73
|
+
.select__emptyPlaceholder_1rcxj {
|
|
74
74
|
padding: var(--gap-m) var(--gap-s);
|
|
75
75
|
color: var(--select-options-list-empty-placeholder-color);
|
|
76
76
|
}
|
|
77
|
-
.
|
|
78
|
-
.
|
|
77
|
+
.select__l_1rcxj .select__emptyPlaceholder_1rcxj,
|
|
78
|
+
.select__xl_1rcxj .select__emptyPlaceholder_1rcxj {
|
|
79
79
|
padding: var(--gap-xl) var(--gap-m);
|
|
80
80
|
}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
require('../../tslib.es6-ff15dcdb.js');
|
|
3
|
+
var components_virtualOptionsList_Component = require('./Component.js');
|
|
4
|
+
require('../../tslib.es6-84fcf750.js');
|
|
6
5
|
require('react');
|
|
6
|
+
require('react-virtual');
|
|
7
7
|
require('classnames');
|
|
8
|
+
require('@alfalab/core-components-scrollbar');
|
|
8
9
|
require('@alfalab/hooks');
|
|
9
10
|
require('../../utils.js');
|
|
10
11
|
require('../optgroup/Component.js');
|
|
11
|
-
require('@alfalab/core-components-scrollbar');
|
|
12
|
-
require('react-virtual');
|
|
13
|
-
var components_virtualOptionsList_Component = require('./Component.js');
|
|
14
12
|
|
|
15
13
|
|
|
16
14
|
|
|
File without changes
|
|
@@ -1,57 +1,100 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-0e9bf404.js');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var cn = require('classnames');
|
|
6
|
-
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
7
|
-
require('./components/arrow/index.module.css');
|
|
8
5
|
var components_arrow_Component = require('./components/arrow/Component.js');
|
|
9
6
|
var mergeRefs = require('react-merge-refs');
|
|
7
|
+
var cn = require('classnames');
|
|
10
8
|
var downshift = require('downshift');
|
|
9
|
+
var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet/cssm');
|
|
10
|
+
var mobile = require('@alfalab/core-components-modal/cssm/mobile');
|
|
11
|
+
require('./Component.js');
|
|
12
|
+
var components_baseSelect_Component = require('./Component-d0e84442.js');
|
|
13
|
+
var components_field_Component = require('./components/field/Component.js');
|
|
14
|
+
var components_optgroup_Component = require('./components/optgroup/Component.js');
|
|
15
|
+
var components_option_Component = require('./components/option/Component.js');
|
|
16
|
+
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
17
|
+
require('react-virtual');
|
|
18
|
+
require('@alfalab/core-components-scrollbar/cssm');
|
|
11
19
|
require('@alfalab/hooks');
|
|
12
|
-
var components_baseSelect_Component = require('./Component-f4dd589a.js');
|
|
13
20
|
var utils = require('./utils.js');
|
|
21
|
+
require('./components/virtual-options-list/index.module.css');
|
|
22
|
+
var components_baseOption_Component = require('./components/base-option/Component.js');
|
|
23
|
+
require('@alfalab/core-components-skeleton/cssm');
|
|
24
|
+
require('./presets/useSelectWithLoading/index.module.css');
|
|
25
|
+
require('./presets/useLazyLoading/index.module.css');
|
|
26
|
+
require('./intersection-observer-9ec5cf59.js');
|
|
27
|
+
var coreComponentsButton = require('@alfalab/core-components-button/cssm');
|
|
28
|
+
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
29
|
+
require('./components/arrow/index.module.css');
|
|
14
30
|
require('@alfalab/core-components-form-control/cssm');
|
|
15
31
|
require('./components/field/index.module.css');
|
|
16
|
-
var components_field_Component = require('./components/field/Component.js');
|
|
17
32
|
require('./components/optgroup/index.module.css');
|
|
18
|
-
var components_optgroup_Component = require('./components/optgroup/Component.js');
|
|
19
33
|
require('@alfalab/core-components/badge');
|
|
20
34
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
21
35
|
require('@alfalab/icons-glyph/CheckmarkMIcon');
|
|
22
36
|
require('./components/base-select-mobile/checkmark/index.module.css');
|
|
23
|
-
var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
|
|
24
37
|
require('@alfalab/core-components-checkbox/cssm');
|
|
25
38
|
require('./components/checkmark/index.module.css');
|
|
26
39
|
require('./components/option/index.module.css');
|
|
27
|
-
var components_option_Component = require('./components/option/Component.js');
|
|
28
|
-
require('@alfalab/core-components-scrollbar/cssm');
|
|
29
|
-
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
30
|
-
require('./Component.js');
|
|
31
|
-
var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet/cssm');
|
|
32
|
-
var mobile = require('@alfalab/core-components-modal/cssm/mobile');
|
|
33
|
-
var coreComponentsButton = require('@alfalab/core-components-button/cssm');
|
|
34
|
-
var styles = require('./presets/useSelectWithApply/options-list-with-apply/index.module.css');
|
|
35
40
|
require('./components/base-checkmark/index.module.css');
|
|
41
|
+
require('./components/base-option/index.module.css');
|
|
42
|
+
var styles = require('./presets/useSelectWithApply/options-list-with-apply/index.module.css');
|
|
36
43
|
var components_baseCheckmark_Component = require('./components/base-checkmark/Component.js');
|
|
44
|
+
var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
|
|
37
45
|
var components_baseSelectMobile_optionsList_Component = require('./components/base-select-mobile/options-list/Component.js');
|
|
38
46
|
var styles$1 = require('./components/base-select-mobile/index.module.css');
|
|
39
|
-
require('react-virtual');
|
|
40
|
-
require('./components/virtual-options-list/index.module.css');
|
|
41
|
-
require('./components/base-option/index.module.css');
|
|
42
|
-
var components_baseOption_Component = require('./components/base-option/Component.js');
|
|
43
|
-
require('@alfalab/core-components-skeleton/cssm');
|
|
44
|
-
require('./presets/useSelectWithLoading/index.module.css');
|
|
45
|
-
require('./presets/useLazyLoading/index.module.css');
|
|
46
|
-
require('./intersection-observer-8c55e13a.js');
|
|
47
47
|
|
|
48
|
-
function
|
|
48
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
49
49
|
|
|
50
|
-
var React__default = /*#__PURE__*/
|
|
51
|
-
var
|
|
52
|
-
var
|
|
53
|
-
var styles__default = /*#__PURE__*/
|
|
54
|
-
var styles__default$1 = /*#__PURE__*/
|
|
50
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
51
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
52
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
53
|
+
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
54
|
+
var styles__default$1 = /*#__PURE__*/_interopDefaultCompat(styles$1);
|
|
55
|
+
|
|
56
|
+
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
57
|
+
var _b;
|
|
58
|
+
var toggleMenu = _a.toggleMenu, _c = _a.OptionsList, OptionsList = _c === void 0 ? components_optionsList_Component.OptionsList : _c, defaultGetOptionProps = _a.getOptionProps, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.selectedDraft, selectedDraft = _e === void 0 ? [] : _e, _f = _a.flatOptions, flatOptions = _f === void 0 ? [] : _f, _g = _a.onApply, onApply = _g === void 0 ? function () { return null; } : _g, _h = _a.onClear, onClear = _h === void 0 ? function () { return null; } : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return null; } : _j, _k = _a.visibleOptions, visibleOptions = _k === void 0 ? 5 : _k, restProps = tslib_es6.__rest(_a, ["toggleMenu", "OptionsList", "getOptionProps", "showClear", "selectedDraft", "flatOptions", "onApply", "onClear", "onClose", "visibleOptions"]);
|
|
59
|
+
var footerRef = React.useRef(null);
|
|
60
|
+
var getOptionProps = React.useCallback(function (option, index) {
|
|
61
|
+
var optionProps = defaultGetOptionProps(option, index);
|
|
62
|
+
var selected = option.key === SELECT_ALL_KEY
|
|
63
|
+
? selectedDraft.length === flatOptions.length - 1
|
|
64
|
+
: selectedDraft.includes(option);
|
|
65
|
+
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
66
|
+
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
67
|
+
var handleApply = React.useCallback(function () {
|
|
68
|
+
onApply();
|
|
69
|
+
toggleMenu();
|
|
70
|
+
}, [onApply, toggleMenu]);
|
|
71
|
+
var handleClear = React.useCallback(function () {
|
|
72
|
+
onClear();
|
|
73
|
+
toggleMenu();
|
|
74
|
+
}, [onClear, toggleMenu]);
|
|
75
|
+
React.useEffect(function () {
|
|
76
|
+
var activeElement = document.activeElement;
|
|
77
|
+
setTimeout(function () {
|
|
78
|
+
if (footerRef.current) {
|
|
79
|
+
footerRef.current.focus();
|
|
80
|
+
}
|
|
81
|
+
}, 0);
|
|
82
|
+
return function () {
|
|
83
|
+
onClose();
|
|
84
|
+
if (activeElement) {
|
|
85
|
+
activeElement.focus();
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
89
|
+
}, []);
|
|
90
|
+
return (React__default.default.createElement(OptionsList, tslib_es6.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, footer: React__default.default.createElement("div", {
|
|
91
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
92
|
+
tabIndex: 0, className: cn__default.default(styles__default.default.footer, (_b = {},
|
|
93
|
+
_b[styles__default.default.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
94
|
+
_b)), ref: footerRef },
|
|
95
|
+
React__default.default.createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
96
|
+
showClear && (React__default.default.createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
97
|
+
});
|
|
55
98
|
|
|
56
99
|
var SELECT_ALL_KEY = 'select_all';
|
|
57
100
|
var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
@@ -118,49 +161,6 @@ function useSelectWithApply(_a) {
|
|
|
118
161
|
};
|
|
119
162
|
}
|
|
120
163
|
|
|
121
|
-
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
122
|
-
var _b;
|
|
123
|
-
var toggleMenu = _a.toggleMenu, _c = _a.OptionsList, OptionsList = _c === void 0 ? components_optionsList_Component.OptionsList : _c, defaultGetOptionProps = _a.getOptionProps, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.selectedDraft, selectedDraft = _e === void 0 ? [] : _e, _f = _a.flatOptions, flatOptions = _f === void 0 ? [] : _f, _g = _a.onApply, onApply = _g === void 0 ? function () { return null; } : _g, _h = _a.onClear, onClear = _h === void 0 ? function () { return null; } : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return null; } : _j, _k = _a.visibleOptions, visibleOptions = _k === void 0 ? 5 : _k, restProps = tslib_es6.__rest(_a, ["toggleMenu", "OptionsList", "getOptionProps", "showClear", "selectedDraft", "flatOptions", "onApply", "onClear", "onClose", "visibleOptions"]);
|
|
124
|
-
var footerRef = React.useRef(null);
|
|
125
|
-
var getOptionProps = React.useCallback(function (option, index) {
|
|
126
|
-
var optionProps = defaultGetOptionProps(option, index);
|
|
127
|
-
var selected = option.key === SELECT_ALL_KEY
|
|
128
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
129
|
-
: selectedDraft.includes(option);
|
|
130
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
131
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
132
|
-
var handleApply = React.useCallback(function () {
|
|
133
|
-
onApply();
|
|
134
|
-
toggleMenu();
|
|
135
|
-
}, [onApply, toggleMenu]);
|
|
136
|
-
var handleClear = React.useCallback(function () {
|
|
137
|
-
onClear();
|
|
138
|
-
toggleMenu();
|
|
139
|
-
}, [onClear, toggleMenu]);
|
|
140
|
-
React.useEffect(function () {
|
|
141
|
-
var activeElement = document.activeElement;
|
|
142
|
-
setTimeout(function () {
|
|
143
|
-
if (footerRef.current) {
|
|
144
|
-
footerRef.current.focus();
|
|
145
|
-
}
|
|
146
|
-
}, 0);
|
|
147
|
-
return function () {
|
|
148
|
-
onClose();
|
|
149
|
-
if (activeElement) {
|
|
150
|
-
activeElement.focus();
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
154
|
-
}, []);
|
|
155
|
-
return (React__default['default'].createElement(OptionsList, tslib_es6.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, footer: React__default['default'].createElement("div", {
|
|
156
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
157
|
-
tabIndex: 0, className: cn__default['default'](styles__default['default'].footer, (_b = {},
|
|
158
|
-
_b[styles__default['default'].withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
159
|
-
_b)), ref: footerRef },
|
|
160
|
-
React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
161
|
-
showClear && (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
162
|
-
});
|
|
163
|
-
|
|
164
164
|
var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
165
165
|
var _b;
|
|
166
166
|
var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.defaultOpen, defaultOpen = _j === void 0 ? false : _j, openProp = _a.open, name = _a.name, id = _a.id, selected = _a.selected, _k = _a.size, size = _k === void 0 ? 'm' : _k, _l = _a.optionsSize, optionsSize = _l === void 0 ? 'm' : _l, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _m = _a.fieldProps, fieldProps = _m === void 0 ? {} : _m, _o = _a.optionProps, optionProps = _o === void 0 ? {} : _o, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, _p = _a.Arrow, Arrow = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.OptionsList, OptionsList = _t === void 0 ? components_baseSelectMobile_optionsList_Component.OptionsList : _t, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps;
|
|
@@ -264,7 +264,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
264
264
|
},
|
|
265
265
|
}), open = _x.isOpen, getMenuProps = _x.getMenuProps, getInputProps = _x.getInputProps, getItemProps = _x.getItemProps, getComboboxProps = _x.getComboboxProps, getLabelProps = _x.getLabelProps, highlightedIndex = _x.highlightedIndex, toggleMenu = _x.toggleMenu, openMenu = _x.openMenu;
|
|
266
266
|
var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
|
|
267
|
-
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default
|
|
267
|
+
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
|
|
268
268
|
React.useEffect(function () {
|
|
269
269
|
setSelectedDraft(selectedOptions);
|
|
270
270
|
setSelectedItems(selectedOptions);
|
|
@@ -303,7 +303,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
303
303
|
};
|
|
304
304
|
var getOptionProps = function (option, index) {
|
|
305
305
|
var selectedItem = selectedItems.includes(option);
|
|
306
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { mobile: true, className: cn__default
|
|
306
|
+
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { mobile: true, className: cn__default.default(styles__default$1.default.option, optionClassName), innerProps: getItemProps({
|
|
307
307
|
index: index,
|
|
308
308
|
item: option,
|
|
309
309
|
disabled: option.disabled,
|
|
@@ -311,7 +311,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
311
311
|
}), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItem, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'option'),
|
|
312
312
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
313
313
|
Checkmark: function () {
|
|
314
|
-
return Option === components_baseOption_Component.BaseOption ? (React__default
|
|
314
|
+
return Option === components_baseOption_Component.BaseOption ? (React__default.default.createElement(components_baseCheckmark_Component.BaseCheckmark, { selected: selectedItem, multiple: multiple })) : (React__default.default.createElement(components_baseSelectMobile_checkmark_Component.Checkmark, { selected: selectedItem }));
|
|
315
315
|
} });
|
|
316
316
|
};
|
|
317
317
|
React.useEffect(function () {
|
|
@@ -325,7 +325,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
325
325
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
326
326
|
}, []);
|
|
327
327
|
var renderValue = function () {
|
|
328
|
-
return selectedItems.map(function (option) { return (React__default
|
|
328
|
+
return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
|
|
329
329
|
};
|
|
330
330
|
var handleApply = function () {
|
|
331
331
|
setSelectedDraft(selectedItems);
|
|
@@ -340,12 +340,12 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
340
340
|
}
|
|
341
341
|
toggleMenu();
|
|
342
342
|
};
|
|
343
|
-
return (React__default
|
|
344
|
-
React__default
|
|
343
|
+
return (React__default.default.createElement("div", tslib_es6.__assign({}, getComboboxProps(tslib_es6.__assign(tslib_es6.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles__default$1.default.component, (_b = {}, _b[styles__default$1.default.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": components_baseSelect_Component.getDataTestId(dataTestId) }),
|
|
344
|
+
React__default.default.createElement(Field, tslib_es6.__assign({ selectedMultiple: selectedDraft, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib_es6.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
|
|
345
345
|
onFocus: disabled ? undefined : handleFieldFocus,
|
|
346
346
|
onClick: disabled ? undefined : handleFieldClick,
|
|
347
347
|
tabIndex: disabled ? -1 : 0,
|
|
348
|
-
ref: mergeRefs__default
|
|
348
|
+
ref: mergeRefs__default.default([inputProps.ref]),
|
|
349
349
|
id: inputProps.id,
|
|
350
350
|
'aria-labelledby': inputProps['aria-labelledby'],
|
|
351
351
|
'aria-controls': inputProps['aria-controls'],
|
|
@@ -354,22 +354,22 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
354
354
|
: undefined,
|
|
355
355
|
}, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'field') }, fieldProps)),
|
|
356
356
|
name && renderValue(),
|
|
357
|
-
isBottomSheet ? (React__default
|
|
358
|
-
React__default
|
|
359
|
-
React__default
|
|
360
|
-
React__default
|
|
361
|
-
React__default
|
|
362
|
-
React__default
|
|
357
|
+
isBottomSheet ? (React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, tslib_es6.__assign({ open: open, onClose: handleClose, className: styles__default$1.default.sheet, contentClassName: styles__default$1.default.sheetContent, containerClassName: styles__default$1.default.sheetContainer, title: placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable }, bottomSheetProps),
|
|
358
|
+
React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
|
|
359
|
+
React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, contentClassName: styles__default$1.default.sheetContent, hasCloser: true },
|
|
360
|
+
React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true }),
|
|
361
|
+
React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
|
|
362
|
+
React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
|
|
363
363
|
});
|
|
364
364
|
|
|
365
365
|
var SelectMobile = React.forwardRef(function (_a, ref) {
|
|
366
366
|
var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 'm' : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 'm' : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.Arrow, Arrow = _o === void 0 ? components_arrow_Component.Arrow : _o, _p = _a.Field, Field = _p === void 0 ? components_field_Component.Field : _p, _q = _a.Optgroup, Optgroup = _q === void 0 ? components_optgroup_Component.Optgroup : _q, _r = _a.Option, Option = _r === void 0 ? components_option_Component.Option : _r, restProps = tslib_es6.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "Arrow", "Field", "Optgroup", "Option"]);
|
|
367
|
-
return (React__default
|
|
367
|
+
return (React__default.default.createElement(BaseSelectMobile, tslib_es6.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: fieldProps, optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: true }, restProps)));
|
|
368
368
|
});
|
|
369
369
|
|
|
370
370
|
var SelectModalMobile = React.forwardRef(function (_a, ref) {
|
|
371
371
|
var _b = _a.autocomplete, autocomplete = _b === void 0 ? false : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.allowUnselect, allowUnselect = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.closeOnSelect, closeOnSelect = _f === void 0 ? !multiple : _f, _g = _a.circularNavigation, circularNavigation = _g === void 0 ? false : _g, _h = _a.defaultOpen, defaultOpen = _h === void 0 ? false : _h, openProp = _a.open, _j = _a.size, size = _j === void 0 ? 'm' : _j, _k = _a.optionsSize, optionsSize = _k === void 0 ? 'm' : _k, _l = _a.fieldProps, fieldProps = _l === void 0 ? {} : _l, _m = _a.optionProps, optionProps = _m === void 0 ? {} : _m, _o = _a.Arrow, Arrow = _o === void 0 ? components_arrow_Component.Arrow : _o, _p = _a.Field, Field = _p === void 0 ? components_field_Component.Field : _p, _q = _a.Optgroup, Optgroup = _q === void 0 ? components_optgroup_Component.Optgroup : _q, _r = _a.Option, Option = _r === void 0 ? components_option_Component.Option : _r, restProps = tslib_es6.__rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "Arrow", "Field", "Optgroup", "Option"]);
|
|
372
|
-
return (React__default
|
|
372
|
+
return (React__default.default.createElement(BaseSelectMobile, tslib_es6.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: fieldProps, optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: false }, restProps)));
|
|
373
373
|
});
|
|
374
374
|
|
|
375
375
|
exports.BaseSelectMobile = BaseSelectMobile;
|
|
File without changes
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-0e9bf404.js');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var cn = require('classnames');
|
|
6
5
|
var mergeRefs = require('react-merge-refs');
|
|
7
6
|
var resizeObserver = require('@juggle/resize-observer');
|
|
7
|
+
var cn = require('classnames');
|
|
8
8
|
var downshift = require('downshift');
|
|
9
9
|
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
10
10
|
var hooks = require('@alfalab/hooks');
|
|
@@ -12,16 +12,16 @@ var utils = require('./utils.js');
|
|
|
12
12
|
var components_nativeSelect_Component = require('./components/native-select/Component.js');
|
|
13
13
|
var styles = require('./components/base-select/index.module.css');
|
|
14
14
|
|
|
15
|
-
function
|
|
15
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
16
16
|
|
|
17
|
-
var React__default = /*#__PURE__*/
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var styles__default = /*#__PURE__*/
|
|
17
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
18
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
19
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
20
|
+
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
21
21
|
|
|
22
22
|
var getDataTestId = function (dataTestId, element) {
|
|
23
|
-
var elementPart = element ? "-"
|
|
24
|
-
return dataTestId ? ""
|
|
23
|
+
var elementPart = element ? "-".concat(element.toLowerCase()) : '';
|
|
24
|
+
return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
@@ -116,7 +116,7 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
116
116
|
},
|
|
117
117
|
}), open = _1.isOpen, getMenuProps = _1.getMenuProps, getInputProps = _1.getInputProps, getItemProps = _1.getItemProps, getComboboxProps = _1.getComboboxProps, getLabelProps = _1.getLabelProps, highlightedIndex = _1.highlightedIndex, toggleMenu = _1.toggleMenu, openMenu = _1.openMenu;
|
|
118
118
|
var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
|
|
119
|
-
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default
|
|
119
|
+
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
|
|
120
120
|
var handleFieldFocus = function (event) {
|
|
121
121
|
if (onFocus)
|
|
122
122
|
onFocus(event);
|
|
@@ -195,7 +195,7 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
195
195
|
? rootRef.current.getBoundingClientRect().width
|
|
196
196
|
: 0;
|
|
197
197
|
listRef.current.setAttribute('style', '');
|
|
198
|
-
listRef.current.style[widthAttr] = optionsListMinWidth
|
|
198
|
+
listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
|
|
199
199
|
}
|
|
200
200
|
}, [optionsListWidth]);
|
|
201
201
|
React.useEffect(function () {
|
|
@@ -215,23 +215,23 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
215
215
|
selectedItems,
|
|
216
216
|
]);
|
|
217
217
|
var renderValue = React.useCallback(function () {
|
|
218
|
-
return selectedItems.map(function (option) { return (React__default
|
|
218
|
+
return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
|
|
219
219
|
}, [selectedItems, name]);
|
|
220
220
|
var renderNativeSelect = React.useCallback(function () {
|
|
221
221
|
var value = multiple
|
|
222
222
|
? selectedItems.map(function (option) { return option.key; })
|
|
223
223
|
: (selectedItems[0] || {}).key;
|
|
224
|
-
return (React__default
|
|
224
|
+
return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib_es6.__assign({}, menuProps, { className: styles__default.default.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options })));
|
|
225
225
|
}, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
|
|
226
226
|
var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
|
|
227
|
-
return (React__default
|
|
227
|
+
return (React__default.default.createElement("div", tslib_es6.__assign({}, getComboboxProps(tslib_es6.__assign(tslib_es6.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
|
|
228
228
|
nativeSelect && renderNativeSelect(),
|
|
229
|
-
React__default
|
|
229
|
+
React__default.default.createElement(Field, tslib_es6.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib_es6.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
|
|
230
230
|
onBlur: handleFieldBlur,
|
|
231
231
|
onFocus: disabled ? undefined : handleFieldFocus,
|
|
232
232
|
onClick: disabled ? undefined : handleFieldClick,
|
|
233
233
|
tabIndex: nativeSelect || disabled ? -1 : 0,
|
|
234
|
-
ref: mergeRefs__default
|
|
234
|
+
ref: mergeRefs__default.default([inputProps.ref]),
|
|
235
235
|
id: inputProps.id,
|
|
236
236
|
'aria-labelledby': inputProps['aria-labelledby'],
|
|
237
237
|
'aria-controls': inputProps['aria-controls'],
|
|
@@ -240,8 +240,8 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
240
240
|
: undefined,
|
|
241
241
|
}, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
|
|
242
242
|
name && !nativeSelect && renderValue(),
|
|
243
|
-
!nativeSelect && (React__default
|
|
244
|
-
React__default
|
|
243
|
+
!nativeSelect && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles__default.default.optionsList) }),
|
|
244
|
+
React__default.default.createElement(OptionsList, tslib_es6.__assign({}, optionsListProps, { optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: options, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list') }))))))));
|
|
245
245
|
});
|
|
246
246
|
|
|
247
247
|
exports.BaseSelect = BaseSelect;
|
package/cssm/Component.d.ts
CHANGED
|
@@ -84,39 +84,17 @@ type FormControlProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
84
84
|
*/
|
|
85
85
|
children?: ReactNode;
|
|
86
86
|
};
|
|
87
|
+
type SelectFieldProps = FormControlProps & Record<string, unknown>;
|
|
87
88
|
type SelectProps = Omit<BaseSelectProps, 'fieldProps'> & {
|
|
88
89
|
/**
|
|
89
90
|
* Пропсы, которые будут прокинуты в компонент поля
|
|
90
91
|
*/
|
|
91
|
-
fieldProps?:
|
|
92
|
+
fieldProps?: SelectFieldProps;
|
|
92
93
|
};
|
|
93
94
|
declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
|
|
94
95
|
/**
|
|
95
96
|
* Пропсы, которые будут прокинуты в компонент поля
|
|
96
97
|
*/
|
|
97
|
-
fieldProps?:
|
|
98
|
-
block?: boolean | undefined;
|
|
99
|
-
size?: "s" | "m" | "l" | "xl" | undefined;
|
|
100
|
-
colors?: "default" | "inverted" | undefined; /**
|
|
101
|
-
* Пропсы, которые будут прокинуты в компонент поля
|
|
102
|
-
*/
|
|
103
|
-
disabled?: boolean | undefined;
|
|
104
|
-
readOnly?: boolean | undefined;
|
|
105
|
-
filled?: boolean | undefined;
|
|
106
|
-
focused?: boolean | undefined;
|
|
107
|
-
error?: React.ReactNode;
|
|
108
|
-
hint?: React.ReactNode;
|
|
109
|
-
label?: React.ReactNode;
|
|
110
|
-
labelView?: "inner" | "outer" | undefined;
|
|
111
|
-
leftAddons?: React.ReactNode;
|
|
112
|
-
rightAddons?: React.ReactNode;
|
|
113
|
-
bottomAddons?: React.ReactNode;
|
|
114
|
-
className?: string | undefined;
|
|
115
|
-
fieldClassName?: string | undefined;
|
|
116
|
-
labelClassName?: string | undefined;
|
|
117
|
-
addonsClassName?: string | undefined;
|
|
118
|
-
dataTestId?: string | undefined;
|
|
119
|
-
children?: React.ReactNode;
|
|
120
|
-
} & Record<string, unknown>) | undefined;
|
|
98
|
+
fieldProps?: SelectFieldProps | undefined;
|
|
121
99
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
122
|
-
export { SelectProps, Select };
|
|
100
|
+
export { SelectFieldProps, SelectProps, Select };
|