@alfalab/core-components-select 19.1.10 → 19.2.0

package/components/checkmark-mobile/index.css

@@ -6,7 +6,7 @@
     --select-mobile-checkmark-display-icon: block;
     --select-mobile-checkmark-display-badge: none;
 }
-.select__checkmark_yxbfq {
+.select__checkmark_4z873 {
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -15,18 +15,18 @@
     height: 24px;
     opacity: 0;
 }
-.select__checkmark_yxbfq.select__selected_yxbfq {
+.select__checkmark_4z873.select__selected_4z873 {
         opacity: 1;
     }
-.select__checkmark_yxbfq.select__before_yxbfq {
+.select__checkmark_4z873.select__before_4z873 {
         margin-right: var(--gap-8);
     }
-.select__checkmark_yxbfq.select__after_yxbfq {
+.select__checkmark_4z873.select__after_4z873 {
         margin-left: var(--gap-8);
     }
-.select__displayIcon_yxbfq {
+.select__displayIcon_4z873 {
     display: var(--select-mobile-checkmark-display-icon);
 }
-.select__displayBadge_yxbfq {
+.select__displayBadge_4z873 {
     display: var(--select-mobile-checkmark-display-badge);
 }

package/components/checkmark-mobile/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"checkmark":"select__checkmark_yxbfq","selected":"select__selected_yxbfq","before":"select__before_yxbfq","after":"select__after_yxbfq","displayIcon":"select__displayIcon_yxbfq","displayBadge":"select__displayBadge_yxbfq"};
+var styles = {"checkmark":"select__checkmark_4z873","selected":"select__selected_4z873","before":"select__before_4z873","after":"select__after_4z873","displayIcon":"select__displayIcon_4z873","displayBadge":"select__displayBadge_4z873"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/clear-button/index.css

@@ -6,16 +6,16 @@
 :root {
     --input-error-icon-display: none;
 }
-.select__clearIcon_weo53 {
+.select__clearIcon_88ytj {
     display: block;
     color: var(--color-light-neutral-translucent-500);
 }
-.select__clearIcon_weo53:hover {
+.select__clearIcon_88ytj:hover {
         color: var(--color-light-neutral-translucent-500-hover);
     }
-.select__clearIcon_weo53:active {
+.select__clearIcon_88ytj:active {
         color: var(--color-light-neutral-translucent-500-press);
     }
-.select__clearButton_weo53 + [data-addon='error-icon'] {
+.select__clearButton_88ytj + [data-addon='error-icon'] {
     display: var(--input-error-icon-display);
 }

package/components/clear-button/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"clearIcon":"select__clearIcon_weo53","clearButton":"select__clearButton_weo53"};
+var styles = {"clearIcon":"select__clearIcon_88ytj","clearButton":"select__clearButton_88ytj"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/field/index.css

@@ -18,28 +18,28 @@
 :root {
     --select-arrow-hover-opacity: 0.7;
 }
-.select__component_1436i {
+.select__component_1ddmf {
     width: 100%;
     outline: none;
 }
-.select__field_1436i:not(.select__disabled_1436i) {
+.select__field_1ddmf:not(.select__disabled_1ddmf) {
     cursor: pointer;
 }
-.select__field_1436i:not(.select__disabled_1436i):hover .select__arrow_1436i {
+.select__field_1ddmf:not(.select__disabled_1ddmf):hover .select__arrow_1ddmf {
             opacity: var(--select-arrow-hover-opacity);
         }
-.select__disabled_1436i {
+.select__disabled_1ddmf {
     cursor: var(--disabled-cursor);
 }
-.select__placeholder_1436i {
+.select__placeholder_1ddmf {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_1436i 0.2s ease;
+    animation: select__show-placeholder_1ddmf 0.2s ease;
 }
-.select__placeholder_1436i.select__focused_1436i {
+.select__placeholder_1ddmf.select__focused_1ddmf {
         color: var(--input-focus-placeholder-color);
     }
-.select__contentWrapper_1436i {
+.select__contentWrapper_1ddmf {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -50,28 +50,28 @@
     overflow: hidden;
     width: 100%;
 }
-.select__contentWrapper_1436i.select__size-40_1436i {
+.select__contentWrapper_1ddmf.select__size-40_1ddmf {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
         font-family: var(--font-family-system);
     }
-.select__value_1436i {
+.select__value_1ddmf {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
-.select__value_1436i.select__size-40_1436i {
+.select__value_1ddmf.select__size-40_1ddmf {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
         font-family: var(--font-family-system);
     }
-.select__focusVisible_1436i {
+.select__focusVisible_1ddmf {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-@keyframes select__show-placeholder_1436i {
+@keyframes select__show-placeholder_1ddmf {
     from {
         opacity: 0;
     }

package/components/field/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"select__component_1436i","field":"select__field_1436i","disabled":"select__disabled_1436i","arrow":"select__arrow_1436i","placeholder":"select__placeholder_1436i","show-placeholder":"select__show-placeholder_1436i","focused":"select__focused_1436i","contentWrapper":"select__contentWrapper_1436i","size-40":"select__size-40_1436i","value":"select__value_1436i","focusVisible":"select__focusVisible_1436i"};
+var styles = {"component":"select__component_1ddmf","field":"select__field_1ddmf","disabled":"select__disabled_1ddmf","arrow":"select__arrow_1ddmf","placeholder":"select__placeholder_1ddmf","show-placeholder":"select__show-placeholder_1ddmf","focused":"select__focused_1ddmf","contentWrapper":"select__contentWrapper_1ddmf","size-40":"select__size-40_1ddmf","value":"select__value_1ddmf","focusVisible":"select__focusVisible_1ddmf"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/index.css

@@ -6,20 +6,20 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.select__footer_1p00t {
+.select__footer_1hrgj {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-16) var(--gap-16);
     background-color: var(--color-light-modal-bg-primary);
 }
-.select__footer_1p00t .select__button_1p00t:first-of-type {
+.select__footer_1hrgj .select__button_1hrgj:first-of-type {
         margin-right: var(--gap-16);
     }
-.select__button_1p00t {
+.select__button_1hrgj {
     width: 50%;
 }
-.select__highlighted_1p00t {
+.select__highlighted_1hrgj {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

package/components/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_1p00t","button":"select__button_1p00t","highlighted":"select__highlighted_1p00t"};
+var styles = {"footer":"select__footer_1hrgj","button":"select__button_1hrgj","highlighted":"select__highlighted_1hrgj"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/optgroup/index.css

@@ -23,7 +23,7 @@
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
 }
-.select__optgroup_9oduw {
+.select__optgroup_10tuw {
     position: relative;
     display: flex;
     align-items: center;
@@ -33,10 +33,10 @@
     background: var(--select-optgroup-background);
     min-height: 40px;
 }
-.select__optgroup_9oduw + *[role='option']:before {
+.select__optgroup_10tuw + *[role='option']:before {
         display: none;
     }
-.select__label_9oduw {
+.select__label_10tuw {
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
@@ -47,7 +47,7 @@
     display: block;
     color: var(--select-optgroup-color);
 }
-.select__size-72_9oduw {
+.select__size-72_10tuw {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/components/optgroup/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"optgroup":"select__optgroup_9oduw","label":"select__label_9oduw","size-72":"select__size-72_9oduw"};
+var styles = {"optgroup":"select__optgroup_10tuw","label":"select__label_10tuw","size-72":"select__size-72_10tuw"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/desktop/index.css

@@ -19,6 +19,7 @@
 }
 :root {
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -43,7 +44,7 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_4b4g6 {
+.select__option_16sm7 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -60,11 +61,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_4b4g6:not(.select__disabled_4b4g6):active {
+.select__option_16sm7:not(.select__disabled_16sm7):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_4b4g6:before {
+.select__option_16sm7:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,59 +76,62 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_4b4g6:first-child:before {
+.select__option_16sm7:first-child:before {
         display: none;
     }
-.select__size-48_4b4g6 {
+.select__size-40_16sm7 {
+    min-height: var(--size-xs-height);
+}
+.select__size-48_16sm7 {
     min-height: var(--size-s-height);
 }
-.select__size-56_4b4g6 {
+.select__size-56_16sm7 {
     min-height: var(--size-m-height);
 }
-.select__size-64_4b4g6 {
+.select__size-64_16sm7 {
     min-height: var(--size-l-height);
 }
-.select__size-72_4b4g6 {
+.select__size-72_16sm7 {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
 }
-.select__size-72_4b4g6:before {
+.select__size-72_16sm7:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_4b4g6 {
+.select__selected_16sm7 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_4b4g6 {
+.select__highlighted_16sm7 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_4b4g6:before,
-    .select__highlighted_4b4g6 + .select__option_4b4g6:before {
+.select__highlighted_16sm7:before,
+    .select__highlighted_16sm7 + .select__option_16sm7:before {
         opacity: 0;
     }
-.select__disabled_4b4g6 {
+.select__disabled_16sm7 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_4b4g6 {
+.select__content_16sm7 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_4b4g6 {
+.select__textContent_16sm7 {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }
-.select__highlighted_4b4g6 {
+.select__highlighted_16sm7 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_4b4g6:before,
-    .select__highlighted_4b4g6 + .select__option_4b4g6:before {
+.select__highlighted_16sm7:before,
+    .select__highlighted_16sm7 + .select__option_16sm7:before {
         opacity: 0;
     }

package/components/option/desktop/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_4b4g6","disabled":"select__disabled_4b4g6","size-48":"select__size-48_4b4g6","size-56":"select__size-56_4b4g6","size-64":"select__size-64_4b4g6","size-72":"select__size-72_4b4g6","selected":"select__selected_4b4g6","highlighted":"select__highlighted_4b4g6","content":"select__content_4b4g6","textContent":"select__textContent_4b4g6"};
+var styles = {"option":"select__option_16sm7","disabled":"select__disabled_16sm7","size-40":"select__size-40_16sm7","size-48":"select__size-48_16sm7","size-56":"select__size-56_16sm7","size-64":"select__size-64_16sm7","size-72":"select__size-72_16sm7","selected":"select__selected_16sm7","highlighted":"select__highlighted_16sm7","content":"select__content_16sm7","textContent":"select__textContent_16sm7"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/desktop/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/desktop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n\n.highlighted {\n    background: var(--select-option-hover-background);\n    color: var(--select-option-hover-color);\n\n    &:before,\n    & + .option:before {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/desktop/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n\n.highlighted {\n    background: var(--select-option-hover-background);\n    color: var(--select-option-hover-color);\n\n    &:before,\n    & + .option:before {\n        opacity: 0;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}

package/components/option/mobile/index.css

@@ -19,6 +19,7 @@
 }
 :root {
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -43,7 +44,7 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_154ac {
+.select__option_1q310 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -60,11 +61,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_154ac:not(.select__disabled_154ac):active {
+.select__option_1q310:not(.select__disabled_1q310):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_154ac:before {
+.select__option_1q310:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,51 +76,54 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_154ac:first-child:before {
+.select__option_1q310:first-child:before {
         display: none;
     }
-.select__size-48_154ac {
+.select__size-40_1q310 {
+    min-height: var(--size-xs-height);
+}
+.select__size-48_1q310 {
     min-height: var(--size-s-height);
 }
-.select__size-56_154ac {
+.select__size-56_1q310 {
     min-height: var(--size-m-height);
 }
-.select__size-64_154ac {
+.select__size-64_1q310 {
     min-height: var(--size-l-height);
 }
-.select__size-72_154ac {
+.select__size-72_1q310 {
     min-height: var(--size-xl-height);
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
 }
-.select__size-72_154ac:before {
+.select__size-72_1q310:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_154ac {
+.select__selected_1q310 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_154ac {
+.select__highlighted_1q310 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
 }
-.select__highlighted_154ac:before,
-    .select__highlighted_154ac + .select__option_154ac:before {
+.select__highlighted_1q310:before,
+    .select__highlighted_1q310 + .select__option_1q310:before {
         opacity: 0;
     }
-.select__disabled_154ac {
+.select__disabled_1q310 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_154ac {
+.select__content_1q310 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_154ac {
+.select__textContent_1q310 {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

package/components/option/mobile/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"option":"select__option_154ac","disabled":"select__disabled_154ac","size-48":"select__size-48_154ac","size-56":"select__size-56_154ac","size-64":"select__size-64_154ac","size-72":"select__size-72_154ac","selected":"select__selected_154ac","highlighted":"select__highlighted_154ac","content":"select__content_154ac","textContent":"select__textContent_154ac"};
+var styles = {"option":"select__option_1q310","disabled":"select__disabled_1q310","size-40":"select__size-40_1q310","size-48":"select__size-48_1q310","size-56":"select__size-56_1q310","size-64":"select__size-64_1q310","size-72":"select__size-72_1q310","selected":"select__selected_1q310","highlighted":"select__highlighted_1q310","content":"select__content_1q310","textContent":"select__textContent_1q310"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/option/mobile/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/option/mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../vars.css';\n@import '../index.module.css';\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,aAAa,CAAC,2BAA2B,CAAC,SAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,2BAA2B,CAAC;;;;"}

package/components/options-list/Component.d.ts

@@ -33,4 +33,8 @@ export declare const OptionsList: React.ForwardRefExoticComponent<Pick<import(".
     search?: string;
     multiple?: boolean;
     limitDynamicOptionGroupSize?: import("../../typings").BaseSelectProps["limitDynamicOptionGroupSize"];
+    scrollableNodeClassName?: string;
+    contentNodeClassName?: string;
+    listNodeClassName?: string;
+    ctrlRef?: React.Ref<import("../../typings").OptionsListController>;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/options-list/Component.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
+var coreComponentsScrollbarPrivate = require('@alfalab/core-components-scrollbar-private');
 var consts = require('../../consts.js');
 var useNativeScrollbar = require('../../hooks/use-native-scrollbar.js');
 var utils = require('../../utils.js');
@@ -26,24 +26,34 @@ var createCounter = function () {
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, footerClassName = _a.footerClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.groupOptionProps, groupOptionProps = _e === void 0 ? {} : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _k = _a.flatOptions, flatOptions = _k === void 0 ? [] : _k, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple, _l = _a.limitDynamicOptionGroupSize, limitDynamicOptionGroupSize = _l === void 0 ? false : _l, client = _a.client;
-    var _m = React.useState(true), scrollTop = _m[0], setScrollTop = _m[1];
-    var _o = React.useState(false), scrollBottom = _o[0], setScrollBottom = _o[1];
+    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, footerClassName = _a.footerClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.groupOptionProps, groupOptionProps = _e === void 0 ? {} : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, nativeScrollbarProp = _a.nativeScrollbar, _k = _a.flatOptions, flatOptions = _k === void 0 ? [] : _k, setHighlightedIndex = _a.setHighlightedIndex, selectedItems = _a.selectedItems, search = _a.search, setSelectedItems = _a.setSelectedItems, multiple = _a.multiple, _l = _a.limitDynamicOptionGroupSize, limitDynamicOptionGroupSize = _l === void 0 ? false : _l, client = _a.client, scrollableNodeClassName = _a.scrollableNodeClassName, contentNodeClassName = _a.contentNodeClassName, listNodeClassName = _a.listNodeClassName;
+    var actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
+    var listRef = React.useRef(null);
+    var scrollableNodeRef = React.useRef(null);
+    var _m = utils.useVisibleOptions({
+        visibleOptions: visibleOptions,
+        listRef: listRef,
+        open: open,
+        options: options,
+        actualOptionsCount: actualOptionsCount,
+        size: actualOptionsCount ? size : undefined,
+    }), maxHeight = _m[1];
+    var noOptions = options.length === 0;
+    var _o = React.useState(true), scrollTop = _o[0], setScrollTop = _o[1];
+    var _p = React.useState(false), scrollBottom = _p[0], setScrollBottom = _p[1];
     var nativeScrollbar = useNativeScrollbar.useNativeScrollbar({
         nativeScrollbar: nativeScrollbarProp,
         client: client,
     });
-    var handleScroll = React.useCallback(function (event) {
+    var handleScroll = function (event) {
         var scrolledToHeader = event.currentTarget.scrollTop <= 0;
         var scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
             event.currentTarget.scrollTop;
         setScrollTop(scrolledToHeader);
         setScrollBottom(scrolledToFooter);
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
-    }, [onScroll]);
+    };
     var renderOption = function (option, index) { return (React__default.default.createElement(Option, tslib.__assign({ key: option.key }, getOptionProps(option, index)))); };
-    var listRef = React.useRef(null);
-    var scrollbarRef = React.useRef(null);
     var counter = createCounter();
     var renderGroup = function (group) {
         var groupSelectedItems = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(function (_a) {
@@ -59,59 +69,28 @@ var OptionsList = React.forwardRef(function (_a, ref) {
         };
         return (React__default.default.createElement(Optgroup, tslib.__assign({ className: optionGroupClassName, label: group.label, key: group.label, size: size, options: group.options, selectedItems: groupSelectedItems, setSelectedItems: handleSelectedItems, search: search, multiple: multiple }, groupOptionProps), group.options.map(function (option) { return renderOption(option, counter()); })));
     };
-    var actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
-    var _p = utils.useVisibleOptions({
-        visibleOptions: visibleOptions,
-        listRef: listRef,
-        open: open,
-        options: options,
-        actualOptionsCount: actualOptionsCount,
-        size: actualOptionsCount
-            ? (function () {
-                switch (typeof size) {
-                    case 'string':
-                        throw new Error('OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type');
-                    default:
-                        return size;
-                }
-            })()
-            : undefined,
-    }), measured = _p[0], maxHeight = _p[1];
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;
     }
-    var renderListItems = function () { return (React__default.default.createElement(React__default.default.Fragment, null,
-        options.map(function (option) {
-            return utils.isGroup(option) ? renderGroup(option) : renderOption(option, counter());
-        }),
-        emptyPlaceholder && options.length === 0 && (React__default.default.createElement("div", { className: index_module.emptyPlaceholder }, emptyPlaceholder)))); };
-    var renderWithCustomScrollbar = function () {
-        var _a, _b;
-        var scrollableNodeProps = {
-            onScroll: handleScroll,
-            'data-test-id': dataTestId,
-            ref: ref,
-        };
-        return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: cn__default.default(index_module.scrollable, scrollbarClassName), verticalBarClassName: cn__default.default(index_module.verticalBar, (_a = {},
-                _a[index_module.verticalBarWithHeader] = Boolean(header),
-                _a[index_module.verticalBarWithFooter] = Boolean(footer),
-                _a)), ref: scrollbarRef, style: { maxHeight: maxHeight }, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef }, maskProps: {
-                /*
-                 * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'
-                 * высота опции всегда будет равна высоте одной строчки)
-                 */
-                className: cn__default.default((_b = {},
-                    _b[index_module.mask] = optionsListWidth === 'content' && !measured,
-                    _b)),
-            } }, renderListItems()));
-    };
-    var renderWithNativeScrollbar = function () { return (React__default.default.createElement("div", { className: cn__default.default(index_module.scrollable, scrollbarClassName), ref: mergeRefs__default.default([listRef, ref]), onScroll: handleScroll, style: { maxHeight: maxHeight } }, renderListItems())); };
     var resetHighlightedIndex = function () { return setHighlightedIndex === null || setHighlightedIndex === void 0 ? void 0 : setHighlightedIndex(-1); };
     return (React__default.default.createElement("div", tslib.__assign({}, (nativeScrollbar && { 'data-test-id': dataTestId }), { className: cn__default.default(index_module.optionsList, index_module["size-".concat(size)], className) }),
         header && (React__default.default.createElement("div", { className: cn__default.default(index_module.optionsListHeader, (_b = {},
                 _b[index_module.headerHighlighted] = !scrollTop,
                 _b)), onMouseEnter: resetHighlightedIndex }, header)),
-        nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
+        !noOptions && (React__default.default.createElement(coreComponentsScrollbarPrivate.ScrollbarPrivate, { native: nativeScrollbar, className: scrollbarClassName, style: { maxHeight: maxHeight }, scrollableNodeProps: {
+                ref: mergeRefs__default.default([scrollableNodeRef, ref]),
+                onScroll: handleScroll,
+                className: scrollableNodeClassName,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                'data-test-id': nativeScrollbar ? undefined : dataTestId,
+            }, contentNodeProps: { className: contentNodeClassName } },
+            React__default.default.createElement("div", { className: listNodeClassName, ref: listRef }, options.map(function (option) {
+                return utils.isGroup(option)
+                    ? renderGroup(option)
+                    : renderOption(option, counter());
+            })))),
+        emptyPlaceholder && noOptions && (React__default.default.createElement("div", { className: index_module.emptyPlaceholder }, emptyPlaceholder)),
         showFooter && footer && (React__default.default.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn__default.default(index_module.optionsListFooter, footerClassName, (_c = {},
                 _c[index_module.withBorder] = visibleOptions &&
                     flatOptions.length > visibleOptions &&