@alfalab/core-components-select 19.1.10 → 19.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/components/arrow/index.css +4 -4
- package/components/arrow/index.module.css.js +1 -1
- package/components/base-checkmark/index.css +9 -9
- package/components/base-checkmark/index.module.css.js +1 -1
- package/components/base-option/index.css +14 -14
- package/components/base-option/index.module.css.js +1 -1
- package/components/base-select/Component.js +36 -49
- package/components/base-select/Component.js.map +1 -1
- package/components/base-select/index.css +70 -20
- package/components/base-select/index.module.css.js +1 -1
- package/components/base-select/index.module.css.js.map +1 -1
- package/components/base-select/mobile.css +12 -11
- package/components/base-select/mobile.module.css.js +1 -1
- package/components/base-select/mobile.module.css.js.map +1 -1
- package/components/checkmark/index.css +11 -11
- package/components/checkmark/index.module.css.js +1 -1
- package/components/checkmark-mobile/index.css +6 -6
- package/components/checkmark-mobile/index.module.css.js +1 -1
- package/components/clear-button/index.css +4 -4
- package/components/clear-button/index.module.css.js +1 -1
- package/components/field/index.css +13 -13
- package/components/field/index.module.css.js +1 -1
- package/components/footer/index.css +4 -4
- package/components/footer/index.module.css.js +1 -1
- package/components/optgroup/index.css +4 -4
- package/components/optgroup/index.module.css.js +1 -1
- package/components/option/desktop/index.css +23 -19
- package/components/option/desktop/index.module.css.js +1 -1
- package/components/option/desktop/index.module.css.js.map +1 -1
- package/components/option/mobile/index.css +20 -16
- package/components/option/mobile/index.module.css.js +1 -1
- package/components/option/mobile/index.module.css.js.map +1 -1
- package/components/options-list/Component.d.ts +4 -0
- package/components/options-list/Component.js +32 -53
- package/components/options-list/Component.js.map +1 -1
- package/components/options-list/index.css +13 -33
- package/components/options-list/index.module.css.js +1 -1
- package/components/options-list/index.module.css.js.map +1 -1
- package/components/search/index.css +1 -1
- package/components/search/index.module.css.js +1 -1
- package/components/virtual-options-list/Component.d.ts +4 -0
- package/components/virtual-options-list/Component.js +61 -48
- package/components/virtual-options-list/Component.js.map +1 -1
- package/cssm/components/base-select/Component.js +36 -49
- package/cssm/components/base-select/Component.js.map +1 -1
- package/cssm/components/base-select/index.module.css +61 -11
- package/cssm/components/base-select/mobile.module.css +1 -0
- package/cssm/components/option/desktop/index.module.css +4 -0
- package/cssm/components/option/mobile/index.module.css +4 -0
- package/cssm/components/options-list/Component.d.ts +4 -0
- package/cssm/components/options-list/Component.js +32 -53
- package/cssm/components/options-list/Component.js.map +1 -1
- package/cssm/components/options-list/index.module.css +6 -26
- package/cssm/components/virtual-options-list/Component.d.ts +4 -0
- package/cssm/components/virtual-options-list/Component.js +61 -48
- package/cssm/components/virtual-options-list/Component.js.map +1 -1
- package/cssm/presets/useSelectWithApply/hook.d.ts +12 -0
- package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +4 -0
- package/cssm/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css +0 -5
- package/cssm/presets/useSelectWithApply/options-list-with-apply/header/index.module.css +9 -6
- package/cssm/shared/index.js +0 -1
- package/cssm/shared/index.js.map +1 -1
- package/cssm/typings.d.ts +21 -1
- package/cssm/utils.d.ts +1 -6
- package/cssm/utils.js +19 -28
- package/cssm/utils.js.map +1 -1
- package/esm/components/arrow/index.css +4 -4
- package/esm/components/arrow/index.module.css.js +1 -1
- package/esm/components/base-checkmark/index.css +9 -9
- package/esm/components/base-checkmark/index.module.css.js +1 -1
- package/esm/components/base-option/index.css +14 -14
- package/esm/components/base-option/index.module.css.js +1 -1
- package/esm/components/base-select/Component.js +37 -50
- package/esm/components/base-select/Component.js.map +1 -1
- package/esm/components/base-select/index.css +70 -20
- package/esm/components/base-select/index.module.css.js +1 -1
- package/esm/components/base-select/index.module.css.js.map +1 -1
- package/esm/components/base-select/mobile.css +12 -11
- package/esm/components/base-select/mobile.module.css.js +1 -1
- package/esm/components/base-select/mobile.module.css.js.map +1 -1
- package/esm/components/checkmark/index.css +11 -11
- package/esm/components/checkmark/index.module.css.js +1 -1
- package/esm/components/checkmark-mobile/index.css +6 -6
- package/esm/components/checkmark-mobile/index.module.css.js +1 -1
- package/esm/components/clear-button/index.css +4 -4
- package/esm/components/clear-button/index.module.css.js +1 -1
- package/esm/components/field/index.css +13 -13
- package/esm/components/field/index.module.css.js +1 -1
- package/esm/components/footer/index.css +4 -4
- package/esm/components/footer/index.module.css.js +1 -1
- package/esm/components/optgroup/index.css +4 -4
- package/esm/components/optgroup/index.module.css.js +1 -1
- package/esm/components/option/desktop/index.css +23 -19
- package/esm/components/option/desktop/index.module.css.js +1 -1
- package/esm/components/option/desktop/index.module.css.js.map +1 -1
- package/esm/components/option/mobile/index.css +20 -16
- package/esm/components/option/mobile/index.module.css.js +1 -1
- package/esm/components/option/mobile/index.module.css.js.map +1 -1
- package/esm/components/options-list/Component.d.ts +4 -0
- package/esm/components/options-list/Component.js +33 -54
- package/esm/components/options-list/Component.js.map +1 -1
- package/esm/components/options-list/index.css +13 -33
- package/esm/components/options-list/index.module.css.js +1 -1
- package/esm/components/options-list/index.module.css.js.map +1 -1
- package/esm/components/search/index.css +1 -1
- package/esm/components/search/index.module.css.js +1 -1
- package/esm/components/virtual-options-list/Component.d.ts +4 -0
- package/esm/components/virtual-options-list/Component.js +63 -49
- package/esm/components/virtual-options-list/Component.js.map +1 -1
- package/esm/mobile/modal.mobile.css +1 -1
- package/esm/mobile/modal.mobile.module.css.js +1 -1
- package/esm/presets/useSelectWithApply/hook.d.ts +12 -0
- package/esm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +4 -0
- package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.css +2 -7
- package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js.map +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.css +12 -9
- package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
- package/esm/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map +1 -1
- package/esm/presets/useSelectWithLoading/index.css +1 -1
- package/esm/presets/useSelectWithLoading/index.module.css.js +1 -1
- package/esm/shared/index.js +1 -1
- package/esm/typings.d.ts +21 -1
- package/esm/utils.d.ts +1 -6
- package/esm/utils.js +21 -29
- package/esm/utils.js.map +1 -1
- package/mobile/modal.mobile.css +1 -1
- package/mobile/modal.mobile.module.css.js +1 -1
- package/modern/components/arrow/index.css +4 -4
- package/modern/components/arrow/index.module.css.js +1 -1
- package/modern/components/base-checkmark/index.css +9 -9
- package/modern/components/base-checkmark/index.module.css.js +1 -1
- package/modern/components/base-option/index.css +14 -14
- package/modern/components/base-option/index.module.css.js +1 -1
- package/modern/components/base-select/Component.js +34 -47
- package/modern/components/base-select/Component.js.map +1 -1
- package/modern/components/base-select/index.css +70 -20
- package/modern/components/base-select/index.module.css.js +1 -1
- package/modern/components/base-select/index.module.css.js.map +1 -1
- package/modern/components/base-select/mobile.css +12 -11
- package/modern/components/base-select/mobile.module.css.js +1 -1
- package/modern/components/base-select/mobile.module.css.js.map +1 -1
- package/modern/components/checkmark/index.css +11 -11
- package/modern/components/checkmark/index.module.css.js +1 -1
- package/modern/components/checkmark-mobile/index.css +6 -6
- package/modern/components/checkmark-mobile/index.module.css.js +1 -1
- package/modern/components/clear-button/index.css +4 -4
- package/modern/components/clear-button/index.module.css.js +1 -1
- package/modern/components/field/index.css +13 -13
- package/modern/components/field/index.module.css.js +1 -1
- package/modern/components/footer/index.css +4 -4
- package/modern/components/footer/index.module.css.js +1 -1
- package/modern/components/optgroup/index.css +4 -4
- package/modern/components/optgroup/index.module.css.js +1 -1
- package/modern/components/option/desktop/index.css +23 -19
- package/modern/components/option/desktop/index.module.css.js +1 -1
- package/modern/components/option/desktop/index.module.css.js.map +1 -1
- package/modern/components/option/mobile/index.css +20 -16
- package/modern/components/option/mobile/index.module.css.js +1 -1
- package/modern/components/option/mobile/index.module.css.js.map +1 -1
- package/modern/components/options-list/Component.d.ts +4 -0
- package/modern/components/options-list/Component.js +29 -49
- package/modern/components/options-list/Component.js.map +1 -1
- package/modern/components/options-list/index.css +13 -33
- package/modern/components/options-list/index.module.css.js +1 -1
- package/modern/components/options-list/index.module.css.js.map +1 -1
- package/modern/components/search/index.css +1 -1
- package/modern/components/search/index.module.css.js +1 -1
- package/modern/components/virtual-options-list/Component.d.ts +4 -0
- package/modern/components/virtual-options-list/Component.js +59 -45
- package/modern/components/virtual-options-list/Component.js.map +1 -1
- package/modern/mobile/modal.mobile.css +1 -1
- package/modern/mobile/modal.mobile.module.css.js +1 -1
- package/modern/presets/useSelectWithApply/hook.d.ts +12 -0
- package/modern/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +4 -0
- package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css +2 -7
- package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js.map +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css +12 -9
- package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
- package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map +1 -1
- package/modern/presets/useSelectWithLoading/index.css +1 -1
- package/modern/presets/useSelectWithLoading/index.module.css.js +1 -1
- package/modern/shared/index.js +1 -1
- package/modern/typings.d.ts +21 -1
- package/modern/utils.d.ts +1 -6
- package/modern/utils.js +21 -29
- package/modern/utils.js.map +1 -1
- package/moderncssm/components/base-select/Component.js +34 -47
- package/moderncssm/components/base-select/Component.js.map +1 -1
- package/moderncssm/components/base-select/index.module.css +67 -9
- package/moderncssm/components/base-select/mobile.module.css +1 -0
- package/moderncssm/components/option/desktop/index.module.css +3 -0
- package/moderncssm/components/option/mobile/index.module.css +3 -0
- package/moderncssm/components/options-list/Component.d.ts +4 -0
- package/moderncssm/components/options-list/Component.js +29 -49
- package/moderncssm/components/options-list/Component.js.map +1 -1
- package/moderncssm/components/options-list/index.module.css +7 -32
- package/moderncssm/components/virtual-options-list/Component.d.ts +4 -0
- package/moderncssm/components/virtual-options-list/Component.js +59 -45
- package/moderncssm/components/virtual-options-list/Component.js.map +1 -1
- package/moderncssm/presets/useSelectWithApply/hook.d.ts +12 -0
- package/moderncssm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +4 -0
- package/moderncssm/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css +0 -4
- package/moderncssm/presets/useSelectWithApply/options-list-with-apply/header/index.module.css +8 -6
- package/moderncssm/shared/index.js +1 -1
- package/moderncssm/typings.d.ts +21 -1
- package/moderncssm/utils.d.ts +1 -6
- package/moderncssm/utils.js +21 -29
- package/moderncssm/utils.js.map +1 -1
- package/package.json +13 -14
- package/presets/useSelectWithApply/hook.d.ts +12 -0
- package/presets/useSelectWithApply/options-list-with-apply/Component.d.ts +4 -0
- package/presets/useSelectWithApply/options-list-with-apply/footer/index.css +2 -7
- package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js.map +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/header/index.css +12 -9
- package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js +1 -1
- package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map +1 -1
- package/presets/useSelectWithLoading/index.css +1 -1
- package/presets/useSelectWithLoading/index.module.css.js +1 -1
- package/shared/index.js +0 -1
- package/shared/index.js.map +1 -1
- package/src/components/base-select/Component.tsx +41 -55
- package/src/components/base-select/index.module.css +60 -8
- package/src/components/base-select/mobile.module.css +1 -0
- package/src/components/option/index.module.css +4 -0
- package/src/components/options-list/Component.tsx +54 -97
- package/src/components/options-list/index.module.css +7 -31
- package/src/components/virtual-options-list/Component.tsx +95 -72
- package/src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css +0 -4
- package/src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css +4 -4
- package/src/typings.ts +26 -0
- package/src/utils.ts +30 -34
- package/src/vars.css +3 -0
- package/typings.d.ts +21 -1
- package/utils.d.ts +1 -6
- package/utils.js +19 -28
- package/utils.js.map +1 -1
- package/components/virtual-options-list/index.css +0 -83
- package/components/virtual-options-list/index.module.css.js +0 -8
- package/components/virtual-options-list/index.module.css.js.map +0 -1
- package/cssm/components/virtual-options-list/index.module.css +0 -83
- package/esm/components/virtual-options-list/index.css +0 -83
- package/esm/components/virtual-options-list/index.module.css.js +0 -6
- package/esm/components/virtual-options-list/index.module.css.js.map +0 -1
- package/modern/components/virtual-options-list/index.css +0 -83
- package/modern/components/virtual-options-list/index.module.css.js +0 -6
- package/modern/components/virtual-options-list/index.module.css.js.map +0 -1
- package/moderncssm/components/virtual-options-list/index.module.css +0 -81
- package/src/components/virtual-options-list/index.module.css +0 -77
|
@@ -4,22 +4,17 @@
|
|
|
4
4
|
:root {
|
|
5
5
|
--gap-xs: 8px;
|
|
6
6
|
--gap-s: 12px;
|
|
7
|
-
--gap-m: 16px;
|
|
8
7
|
--gap-8: var(--gap-xs);
|
|
9
8
|
--gap-12: var(--gap-s);
|
|
10
|
-
--gap-16: var(--gap-m);
|
|
11
9
|
}
|
|
12
10
|
:root {
|
|
13
11
|
--select-option-list-footer-button-gap: var(--gap-8);
|
|
14
12
|
}
|
|
15
|
-
.
|
|
13
|
+
.select__footer_2tb2j {
|
|
16
14
|
background-color: var(--color-light-base-bg-primary);
|
|
17
15
|
padding: var(--gap-12);
|
|
18
16
|
outline: none;
|
|
19
17
|
}
|
|
20
|
-
.
|
|
21
|
-
padding: var(--gap-12) var(--gap-16);
|
|
22
|
-
}
|
|
23
|
-
.select__footer_1mxu2 > .select__button_1mxu2 + .select__button_1mxu2 {
|
|
18
|
+
.select__footer_2tb2j > .select__button_2tb2j + .select__button_2tb2j {
|
|
24
19
|
margin-left: var(--select-option-list-footer-button-gap);
|
|
25
20
|
}
|
package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"footer":"
|
|
3
|
+
const styles = {"footer":"select__footer_2tb2j","button":"select__button_2tb2j"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.footer {\n background-color: var(--color-light-base-bg-primary);\n padding: var(--gap-12);\n outline: none;\n\n
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.footer {\n background-color: var(--color-light-base-bg-primary);\n padding: var(--gap-12);\n outline: none;\n\n & > .button + .button {\n margin-left: var(--select-option-list-footer-button-gap);\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;"}
|
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-xs: 8px;
|
|
3
3
|
--gap-s: 12px;
|
|
4
|
-
--gap-
|
|
4
|
+
--gap-0: 0px;
|
|
5
5
|
--gap-8: var(--gap-xs);
|
|
6
6
|
--gap-12: var(--gap-s);
|
|
7
|
-
--gap-16: var(--gap-m);
|
|
8
7
|
}
|
|
9
|
-
|
|
10
|
-
padding: var(--gap-
|
|
8
|
+
:root {
|
|
9
|
+
--select-options-list-top-padding: var(--gap-0);
|
|
10
|
+
--select-options-list-right-padding: var(--gap-0);
|
|
11
|
+
--select-options-list-left-padding: var(--gap-0);
|
|
12
|
+
}
|
|
13
|
+
.select__desktop_1eykk {
|
|
14
|
+
padding: calc(var(--gap-12) + var(--select-options-list-top-padding))
|
|
15
|
+
calc(var(--gap-12) + var(--select-options-list-right-padding)) var(--gap-12)
|
|
16
|
+
calc(var(--gap-12) + var(--select-options-list-left-padding));
|
|
11
17
|
}
|
|
12
|
-
.
|
|
13
|
-
padding-left: var(--gap-16);
|
|
14
|
-
}
|
|
15
|
-
.select__mobile_icdp3 {
|
|
18
|
+
.select__mobile_1eykk {
|
|
16
19
|
padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
|
|
17
20
|
}
|
|
18
|
-
.
|
|
21
|
+
.select__positionAfter_1eykk {
|
|
19
22
|
margin-left: 0;
|
|
20
23
|
margin-left: initial;
|
|
21
24
|
}
|
package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"desktop":"
|
|
3
|
+
const styles = {"desktop":"select__desktop_1eykk","mobile":"select__mobile_1eykk","positionAfter":"select__positionAfter_1eykk"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.desktop {\n padding: var(--gap-12)
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../vars.css';\n\n.desktop {\n padding: calc(var(--gap-12) + var(--select-options-list-top-padding))\n calc(var(--gap-12) + var(--select-options-list-right-padding)) var(--gap-12)\n calc(var(--gap-12) + var(--select-options-list-left-padding));\n}\n\n.mobile {\n padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);\n}\n\n.positionAfter {\n margin-left: unset;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,eAAe,CAAC,6BAA6B,CAAC;;;;"}
|
package/modern/shared/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
|
|
2
2
|
export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
|
|
3
3
|
export { useSelectWithApply } from '../presets/useSelectWithApply/hook.js';
|
|
4
|
-
export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions,
|
|
4
|
+
export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions } from '../utils.js';
|
|
5
5
|
export { OptionDesktop } from '../components/option/desktop/Component.js';
|
|
6
6
|
export { OptionMobile } from '../components/option/mobile/Component.js';
|
|
7
7
|
export { OptionResponsive as Option } from '../components/option/Component.responsive.js';
|
package/modern/typings.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type AriaAttributes, type ComponentType, type FC, type FocusEvent, type MouseEvent, type ReactElement, type ReactNode, type RefAttributes, type SVGProps } from 'react';
|
|
1
|
+
import { type AriaAttributes, type ComponentType, type FC, type FocusEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefAttributes, type SVGProps } from 'react';
|
|
2
2
|
import { type Environment } from 'downshift';
|
|
3
3
|
import { type BottomSheetProps } from '@alfalab/core-components-bottom-sheet/modern';
|
|
4
4
|
import { type FormControlProps } from '@alfalab/core-components-form-control/modern';
|
|
@@ -113,6 +113,7 @@ export interface BaseSelectProps {
|
|
|
113
113
|
size?: FormControlProps['size'];
|
|
114
114
|
/**
|
|
115
115
|
* Размер пунктов меню
|
|
116
|
+
* @deprecated Управление размером пунктов меню через отдельный проп не поддерживается дизайн-контрактом. Размер пункта должен определяться его контентом.
|
|
116
117
|
*/
|
|
117
118
|
optionsSize?: 40 | 48 | 56 | 64 | 72;
|
|
118
119
|
/**
|
|
@@ -539,6 +540,22 @@ export type OptionsListProps = Pick<SelectProps, 'client'> & {
|
|
|
539
540
|
* Ограничение динамического размера группы вариантов выбора
|
|
540
541
|
*/
|
|
541
542
|
limitDynamicOptionGroupSize?: BaseSelectProps['limitDynamicOptionGroupSize'];
|
|
543
|
+
/**
|
|
544
|
+
*
|
|
545
|
+
*/
|
|
546
|
+
scrollableNodeClassName?: string;
|
|
547
|
+
/**
|
|
548
|
+
*
|
|
549
|
+
*/
|
|
550
|
+
contentNodeClassName?: string;
|
|
551
|
+
/**
|
|
552
|
+
*
|
|
553
|
+
*/
|
|
554
|
+
listNodeClassName?: string;
|
|
555
|
+
/**
|
|
556
|
+
*
|
|
557
|
+
*/
|
|
558
|
+
ctrlRef?: Ref<OptionsListController>;
|
|
542
559
|
};
|
|
543
560
|
export type OptgroupProps = {
|
|
544
561
|
/**
|
|
@@ -789,4 +806,7 @@ export type ClearButtonProps = {
|
|
|
789
806
|
*/
|
|
790
807
|
size?: FormControlProps['size'];
|
|
791
808
|
};
|
|
809
|
+
export interface OptionsListController {
|
|
810
|
+
scrollToIndex(index: number): void;
|
|
811
|
+
}
|
|
792
812
|
export {};
|
package/modern/utils.d.ts
CHANGED
|
@@ -21,10 +21,6 @@ type useVisibleOptionsArgs = {
|
|
|
21
21
|
* Реф на контейнер с пунтами меню
|
|
22
22
|
*/
|
|
23
23
|
listRef: RefObject<HTMLElement>;
|
|
24
|
-
/**
|
|
25
|
-
* Реф на контейнер, которому нужно установить высоту
|
|
26
|
-
*/
|
|
27
|
-
styleTargetRef?: RefObject<HTMLElement>;
|
|
28
24
|
/**
|
|
29
25
|
* Флаг открытия меню
|
|
30
26
|
*/
|
|
@@ -46,13 +42,12 @@ type useVisibleOptionsArgs = {
|
|
|
46
42
|
*/
|
|
47
43
|
actualOptionsCount?: boolean;
|
|
48
44
|
};
|
|
49
|
-
export declare function useVirtualVisibleOptions({ visibleOptions, listRef,
|
|
45
|
+
export declare function useVirtualVisibleOptions({ visibleOptions, listRef, open, invalidate, options, size, actualOptionsCount, }: useVisibleOptionsArgs): number | undefined;
|
|
50
46
|
export declare function useVisibleOptions({ visibleOptions, listRef, open, options, size, actualOptionsCount, }: useVisibleOptionsArgs): readonly [boolean, number | undefined];
|
|
51
47
|
export declare function defaultFilterFn(optionText: string, search: string): boolean;
|
|
52
48
|
export declare function defaultGroupAccessor(option: GroupShape): string | undefined;
|
|
53
49
|
export declare function defaultAccessor(option: OptionShape): string;
|
|
54
50
|
export declare function usePrevious<T>(value: T): T | undefined;
|
|
55
|
-
export declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
|
|
56
51
|
export declare function getSelectTestIds(dataTestId: string): {
|
|
57
52
|
select: string;
|
|
58
53
|
option: string;
|
package/modern/utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, isValidElement, cloneElement, useRef, useEffect } from 'react';
|
|
2
|
-
import { useIsMounted, fnUtils, getDataTestId } from '@alfalab/core-components-shared/modern';
|
|
2
|
+
import { useIsMounted, getElementWindow, fnUtils, getDataTestId } from '@alfalab/core-components-shared/modern';
|
|
3
3
|
import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
|
|
4
4
|
import { DEFAULT_SEPARATOR } from './consts.js';
|
|
5
5
|
|
|
@@ -71,21 +71,21 @@ function processOptions(options, selected = [], filterFn = () => true, filterGro
|
|
|
71
71
|
return { filteredOptions, flatOptions, selectedOptions };
|
|
72
72
|
}
|
|
73
73
|
// copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368
|
|
74
|
-
function useVirtualVisibleOptions({ visibleOptions, listRef,
|
|
75
|
-
|
|
74
|
+
function useVirtualVisibleOptions({ visibleOptions, listRef, open, invalidate, options, size, actualOptionsCount, }) {
|
|
75
|
+
const [height, setHeight] = useState();
|
|
76
|
+
useLayoutEffect_SAFE_FOR_SSR(() => {
|
|
76
77
|
const measureOptionHeight = (element) => typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
|
|
77
78
|
const list = listRef.current;
|
|
78
|
-
|
|
79
|
-
if (open && list && styleTarget && visibleOptions > 0) {
|
|
79
|
+
if (open && list && visibleOptions > 0) {
|
|
80
80
|
const childCount = list.children.length;
|
|
81
81
|
const optionsNodes = [].slice.call(list.children, 0, visibleOptions + 1);
|
|
82
|
-
let
|
|
82
|
+
let nextHeight = optionsNodes
|
|
83
83
|
.slice(0, visibleOptions)
|
|
84
84
|
.reduce((acc, child) => acc + measureOptionHeight(child), 0);
|
|
85
85
|
if (visibleOptions < childCount) {
|
|
86
86
|
const lastVisibleOptionHeight = measureOptionHeight(optionsNodes[optionsNodes.length - 1]);
|
|
87
87
|
// Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку
|
|
88
|
-
|
|
88
|
+
nextHeight += Math.round(childCount - visibleOptions === 1
|
|
89
89
|
? lastVisibleOptionHeight
|
|
90
90
|
: lastVisibleOptionHeight / 2);
|
|
91
91
|
}
|
|
@@ -93,24 +93,20 @@ function useVirtualVisibleOptions({ visibleOptions, listRef, styleTargetRef = li
|
|
|
93
93
|
actualOptionsCount &&
|
|
94
94
|
typeof size === 'number') {
|
|
95
95
|
const actualCount = (options ?? []).reduce((sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0), 0);
|
|
96
|
-
|
|
96
|
+
nextHeight =
|
|
97
97
|
Math.min(actualCount === 0 ? /** empty placeholder */ 1 : actualCount, visibleOptions) * size;
|
|
98
98
|
if (visibleOptions < actualCount) {
|
|
99
|
-
|
|
99
|
+
nextHeight += size / 2;
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
|
|
102
|
+
const win = getElementWindow(list);
|
|
103
|
+
nextHeight += ['::before', '::after']
|
|
104
|
+
.map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)
|
|
105
|
+
.reduce((a, b) => a + b);
|
|
106
|
+
setHeight(nextHeight);
|
|
103
107
|
}
|
|
104
|
-
}, [
|
|
105
|
-
|
|
106
|
-
listRef,
|
|
107
|
-
open,
|
|
108
|
-
options,
|
|
109
|
-
size,
|
|
110
|
-
styleTargetRef,
|
|
111
|
-
visibleOptions,
|
|
112
|
-
invalidate,
|
|
113
|
-
]);
|
|
108
|
+
}, [actualOptionsCount, listRef, open, options, size, visibleOptions, invalidate]);
|
|
109
|
+
return height;
|
|
114
110
|
}
|
|
115
111
|
function useVisibleOptions({ visibleOptions, listRef, open, options, size, actualOptionsCount, }) {
|
|
116
112
|
const [, runIfMounted] = useIsMounted();
|
|
@@ -142,6 +138,10 @@ function useVisibleOptions({ visibleOptions, listRef, open, options, size, actua
|
|
|
142
138
|
measuredHeight += size / 2;
|
|
143
139
|
}
|
|
144
140
|
}
|
|
141
|
+
const win = getElementWindow(list);
|
|
142
|
+
measuredHeight += ['::before', '::after']
|
|
143
|
+
.map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)
|
|
144
|
+
.reduce((a, b) => a + b);
|
|
145
145
|
setHeight(measuredHeight);
|
|
146
146
|
setMeasured(true);
|
|
147
147
|
return () => {
|
|
@@ -175,14 +175,6 @@ function usePrevious(value) {
|
|
|
175
175
|
}, [value]);
|
|
176
176
|
return ref.current;
|
|
177
177
|
}
|
|
178
|
-
// TODO: перенести
|
|
179
|
-
const lastIndexOf = (array, predicate) => {
|
|
180
|
-
for (let i = array.length - 1; i >= 0; i--) {
|
|
181
|
-
if (predicate(array[i]))
|
|
182
|
-
return i;
|
|
183
|
-
}
|
|
184
|
-
return -1;
|
|
185
|
-
};
|
|
186
178
|
function getSelectTestIds(dataTestId) {
|
|
187
179
|
return {
|
|
188
180
|
select: dataTestId,
|
|
@@ -213,5 +205,5 @@ function getSelectTestIds(dataTestId) {
|
|
|
213
205
|
};
|
|
214
206
|
}
|
|
215
207
|
|
|
216
|
-
export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions,
|
|
208
|
+
export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions };
|
|
217
209
|
//# sourceMappingURL=utils.js.map
|
package/modern/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import {\n cloneElement,\n isValidElement,\n type ReactNode,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { fnUtils, getDataTestId, useIsMounted } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { DEFAULT_SEPARATOR } from './consts';\nimport {\n type BaseSelectProps,\n type GroupShape,\n type OptionShape,\n type OptionsListProps,\n} from './typings';\n\nexport const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>\n Object.prototype.hasOwnProperty.call(item, 'options');\n\nexport const isOptionShape = (item: OptionShape | string | null): item is OptionShape =>\n !!item && Object.prototype.hasOwnProperty.call(item, 'key');\n\nexport const joinOptions = ({\n selected,\n selectedMultiple,\n valueSeparator = DEFAULT_SEPARATOR,\n}: {\n selected?: OptionShape;\n selectedMultiple?: OptionShape[];\n valueSeparator?: string;\n}) => {\n const options = selectedMultiple || (selected ? [selected] : []);\n\n if (!options.length) return null;\n\n return options.reduce((acc: Array<ReactNode | string>, option: OptionShape, index: number) => {\n if (isValidElement(option.content)) {\n acc.push(cloneElement(option.content, { key: option.key }));\n } else {\n acc.push(option.content);\n }\n\n if (index < options.length - 1) acc.push(valueSeparator);\n\n return acc;\n }, []);\n};\n\n// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу\nexport function processOptions(\n options: BaseSelectProps['options'],\n selected: BaseSelectProps['selected'] = [],\n filterFn: (option: OptionShape | GroupShape) => boolean = () => true,\n filterGroup = false,\n) {\n const flatOptions: OptionShape[] = [];\n const filteredOptions: BaseSelectProps['options'] = [];\n\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n const selectedOptions = selectedArray.filter(isOptionShape);\n const selectedKeys = selectedArray.filter(\n (option): option is string => typeof option === 'string',\n );\n\n const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);\n\n const process = (option: OptionShape | GroupShape) => {\n const isGroupOption = isGroup(option);\n\n if (!isGroupOption && isSelected(option)) {\n selectedOptions.push(option);\n }\n\n if (!filterFn(option)) return false;\n\n if (isGroupOption) {\n if (filterGroup) {\n Array.prototype.push.apply(flatOptions, option.options);\n }\n } else {\n flatOptions.push(option);\n }\n\n return true;\n };\n\n options.forEach((option) => {\n if (isGroup(option)) {\n const group: GroupShape = {\n ...option,\n options: [],\n };\n\n option.options.forEach((groupOption) => {\n const matched = process(groupOption);\n\n if (matched) group.options.push(groupOption);\n });\n\n if (group.options.length) {\n filteredOptions.push(group);\n\n return;\n }\n\n if (!filterGroup) return;\n }\n const matched = process(option);\n\n if (matched) filteredOptions.push(option);\n });\n\n return { filteredOptions, flatOptions, selectedOptions };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useVisibleOptionsArgs = {\n /**\n * Количество видимых пунктов\n */\n visibleOptions: number;\n\n /**\n * Реф на контейнер с пунтами меню\n */\n listRef: RefObject<HTMLElement>;\n\n /**\n * Реф на контейнер, которому нужно установить высоту\n */\n styleTargetRef?: RefObject<HTMLElement>;\n\n /**\n * Флаг открытия меню\n */\n open?: boolean;\n\n /**\n * Позволяет вызвать пересчет высоты\n */\n invalidate?: unknown;\n\n /**\n * Список вариантов выбора\n */\n options?: Array<OptionShape | GroupShape>;\n\n /**\n * Максимальный размер варианта выбора\n */\n size?: Extract<OptionsListProps['size'], number>;\n\n /**\n * Учитывать действительное число вариантов выбора\n */\n actualOptionsCount?: boolean;\n};\n\n// copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368\nexport function useVirtualVisibleOptions({\n visibleOptions,\n listRef,\n styleTargetRef = listRef,\n open,\n invalidate,\n options,\n size,\n actualOptionsCount,\n}: useVisibleOptionsArgs) {\n useEffect(() => {\n const measureOptionHeight = (element: HTMLElement) =>\n typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n const list = listRef.current;\n const styleTarget = styleTargetRef.current;\n\n if (open && list && styleTarget && visibleOptions > 0) {\n const childCount = list.children.length;\n const optionsNodes = ([] as HTMLElement[]).slice.call(\n list.children,\n 0,\n visibleOptions + 1,\n );\n\n let height = optionsNodes\n .slice(0, visibleOptions)\n .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n if (visibleOptions < childCount) {\n const lastVisibleOptionHeight = measureOptionHeight(\n optionsNodes[optionsNodes.length - 1],\n );\n\n // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n height += Math.round(\n childCount - visibleOptions === 1\n ? lastVisibleOptionHeight\n : lastVisibleOptionHeight / 2,\n );\n } else if (\n visibleOptions > childCount &&\n actualOptionsCount &&\n typeof size === 'number'\n ) {\n const actualCount = (options ?? []).reduce(\n (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n 0,\n );\n\n height =\n Math.min(\n actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n visibleOptions,\n ) * size;\n\n if (visibleOptions < actualCount) {\n height += size / 2;\n }\n }\n\n styleTarget.style.height = `${height}px`;\n }\n }, [\n actualOptionsCount,\n listRef,\n open,\n options,\n size,\n styleTargetRef,\n visibleOptions,\n invalidate,\n ]);\n}\n\nexport function useVisibleOptions({\n visibleOptions,\n listRef,\n open,\n options,\n size,\n actualOptionsCount,\n}: useVisibleOptionsArgs) {\n const [, runIfMounted] = useIsMounted();\n const [measured, setMeasured] = useState(false);\n const [height, setHeight] = useState<number | undefined>();\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const measureOptionHeight = (element: HTMLElement) =>\n typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n const list = listRef.current;\n\n if (open && list && visibleOptions > 0) {\n const childCount = list.children.length;\n const optionsNodes = ([] as HTMLElement[]).slice.call(\n list.children,\n 0,\n visibleOptions + 1,\n );\n\n let measuredHeight = optionsNodes\n .slice(0, visibleOptions)\n .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n if (visibleOptions < childCount) {\n const lastVisibleOptionHeight = measureOptionHeight(\n optionsNodes[optionsNodes.length - 1],\n );\n\n // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n measuredHeight += Math.round(\n childCount - visibleOptions === 1\n ? lastVisibleOptionHeight\n : lastVisibleOptionHeight / 2,\n );\n } else if (\n visibleOptions > childCount &&\n actualOptionsCount &&\n typeof size === 'number'\n ) {\n const actualCount = (options ?? []).reduce(\n (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n 0,\n );\n\n measuredHeight =\n Math.min(\n actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n visibleOptions,\n ) * size;\n\n if (visibleOptions < actualCount) {\n measuredHeight += size / 2;\n }\n }\n\n setHeight(measuredHeight);\n\n setMeasured(true);\n\n return () => {\n runIfMounted(() => setMeasured(false));\n };\n }\n\n return fnUtils.noop;\n }, [actualOptionsCount, listRef, open, options, size, visibleOptions, runIfMounted]);\n\n return [measured, height] as const;\n}\n\nexport function defaultFilterFn(optionText: string, search: string) {\n if (!search) return true;\n\n return optionText.toLowerCase().includes(search.toLowerCase());\n}\n\nexport function defaultGroupAccessor(option: GroupShape) {\n return option.label;\n}\n\nexport function defaultAccessor(option: OptionShape) {\n if (typeof option.content === 'string') return option.content;\n if (typeof option.value === 'string') return option.value;\n\n return option.key;\n}\n\n// TODO: перенести\nexport function usePrevious<T>(value: T) {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n}\n\n// TODO: перенести\nexport const lastIndexOf = <T>(array: T[], predicate: (item: T) => boolean) => {\n for (let i = array.length - 1; i >= 0; i--) {\n if (predicate(array[i])) return i;\n }\n\n return -1;\n};\n\nexport function getSelectTestIds(dataTestId: string) {\n return {\n select: dataTestId,\n option: getDataTestId(dataTestId, 'option'),\n optionsList: getDataTestId(dataTestId, 'options-list'),\n clearButton: getDataTestId(dataTestId, 'options-list-clear'),\n applyButton: getDataTestId(dataTestId, 'options-list-apply'),\n field: getDataTestId(dataTestId, 'field'),\n fieldFormControl: getDataTestId(dataTestId, 'field-form-control'),\n fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),\n fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),\n fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),\n fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),\n fieldClearIcon: getDataTestId(dataTestId, 'field-clear-icon'),\n searchInput: getDataTestId(dataTestId, 'search'),\n searchFormControl: getDataTestId(dataTestId, 'search-form-control'),\n searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),\n searchLeftAddons: getDataTestId(dataTestId, 'search-form-control-left-addons'),\n searchRightAddons: getDataTestId(dataTestId, 'search-form-control-right-addons'),\n searchError: getDataTestId(dataTestId, 'search-form-control-error-message'),\n searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),\n\n bottomSheet: getDataTestId(dataTestId, 'bottom-sheet'),\n bottomSheetHeader: getDataTestId(dataTestId, 'bottom-sheet-header'),\n bottomSheetContent: getDataTestId(dataTestId, 'bottom-sheet-content'),\n\n modal: getDataTestId(dataTestId, 'modal'),\n modalHeader: getDataTestId(dataTestId, 'modal-header'),\n modalContent: getDataTestId(dataTestId, 'modal-content'),\n };\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import {\n cloneElement,\n isValidElement,\n type ReactNode,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n fnUtils,\n getDataTestId,\n getElementWindow,\n useIsMounted,\n} from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { DEFAULT_SEPARATOR } from './consts';\nimport {\n type BaseSelectProps,\n type GroupShape,\n type OptionShape,\n type OptionsListProps,\n} from './typings';\n\nexport const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>\n Object.prototype.hasOwnProperty.call(item, 'options');\n\nexport const isOptionShape = (item: OptionShape | string | null): item is OptionShape =>\n !!item && Object.prototype.hasOwnProperty.call(item, 'key');\n\nexport const joinOptions = ({\n selected,\n selectedMultiple,\n valueSeparator = DEFAULT_SEPARATOR,\n}: {\n selected?: OptionShape;\n selectedMultiple?: OptionShape[];\n valueSeparator?: string;\n}) => {\n const options = selectedMultiple || (selected ? [selected] : []);\n\n if (!options.length) return null;\n\n return options.reduce((acc: Array<ReactNode | string>, option: OptionShape, index: number) => {\n if (isValidElement(option.content)) {\n acc.push(cloneElement(option.content, { key: option.key }));\n } else {\n acc.push(option.content);\n }\n\n if (index < options.length - 1) acc.push(valueSeparator);\n\n return acc;\n }, []);\n};\n\n// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу\nexport function processOptions(\n options: BaseSelectProps['options'],\n selected: BaseSelectProps['selected'] = [],\n filterFn: (option: OptionShape | GroupShape) => boolean = () => true,\n filterGroup = false,\n) {\n const flatOptions: OptionShape[] = [];\n const filteredOptions: BaseSelectProps['options'] = [];\n\n const selectedArray = Array.isArray(selected) ? selected : [selected];\n const selectedOptions = selectedArray.filter(isOptionShape);\n const selectedKeys = selectedArray.filter(\n (option): option is string => typeof option === 'string',\n );\n\n const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);\n\n const process = (option: OptionShape | GroupShape) => {\n const isGroupOption = isGroup(option);\n\n if (!isGroupOption && isSelected(option)) {\n selectedOptions.push(option);\n }\n\n if (!filterFn(option)) return false;\n\n if (isGroupOption) {\n if (filterGroup) {\n Array.prototype.push.apply(flatOptions, option.options);\n }\n } else {\n flatOptions.push(option);\n }\n\n return true;\n };\n\n options.forEach((option) => {\n if (isGroup(option)) {\n const group: GroupShape = {\n ...option,\n options: [],\n };\n\n option.options.forEach((groupOption) => {\n const matched = process(groupOption);\n\n if (matched) group.options.push(groupOption);\n });\n\n if (group.options.length) {\n filteredOptions.push(group);\n\n return;\n }\n\n if (!filterGroup) return;\n }\n const matched = process(option);\n\n if (matched) filteredOptions.push(option);\n });\n\n return { filteredOptions, flatOptions, selectedOptions };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useVisibleOptionsArgs = {\n /**\n * Количество видимых пунктов\n */\n visibleOptions: number;\n\n /**\n * Реф на контейнер с пунтами меню\n */\n listRef: RefObject<HTMLElement>;\n\n /**\n * Флаг открытия меню\n */\n open?: boolean;\n\n /**\n * Позволяет вызвать пересчет высоты\n */\n invalidate?: unknown;\n\n /**\n * Список вариантов выбора\n */\n options?: Array<OptionShape | GroupShape>;\n\n /**\n * Максимальный размер варианта выбора\n */\n size?: Extract<OptionsListProps['size'], number>;\n\n /**\n * Учитывать действительное число вариантов выбора\n */\n actualOptionsCount?: boolean;\n};\n\n// copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368\nexport function useVirtualVisibleOptions({\n visibleOptions,\n listRef,\n open,\n invalidate,\n options,\n size,\n actualOptionsCount,\n}: useVisibleOptionsArgs) {\n const [height, setHeight] = useState<number>();\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const measureOptionHeight = (element: HTMLElement) =>\n typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n const list = listRef.current;\n\n if (open && list && visibleOptions > 0) {\n const childCount = list.children.length;\n const optionsNodes = ([] as HTMLElement[]).slice.call(\n list.children,\n 0,\n visibleOptions + 1,\n );\n\n let nextHeight = optionsNodes\n .slice(0, visibleOptions)\n .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n if (visibleOptions < childCount) {\n const lastVisibleOptionHeight = measureOptionHeight(\n optionsNodes[optionsNodes.length - 1],\n );\n\n // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n nextHeight += Math.round(\n childCount - visibleOptions === 1\n ? lastVisibleOptionHeight\n : lastVisibleOptionHeight / 2,\n );\n } else if (\n visibleOptions > childCount &&\n actualOptionsCount &&\n typeof size === 'number'\n ) {\n const actualCount = (options ?? []).reduce(\n (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n 0,\n );\n\n nextHeight =\n Math.min(\n actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n visibleOptions,\n ) * size;\n\n if (visibleOptions < actualCount) {\n nextHeight += size / 2;\n }\n }\n\n const win = getElementWindow(list);\n\n nextHeight += ['::before', '::after']\n .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)\n .reduce((a, b) => a + b);\n\n setHeight(nextHeight);\n }\n }, [actualOptionsCount, listRef, open, options, size, visibleOptions, invalidate]);\n\n return height;\n}\n\nexport function useVisibleOptions({\n visibleOptions,\n listRef,\n open,\n options,\n size,\n actualOptionsCount,\n}: useVisibleOptionsArgs) {\n const [, runIfMounted] = useIsMounted();\n const [measured, setMeasured] = useState(false);\n const [height, setHeight] = useState<number | undefined>();\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const measureOptionHeight = (element: HTMLElement) =>\n typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n const list = listRef.current;\n\n if (open && list && visibleOptions > 0) {\n const childCount = list.children.length;\n const optionsNodes = ([] as HTMLElement[]).slice.call(\n list.children,\n 0,\n visibleOptions + 1,\n );\n\n let measuredHeight = optionsNodes\n .slice(0, visibleOptions)\n .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n if (visibleOptions < childCount) {\n const lastVisibleOptionHeight = measureOptionHeight(\n optionsNodes[optionsNodes.length - 1],\n );\n\n // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n measuredHeight += Math.round(\n childCount - visibleOptions === 1\n ? lastVisibleOptionHeight\n : lastVisibleOptionHeight / 2,\n );\n } else if (\n visibleOptions > childCount &&\n actualOptionsCount &&\n typeof size === 'number'\n ) {\n const actualCount = (options ?? []).reduce(\n (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n 0,\n );\n\n measuredHeight =\n Math.min(\n actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n visibleOptions,\n ) * size;\n\n if (visibleOptions < actualCount) {\n measuredHeight += size / 2;\n }\n }\n\n const win = getElementWindow(list);\n\n measuredHeight += ['::before', '::after']\n .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)\n .reduce((a, b) => a + b);\n\n setHeight(measuredHeight);\n\n setMeasured(true);\n\n return () => {\n runIfMounted(() => setMeasured(false));\n };\n }\n\n return fnUtils.noop;\n }, [actualOptionsCount, listRef, open, options, size, visibleOptions, runIfMounted]);\n\n return [measured, height] as const;\n}\n\nexport function defaultFilterFn(optionText: string, search: string) {\n if (!search) return true;\n\n return optionText.toLowerCase().includes(search.toLowerCase());\n}\n\nexport function defaultGroupAccessor(option: GroupShape) {\n return option.label;\n}\n\nexport function defaultAccessor(option: OptionShape) {\n if (typeof option.content === 'string') return option.content;\n if (typeof option.value === 'string') return option.value;\n\n return option.key;\n}\n\n// TODO: перенести\nexport function usePrevious<T>(value: T) {\n const ref = useRef<T>();\n\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref.current;\n}\n\nexport function getSelectTestIds(dataTestId: string) {\n return {\n select: dataTestId,\n option: getDataTestId(dataTestId, 'option'),\n optionsList: getDataTestId(dataTestId, 'options-list'),\n clearButton: getDataTestId(dataTestId, 'options-list-clear'),\n applyButton: getDataTestId(dataTestId, 'options-list-apply'),\n field: getDataTestId(dataTestId, 'field'),\n fieldFormControl: getDataTestId(dataTestId, 'field-form-control'),\n fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),\n fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),\n fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),\n fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),\n fieldClearIcon: getDataTestId(dataTestId, 'field-clear-icon'),\n searchInput: getDataTestId(dataTestId, 'search'),\n searchFormControl: getDataTestId(dataTestId, 'search-form-control'),\n searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),\n searchLeftAddons: getDataTestId(dataTestId, 'search-form-control-left-addons'),\n searchRightAddons: getDataTestId(dataTestId, 'search-form-control-right-addons'),\n searchError: getDataTestId(dataTestId, 'search-form-control-error-message'),\n searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),\n\n bottomSheet: getDataTestId(dataTestId, 'bottom-sheet'),\n bottomSheetHeader: getDataTestId(dataTestId, 'bottom-sheet-header'),\n bottomSheetContent: getDataTestId(dataTestId, 'bottom-sheet-content'),\n\n modal: getDataTestId(dataTestId, 'modal'),\n modalHeader: getDataTestId(dataTestId, 'modal-header'),\n modalContent: getDataTestId(dataTestId, 'modal-content'),\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React, { forwardRef, useRef, useMemo, useEffect, useCallback } from 'react';
|
|
2
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
|
-
import { ResizeObserver } from '@juggle/resize-observer';
|
|
4
3
|
import cn from 'classnames';
|
|
5
4
|
import { compute } from 'compute-scroll-into-view';
|
|
6
5
|
import { useMultipleSelection, useCombobox } from 'downshift';
|
|
7
|
-
import { isClient,
|
|
8
|
-
import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
|
|
6
|
+
import { isClient, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
|
|
9
7
|
import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
|
|
10
8
|
import { NativeSelect } from '../native-select/Component.js';
|
|
11
9
|
import styles from './index.module.css';
|
|
@@ -20,13 +18,13 @@ const BaseSelect = forwardRef(
|
|
|
20
18
|
(props, ref) => {
|
|
21
19
|
const { dataTestId, className, fieldClassName, optionGroupClassName, optionsListClassName, optionClassName, popperClassName, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, nativeSelect = false, defaultOpen = false, open: openProp, popoverPosition = 'bottom-start', preventFlip = true, optionsListWidth = 'content', name, id, selected, size = 48, optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, groupOptionProps = {}, searchProps = {}, showSearch = false, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, onClear, clear, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, Search = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, view, isBottomSheet = true, footer, swipeable, modalProps, popoverProps, modalFooterProps, modalHeaderProps, bottomSheetProps, Popover, ModalMobile, BottomSheet, limitDynamicOptionGroupSize, environment = isClient() ? window : undefined, } = props;
|
|
22
20
|
const shouldSearchBlurRef = useRef(true);
|
|
23
|
-
const rootRef = useRef(null);
|
|
24
21
|
const fieldRef = useRef(null);
|
|
25
22
|
const listRef = useRef(null);
|
|
26
23
|
const initiatorRef = useRef(null);
|
|
27
24
|
const searchRef = useRef(null);
|
|
28
25
|
const scrollableContainerRef = useRef(null);
|
|
29
26
|
const onOpenRef = useRef(onOpen);
|
|
27
|
+
const optionsListCtrlRef = useRef(null);
|
|
30
28
|
const [searchState, setSearchState] = React.useState('');
|
|
31
29
|
const [search, setSearch] = typeof searchProps?.value === 'string'
|
|
32
30
|
? [searchProps.value, searchProps.onChange]
|
|
@@ -46,17 +44,26 @@ const BaseSelect = forwardRef(
|
|
|
46
44
|
const scrollIntoView = (node) => {
|
|
47
45
|
if (!node || view === 'mobile')
|
|
48
46
|
return;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
const optionsListCtrl = optionsListCtrlRef.current;
|
|
48
|
+
if (optionsListCtrl) {
|
|
49
|
+
const dataIndex = node.getAttribute('data-index');
|
|
50
|
+
if (dataIndex) {
|
|
51
|
+
optionsListCtrl.scrollToIndex(Number(dataIndex));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
requestAnimationFrame(() => {
|
|
56
|
+
const actions = compute(node, {
|
|
57
|
+
boundary: listRef.current,
|
|
58
|
+
block: 'nearest',
|
|
59
|
+
scrollMode: 'if-needed',
|
|
60
|
+
});
|
|
61
|
+
actions.forEach((action) => {
|
|
62
|
+
const { el, top } = action;
|
|
63
|
+
el.scrollTop = top;
|
|
64
|
+
});
|
|
58
65
|
});
|
|
59
|
-
}
|
|
66
|
+
}
|
|
60
67
|
};
|
|
61
68
|
const useMultipleSelectionProps = {
|
|
62
69
|
itemToString,
|
|
@@ -262,6 +269,7 @@ const BaseSelect = forwardRef(
|
|
|
262
269
|
...optionProps,
|
|
263
270
|
mobile: view === 'mobile',
|
|
264
271
|
className: cn(optionClassName, {
|
|
272
|
+
[styles.option]: view === 'desktop',
|
|
265
273
|
[mobileStyles.option]: view === 'mobile',
|
|
266
274
|
}),
|
|
267
275
|
innerProps: getItemProps({
|
|
@@ -276,6 +284,7 @@ const BaseSelect = forwardRef(
|
|
|
276
284
|
shouldSearchBlurRef.current = true;
|
|
277
285
|
fieldRef.current?.focus();
|
|
278
286
|
},
|
|
287
|
+
'data-index': index,
|
|
279
288
|
}),
|
|
280
289
|
multiple,
|
|
281
290
|
index,
|
|
@@ -296,35 +305,6 @@ const BaseSelect = forwardRef(
|
|
|
296
305
|
}
|
|
297
306
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
298
307
|
}, []);
|
|
299
|
-
const calcOptionsListWidth = useCallback(() => {
|
|
300
|
-
if (view === 'desktop' && listRef.current) {
|
|
301
|
-
const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
|
|
302
|
-
const optionsListMinWidth = rootRef.current
|
|
303
|
-
? rootRef.current.getBoundingClientRect().width
|
|
304
|
-
: 0;
|
|
305
|
-
listRef.current.removeAttribute('style');
|
|
306
|
-
listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
|
|
307
|
-
}
|
|
308
|
-
}, [view, optionsListWidth]);
|
|
309
|
-
useEffect(() => {
|
|
310
|
-
if (view === 'desktop') {
|
|
311
|
-
const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
|
|
312
|
-
const observer = new ResizeObserver$1(calcOptionsListWidth);
|
|
313
|
-
if (rootRef.current) {
|
|
314
|
-
observer.observe(rootRef.current);
|
|
315
|
-
}
|
|
316
|
-
return () => {
|
|
317
|
-
observer.disconnect();
|
|
318
|
-
};
|
|
319
|
-
}
|
|
320
|
-
return fnUtils.noop;
|
|
321
|
-
}, [view, calcOptionsListWidth, open, optionsListWidth]);
|
|
322
|
-
useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
|
|
323
|
-
open,
|
|
324
|
-
optionsListWidth,
|
|
325
|
-
filteredOptions,
|
|
326
|
-
selectedItems,
|
|
327
|
-
]);
|
|
328
308
|
const renderValue = () => selectedItems.map((option) => (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })));
|
|
329
309
|
const renderNativeSelect = () => {
|
|
330
310
|
const value = multiple
|
|
@@ -380,15 +360,22 @@ const BaseSelect = forwardRef(
|
|
|
380
360
|
if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
|
|
381
361
|
return null;
|
|
382
362
|
const listProps = optionsListProps;
|
|
383
|
-
return (React.createElement("div", { ...menuProps, ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper
|
|
384
|
-
|
|
363
|
+
return (React.createElement("div", { ...menuProps, ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper, {
|
|
364
|
+
[styles.matchContent]: view === 'desktop' && optionsListWidth === 'content',
|
|
365
|
+
}) },
|
|
366
|
+
React.createElement(OptionsList, { ...listProps, ctrlRef: optionsListCtrlRef, ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn({
|
|
367
|
+
[mobileStyles.optionsList]: view === 'mobile',
|
|
368
|
+
}, listProps.className), scrollbarClassName: cn({
|
|
369
|
+
[styles.scrollbar]: view === 'desktop',
|
|
370
|
+
[mobileStyles.scrollbar]: view === 'mobile',
|
|
371
|
+
}, listProps.scrollbarClassName), scrollableNodeClassName: cn({ [styles.scrollable]: view === 'desktop' }), contentNodeClassName: cn({ [styles.content]: view === 'desktop' }), listNodeClassName: cn({ [styles.list]: view === 'desktop' }), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, groupOptionProps: groupOptionProps, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn(optionGroupClassName, {
|
|
385
372
|
[mobileStyles.optionGroup]: view === 'mobile',
|
|
386
373
|
}), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize, client: view }),
|
|
387
374
|
view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
|
|
388
375
|
};
|
|
389
376
|
const renderInPopover = () => {
|
|
390
377
|
if (!nativeSelect && Popover) {
|
|
391
|
-
return (React.createElement(Popover, { ...popoverProps, open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
|
|
378
|
+
return (React.createElement(Popover, { ...popoverProps, open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover, useAnchorWidth: true, widthProp: optionsListWidth === 'field' ? 'width' : 'minWidth' }, renderOptionsList()));
|
|
392
379
|
}
|
|
393
380
|
return null;
|
|
394
381
|
};
|
|
@@ -438,7 +425,7 @@ const BaseSelect = forwardRef(
|
|
|
438
425
|
}
|
|
439
426
|
return null;
|
|
440
427
|
};
|
|
441
|
-
return (React.createElement("div", { ...(disabled && { 'aria-disabled': true }), "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, { [styles.block]: block }, className),
|
|
428
|
+
return (React.createElement("div", { ...(disabled && { 'aria-disabled': true }), "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, { [styles.block]: block }, className), onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) },
|
|
442
429
|
nativeSelect && renderNativeSelect(),
|
|
443
430
|
React.createElement(Field, { selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", { ...getLabelProps() }, label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open, size: size, disabled: disabled }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
|
|
444
431
|
onBlur: handleFieldBlur,
|