@alfalab/core-components-select 17.7.2 → 17.8.0

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_g5yh6","mobile":"select__mobile_g5yh6"};
+var styles = {"desktop":"select__desktop_1fek2","mobile":"select__mobile_1fek2"};
 require('./index.css')
 
 var Header = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 1y4tx */
+/* hash: 15sk7 */
 :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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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_g5yh6 {
+} .select__desktop_1fek2 {
     padding: var(--gap-s);
-} .select__mobile_g5yh6 {
+} .select__mobile_1fek2 {
     padding: var(--gap-s) var(--gap-xs);
 }

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

@@ -1 +1 @@
-export * from "../../../hook-d6f8155c";
+export * from "../../../hook-444814cb";

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-d6f8155c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-444814cb.js');
 
 
 

package/presets/useSelectWithLoading/hook.js

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

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 8y9x1 */
-.select__skeleton_1x68k {
+/* hash: 1c1ti */
+.select__skeleton_1q5vb {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/shared/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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-d6f8155c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-444814cb.js');
 var utils = require('../utils.js');
 var components_option_Component = require('../components/option/Component.js');
 var components_baseOption_Component = require('../components/base-option/Component.js');

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

@@ -148,6 +148,7 @@ export const BaseSelect = forwardRef(
             Popover,
             ModalMobile,
             BottomSheet,
+            limitDynamicOptionGroupSize,
         }: ComponentProps,
         ref,
     ) => {
@@ -660,6 +661,7 @@ export const BaseSelect = forwardRef(
                         onScroll={onScroll}
                         search={search}
                         multiple={multiple}
+                        limitDynamicOptionGroupSize={limitDynamicOptionGroupSize}
                     />
                     {view === 'desktop' && <div className={styles.optionsListBorder} />}
                 </div>

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

@@ -47,6 +47,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             search,
             setSelectedItems,
             multiple,
+            limitDynamicOptionGroupSize = false,
         },
         ref,
     ) => {
@@ -116,7 +117,20 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             visibleOptions,
             listRef,
             open,
-            invalidate: options,
+            options,
+            actualOptionsCount: limitDynamicOptionGroupSize,
+            size: limitDynamicOptionGroupSize
+                ? (() => {
+                      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) {

package/src/typings.ts

@@ -365,6 +365,11 @@ export type BaseSelectProps = {
         | 'preventFlip'
         | 'dataTestId'
     >;
+
+    /**
+     * Ограничение динамического размера группы вариантов выбора
+     */
+    limitDynamicOptionGroupSize?: boolean;
 };
 
 // TODO: использовать InputProps
@@ -626,6 +631,11 @@ export type OptionsListProps = {
      * Возможность выбрать несколько значений
      */
     multiple?: boolean;
+
+    /**
+     * Ограничение динамического размера группы вариантов выбора
+     */
+    limitDynamicOptionGroupSize?: BaseSelectProps['limitDynamicOptionGroupSize'];
 };
 
 export type OptgroupProps = {

package/src/utils.ts

@@ -2,7 +2,7 @@ import { cloneElement, isValidElement, ReactNode, RefObject, useEffect, useRef }
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
-import { BaseSelectProps, GroupShape, OptionShape } from './typings';
+import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from './typings';
 
 export const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>
     Object.prototype.hasOwnProperty.call(item, 'options');
@@ -127,6 +127,21 @@ type useVisibleOptionsArgs = {
      * Позволяет вызвать пересчет высоты
      */
     invalidate?: unknown;
+
+    /**
+     * Список вариантов выбора
+     */
+    options?: Array<OptionShape | GroupShape>;
+
+    /**
+     * Максимальный размер варианта выбора
+     */
+    size?: Extract<OptionsListProps['size'], number>;
+
+    /**
+     * Учитывать действительное число вариантов выбора
+     */
+    actualOptionsCount?: boolean;
 };
 
 export function useVisibleOptions({
@@ -135,8 +150,14 @@ export function useVisibleOptions({
     styleTargetRef = listRef,
     open,
     invalidate,
+    options,
+    size,
+    actualOptionsCount,
 }: useVisibleOptionsArgs) {
     useEffect(() => {
+        const measureOptionHeight = (element: HTMLElement) =>
+            typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
+
         const list = listRef.current;
         const styleTarget = styleTargetRef.current;
 
@@ -150,10 +171,12 @@ export function useVisibleOptions({
 
             let height = optionsNodes
                 .slice(0, visibleOptions)
-                .reduce((acc, child) => acc + child.clientHeight, 0);
+                .reduce((acc, child) => acc + measureOptionHeight(child), 0);
 
             if (visibleOptions < childCount) {
-                const lastVisibleOptionHeight = optionsNodes[optionsNodes.length - 1].clientHeight;
+                const lastVisibleOptionHeight = measureOptionHeight(
+                    optionsNodes[optionsNodes.length - 1],
+                );
 
                 // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку
                 height += Math.round(
@@ -161,11 +184,39 @@ export function useVisibleOptions({
                         ? lastVisibleOptionHeight
                         : lastVisibleOptionHeight / 2,
                 );
+            } else if (
+                visibleOptions > childCount &&
+                actualOptionsCount &&
+                typeof size === 'number'
+            ) {
+                const actualCount = (options ?? []).reduce(
+                    (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),
+                    0,
+                );
+
+                height =
+                    Math.min(
+                        actualCount === 0 ? /** empty placeholder */ 1 : actualCount,
+                        visibleOptions,
+                    ) * size;
+
+                if (visibleOptions < actualCount) {
+                    height += size / 2;
+                }
             }
 
             styleTarget.style.height = `${height}px`;
         }
-    }, [listRef, open, styleTargetRef, visibleOptions, invalidate]);
+    }, [
+        actualOptionsCount,
+        listRef,
+        open,
+        options,
+        size,
+        styleTargetRef,
+        visibleOptions,
+        invalidate,
+    ]);
 }
 
 export function defaultFilterFn(optionText: string, search: string) {

package/typings.d.ts

@@ -279,6 +279,10 @@ type BaseSelectProps = {
      * Дополнительные пропсы для Popover
      */
     popoverProps?: Omit<PopoverProps, 'update' | 'zIndex' | 'position' | 'className' | 'open' | 'anchorElement' | 'preventFlip' | 'dataTestId'>;
+    /**
+     * Ограничение динамического размера группы вариантов выбора
+     */
+    limitDynamicOptionGroupSize?: boolean;
 };
 type FieldProps = {
     /**
@@ -489,6 +493,10 @@ type OptionsListProps = {
      * Возможность выбрать несколько значений
      */
     multiple?: boolean;
+    /**
+     * Ограничение динамического размера группы вариантов выбора
+     */
+    limitDynamicOptionGroupSize?: BaseSelectProps['limitDynamicOptionGroupSize'];
 };
 type OptgroupProps = {
     /**

package/utils.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings";
+import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from "./typings";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {
@@ -32,8 +32,20 @@ type useVisibleOptionsArgs = {
      * Позволяет вызвать пересчет высоты
      */
     invalidate?: unknown;
+    /**
+     * Список вариантов выбора
+     */
+    options?: Array<OptionShape | GroupShape>;
+    /**
+     * Максимальный размер варианта выбора
+     */
+    size?: Extract<OptionsListProps['size'], number>;
+    /**
+     * Учитывать действительное число вариантов выбора
+     */
+    actualOptionsCount?: boolean;
 };
-declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
+declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, options, size, actualOptionsCount, }: useVisibleOptionsArgs): void;
 declare function defaultFilterFn(optionText: string, search: string): boolean;
 declare function defaultGroupAccessor(option: GroupShape): string | undefined;
 declare function defaultAccessor(option: OptionShape): string;

package/utils.js

@@ -79,8 +79,11 @@ function processOptions(options, selected, filterFn, filterGroup) {
     return { filteredOptions: filteredOptions, flatOptions: flatOptions, selectedOptions: selectedOptions };
 }
 function useVisibleOptions(_a) {
-    var visibleOptions = _a.visibleOptions, listRef = _a.listRef, _b = _a.styleTargetRef, styleTargetRef = _b === void 0 ? listRef : _b, open = _a.open, invalidate = _a.invalidate;
+    var visibleOptions = _a.visibleOptions, listRef = _a.listRef, _b = _a.styleTargetRef, styleTargetRef = _b === void 0 ? listRef : _b, open = _a.open, invalidate = _a.invalidate, options = _a.options, size = _a.size, actualOptionsCount = _a.actualOptionsCount;
     React.useEffect(function () {
+        var measureOptionHeight = function (element) {
+            return typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
+        };
         var list = listRef.current;
         var styleTarget = styleTargetRef.current;
         if (open && list && styleTarget && visibleOptions > 0) {
@@ -88,17 +91,36 @@ function useVisibleOptions(_a) {
             var optionsNodes = [].slice.call(list.children, 0, visibleOptions + 1);
             var height = optionsNodes
                 .slice(0, visibleOptions)
-                .reduce(function (acc, child) { return acc + child.clientHeight; }, 0);
+                .reduce(function (acc, child) { return acc + measureOptionHeight(child); }, 0);
             if (visibleOptions < childCount) {
-                var lastVisibleOptionHeight = optionsNodes[optionsNodes.length - 1].clientHeight;
+                var lastVisibleOptionHeight = measureOptionHeight(optionsNodes[optionsNodes.length - 1]);
                 // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку
                 height += Math.round(childCount - visibleOptions === 1
                     ? lastVisibleOptionHeight
                     : lastVisibleOptionHeight / 2);
             }
+            else if (visibleOptions > childCount &&
+                actualOptionsCount &&
+                typeof size === 'number') {
+                var actualCount = (options !== null && options !== void 0 ? options : []).reduce(function (sum, option) { return sum + 1 + (isGroup(option) ? option.options.length : 0); }, 0);
+                height =
+                    Math.min(actualCount === 0 ? /** empty placeholder */ 1 : actualCount, visibleOptions) * size;
+                if (visibleOptions < actualCount) {
+                    height += size / 2;
+                }
+            }
             styleTarget.style.height = "".concat(height, "px");
         }
-    }, [listRef, open, styleTargetRef, visibleOptions, invalidate]);
+    }, [
+        actualOptionsCount,
+        listRef,
+        open,
+        options,
+        size,
+        styleTargetRef,
+        visibleOptions,
+        invalidate,
+    ]);
 }
 function defaultFilterFn(optionText, search) {
     if (!search)