@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
|
File without changes
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-84fcf750.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');
|
|
10
10
|
var hooks = require('@alfalab/hooks');
|
|
11
11
|
var utils = require('./utils.js');
|
|
12
12
|
var components_nativeSelect_Component = require('./components/native-select/Component.js');
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
15
|
|
|
16
|
-
var React__default = /*#__PURE__*/
|
|
17
|
-
var
|
|
18
|
-
var
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
18
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
19
19
|
|
|
20
20
|
var getDataTestId = function (dataTestId, element) {
|
|
21
|
-
var elementPart = element ? "-"
|
|
22
|
-
return dataTestId ? ""
|
|
21
|
+
var elementPart = element ? "-".concat(element.toLowerCase()) : '';
|
|
22
|
+
return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
var styles = {"component":"
|
|
25
|
+
var styles = {"component":"select__component_1r4kz","popoverInner":"select__popoverInner_1r4kz","optionsList":"select__optionsList_1r4kz","nativeSelect":"select__nativeSelect_1r4kz","block":"select__block_1r4kz"};
|
|
26
26
|
require('./components/base-select/index.css')
|
|
27
27
|
|
|
28
28
|
var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
@@ -117,7 +117,7 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
117
117
|
},
|
|
118
118
|
}), 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;
|
|
119
119
|
var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
|
|
120
|
-
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default
|
|
120
|
+
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
|
|
121
121
|
var handleFieldFocus = function (event) {
|
|
122
122
|
if (onFocus)
|
|
123
123
|
onFocus(event);
|
|
@@ -196,7 +196,7 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
196
196
|
? rootRef.current.getBoundingClientRect().width
|
|
197
197
|
: 0;
|
|
198
198
|
listRef.current.setAttribute('style', '');
|
|
199
|
-
listRef.current.style[widthAttr] = optionsListMinWidth
|
|
199
|
+
listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
|
|
200
200
|
}
|
|
201
201
|
}, [optionsListWidth]);
|
|
202
202
|
React.useEffect(function () {
|
|
@@ -216,23 +216,23 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
216
216
|
selectedItems,
|
|
217
217
|
]);
|
|
218
218
|
var renderValue = React.useCallback(function () {
|
|
219
|
-
return selectedItems.map(function (option) { return (React__default
|
|
219
|
+
return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
|
|
220
220
|
}, [selectedItems, name]);
|
|
221
221
|
var renderNativeSelect = React.useCallback(function () {
|
|
222
222
|
var value = multiple
|
|
223
223
|
? selectedItems.map(function (option) { return option.key; })
|
|
224
224
|
: (selectedItems[0] || {}).key;
|
|
225
|
-
return (React__default
|
|
225
|
+
return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib_es6.__assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options })));
|
|
226
226
|
}, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
|
|
227
227
|
var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
|
|
228
|
-
return (React__default
|
|
228
|
+
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.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
|
|
229
229
|
nativeSelect && renderNativeSelect(),
|
|
230
|
-
React__default
|
|
230
|
+
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: {
|
|
231
231
|
onBlur: handleFieldBlur,
|
|
232
232
|
onFocus: disabled ? undefined : handleFieldFocus,
|
|
233
233
|
onClick: disabled ? undefined : handleFieldClick,
|
|
234
234
|
tabIndex: nativeSelect || disabled ? -1 : 0,
|
|
235
|
-
ref: mergeRefs__default
|
|
235
|
+
ref: mergeRefs__default.default([inputProps.ref]),
|
|
236
236
|
id: inputProps.id,
|
|
237
237
|
'aria-labelledby': inputProps['aria-labelledby'],
|
|
238
238
|
'aria-controls': inputProps['aria-controls'],
|
|
@@ -241,8 +241,8 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
|
|
|
241
241
|
: undefined,
|
|
242
242
|
}, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
|
|
243
243
|
name && !nativeSelect && renderValue(),
|
|
244
|
-
!nativeSelect && (React__default
|
|
245
|
-
React__default
|
|
244
|
+
!nativeSelect && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles.optionsList) }),
|
|
245
|
+
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') }))))))));
|
|
246
246
|
});
|
|
247
247
|
|
|
248
248
|
exports.BaseSelect = BaseSelect;
|
|
File without changes
|
|
@@ -1,42 +1,88 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-84fcf750.js');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var cn = require('classnames');
|
|
6
|
-
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
7
5
|
var components_arrow_Component = require('./components/arrow/Component.js');
|
|
8
6
|
var mergeRefs = require('react-merge-refs');
|
|
7
|
+
var cn = require('classnames');
|
|
9
8
|
var downshift = require('downshift');
|
|
9
|
+
var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet');
|
|
10
|
+
var mobile = require('@alfalab/core-components-modal/mobile');
|
|
11
|
+
require('./Component.js');
|
|
12
|
+
var components_baseSelect_Component = require('./Component-01370e34.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');
|
|
10
19
|
require('@alfalab/hooks');
|
|
11
|
-
var components_baseSelect_Component = require('./Component-d956e288.js');
|
|
12
20
|
var utils = require('./utils.js');
|
|
21
|
+
var components_baseOption_Component = require('./components/base-option/Component.js');
|
|
22
|
+
require('@alfalab/core-components-skeleton');
|
|
23
|
+
require('./intersection-observer-1891d844.js');
|
|
24
|
+
var coreComponentsButton = require('@alfalab/core-components-button');
|
|
25
|
+
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
13
26
|
require('@alfalab/core-components-form-control');
|
|
14
|
-
var components_field_Component = require('./components/field/Component.js');
|
|
15
|
-
var components_optgroup_Component = require('./components/optgroup/Component.js');
|
|
16
27
|
require('@alfalab/core-components/badge');
|
|
17
28
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
18
29
|
require('@alfalab/icons-glyph/CheckmarkMIcon');
|
|
19
|
-
var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
|
|
20
30
|
require('@alfalab/core-components-checkbox');
|
|
21
|
-
var components_option_Component = require('./components/option/Component.js');
|
|
22
|
-
require('@alfalab/core-components-scrollbar');
|
|
23
|
-
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
24
|
-
require('./Component.js');
|
|
25
|
-
var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet');
|
|
26
|
-
var mobile = require('@alfalab/core-components-modal/mobile');
|
|
27
|
-
var coreComponentsButton = require('@alfalab/core-components-button');
|
|
28
31
|
var components_baseCheckmark_Component = require('./components/base-checkmark/Component.js');
|
|
32
|
+
var components_baseSelectMobile_checkmark_Component = require('./components/base-select-mobile/checkmark/Component.js');
|
|
29
33
|
var components_baseSelectMobile_optionsList_Component = require('./components/base-select-mobile/options-list/Component.js');
|
|
30
|
-
require('react-virtual');
|
|
31
|
-
var components_baseOption_Component = require('./components/base-option/Component.js');
|
|
32
|
-
require('@alfalab/core-components-skeleton');
|
|
33
|
-
require('./intersection-observer-54f0cbb3.js');
|
|
34
34
|
|
|
35
|
-
function
|
|
35
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
36
36
|
|
|
37
|
-
var React__default = /*#__PURE__*/
|
|
38
|
-
var
|
|
39
|
-
var
|
|
37
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
38
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
39
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
40
|
+
|
|
41
|
+
var styles$1 = {"footer":"select__footer_n6ake","withBorder":"select__withBorder_n6ake"};
|
|
42
|
+
require('./presets/useSelectWithApply/options-list-with-apply/index.css')
|
|
43
|
+
|
|
44
|
+
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
45
|
+
var _b;
|
|
46
|
+
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"]);
|
|
47
|
+
var footerRef = React.useRef(null);
|
|
48
|
+
var getOptionProps = React.useCallback(function (option, index) {
|
|
49
|
+
var optionProps = defaultGetOptionProps(option, index);
|
|
50
|
+
var selected = option.key === SELECT_ALL_KEY
|
|
51
|
+
? selectedDraft.length === flatOptions.length - 1
|
|
52
|
+
: selectedDraft.includes(option);
|
|
53
|
+
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
54
|
+
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
55
|
+
var handleApply = React.useCallback(function () {
|
|
56
|
+
onApply();
|
|
57
|
+
toggleMenu();
|
|
58
|
+
}, [onApply, toggleMenu]);
|
|
59
|
+
var handleClear = React.useCallback(function () {
|
|
60
|
+
onClear();
|
|
61
|
+
toggleMenu();
|
|
62
|
+
}, [onClear, toggleMenu]);
|
|
63
|
+
React.useEffect(function () {
|
|
64
|
+
var activeElement = document.activeElement;
|
|
65
|
+
setTimeout(function () {
|
|
66
|
+
if (footerRef.current) {
|
|
67
|
+
footerRef.current.focus();
|
|
68
|
+
}
|
|
69
|
+
}, 0);
|
|
70
|
+
return function () {
|
|
71
|
+
onClose();
|
|
72
|
+
if (activeElement) {
|
|
73
|
+
activeElement.focus();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
+
}, []);
|
|
78
|
+
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", {
|
|
79
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
80
|
+
tabIndex: 0, className: cn__default.default(styles$1.footer, (_b = {},
|
|
81
|
+
_b[styles$1.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
82
|
+
_b)), ref: footerRef },
|
|
83
|
+
React__default.default.createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
84
|
+
showClear && (React__default.default.createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
85
|
+
});
|
|
40
86
|
|
|
41
87
|
var SELECT_ALL_KEY = 'select_all';
|
|
42
88
|
var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
@@ -103,53 +149,7 @@ function useSelectWithApply(_a) {
|
|
|
103
149
|
};
|
|
104
150
|
}
|
|
105
151
|
|
|
106
|
-
var styles = {"
|
|
107
|
-
require('./presets/useSelectWithApply/options-list-with-apply/index.css')
|
|
108
|
-
|
|
109
|
-
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
110
|
-
var _b;
|
|
111
|
-
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"]);
|
|
112
|
-
var footerRef = React.useRef(null);
|
|
113
|
-
var getOptionProps = React.useCallback(function (option, index) {
|
|
114
|
-
var optionProps = defaultGetOptionProps(option, index);
|
|
115
|
-
var selected = option.key === SELECT_ALL_KEY
|
|
116
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
117
|
-
: selectedDraft.includes(option);
|
|
118
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
119
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
120
|
-
var handleApply = React.useCallback(function () {
|
|
121
|
-
onApply();
|
|
122
|
-
toggleMenu();
|
|
123
|
-
}, [onApply, toggleMenu]);
|
|
124
|
-
var handleClear = React.useCallback(function () {
|
|
125
|
-
onClear();
|
|
126
|
-
toggleMenu();
|
|
127
|
-
}, [onClear, toggleMenu]);
|
|
128
|
-
React.useEffect(function () {
|
|
129
|
-
var activeElement = document.activeElement;
|
|
130
|
-
setTimeout(function () {
|
|
131
|
-
if (footerRef.current) {
|
|
132
|
-
footerRef.current.focus();
|
|
133
|
-
}
|
|
134
|
-
}, 0);
|
|
135
|
-
return function () {
|
|
136
|
-
onClose();
|
|
137
|
-
if (activeElement) {
|
|
138
|
-
activeElement.focus();
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
142
|
-
}, []);
|
|
143
|
-
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", {
|
|
144
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
145
|
-
tabIndex: 0, className: cn__default['default'](styles.footer, (_b = {},
|
|
146
|
-
_b[styles.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
147
|
-
_b)), ref: footerRef },
|
|
148
|
-
React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
149
|
-
showClear && (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
var styles$1 = {"component":"select__component_17umy","popoverInner":"select__popoverInner_17umy","sheet":"select__sheet_17umy","sheetContent":"select__sheetContent_17umy","sheetContainer":"select__sheetContainer_17umy","block":"select__block_17umy","option":"select__option_17umy","optionGroup":"select__optionGroup_17umy"};
|
|
152
|
+
var styles = {"component":"select__component_1v16k","popoverInner":"select__popoverInner_1v16k","sheet":"select__sheet_1v16k","sheetContent":"select__sheetContent_1v16k","sheetContainer":"select__sheetContainer_1v16k","block":"select__block_1v16k","option":"select__option_1v16k","optionGroup":"select__optionGroup_1v16k"};
|
|
153
153
|
require('./components/base-select-mobile/index.css')
|
|
154
154
|
|
|
155
155
|
var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
@@ -255,7 +255,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
255
255
|
},
|
|
256
256
|
}), 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;
|
|
257
257
|
var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
|
|
258
|
-
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default
|
|
258
|
+
var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
|
|
259
259
|
React.useEffect(function () {
|
|
260
260
|
setSelectedDraft(selectedOptions);
|
|
261
261
|
setSelectedItems(selectedOptions);
|
|
@@ -294,7 +294,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
294
294
|
};
|
|
295
295
|
var getOptionProps = function (option, index) {
|
|
296
296
|
var selectedItem = selectedItems.includes(option);
|
|
297
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { mobile: true, className: cn__default
|
|
297
|
+
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { mobile: true, className: cn__default.default(styles.option, optionClassName), innerProps: getItemProps({
|
|
298
298
|
index: index,
|
|
299
299
|
item: option,
|
|
300
300
|
disabled: option.disabled,
|
|
@@ -302,7 +302,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
302
302
|
}), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItem, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'option'),
|
|
303
303
|
// eslint-disable-next-line react/no-unstable-nested-components
|
|
304
304
|
Checkmark: function () {
|
|
305
|
-
return Option === components_baseOption_Component.BaseOption ? (React__default
|
|
305
|
+
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 }));
|
|
306
306
|
} });
|
|
307
307
|
};
|
|
308
308
|
React.useEffect(function () {
|
|
@@ -316,7 +316,7 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
316
316
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
317
317
|
}, []);
|
|
318
318
|
var renderValue = function () {
|
|
319
|
-
return selectedItems.map(function (option) { return (React__default
|
|
319
|
+
return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
|
|
320
320
|
};
|
|
321
321
|
var handleApply = function () {
|
|
322
322
|
setSelectedDraft(selectedItems);
|
|
@@ -331,12 +331,12 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
331
331
|
}
|
|
332
332
|
toggleMenu();
|
|
333
333
|
};
|
|
334
|
-
return (React__default
|
|
335
|
-
React__default
|
|
334
|
+
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.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": components_baseSelect_Component.getDataTestId(dataTestId) }),
|
|
335
|
+
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: {
|
|
336
336
|
onFocus: disabled ? undefined : handleFieldFocus,
|
|
337
337
|
onClick: disabled ? undefined : handleFieldClick,
|
|
338
338
|
tabIndex: disabled ? -1 : 0,
|
|
339
|
-
ref: mergeRefs__default
|
|
339
|
+
ref: mergeRefs__default.default([inputProps.ref]),
|
|
340
340
|
id: inputProps.id,
|
|
341
341
|
'aria-labelledby': inputProps['aria-labelledby'],
|
|
342
342
|
'aria-controls': inputProps['aria-controls'],
|
|
@@ -345,22 +345,22 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
|
|
|
345
345
|
: undefined,
|
|
346
346
|
}, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'field') }, fieldProps)),
|
|
347
347
|
name && renderValue(),
|
|
348
|
-
isBottomSheet ? (React__default
|
|
349
|
-
React__default
|
|
350
|
-
React__default
|
|
351
|
-
React__default
|
|
352
|
-
React__default
|
|
353
|
-
React__default
|
|
348
|
+
isBottomSheet ? (React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, tslib_es6.__assign({ open: open, onClose: handleClose, className: styles.sheet, contentClassName: styles.sheetContent, containerClassName: styles.sheetContainer, title: placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable }, bottomSheetProps),
|
|
349
|
+
React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
|
|
350
|
+
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.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, contentClassName: styles.sheetContent, hasCloser: true },
|
|
351
|
+
React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true }),
|
|
352
|
+
React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
|
|
353
|
+
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.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
|
|
354
354
|
});
|
|
355
355
|
|
|
356
356
|
var SelectMobile = React.forwardRef(function (_a, ref) {
|
|
357
357
|
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"]);
|
|
358
|
-
return (React__default
|
|
358
|
+
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)));
|
|
359
359
|
});
|
|
360
360
|
|
|
361
361
|
var SelectModalMobile = React.forwardRef(function (_a, ref) {
|
|
362
362
|
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"]);
|
|
363
|
-
return (React__default
|
|
363
|
+
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)));
|
|
364
364
|
});
|
|
365
365
|
|
|
366
366
|
exports.BaseSelectMobile = BaseSelectMobile;
|
package/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 };
|
package/Component.js
CHANGED
|
@@ -1,40 +1,38 @@
|
|
|
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 components_arrow_Component = require('./components/arrow/Component.js');
|
|
6
|
+
var components_baseSelect_Component = require('./Component-01370e34.js');
|
|
7
|
+
var components_field_Component = require('./components/field/Component.js');
|
|
8
|
+
var components_optgroup_Component = require('./components/optgroup/Component.js');
|
|
9
|
+
var components_option_Component = require('./components/option/Component.js');
|
|
10
|
+
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
7
11
|
require('classnames');
|
|
8
12
|
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
9
|
-
var components_arrow_Component = require('./components/arrow/Component.js');
|
|
10
13
|
require('react-merge-refs');
|
|
11
14
|
require('@juggle/resize-observer');
|
|
12
15
|
require('downshift');
|
|
13
16
|
require('@alfalab/core-components-popover');
|
|
14
17
|
require('@alfalab/hooks');
|
|
15
|
-
var components_baseSelect_Component = require('./Component-d956e288.js');
|
|
16
18
|
require('./utils.js');
|
|
17
19
|
require('./components/native-select/Component.js');
|
|
18
20
|
require('@alfalab/core-components-form-control');
|
|
19
|
-
|
|
20
|
-
var components_optgroup_Component = require('./components/optgroup/Component.js');
|
|
21
|
+
require('./components/base-select-mobile/checkmark/Component.js');
|
|
21
22
|
require('@alfalab/core-components/badge');
|
|
22
23
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
23
24
|
require('@alfalab/icons-glyph/CheckmarkMIcon');
|
|
24
|
-
require('./components/base-select-mobile/checkmark/Component.js');
|
|
25
|
-
require('@alfalab/core-components-checkbox');
|
|
26
25
|
require('./components/checkmark/Component.js');
|
|
27
|
-
|
|
26
|
+
require('@alfalab/core-components-checkbox');
|
|
28
27
|
require('@alfalab/core-components-scrollbar');
|
|
29
|
-
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
30
28
|
|
|
31
|
-
function
|
|
29
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
32
30
|
|
|
33
|
-
var React__default = /*#__PURE__*/
|
|
31
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
34
32
|
|
|
35
33
|
var Select = React.forwardRef(function (_a, ref) {
|
|
36
34
|
var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component.Option : _f, restProps = tslib_es6.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option"]);
|
|
37
|
-
return (React__default
|
|
35
|
+
return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib_es6.__assign({ ref: ref, Option: Option, Field: Field, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow }, restProps)));
|
|
38
36
|
});
|
|
39
37
|
|
|
40
38
|
exports.Select = Select;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { AdditionalMobileProps } from "./components/index";
|
|
4
|
+
import { BaseSelectProps } from "./typings";
|
|
5
|
+
type SelectResponsiveProps = BaseSelectProps & AdditionalMobileProps & {
|
|
6
|
+
/**
|
|
7
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
8
|
+
* @default 1024
|
|
9
|
+
*/
|
|
10
|
+
breakpoint?: number;
|
|
11
|
+
};
|
|
12
|
+
declare const SelectResponsive: React.ForwardRefExoticComponent<BaseSelectProps & AdditionalMobileProps & {
|
|
13
|
+
/**
|
|
14
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
15
|
+
* @default 1024
|
|
16
|
+
*/
|
|
17
|
+
breakpoint?: number | undefined;
|
|
18
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export { SelectResponsiveProps, SelectResponsive };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-84fcf750.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var hooks = require('@alfalab/hooks');
|
|
6
|
+
var Component = require('./Component.js');
|
|
7
|
+
require('classnames');
|
|
8
|
+
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
9
|
+
require('./Component-01370e34.js');
|
|
10
|
+
var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-8f5f4c7a.js');
|
|
11
|
+
require('@alfalab/core-components-form-control');
|
|
12
|
+
require('@alfalab/core-components/badge');
|
|
13
|
+
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
14
|
+
require('@alfalab/icons-glyph/CheckmarkMIcon');
|
|
15
|
+
require('@alfalab/core-components-checkbox');
|
|
16
|
+
require('./components/options-list/Component.js');
|
|
17
|
+
require('react-virtual');
|
|
18
|
+
require('@alfalab/core-components-scrollbar');
|
|
19
|
+
require('./components/arrow/Component.js');
|
|
20
|
+
require('./components/field/Component.js');
|
|
21
|
+
require('./utils.js');
|
|
22
|
+
require('./components/optgroup/Component.js');
|
|
23
|
+
require('./components/option/Component.js');
|
|
24
|
+
require('./components/base-select-mobile/checkmark/Component.js');
|
|
25
|
+
require('./components/checkmark/Component.js');
|
|
26
|
+
require('react-merge-refs');
|
|
27
|
+
require('@juggle/resize-observer');
|
|
28
|
+
require('downshift');
|
|
29
|
+
require('@alfalab/core-components-popover');
|
|
30
|
+
require('./components/native-select/Component.js');
|
|
31
|
+
require('@alfalab/core-components-bottom-sheet');
|
|
32
|
+
require('@alfalab/core-components-modal/mobile');
|
|
33
|
+
require('./components/base-option/Component.js');
|
|
34
|
+
require('./components/base-checkmark/Component.js');
|
|
35
|
+
require('@alfalab/core-components-skeleton');
|
|
36
|
+
require('./intersection-observer-1891d844.js');
|
|
37
|
+
require('@alfalab/core-components-button');
|
|
38
|
+
require('./components/base-select-mobile/options-list/Component.js');
|
|
39
|
+
require('@alfalab/core-components-base-modal');
|
|
40
|
+
|
|
41
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
42
|
+
|
|
43
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
44
|
+
|
|
45
|
+
var SelectResponsive = React.forwardRef(function (_a, ref) {
|
|
46
|
+
var footer = _a.footer, swipeable = _a.swipeable, bottomSheetProps = _a.bottomSheetProps, OptionsList = _a.OptionsList, onScroll = _a.onScroll, fieldProps = _a.fieldProps, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib_es6.__rest(_a, ["footer", "swipeable", "bottomSheetProps", "OptionsList", "onScroll", "fieldProps", "breakpoint"]);
|
|
47
|
+
var view = hooks.useMedia([
|
|
48
|
+
['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
|
|
49
|
+
['desktop', "(min-width: ".concat(breakpoint, "px)")],
|
|
50
|
+
], 'desktop')[0];
|
|
51
|
+
return view === 'desktop' ? (React__default.default.createElement(Component.Select, tslib_es6.__assign({ OptionsList: OptionsList, onScroll: onScroll }, restProps, { ref: ref, fieldProps: fieldProps }))) : (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_Component.SelectMobile, tslib_es6.__assign({ footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, fieldProps: fieldProps }, restProps, { ref: ref })));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
exports.SelectResponsive = SelectResponsive;
|
|
@@ -1,23 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
8
6
|
|
|
9
|
-
function
|
|
7
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
8
|
|
|
11
|
-
var React__default = /*#__PURE__*/
|
|
12
|
-
var cn__default = /*#__PURE__*/
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
13
11
|
|
|
14
|
-
var styles = {"arrow":"
|
|
12
|
+
var styles = {"arrow":"select__arrow_4nipf","open":"select__open_4nipf"};
|
|
15
13
|
require('./index.css')
|
|
16
14
|
|
|
17
15
|
var Arrow = function (_a) {
|
|
18
16
|
var _b;
|
|
19
17
|
var open = _a.open, className = _a.className;
|
|
20
|
-
return (React__default
|
|
18
|
+
return (React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, { className: cn__default.default(styles.arrow, className, (_b = {}, _b[styles.open] = open, _b)) }));
|
|
21
19
|
};
|
|
22
20
|
|
|
23
21
|
exports.Arrow = Arrow;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: kmaps */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-graphic-primary: #0b1f35;
|
|
4
4
|
}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
/* optgroup */
|
|
26
26
|
}
|
|
27
|
-
.
|
|
27
|
+
.select__arrow_4nipf {
|
|
28
28
|
display: block;
|
|
29
29
|
width: 24px;
|
|
30
30
|
height: 24px;
|
|
@@ -32,6 +32,6 @@
|
|
|
32
32
|
|
|
33
33
|
transition: transform 0.15s ease-in-out, opacity 0.2s ease;
|
|
34
34
|
}
|
|
35
|
-
.
|
|
35
|
+
.select__open_4nipf {
|
|
36
36
|
transform: var(--arrow-transform);
|
|
37
37
|
}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var components_arrow_Component = require('./Component.js');
|
|
5
4
|
require('react');
|
|
6
5
|
require('classnames');
|
|
7
6
|
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
8
|
-
var components_arrow_Component = require('./Component.js');
|
|
9
7
|
|
|
10
8
|
|
|
11
9
|
|