@alfalab/core-components-select 19.1.10 → 19.2.0-alfasans

package/modern/components/clear-button/index.css

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

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"clearIcon":"select__clearIcon_weo53","clearButton":"select__clearButton_weo53"};
+const styles = {"clearIcon":"select__clearIcon_1gmjh","clearButton":"select__clearButton_1gmjh"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/field/index.css

@@ -4,8 +4,9 @@
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -18,60 +19,63 @@
 :root {
     --select-arrow-hover-opacity: 0.7;
 }
-.select__component_1436i {
+.select__component_13vng {
     width: 100%;
     outline: none;
 }
-.select__field_1436i:not(.select__disabled_1436i) {
+.select__field_13vng:not(.select__disabled_13vng) {
     cursor: pointer;
 }
-.select__field_1436i:not(.select__disabled_1436i):hover .select__arrow_1436i {
+.select__field_13vng:not(.select__disabled_13vng):hover .select__arrow_13vng {
             opacity: var(--select-arrow-hover-opacity);
         }
-.select__disabled_1436i {
+.select__disabled_13vng {
     cursor: var(--disabled-cursor);
 }
-.select__placeholder_1436i {
+.select__placeholder_13vng {
     color: var(--input-placeholder-color);
     transition: color 0.2s ease;
-    animation: select__show-placeholder_1436i 0.2s ease;
+    animation: select__show-placeholder_13vng 0.2s ease;
 }
-.select__placeholder_1436i.select__focused_1436i {
+.select__placeholder_13vng.select__focused_13vng {
         color: var(--input-focus-placeholder-color);
     }
-.select__contentWrapper_1436i {
+.select__contentWrapper_13vng {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
 }
-.select__contentWrapper_1436i.select__size-40_1436i {
+.select__contentWrapper_13vng.select__size-40_13vng {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
-.select__value_1436i {
+.select__value_13vng {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
-.select__value_1436i.select__size-40_1436i {
+.select__value_13vng.select__size-40_13vng {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
-        font-family: var(--font-family-system);
+        letter-spacing: -0.08px;
+        font-family: var(--font-family-alfasans);
     }
-.select__focusVisible_1436i {
+.select__focusVisible_13vng {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-@keyframes select__show-placeholder_1436i {
+@keyframes select__show-placeholder_13vng {
     from {
         opacity: 0;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const 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"};
+const styles = {"component":"select__component_13vng","field":"select__field_13vng","disabled":"select__disabled_13vng","arrow":"select__arrow_13vng","placeholder":"select__placeholder_13vng","show-placeholder":"select__show-placeholder_13vng","focused":"select__focused_13vng","contentWrapper":"select__contentWrapper_13vng","size-40":"select__size-40_13vng","value":"select__value_13vng","focusVisible":"select__focusVisible_13vng"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/footer/index.css

@@ -6,20 +6,20 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.select__footer_1p00t {
+.select__footer_h0ez7 {
     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_h0ez7 .select__button_h0ez7:first-of-type {
         margin-right: var(--gap-16);
     }
-.select__button_1p00t {
+.select__button_h0ez7 {
     width: 50%;
 }
-.select__highlighted_1p00t {
+.select__highlighted_h0ez7 {
     border-top: 1px solid var(--color-light-neutral-300);
     background-color: var(--color-light-modal-bg-primary);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"select__footer_1p00t","button":"select__button_1p00t","highlighted":"select__highlighted_1p00t"};
+const styles = {"footer":"select__footer_h0ez7","button":"select__button_h0ez7","highlighted":"select__highlighted_h0ez7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/optgroup/index.css

@@ -11,8 +11,9 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
 
@@ -23,7 +24,7 @@
     --select-optgroup-l-left-padding: var(--gap-16);
     --select-optgroup-l-right-padding: var(--gap-16);
 }
-.select__optgroup_9oduw {
+.select__optgroup_afu48 {
     position: relative;
     display: flex;
     align-items: center;
@@ -33,21 +34,21 @@
     background: var(--select-optgroup-background);
     min-height: 40px;
 }
-.select__optgroup_9oduw + *[role='option']:before {
+.select__optgroup_afu48 + *[role='option']:before {
         display: none;
     }
-.select__label_9oduw {
+.select__label_afu48 {
     font-size: 12px;
     line-height: 16px;
     font-weight: 400;
     letter-spacing: 1.25px;
     text-transform: uppercase;
-    font-family: var(--font-family-system);
+    font-family: var(--font-family-alfasans);
 
     display: block;
     color: var(--select-optgroup-color);
 }
-.select__size-72_9oduw {
+.select__size-72_afu48 {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"optgroup":"select__optgroup_9oduw","label":"select__label_9oduw","size-72":"select__size-72_9oduw"};
+const styles = {"optgroup":"select__optgroup_afu48","label":"select__label_afu48","size-72":"select__size-72_afu48"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/option/desktop/index.css

@@ -14,11 +14,13 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -43,11 +45,12 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_4b4g6 {
+.select__option_1tsbu {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     display: flex;
     align-items: center;
@@ -60,11 +63,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_4b4g6:not(.select__disabled_4b4g6):active {
+.select__option_1tsbu:not(.select__disabled_1tsbu):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_4b4g6:before {
+.select__option_1tsbu:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,59 +78,62 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_4b4g6:first-child:before {
+.select__option_1tsbu:first-child:before {
         display: none;
     }
-.select__size-48_4b4g6 {
+.select__size-40_1tsbu {
+    min-height: var(--size-xs-height);
+}
+.select__size-48_1tsbu {
     min-height: var(--size-s-height);
 }
-.select__size-56_4b4g6 {
+.select__size-56_1tsbu {
     min-height: var(--size-m-height);
 }
-.select__size-64_4b4g6 {
+.select__size-64_1tsbu {
     min-height: var(--size-l-height);
 }
-.select__size-72_4b4g6 {
+.select__size-72_1tsbu {
     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_1tsbu:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_4b4g6 {
+.select__selected_1tsbu {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_4b4g6 {
+.select__highlighted_1tsbu {
     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_1tsbu:before,
+    .select__highlighted_1tsbu + .select__option_1tsbu:before {
         opacity: 0;
     }
-.select__disabled_4b4g6 {
+.select__disabled_1tsbu {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_4b4g6 {
+.select__content_1tsbu {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_4b4g6 {
+.select__textContent_1tsbu {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }
-.select__highlighted_4b4g6 {
+.select__highlighted_1tsbu {
     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_1tsbu:before,
+    .select__highlighted_1tsbu + .select__option_1tsbu:before {
         opacity: 0;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const 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"};
+const styles = {"option":"select__option_1tsbu","disabled":"select__disabled_1tsbu","size-40":"select__size-40_1tsbu","size-48":"select__size-48_1tsbu","size-56":"select__size-56_1tsbu","size-64":"select__size-64_1tsbu","size-72":"select__size-72_1tsbu","selected":"select__selected_1tsbu","highlighted":"select__highlighted_1tsbu","content":"select__content_1tsbu","textContent":"select__textContent_1tsbu"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,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,eAAe,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/modern/components/option/mobile/index.css

@@ -14,11 +14,13 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --disabled-cursor: not-allowed;
+    --size-xs-height: 40px;
     --size-s-height: 48px;
     --size-m-height: 56px;
     --size-l-height: 64px;
@@ -43,11 +45,12 @@
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
 }
-.select__option_154ac {
+.select__option_yigdd {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     display: flex;
     align-items: center;
@@ -60,11 +63,11 @@
     position: relative;
     cursor: pointer;
 }
-.select__option_154ac:not(.select__disabled_154ac):active {
+.select__option_yigdd:not(.select__disabled_yigdd):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-.select__option_154ac:before {
+.select__option_yigdd:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -75,51 +78,54 @@
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
     }
-.select__option_154ac:first-child:before {
+.select__option_yigdd:first-child:before {
         display: none;
     }
-.select__size-48_154ac {
+.select__size-40_yigdd {
+    min-height: var(--size-xs-height);
+}
+.select__size-48_yigdd {
     min-height: var(--size-s-height);
 }
-.select__size-56_154ac {
+.select__size-56_yigdd {
     min-height: var(--size-m-height);
 }
-.select__size-64_154ac {
+.select__size-64_yigdd {
     min-height: var(--size-l-height);
 }
-.select__size-72_154ac {
+.select__size-72_yigdd {
     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_yigdd:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
     }
-.select__selected_154ac {
+.select__selected_yigdd {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
 }
-.select__highlighted_154ac {
+.select__highlighted_yigdd {
     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_yigdd:before,
+    .select__highlighted_yigdd + .select__option_yigdd:before {
         opacity: 0;
     }
-.select__disabled_154ac {
+.select__disabled_yigdd {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
 }
-.select__content_154ac {
+.select__content_yigdd {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
 }
-.select__textContent_154ac {
+.select__textContent_yigdd {
     padding-top: var(--gap-12);
     padding-bottom: var(--gap-12);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const 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"};
+const styles = {"option":"select__option_yigdd","disabled":"select__disabled_yigdd","size-40":"select__size-40_yigdd","size-48":"select__size-48_yigdd","size-56":"select__size-56_yigdd","size-64":"select__size-64_yigdd","size-72":"select__size-72_yigdd","selected":"select__selected_yigdd","highlighted":"select__highlighted_yigdd","content":"select__content_yigdd","textContent":"select__textContent_yigdd"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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,eAAe,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,eAAe,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/modern/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/modern/components/options-list/Component.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState, useCallback, useRef } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
+import { ScrollbarPrivate } from '@alfalab/core-components-scrollbar-private/modern';
 import { DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
 import { useNativeScrollbar } from '../../hooks/use-native-scrollbar.js';
 import { useVisibleOptions, isGroup } from '../../utils.js';
@@ -13,24 +13,34 @@ const createCounter = () => {
     // eslint-disable-next-line no-plusplus
     return () => count++;
 };
-const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, footerClassName, scrollbarClassName, Option, getOptionProps, groupOptionProps = {}, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, selectedItems, search, setSelectedItems, multiple, limitDynamicOptionGroupSize = false, client, }, ref) => {
+const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, footerClassName, scrollbarClassName, Option, getOptionProps, groupOptionProps = {}, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, selectedItems, search, setSelectedItems, multiple, limitDynamicOptionGroupSize = false, client, scrollableNodeClassName, contentNodeClassName, listNodeClassName, }, ref) => {
+    const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
+    const listRef = useRef(null);
+    const scrollableNodeRef = useRef(null);
+    const [, maxHeight] = useVisibleOptions({
+        visibleOptions,
+        listRef,
+        open,
+        options,
+        actualOptionsCount,
+        size: actualOptionsCount ? size : undefined,
+    });
+    const noOptions = options.length === 0;
     const [scrollTop, setScrollTop] = useState(true);
     const [scrollBottom, setScrollBottom] = useState(false);
     const nativeScrollbar = useNativeScrollbar({
         nativeScrollbar: nativeScrollbarProp,
         client,
     });
-    const handleScroll = useCallback((event) => {
+    const handleScroll = (event) => {
         const scrolledToHeader = event.currentTarget.scrollTop <= 0;
         const scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
             event.currentTarget.scrollTop;
         setScrollTop(scrolledToHeader);
         setScrollBottom(scrolledToFooter);
         onScroll?.(event);
-    }, [onScroll]);
+    };
     const renderOption = (option, index) => (React.createElement(Option, { key: option.key, ...getOptionProps(option, index) }));
-    const listRef = useRef(null);
-    const scrollbarRef = useRef(null);
     const counter = createCounter();
     const renderGroup = (group) => {
         const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) => group.options.some((option) => option.key === selectedItemKey));
@@ -39,56 +49,26 @@ const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, fo
         };
         return (React.createElement(Optgroup$1, { 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((option) => renderOption(option, counter()))));
     };
-    const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
-    const [measured, maxHeight] = useVisibleOptions({
-        visibleOptions,
-        listRef,
-        open,
-        options,
-        actualOptionsCount,
-        size: actualOptionsCount
-            ? (() => {
-                switch (typeof size) {
-                    case 'string':
-                        throw new Error('OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type');
-                    default:
-                        return size;
-                }
-            })()
-            : undefined,
-    });
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;
     }
-    const renderListItems = () => (React.createElement(React.Fragment, null,
-        options.map((option) => isGroup(option) ? renderGroup(option) : renderOption(option, counter())),
-        emptyPlaceholder && options.length === 0 && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder))));
-    const renderWithCustomScrollbar = () => {
-        const scrollableNodeProps = {
-            onScroll: handleScroll,
-            'data-test-id': dataTestId,
-            ref: ref,
-        };
-        return (React.createElement(Scrollbar, { className: cn(styles.scrollable, scrollbarClassName), verticalBarClassName: cn(styles.verticalBar, {
-                [styles.verticalBarWithHeader]: Boolean(header),
-                [styles.verticalBarWithFooter]: Boolean(footer),
-            }), ref: scrollbarRef, style: { maxHeight }, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef }, maskProps: {
-                /*
-                 * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'
-                 * высота опции всегда будет равна высоте одной строчки)
-                 */
-                className: cn({
-                    [styles.mask]: optionsListWidth === 'content' && !measured,
-                }),
-            } }, renderListItems()));
-    };
-    const renderWithNativeScrollbar = () => (React.createElement("div", { className: cn(styles.scrollable, scrollbarClassName), ref: mergeRefs([listRef, ref]), onScroll: handleScroll, style: { maxHeight } }, renderListItems()));
     const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
     return (React.createElement("div", { ...(nativeScrollbar && { 'data-test-id': dataTestId }), className: cn(styles.optionsList, styles[`size-${size}`], className) },
         header && (React.createElement("div", { className: cn(styles.optionsListHeader, {
                 [styles.headerHighlighted]: !scrollTop,
             }), onMouseEnter: resetHighlightedIndex }, header)),
-        nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
+        !noOptions && (React.createElement(ScrollbarPrivate, { native: nativeScrollbar, className: scrollbarClassName, style: { maxHeight }, scrollableNodeProps: {
+                ref: mergeRefs([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.createElement("div", { className: listNodeClassName, ref: listRef }, options.map((option) => isGroup(option)
+                ? renderGroup(option)
+                : renderOption(option, counter()))))),
+        emptyPlaceholder && noOptions && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder)),
         showFooter && footer && (React.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn(styles.optionsListFooter, footerClassName, {
                 [styles.withBorder]: visibleOptions &&
                     flatOptions.length > visibleOptions &&