@alfalab/core-components-select 14.1.2 → 14.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component-3885b0d7.d.ts +1 -1
- package/{Component-00c64376.d.ts → Component-3b7dfcdb.d.ts} +25 -0
- package/{Component-00c64376.js → Component-3b7dfcdb.js} +5 -4
- package/Component.js +1 -1
- package/Component.mobile-b2c0420d.d.ts +93 -0
- package/Component.responsive.js +3 -3
- package/components/arrow/Component.js +1 -1
- package/components/arrow/index.css +3 -3
- package/components/base-checkmark/Component.js +1 -1
- package/components/base-checkmark/index.css +4 -4
- package/components/base-option/Component.js +1 -1
- package/components/base-option/index.css +13 -13
- package/components/base-select/Component.js +2 -2
- package/components/base-select/index.css +8 -8
- package/components/base-select/index.js +1 -1
- package/components/base-select-mobile/Component.d.ts +24 -0
- package/components/base-select-mobile/Component.js +25 -7
- package/components/base-select-mobile/footer/Component.js +3 -3
- package/components/base-select-mobile/footer/index.css +5 -5
- package/components/base-select-mobile/index.css +10 -10
- package/components/base-select-mobile/index.js +1 -1
- package/components/checkmark/Component.js +1 -1
- package/components/checkmark/index.css +10 -10
- package/components/checkmark-mobile/Component.js +1 -1
- package/components/checkmark-mobile/index.css +6 -6
- package/components/field/Component.js +1 -1
- package/components/field/index.css +9 -9
- package/components/index.js +3 -3
- package/components/optgroup/Component.js +1 -1
- package/components/optgroup/index.css +6 -6
- package/components/option/Component.js +1 -1
- package/components/option/index.css +20 -20
- package/components/options-list/Component.js +3 -3
- package/components/options-list/index.css +9 -9
- package/components/select-mobile/Component.js +3 -3
- package/components/select-mobile/index.d.ts +1 -1
- package/components/select-mobile/index.js +3 -3
- package/components/select-modal-mobile/Component.js +3 -3
- package/components/select-modal-mobile/index.d.ts +1 -1
- package/components/select-modal-mobile/index.js +3 -3
- package/components/virtual-options-list/Component.js +4 -4
- package/components/virtual-options-list/index.css +15 -15
- package/cssm/Component-3885b0d7.d.ts +1 -1
- package/{esm/Component-2ff63ae2.d.ts → cssm/Component-75d13e23.d.ts} +25 -0
- package/cssm/{Component-f86f43e3.js → Component-75d13e23.js} +4 -3
- package/cssm/Component.mobile-b2c0420d.d.ts +93 -0
- package/cssm/Component.responsive.js +1 -1
- package/cssm/components/base-select-mobile/Component.d.ts +24 -0
- package/cssm/components/base-select-mobile/Component.js +23 -5
- package/cssm/components/base-select-mobile/footer/Component.js +2 -2
- package/cssm/components/index.js +1 -1
- package/cssm/components/options-list/Component.js +2 -2
- package/cssm/components/select-mobile/Component.js +1 -1
- package/cssm/components/select-mobile/index.d.ts +1 -1
- package/cssm/components/select-mobile/index.js +1 -1
- package/cssm/components/select-modal-mobile/Component.js +1 -1
- package/cssm/components/select-modal-mobile/index.d.ts +1 -1
- package/cssm/components/select-modal-mobile/index.js +1 -1
- package/cssm/components/virtual-options-list/Component.js +3 -3
- package/cssm/index.js +1 -1
- package/cssm/mobile.d.ts +4 -0
- package/cssm/mobile.js +65 -0
- package/cssm/presets/index.js +1 -1
- package/cssm/presets/useSelectWithApply/hook.js +1 -1
- package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.js +1 -1
- package/cssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/cssm/presets/useSelectWithApply/options-list-with-apply/index.js +1 -1
- package/cssm/responsive.js +1 -1
- package/{cssm/Component-f86f43e3.d.ts → esm/Component-06bb5812.d.ts} +25 -0
- package/esm/{Component-2ff63ae2.js → Component-06bb5812.js} +5 -4
- package/esm/Component-3885b0d7.d.ts +1 -1
- package/esm/Component.js +1 -1
- package/esm/Component.mobile-b2c0420d.d.ts +93 -0
- package/esm/Component.responsive.js +3 -3
- package/esm/components/arrow/Component.js +1 -1
- package/esm/components/arrow/index.css +3 -3
- package/esm/components/base-checkmark/Component.js +1 -1
- package/esm/components/base-checkmark/index.css +4 -4
- package/esm/components/base-option/Component.js +1 -1
- package/esm/components/base-option/index.css +13 -13
- package/esm/components/base-select/Component.js +2 -2
- package/esm/components/base-select/index.css +8 -8
- package/esm/components/base-select/index.js +1 -1
- package/esm/components/base-select-mobile/Component.d.ts +24 -0
- package/esm/components/base-select-mobile/Component.js +26 -8
- package/esm/components/base-select-mobile/footer/Component.js +3 -3
- package/esm/components/base-select-mobile/footer/index.css +5 -5
- package/esm/components/base-select-mobile/index.css +10 -10
- package/esm/components/base-select-mobile/index.js +1 -1
- package/esm/components/checkmark/Component.js +1 -1
- package/esm/components/checkmark/index.css +10 -10
- package/esm/components/checkmark-mobile/Component.js +1 -1
- package/esm/components/checkmark-mobile/index.css +6 -6
- package/esm/components/field/Component.js +1 -1
- package/esm/components/field/index.css +9 -9
- package/esm/components/index.js +3 -3
- package/esm/components/optgroup/Component.js +1 -1
- package/esm/components/optgroup/index.css +6 -6
- package/esm/components/option/Component.js +1 -1
- package/esm/components/option/index.css +20 -20
- package/esm/components/options-list/Component.js +3 -3
- package/esm/components/options-list/index.css +9 -9
- package/esm/components/select-mobile/Component.js +3 -3
- package/esm/components/select-mobile/index.d.ts +1 -1
- package/esm/components/select-mobile/index.js +3 -3
- package/esm/components/select-modal-mobile/Component.js +3 -3
- package/esm/components/select-modal-mobile/index.d.ts +1 -1
- package/esm/components/select-modal-mobile/index.js +3 -3
- package/esm/components/virtual-options-list/Component.js +4 -4
- package/esm/components/virtual-options-list/index.css +15 -15
- package/esm/index-3885b0d7.d.ts +1 -1
- package/esm/index.js +3 -3
- package/esm/mobile.d.ts +4 -0
- package/esm/mobile.js +40 -0
- package/esm/presets/index.js +3 -3
- package/esm/presets/useLazyLoading/hook.js +2 -2
- package/esm/presets/useLazyLoading/index.css +2 -2
- package/esm/presets/useSelectWithApply/hook.js +3 -3
- package/esm/presets/useSelectWithApply/options-list-with-apply/Component.js +3 -3
- package/esm/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
- package/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/index.js +3 -3
- package/esm/presets/useSelectWithLoading/hook.js +1 -1
- package/esm/presets/useSelectWithLoading/index.css +2 -2
- package/esm/responsive.js +3 -3
- package/index-3885b0d7.d.ts +1 -1
- package/index.js +3 -3
- package/mobile.d.ts +4 -0
- package/mobile.js +49 -0
- package/modern/Component-3885b0d7.d.ts +1 -1
- package/modern/{Component-0b711513.d.ts → Component-8dc39be2.d.ts} +25 -0
- package/modern/{Component-0b711513.js → Component-8dc39be2.js} +2 -2
- package/modern/Component.js +1 -1
- package/modern/Component.mobile-b2c0420d.d.ts +93 -0
- package/modern/Component.responsive.js +3 -3
- package/modern/components/arrow/Component.js +1 -1
- package/modern/components/arrow/index.css +3 -3
- package/modern/components/base-checkmark/Component.js +1 -1
- package/modern/components/base-checkmark/index.css +4 -4
- package/modern/components/base-option/Component.js +1 -1
- package/modern/components/base-option/index.css +13 -13
- package/modern/components/base-select/Component.js +2 -2
- package/modern/components/base-select/index.css +8 -8
- package/modern/components/base-select/index.js +1 -1
- package/modern/components/base-select-mobile/Component.d.ts +24 -0
- package/modern/components/base-select-mobile/Component.js +20 -7
- package/modern/components/base-select-mobile/footer/Component.js +3 -3
- package/modern/components/base-select-mobile/footer/index.css +5 -5
- package/modern/components/base-select-mobile/index.css +10 -10
- package/modern/components/base-select-mobile/index.js +1 -1
- package/modern/components/checkmark/Component.js +1 -1
- package/modern/components/checkmark/index.css +10 -10
- package/modern/components/checkmark-mobile/Component.js +1 -1
- package/modern/components/checkmark-mobile/index.css +6 -6
- package/modern/components/field/Component.js +1 -1
- package/modern/components/field/index.css +9 -9
- package/modern/components/index.js +3 -3
- package/modern/components/optgroup/Component.js +1 -1
- package/modern/components/optgroup/index.css +6 -6
- package/modern/components/option/Component.js +1 -1
- package/modern/components/option/index.css +20 -20
- package/modern/components/options-list/Component.js +3 -3
- package/modern/components/options-list/index.css +9 -9
- package/modern/components/select-mobile/Component.js +3 -3
- package/modern/components/select-mobile/index.d.ts +1 -1
- package/modern/components/select-mobile/index.js +3 -3
- package/modern/components/select-modal-mobile/Component.js +3 -3
- package/modern/components/select-modal-mobile/index.d.ts +1 -1
- package/modern/components/select-modal-mobile/index.js +3 -3
- package/modern/components/virtual-options-list/Component.js +3 -3
- package/modern/components/virtual-options-list/index.css +15 -15
- package/modern/index-3885b0d7.d.ts +1 -1
- package/modern/index.js +3 -3
- package/modern/mobile.d.ts +4 -0
- package/modern/mobile.js +39 -0
- package/modern/presets/index.js +3 -3
- package/modern/presets/useLazyLoading/hook.js +2 -2
- package/modern/presets/useLazyLoading/index.css +2 -2
- package/modern/presets/useSelectWithApply/hook.js +3 -3
- package/modern/presets/useSelectWithApply/options-list-with-apply/Component.js +3 -3
- package/modern/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
- package/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/index.js +3 -3
- package/modern/presets/useSelectWithLoading/hook.js +1 -1
- package/modern/presets/useSelectWithLoading/index.css +2 -2
- package/modern/responsive.js +3 -3
- package/package.json +6 -6
- package/presets/index.js +3 -3
- package/presets/useLazyLoading/hook.js +2 -2
- package/presets/useLazyLoading/index.css +2 -2
- package/presets/useSelectWithApply/hook.js +3 -3
- package/presets/useSelectWithApply/options-list-with-apply/Component.js +3 -3
- package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/footer/index.css +3 -3
- package/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/index.js +3 -3
- package/presets/useSelectWithLoading/hook.js +1 -1
- package/presets/useSelectWithLoading/index.css +2 -2
- package/responsive.js +3 -3
- /package/esm/{getDataTestId-d8d91b2e.d.ts → getDataTestId-8aabb6b6.d.ts} +0 -0
- /package/esm/{getDataTestId-d8d91b2e.js → getDataTestId-8aabb6b6.js} +0 -0
- /package/esm/{intersection-observer-210062db.d.ts → intersection-observer-6b92b662.d.ts} +0 -0
- /package/esm/{intersection-observer-210062db.js → intersection-observer-6b92b662.js} +0 -0
- /package/{getDataTestId-d8391785.d.ts → getDataTestId-1bda9cae.d.ts} +0 -0
- /package/{getDataTestId-d8391785.js → getDataTestId-1bda9cae.js} +0 -0
- /package/{intersection-observer-131fbe35.d.ts → intersection-observer-38296236.d.ts} +0 -0
- /package/{intersection-observer-131fbe35.js → intersection-observer-38296236.js} +0 -0
- /package/modern/{getDataTestId-b301a7a9.d.ts → getDataTestId-59fdb29b.d.ts} +0 -0
- /package/modern/{getDataTestId-b301a7a9.js → getDataTestId-59fdb29b.js} +0 -0
- /package/modern/{intersection-observer-210062db.d.ts → intersection-observer-6b92b662.d.ts} +0 -0
- /package/modern/{intersection-observer-210062db.js → intersection-observer-6b92b662.js} +0 -0
|
@@ -5,6 +5,7 @@ import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
|
|
|
5
5
|
import { UseSelectWithApplyProps } from "./hook-4b555174";
|
|
6
6
|
import { BaseSelectProps, OptionShape, OptionsListProps } from "./typings";
|
|
7
7
|
import { FooterProps } from "./presets/useSelectWithApply/options-list-with-apply/footer/Component";
|
|
8
|
+
import { ModalMobile } from "./Component.mobile-b2c0420d";
|
|
8
9
|
type AdditionalMobileProps = {
|
|
9
10
|
/**
|
|
10
11
|
* Футер
|
|
@@ -47,6 +48,18 @@ type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> &
|
|
|
47
48
|
* Показывать пункт "Выбрать все"
|
|
48
49
|
*/
|
|
49
50
|
showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
|
|
51
|
+
/**
|
|
52
|
+
* Дополнительные пропсы шапки модалки
|
|
53
|
+
*/
|
|
54
|
+
modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
|
|
55
|
+
/**
|
|
56
|
+
* Дополнительные пропсы модалки
|
|
57
|
+
*/
|
|
58
|
+
modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
|
|
59
|
+
/**
|
|
60
|
+
* Дополнительные пропсы футера модалки
|
|
61
|
+
*/
|
|
62
|
+
modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
|
|
50
63
|
};
|
|
51
64
|
declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
|
|
52
65
|
/**
|
|
@@ -57,5 +70,17 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
|
|
|
57
70
|
* Показывать пункт "Выбрать все"
|
|
58
71
|
*/
|
|
59
72
|
showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
|
|
73
|
+
/**
|
|
74
|
+
* Дополнительные пропсы шапки модалки
|
|
75
|
+
*/
|
|
76
|
+
modalHeaderProps?: Partial<import("./Component.mobile-b2c0420d").HeaderProps> | undefined;
|
|
77
|
+
/**
|
|
78
|
+
* Дополнительные пропсы модалки
|
|
79
|
+
*/
|
|
80
|
+
modalProps?: Partial<import("./Component.mobile-b2c0420d").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
|
|
81
|
+
/**
|
|
82
|
+
* Дополнительные пропсы футера модалки
|
|
83
|
+
*/
|
|
84
|
+
modalFooterProps?: Partial<import("./Component.mobile-b2c0420d").FooterProps> | undefined;
|
|
60
85
|
} & React.RefAttributes<unknown>>;
|
|
61
86
|
export { AdditionalMobileProps, SelectMobileProps, SelectMobile, OptionsListWithApply, SelectModalMobileProps, SelectModalMobile };
|
|
@@ -20,7 +20,7 @@ import '@alfalab/core-components-checkbox/esm';
|
|
|
20
20
|
import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
|
|
21
21
|
import '@alfalab/icons-glyph/CheckmarkMIcon';
|
|
22
22
|
import '@alfalab/core-components-skeleton/esm';
|
|
23
|
-
import './intersection-observer-
|
|
23
|
+
import './intersection-observer-6b92b662.js';
|
|
24
24
|
import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
|
|
25
25
|
import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
|
|
26
26
|
|
|
@@ -131,9 +131,10 @@ var SelectMobile = forwardRef(function (_a, ref) {
|
|
|
131
131
|
|
|
132
132
|
var VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
|
|
133
133
|
var SelectModalMobile = forwardRef(function (_a, ref) {
|
|
134
|
-
var _b
|
|
134
|
+
var _b;
|
|
135
|
+
var _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, _k = _a.size, size = _k === void 0 ? 'm' : _k, _l = _a.optionsSize, optionsSize = _l === void 0 ? 'm' : _l, _m = _a.fieldProps, fieldProps = _m === void 0 ? {} : _m, _o = _a.optionProps, optionProps = _o === void 0 ? {} : _o, _p = _a.optionsListProps, optionsListProps = _p === void 0 ? {} : _p, _q = _a.Arrow, Arrow$1 = _q === void 0 ? Arrow : _q, _r = _a.Field, Field$1 = _r === void 0 ? Field : _r, _s = _a.Optgroup, Optgroup$1 = _s === void 0 ? Optgroup : _s, _t = _a.Option, Option$1 = _t === void 0 ? Option : _t, selected = _a.selected, options = _a.options, _u = _a.OptionsList, OptionsList$1 = _u === void 0 ? options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
|
|
135
136
|
? VirtualOptionsList
|
|
136
|
-
: OptionsList :
|
|
137
|
+
: OptionsList : _u, onChange = _a.onChange, _v = _a.showClear, showClear = _v === void 0 ? true : _v, showSelectAll = _a.showSelectAll, restProps = __rest(_a, ["autocomplete", "multiple", "allowUnselect", "disabled", "closeOnSelect", "circularNavigation", "defaultOpen", "open", "size", "optionsSize", "fieldProps", "optionProps", "optionsListProps", "Arrow", "Field", "Optgroup", "Option", "selected", "options", "OptionsList", "onChange", "showClear", "showSelectAll"]);
|
|
137
138
|
var applyProps = useSelectWithApply({
|
|
138
139
|
optionsListProps: __assign(__assign({}, optionsListProps), { Footer: Footer$1 }),
|
|
139
140
|
OptionsList: OptionsList$1,
|
|
@@ -143,7 +144,7 @@ var SelectModalMobile = forwardRef(function (_a, ref) {
|
|
|
143
144
|
showClear: showClear,
|
|
144
145
|
showSelectAll: showSelectAll,
|
|
145
146
|
});
|
|
146
|
-
return (React.createElement(BaseSelectMobile, __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$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, optionsListProps: optionsListProps }, restProps, (multiple && applyProps))));
|
|
147
|
+
return (React.createElement(BaseSelectMobile, __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$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, optionsListProps: optionsListProps }, restProps, (multiple && !((_b = restProps.modalFooterProps) === null || _b === void 0 ? void 0 : _b.children) && applyProps))));
|
|
147
148
|
});
|
|
148
149
|
|
|
149
150
|
export { OptionsListWithApply as O, SelectMobile as S, SelectModalMobile as a, SELECT_ALL_KEY as b, useSelectWithApply as u };
|
|
@@ -51,7 +51,7 @@ type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
|
|
|
51
51
|
type NativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
52
52
|
type TextBaseProps = {
|
|
53
53
|
/**
|
|
54
|
-
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/
|
|
54
|
+
* [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/tokens-assets-типографика--docs)
|
|
55
55
|
*/
|
|
56
56
|
view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
|
|
57
57
|
/**
|
package/esm/Component.js
CHANGED
|
@@ -13,7 +13,7 @@ import '@juggle/resize-observer';
|
|
|
13
13
|
import 'downshift';
|
|
14
14
|
import '@alfalab/core-components-popover/esm';
|
|
15
15
|
import '@alfalab/hooks';
|
|
16
|
-
import './getDataTestId-
|
|
16
|
+
import './getDataTestId-8aabb6b6.js';
|
|
17
17
|
import './utils.js';
|
|
18
18
|
import './components/native-select/Component.js';
|
|
19
19
|
import '@alfalab/core-components-form-control/esm';
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode } from "react";
|
|
4
|
+
import { NavigationBarProps } from "./types-ebda875c";
|
|
5
|
+
import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
|
|
6
|
+
type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
|
|
7
|
+
declare const Header: FC<HeaderProps>;
|
|
8
|
+
type ModalDesktopProps = BaseModalProps & {
|
|
9
|
+
/**
|
|
10
|
+
* Ширина модального окна
|
|
11
|
+
* @default "m"
|
|
12
|
+
*/
|
|
13
|
+
size?: "s" | "m" | "l" | "xl" | "fullscreen";
|
|
14
|
+
/**
|
|
15
|
+
* Растягивает модальное окно на весь экран
|
|
16
|
+
* @deprecated Используйте размер fullscreen
|
|
17
|
+
*/
|
|
18
|
+
fullscreen?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Фиксирует позицию модального окна после открытия,
|
|
21
|
+
* предотвращая скачки, если контент внутри будет меняться
|
|
22
|
+
*/
|
|
23
|
+
fixedPosition?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Управление наличием закрывающего крестика
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
hasCloser?: boolean;
|
|
29
|
+
};
|
|
30
|
+
type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
|
|
31
|
+
type View = "desktop" | "mobile";
|
|
32
|
+
type TResponsiveModalContext = {
|
|
33
|
+
view: View;
|
|
34
|
+
size: NonNullable<ModalDesktopProps["size"]>;
|
|
35
|
+
};
|
|
36
|
+
type ContentProps = {
|
|
37
|
+
/**
|
|
38
|
+
* Контент
|
|
39
|
+
*/
|
|
40
|
+
children?: ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Дополнительный класс
|
|
43
|
+
*/
|
|
44
|
+
className?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Растягивает контент на всю высоту
|
|
47
|
+
*/
|
|
48
|
+
flex?: boolean;
|
|
49
|
+
};
|
|
50
|
+
declare const Content: FC<ContentProps>;
|
|
51
|
+
type FooterProps = {
|
|
52
|
+
/**
|
|
53
|
+
* Контент футера
|
|
54
|
+
*/
|
|
55
|
+
children?: ReactNode;
|
|
56
|
+
/**
|
|
57
|
+
* Дополнительный класс
|
|
58
|
+
*/
|
|
59
|
+
className?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Фиксирует футер
|
|
62
|
+
*/
|
|
63
|
+
sticky?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Выравнивание элементов футера
|
|
66
|
+
*/
|
|
67
|
+
layout?: "start" | "center" | "space-between" | "column";
|
|
68
|
+
/**
|
|
69
|
+
* Отступы между элементами футера
|
|
70
|
+
*/
|
|
71
|
+
gap?: 16 | 24 | 32;
|
|
72
|
+
};
|
|
73
|
+
declare const Footer: FC<FooterProps>;
|
|
74
|
+
declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
|
|
75
|
+
size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
|
|
76
|
+
fullscreen?: boolean | undefined;
|
|
77
|
+
fixedPosition?: boolean | undefined;
|
|
78
|
+
hasCloser?: boolean | undefined;
|
|
79
|
+
} & {
|
|
80
|
+
view: View;
|
|
81
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
82
|
+
declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
|
|
83
|
+
declare const ModalContext: import("react").Context<BaseModalContext>;
|
|
84
|
+
declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
|
|
85
|
+
Content: React.FC<ContentProps>;
|
|
86
|
+
Header: React.FC<HeaderProps>;
|
|
87
|
+
Footer: React.FC<FooterProps>;
|
|
88
|
+
Closer: React.FC<CloserProps>;
|
|
89
|
+
};
|
|
90
|
+
export * from "./Component-3885b0d7";
|
|
91
|
+
export * from "./index-ebda875c";
|
|
92
|
+
export type { NavigationBarProps } from "./types-ebda875c";
|
|
93
|
+
export { HeaderProps, Header, Content, FooterProps, Footer, Modal, ResponsiveContext, ModalContext, ModalMobile };
|
|
@@ -5,7 +5,7 @@ import { Select } from './Component.js';
|
|
|
5
5
|
import 'classnames';
|
|
6
6
|
import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
7
7
|
import './components/base-select/Component.js';
|
|
8
|
-
import { S as SelectMobile } from './Component-
|
|
8
|
+
import { S as SelectMobile } from './Component-06bb5812.js';
|
|
9
9
|
import '@alfalab/core-components-form-control/esm';
|
|
10
10
|
import '@alfalab/core-components-badge/esm';
|
|
11
11
|
import '@alfalab/core-components-checkbox/esm';
|
|
@@ -24,7 +24,7 @@ import 'react-merge-refs';
|
|
|
24
24
|
import '@juggle/resize-observer';
|
|
25
25
|
import 'downshift';
|
|
26
26
|
import '@alfalab/core-components-popover/esm';
|
|
27
|
-
import './getDataTestId-
|
|
27
|
+
import './getDataTestId-8aabb6b6.js';
|
|
28
28
|
import './components/native-select/Component.js';
|
|
29
29
|
import './components/base-select-mobile/Component.js';
|
|
30
30
|
import '@alfalab/core-components-bottom-sheet/esm';
|
|
@@ -33,7 +33,7 @@ import './components/base-select-mobile/footer/Component.js';
|
|
|
33
33
|
import '@alfalab/core-components-base-modal/esm';
|
|
34
34
|
import '@alfalab/core-components-button/esm';
|
|
35
35
|
import '@alfalab/core-components-skeleton/esm';
|
|
36
|
-
import './intersection-observer-
|
|
36
|
+
import './intersection-observer-6b92b662.js';
|
|
37
37
|
import './consts.js';
|
|
38
38
|
import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
|
|
39
39
|
import '@alfalab/core-components-scrollbar/esm';
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
4
4
|
|
|
5
|
-
var styles = {"arrow":"
|
|
5
|
+
var styles = {"arrow":"select__arrow_1tib1","open":"select__open_1tib1"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
var Arrow = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1a0o6 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
/* checkmark */
|
|
27
27
|
|
|
28
28
|
/* optgroup */
|
|
29
|
-
} .
|
|
29
|
+
} .select__arrow_1tib1 {
|
|
30
30
|
display: block;
|
|
31
31
|
width: 24px;
|
|
32
32
|
height: 24px;
|
|
33
33
|
color: var(--select-arrow-color);
|
|
34
34
|
|
|
35
35
|
transition: transform 0.15s ease-in-out, opacity 0.2s ease;
|
|
36
|
-
} .
|
|
36
|
+
} .select__open_1tib1 {
|
|
37
37
|
transform: var(--arrow-transform);
|
|
38
38
|
}
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import { Checkbox } from '@alfalab/core-components-checkbox/esm';
|
|
4
4
|
import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
|
|
5
5
|
|
|
6
|
-
var styles = {"checkmark":"
|
|
6
|
+
var styles = {"checkmark":"select__checkmark_22g0m","single":"select__single_22g0m","selected":"select__selected_22g0m"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
var BaseCheckmark = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1f6se */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
/* checkmark */
|
|
24
24
|
|
|
25
25
|
/* optgroup */
|
|
26
|
-
} .
|
|
26
|
+
} .select__checkmark_22g0m {
|
|
27
27
|
flex-shrink: 0;
|
|
28
28
|
box-sizing: border-box;
|
|
29
|
-
} .
|
|
29
|
+
} .select__single_22g0m {
|
|
30
30
|
display: flex;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: center;
|
|
33
33
|
opacity: 0
|
|
34
|
-
} .
|
|
34
|
+
} .select__single_22g0m.select__selected_22g0m {
|
|
35
35
|
opacity: 1;
|
|
36
36
|
}
|
|
@@ -5,7 +5,7 @@ import { BaseCheckmark } from '../base-checkmark/Component.js';
|
|
|
5
5
|
import '@alfalab/core-components-checkbox/esm';
|
|
6
6
|
import '@alfalab/icons-glyph/CheckmarkMIcon';
|
|
7
7
|
|
|
8
|
-
var styles = {"option":"
|
|
8
|
+
var styles = {"option":"select__option_wt96y","disabled":"select__disabled_wt96y","checkmarkBefore":"select__checkmarkBefore_wt96y","mobile":"select__mobile_wt96y","checkmarkAfter":"select__checkmarkAfter_wt96y","textContent":"select__textContent_wt96y","selected":"select__selected_wt96y","highlighted":"select__highlighted_wt96y","content":"select__content_wt96y"};
|
|
9
9
|
require('./index.css')
|
|
10
10
|
|
|
11
11
|
var BaseOption = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1r66n */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
/* checkmark */
|
|
44
44
|
|
|
45
45
|
/* optgroup */
|
|
46
|
-
} .
|
|
46
|
+
} .select__option_wt96y {
|
|
47
47
|
font-size: 16px;
|
|
48
48
|
line-height: 20px;
|
|
49
49
|
font-weight: 400;
|
|
@@ -60,32 +60,32 @@
|
|
|
60
60
|
position: relative;
|
|
61
61
|
cursor: pointer;
|
|
62
62
|
min-height: var(--size-s-height)
|
|
63
|
-
} .
|
|
63
|
+
} .select__option_wt96y:not(.select__disabled_wt96y):active {
|
|
64
64
|
background: var(--select-option-active-background);
|
|
65
65
|
color: var(--select-option-active-color);
|
|
66
|
-
} .
|
|
66
|
+
} .select__option_wt96y.select__checkmarkBefore_wt96y {
|
|
67
67
|
padding: 0 0 0 var(--gap-s)
|
|
68
|
-
} .
|
|
68
|
+
} .select__option_wt96y.select__checkmarkBefore_wt96y.select__mobile_wt96y {
|
|
69
69
|
padding-left: var(--gap-m);
|
|
70
|
-
} .
|
|
70
|
+
} .select__option_wt96y.select__checkmarkAfter_wt96y {
|
|
71
71
|
padding: 0 var(--gap-s) 0 0
|
|
72
|
-
} .
|
|
72
|
+
} .select__option_wt96y.select__checkmarkAfter_wt96y.select__mobile_wt96y {
|
|
73
73
|
padding-right: var(--gap-l);
|
|
74
|
-
} .
|
|
74
|
+
} .select__option_wt96y.select__textContent_wt96y {
|
|
75
75
|
padding: var(--gap-s)
|
|
76
|
-
} .
|
|
76
|
+
} .select__option_wt96y.select__textContent_wt96y.select__mobile_wt96y {
|
|
77
77
|
padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
|
|
78
|
-
} .
|
|
78
|
+
} .select__selected_wt96y {
|
|
79
79
|
background: var(--select-option-selected-background);
|
|
80
80
|
color: var(--select-option-selected-color);
|
|
81
81
|
cursor: default;
|
|
82
|
-
} .
|
|
82
|
+
} .select__highlighted_wt96y {
|
|
83
83
|
background: var(--select-option-hover-background);
|
|
84
84
|
color: var(--select-option-hover-color);
|
|
85
|
-
} .
|
|
85
|
+
} .select__disabled_wt96y {
|
|
86
86
|
cursor: var(--disabled-cursor);
|
|
87
87
|
background: var(--select-option-disabled-background);
|
|
88
88
|
color: var(--select-option-disabled-color);
|
|
89
|
-
} .
|
|
89
|
+
} .select__content_wt96y {
|
|
90
90
|
flex: 1;
|
|
91
91
|
}
|
|
@@ -6,11 +6,11 @@ import cn from 'classnames';
|
|
|
6
6
|
import { useMultipleSelection, useCombobox } from 'downshift';
|
|
7
7
|
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
8
8
|
import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
|
|
9
|
-
import { g as getDataTestId } from '../../getDataTestId-
|
|
9
|
+
import { g as getDataTestId } from '../../getDataTestId-8aabb6b6.js';
|
|
10
10
|
import { processOptions } from '../../utils.js';
|
|
11
11
|
import { NativeSelect } from '../native-select/Component.js';
|
|
12
12
|
|
|
13
|
-
var styles = {"component":"
|
|
13
|
+
var styles = {"component":"select__component_1ggvf","popoverInner":"select__popoverInner_1ggvf","optionsList":"select__optionsList_1ggvf","optionsListBorder":"select__optionsListBorder_1ggvf","nativeSelect":"select__nativeSelect_1ggvf","block":"select__block_1ggvf"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
var BaseSelect = forwardRef(function (_a, ref) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 11rn9 */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
/* checkmark */
|
|
37
37
|
|
|
38
38
|
/* optgroup */
|
|
39
|
-
} .
|
|
39
|
+
} .select__component_1ggvf {
|
|
40
40
|
width: max-content;
|
|
41
41
|
position: relative;
|
|
42
42
|
outline: 0;
|
|
43
|
-
} .
|
|
43
|
+
} .select__popoverInner_1ggvf {
|
|
44
44
|
padding-top: var(--select-options-list-offset);
|
|
45
45
|
padding-bottom: var(--select-options-list-offset);
|
|
46
46
|
box-shadow: none;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
background: transparent;
|
|
49
49
|
border-radius: 0;
|
|
50
50
|
position: relative;
|
|
51
|
-
} .
|
|
51
|
+
} .select__optionsList_1ggvf {
|
|
52
52
|
position: relative;
|
|
53
53
|
padding-top: var(--select-options-list-top-padding);
|
|
54
54
|
padding-bottom: var(--select-options-list-bottom-padding);
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
background: var(--select-option-background);
|
|
58
58
|
overflow: hidden;
|
|
59
59
|
will-change: transform;
|
|
60
|
-
} .
|
|
60
|
+
} .select__optionsListBorder_1ggvf {
|
|
61
61
|
position: absolute;
|
|
62
62
|
top: 0;
|
|
63
63
|
right: 0;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
box-shadow: inset 0 0 0 1px var(--color-light-border-secondary);
|
|
67
67
|
border-radius: inherit;
|
|
68
68
|
pointer-events: none;
|
|
69
|
-
} .
|
|
69
|
+
} .select__nativeSelect_1ggvf {
|
|
70
70
|
opacity: 0;
|
|
71
71
|
overflow: hidden;
|
|
72
72
|
position: absolute;
|
|
@@ -79,10 +79,10 @@
|
|
|
79
79
|
height: 100%;
|
|
80
80
|
cursor: pointer;
|
|
81
81
|
z-index: 1;
|
|
82
|
-
} .
|
|
82
|
+
} .select__block_1ggvf {
|
|
83
83
|
width: 100%;
|
|
84
84
|
} /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
85
|
-
.
|
|
85
|
+
.select__component_1ggvf {
|
|
86
86
|
float: left;
|
|
87
87
|
clear: left;
|
|
88
88
|
}
|
|
@@ -7,6 +7,6 @@ import 'classnames';
|
|
|
7
7
|
import 'downshift';
|
|
8
8
|
import '@alfalab/core-components-popover/esm';
|
|
9
9
|
import '@alfalab/hooks';
|
|
10
|
-
import '../../getDataTestId-
|
|
10
|
+
import '../../getDataTestId-8aabb6b6.js';
|
|
11
11
|
import '../../utils.js';
|
|
12
12
|
import '../native-select/Component.js';
|
|
@@ -22,6 +22,18 @@ type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
|
|
|
22
22
|
* Дополнительные пропсы шторки
|
|
23
23
|
*/
|
|
24
24
|
bottomSheetProps?: Partial<BottomSheetProps>;
|
|
25
|
+
/**
|
|
26
|
+
* Дополнительные пропсы модалки
|
|
27
|
+
*/
|
|
28
|
+
modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
|
|
29
|
+
/**
|
|
30
|
+
* Дополнительные пропсы шапки модалки
|
|
31
|
+
*/
|
|
32
|
+
modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
|
|
33
|
+
/**
|
|
34
|
+
* Дополнительные пропсы футера модалки
|
|
35
|
+
*/
|
|
36
|
+
modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
|
|
25
37
|
};
|
|
26
38
|
declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
|
|
27
39
|
/**
|
|
@@ -42,5 +54,17 @@ declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectP
|
|
|
42
54
|
* Дополнительные пропсы шторки
|
|
43
55
|
*/
|
|
44
56
|
bottomSheetProps?: Partial<BottomSheetProps> | undefined;
|
|
57
|
+
/**
|
|
58
|
+
* Дополнительные пропсы модалки
|
|
59
|
+
*/
|
|
60
|
+
modalProps?: Partial<import("../../Component.mobile-b2c0420d").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
|
|
61
|
+
/**
|
|
62
|
+
* Дополнительные пропсы шапки модалки
|
|
63
|
+
*/
|
|
64
|
+
modalHeaderProps?: Partial<import("../../Component.mobile-b2c0420d").HeaderProps> | undefined;
|
|
65
|
+
/**
|
|
66
|
+
* Дополнительные пропсы футера модалки
|
|
67
|
+
*/
|
|
68
|
+
modalFooterProps?: Partial<import("../../Component.mobile-b2c0420d").FooterProps> | undefined;
|
|
45
69
|
} & React.RefAttributes<unknown>>;
|
|
46
70
|
export { SelectMobileProps, BaseSelectMobile };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { __assign } from 'tslib';
|
|
1
|
+
import { __assign, __spreadArray } from 'tslib';
|
|
2
2
|
import React, { forwardRef, useRef, useMemo, useEffect } from 'react';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { useMultipleSelection, useCombobox } from 'downshift';
|
|
6
6
|
import { BottomSheet } from '@alfalab/core-components-bottom-sheet/esm';
|
|
7
7
|
import { ModalMobile } from '@alfalab/core-components-modal/esm/mobile';
|
|
8
|
-
import { g as getDataTestId } from '../../getDataTestId-
|
|
8
|
+
import { g as getDataTestId } from '../../getDataTestId-8aabb6b6.js';
|
|
9
9
|
import { processOptions } from '../../utils.js';
|
|
10
10
|
import { Arrow } from '../arrow/Component.js';
|
|
11
11
|
import { Field } from '../field/Component.js';
|
|
@@ -24,16 +24,17 @@ import '../checkmark-mobile/Component.js';
|
|
|
24
24
|
import '@alfalab/core-components-scrollbar/esm';
|
|
25
25
|
import '../../consts.js';
|
|
26
26
|
|
|
27
|
-
var styles = {"component":"
|
|
27
|
+
var styles = {"component":"select__component_1yxyi","sheet":"select__sheet_1yxyi","sheetContent":"select__sheetContent_1yxyi","sheetContainer":"select__sheetContainer_1yxyi","block":"select__block_1yxyi","option":"select__option_1yxyi","optionGroup":"select__optionGroup_1yxyi"};
|
|
28
28
|
require('./index.css')
|
|
29
29
|
|
|
30
30
|
var BaseSelectMobile = forwardRef(function (_a, ref) {
|
|
31
31
|
var _b;
|
|
32
|
-
var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = _a.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.optionsListWidth, optionsListWidth = _l === void 0 ? 'content' : _l, name = _a.name, id = _a.id, _m = _a.selected, selected = _m === void 0 ? [] : _m, _o = _a.size, size = _o === void 0 ? 'm' : _o, _p = _a.optionsSize, optionsSize = _p === void 0 ? 'm' : _p, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _q = _a.fieldProps, fieldProps = _q === void 0 ? {} : _q, _r = _a.optionProps, optionProps = _r === void 0 ? {} : _r, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, _s = _a.Arrow, Arrow$1 = _s === void 0 ? Arrow : _s, _t = _a.Field, Field$1 = _t === void 0 ? Field : _t, _u = _a.Optgroup, Optgroup$1 = _u === void 0 ? Optgroup : _u, _v = _a.Option, Option$1 = _v === void 0 ? Option : _v, _w = _a.OptionsList, OptionsList$1 = _w === void 0 ? OptionsList : _w, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps, _x = _a.showEmptyOptionsList, showEmptyOptionsList = _x === void 0 ? false : _x;
|
|
32
|
+
var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = _a.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.optionsListWidth, optionsListWidth = _l === void 0 ? 'content' : _l, name = _a.name, id = _a.id, _m = _a.selected, selected = _m === void 0 ? [] : _m, _o = _a.size, size = _o === void 0 ? 'm' : _o, _p = _a.optionsSize, optionsSize = _p === void 0 ? 'm' : _p, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _q = _a.fieldProps, fieldProps = _q === void 0 ? {} : _q, _r = _a.optionProps, optionProps = _r === void 0 ? {} : _r, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, _s = _a.Arrow, Arrow$1 = _s === void 0 ? Arrow : _s, _t = _a.Field, Field$1 = _t === void 0 ? Field : _t, _u = _a.Optgroup, Optgroup$1 = _u === void 0 ? Optgroup : _u, _v = _a.Option, Option$1 = _v === void 0 ? Option : _v, _w = _a.OptionsList, OptionsList$1 = _w === void 0 ? OptionsList : _w, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps, modalProps = _a.modalProps, modalHeaderProps = _a.modalHeaderProps, modalFooterProps = _a.modalFooterProps, _x = _a.showEmptyOptionsList, showEmptyOptionsList = _x === void 0 ? false : _x;
|
|
33
33
|
var rootRef = useRef(null);
|
|
34
34
|
var fieldRef = useRef(null);
|
|
35
35
|
var listRef = useRef(null);
|
|
36
36
|
var initiatorRef = useRef(null);
|
|
37
|
+
var alreadyClickedRef = useRef(false);
|
|
37
38
|
var itemToString = function (option) { return (option ? option.key : ''); };
|
|
38
39
|
var _y = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _y.flatOptions, selectedOptions = _y.selectedOptions;
|
|
39
40
|
var scrollableContainerRef = useRef(null);
|
|
@@ -97,7 +98,12 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
|
|
|
97
98
|
case useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
98
99
|
case useCombobox.stateChangeTypes.ItemClick:
|
|
99
100
|
initiatorRef.current = selectedItem;
|
|
100
|
-
if (selectedItem && !selectedItem.disabled) {
|
|
101
|
+
if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
|
|
102
|
+
alreadyClickedRef.current = true;
|
|
103
|
+
// TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
|
|
104
|
+
setTimeout(function () {
|
|
105
|
+
alreadyClickedRef.current = false;
|
|
106
|
+
});
|
|
101
107
|
var alreadySelected = selectedItems.includes(selectedItem);
|
|
102
108
|
var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
|
|
103
109
|
if (alreadySelected && allowRemove) {
|
|
@@ -205,9 +211,21 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
|
|
|
205
211
|
: undefined,
|
|
206
212
|
}, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
|
|
207
213
|
name && renderValue(),
|
|
208
|
-
isBottomSheet ? (React.createElement(BottomSheet, __assign({ open: open, onClose: handleClose, className: styles.sheet, contentClassName: styles.sheetContent, containerClassName: styles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, scrollableContainerRef: scrollableContainerRef }, bottomSheetProps), renderOptionsList())) : (React.createElement(ModalMobile, { open: open,
|
|
209
|
-
|
|
210
|
-
|
|
214
|
+
isBottomSheet ? (React.createElement(BottomSheet, __assign({ open: open, onClose: handleClose, className: styles.sheet, contentClassName: styles.sheetContent, containerClassName: styles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, scrollableContainerRef: scrollableContainerRef }, bottomSheetProps), renderOptionsList())) : (React.createElement(ModalMobile, __assign({ open: open, hasCloser: true }, modalProps, { onClose: function () {
|
|
215
|
+
var _a;
|
|
216
|
+
var args = [];
|
|
217
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
218
|
+
args[_i] = arguments[_i];
|
|
219
|
+
}
|
|
220
|
+
handleClose();
|
|
221
|
+
(_a = modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([modalProps], args, false));
|
|
222
|
+
}, contentClassName: cn(styles.sheetContent, modalProps === null || modalProps === void 0 ? void 0 : modalProps.contentClassName), ref: mergeRefs([
|
|
223
|
+
scrollableContainerRef,
|
|
224
|
+
modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
|
|
225
|
+
]) }),
|
|
226
|
+
React.createElement(ModalMobile.Header, __assign({ hasCloser: true, sticky: true }, modalHeaderProps), label || placeholder),
|
|
227
|
+
renderOptionsList(),
|
|
228
|
+
(modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React.createElement(ModalMobile.Footer, __assign({}, modalFooterProps))))));
|
|
211
229
|
});
|
|
212
230
|
|
|
213
231
|
export { BaseSelectMobile };
|
|
@@ -3,7 +3,7 @@ import cn from 'classnames';
|
|
|
3
3
|
import { BaseModalContext } from '@alfalab/core-components-base-modal/esm';
|
|
4
4
|
import { Button } from '@alfalab/core-components-button/esm';
|
|
5
5
|
|
|
6
|
-
var styles = {"footer":"
|
|
6
|
+
var styles = {"footer":"select__footer_1kddv","button":"select__button_1kddv","highlighted":"select__highlighted_1kddv"};
|
|
7
7
|
require('./index.css')
|
|
8
8
|
|
|
9
9
|
var Footer = function (_a) {
|
|
@@ -18,8 +18,8 @@ var Footer = function (_a) {
|
|
|
18
18
|
tabIndex: 0, className: cn(styles.footer, (_b = {},
|
|
19
19
|
_b[styles.highlighted] = footerHighlighted,
|
|
20
20
|
_b)) },
|
|
21
|
-
React.createElement(Button, { size: 's', view: '
|
|
22
|
-
|
|
21
|
+
showClear && (React.createElement(Button, { size: 's', view: 'secondary', className: styles.button, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")),
|
|
22
|
+
React.createElement(Button, { size: 's', view: 'primary', className: styles.button, onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C")));
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
export { Footer };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: n8lxi */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-bg-primary: #fff;
|
|
@@ -26,17 +26,17 @@
|
|
|
26
26
|
/* checkmark */
|
|
27
27
|
|
|
28
28
|
/* optgroup */
|
|
29
|
-
} .
|
|
29
|
+
} .select__footer_1kddv {
|
|
30
30
|
display: flex;
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
width: 100%;
|
|
33
33
|
padding: var(--gap-m) var(--gap-m);
|
|
34
34
|
background-color: var(--color-light-bg-primary)
|
|
35
|
-
} .
|
|
35
|
+
} .select__footer_1kddv .select__button_1kddv:first-of-type {
|
|
36
36
|
margin-right: var(--gap-m);
|
|
37
|
-
} .
|
|
37
|
+
} .select__button_1kddv {
|
|
38
38
|
width: 50%;
|
|
39
|
-
} .
|
|
39
|
+
} .select__highlighted_1kddv {
|
|
40
40
|
border-top: 1px solid var(--color-light-border-primary);
|
|
41
41
|
background-color: var(--color-light-bg-primary);
|
|
42
42
|
}
|