@alfalab/core-components-select 15.2.1 → 15.2.3

package/modern/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: o03xn */
+/* hash: 2aepk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* 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 */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_kqlfk {
+} .select__footer_2pb3f {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_kqlfk > * + * {
+} .select__footer_2pb3f > * + * {
         margin-left: var(--gap-xs);
     }

package/modern/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Checkbox } from '@alfalab/core-components-checkbox/modern';
 
-const styles = {"desktop":"select__desktop_1umap","mobile":"select__mobile_1umap"};
+const styles = {"desktop":"select__desktop_dmh01","mobile":"select__mobile_dmh01"};
 require('./index.css')
 
 const Header = ({ onChange, checked, indeterminate, mobile }) => (React.createElement("div", { className: cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile }) },

package/modern/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: spigd */
+/* hash: 1ef7o */
 :root {
 } /* 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 */
 } :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 */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_1umap {
+} .select__desktop_dmh01 {
     padding: var(--gap-s);
-} .select__mobile_1umap {
+} .select__mobile_dmh01 {
     padding: var(--gap-s) var(--gap-xs);
 }

package/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-ba0e806d";
+export * from "../../../hook-5e1db0b0";

package/modern/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-export { O as OptionsListWithApply } from '../../../hook-ba0e806d.js';
+export { O as OptionsListWithApply } from '../../../hook-5e1db0b0.js';
 import 'react';
 import '../../../utils.js';
 import '../../../components/options-list/Component.js';

package/modern/presets/useSelectWithLoading/hook.js

@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../../components/checkmark-mobile/Component.js';
 
-const styles = {"skeleton":"select__skeleton_m7lbx"};
+const styles = {"skeleton":"select__skeleton_lrgo1"};
 require('./index.css')
 
 function useSelectWithLoading({ loading = false, visibleOptions = 6, Option: Option$1 = Option, }) {

package/modern/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 1he26 */
-.select__skeleton_m7lbx {
+/* hash: 41vyx */
+.select__skeleton_lrgo1 {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/modern/shared.js

@@ -9,7 +9,7 @@ export { BaseOption } from './components/base-option/Component.js';
 export { Search } from './components/search/Component.js';
 export { useSelectWithLoading } from './presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from './presets/useLazyLoading/hook.js';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from './hook-ba0e806d.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from './hook-5e1db0b0.js';
 export { defaultAccessor, defaultFilterFn, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from './utils.js';
 import 'react';
 import 'classnames';

package/package.json

@@ -1,35 +1,11 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "15.2.1",
+    "version": "15.2.3",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
-    "exports": {
-        ".": {
-            "import": "./esm/index.js",
-            "require": "./index.js"
-        },
-        "./mobile": {
-            "import": "./esm/mobile.js",
-            "require": "./mobile.js"
-        },
-        "./desktop": {
-            "import": "./esm/desktop.js",
-            "require": "./desktop.js"
-        },
-        "./shared": {
-            "import": "./esm/shared.js",
-            "require": "./shared.js"
-        },
-        "./esm": "./esm/index.js",
-        "./cssm": "./cssm/index.js",
-        "./modern": "./modern/index.js",
-        "./esm/*": "./esm/*",
-        "./cssm/*": "./cssm/*",
-        "./modern/*": "./modern/*"
-    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -41,7 +17,7 @@
     "dependencies": {
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-base-modal": "^5.4.1",
-        "@alfalab/core-components-bottom-sheet": "^6.11.0",
+        "@alfalab/core-components-bottom-sheet": "^6.11.2",
         "@alfalab/core-components-button": "^9.0.6",
         "@alfalab/core-components-checkbox": "^3.2.0",
         "@alfalab/core-components-form-control": "^10.1.1",

package/presets/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-38a2e173.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-74d61833.js');
 require('tslib');
 require('react');
 require('@alfalab/core-components-skeleton');

package/presets/useSelectWithApply/hook.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('tslib');
 require('react');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-38a2e173.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-74d61833.js');
 require('../../components/options-list/Component.js');
 require('react-merge-refs');
 require('classnames');

package/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('../../../components/options-list/Component.js');
 require('../../../consts.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-38a2e173.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-74d61833.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 require('react-merge-refs');

package/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"footer":"select__footer_kqlfk"};
+var styles = {"footer":"select__footer_2pb3f"};
 require('./index.css')
 
 var Footer = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: o03xn */
+/* hash: 2aepk */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff; /* 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 */
@@ -17,10 +17,10 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__footer_kqlfk {
+} .select__footer_2pb3f {
     background-color: var(--color-light-bg-primary);
     padding: var(--gap-s);
     outline: none
-} .select__footer_kqlfk > * + * {
+} .select__footer_2pb3f > * + * {
         margin-left: var(--gap-xs);
     }

package/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"desktop":"select__desktop_1umap","mobile":"select__mobile_1umap"};
+var styles = {"desktop":"select__desktop_dmh01","mobile":"select__mobile_dmh01"};
 require('./index.css')
 
 var Header = function (_a) {

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,4 +1,4 @@
-/* hash: spigd */
+/* hash: 1ef7o */
 :root {
 } /* 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 */
 } :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 */
@@ -16,8 +16,8 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .select__desktop_1umap {
+} .select__desktop_dmh01 {
     padding: var(--gap-s);
-} .select__mobile_1umap {
+} .select__mobile_dmh01 {
     padding: var(--gap-s) var(--gap-xs);
 }

package/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-38a2e173";
+export * from "../../../hook-74d61833";

package/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-38a2e173.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-74d61833.js');
 require('tslib');
 require('react');
 require('../../../utils.js');

package/presets/useSelectWithLoading/hook.js

@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_m7lbx"};
+var styles = {"skeleton":"select__skeleton_lrgo1"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 1he26 */
-.select__skeleton_m7lbx {
+/* hash: 41vyx */
+.select__skeleton_lrgo1 {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared.js

@@ -13,7 +13,7 @@ var components_baseOption_Component = require('./components/base-option/Componen
 var components_search_Component = require('./components/search/Component.js');
 var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-38a2e173.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-74d61833.js');
 var utils = require('./utils.js');
 require('react');
 require('classnames');

package/src/components/base-select/Component.tsx

@@ -275,7 +275,15 @@ export const BaseSelect = forwardRef(
 
         const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
             inputProps.onKeyDown(event);
-            if (autocomplete && !open && (event.key.length === 1 || event.key === 'Backspace')) {
+
+            // https://caniuse.com/?search=KeyboardEvent.key
+            const isKeyUnsupported = event.key === 'Unidentified';
+
+            if (
+                autocomplete &&
+                !open &&
+                (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')
+            ) {
                 // Для автокомплита - открываем меню при начале ввода
                 openMenu();
             }

package/src/components/base-select-mobile/Component.tsx

@@ -323,7 +323,15 @@ export const BaseSelectMobile = forwardRef(
 
         const handleFieldKeyDown = (event: KeyboardEvent<HTMLDivElement | HTMLInputElement>) => {
             inputProps.onKeyDown(event);
-            if (autocomplete && !open && (event.key.length === 1 || event.key === 'Backspace')) {
+
+            // https://caniuse.com/?search=KeyboardEvent.key
+            const isKeyUnsupported = event.key === 'Unidentified';
+
+            if (
+                autocomplete &&
+                !open &&
+                (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')
+            ) {
                 // Для автокомплита - открываем меню при начале ввода
                 openMenu();
             }
@@ -540,6 +548,7 @@ export const BaseSelectMobile = forwardRef(
                             hasCloser={true}
                             sticky={true}
                             {...modalHeaderProps}
+                            title={undefined}
                             bottomAddons={
                                 <React.Fragment>
                                     {renderSearch()}
@@ -547,7 +556,7 @@ export const BaseSelectMobile = forwardRef(
                                 </React.Fragment>
                             }
                         >
-                            {label || placeholder}
+                            {modalHeaderProps?.title || label || placeholder}
                         </ModalMobile.Header>
 
                         <ModalMobile.Content flex={true} className={styles.modalContent}>

package/src/components/virtual-options-list/Component.tsx

@@ -41,7 +41,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
         const listRef = useRef<HTMLDivElement>(null);
         const parentRef = useRef<HTMLDivElement>(null);
         const scrollbarRef = useRef<HTMLDivElement>(null);
-        const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState(0);
+        const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
         const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
 
         let [nativeScrollbar] = useMedia<boolean>([[true, '(max-width: 1023px)']], false);
@@ -97,11 +97,15 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                 /**
                  * react-virtual может несколько раз отрендерить список с одним элементом,
                  * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью
-                 * Также, высоту нужно пересчитывать при изменении ОБЩЕГО кол-ва пунктов меню
+                 * Также, высоту нужно пересчитывать при изменении пунктов меню
                  */
-                rowVirtualizer.virtualItems.length > 1 ? flatOptions.length : 1,
+                rowVirtualizer.virtualItems
+                    .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))
+                    .map((item) => flatOptions[item.index].key)
+                    .join('_'),
             );
-        }, [rowVirtualizer.virtualItems.length, flatOptions.length]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [rowVirtualizer.virtualItems.length, flatOptions]);
 
         useVisibleOptions({
             visibleOptions,