@alfalab/core-components-select 17.11.0 → 17.12.0

package/moderncssm/utils.js

@@ -1,5 +1,5 @@
-import { isValidElement, cloneElement, useEffect, useRef } from 'react';
-import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { isValidElement, cloneElement, useState, useEffect, useRef } from 'react';
+import { useIsMounted, fnUtils, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 
 const isGroup = (item) => Object.prototype.hasOwnProperty.call(item, 'options');
 const isOptionShape = (item) => !!item && Object.prototype.hasOwnProperty.call(item, 'key');
@@ -69,6 +69,8 @@ function processOptions(options, selected = [], filterFn = () => true, filterGro
     return { filteredOptions, flatOptions, selectedOptions };
 }
 function useVisibleOptions({ visibleOptions, listRef, styleTargetRef = listRef, open, invalidate, options, size, actualOptionsCount, }) {
+    const [, runIfMounted] = useIsMounted();
+    const [measured, setMeasured] = useState(false);
     useEffect(() => {
         const measureOptionHeight = (element) => typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
         const list = listRef.current;
@@ -96,8 +98,15 @@ function useVisibleOptions({ visibleOptions, listRef, styleTargetRef = listRef,
                     height += size / 2;
                 }
             }
+            const prevHeight = styleTarget.style.height;
             styleTarget.style.height = `${height}px`;
+            setMeasured(true);
+            return () => {
+                styleTarget.style.height = prevHeight;
+                runIfMounted(() => setMeasured(false));
+            };
         }
+        return fnUtils.noop;
     }, [
         actualOptionsCount,
         listRef,
@@ -107,7 +116,9 @@ function useVisibleOptions({ visibleOptions, listRef, styleTargetRef = listRef,
         styleTargetRef,
         visibleOptions,
         invalidate,
+        runIfMounted,
     ]);
+    return measured;
 }
 function defaultFilterFn(optionText, search) {
     if (!search)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "17.11.0",
+    "version": "17.12.0",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -15,19 +15,19 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.6.0",
-        "@alfalab/core-components-base-modal": "^5.8.0",
-        "@alfalab/core-components-bottom-sheet": "^6.17.0",
-        "@alfalab/core-components-button": "^11.6.0",
-        "@alfalab/core-components-checkbox": "^4.6.0",
-        "@alfalab/core-components-form-control": "^12.3.0",
-        "@alfalab/core-components-input": "^15.1.0",
-        "@alfalab/core-components-modal": "^9.4.0",
+        "@alfalab/core-components-badge": "^5.6.1",
+        "@alfalab/core-components-base-modal": "^5.8.1",
+        "@alfalab/core-components-bottom-sheet": "^6.17.1",
+        "@alfalab/core-components-button": "^11.7.0",
+        "@alfalab/core-components-checkbox": "^4.6.1",
+        "@alfalab/core-components-form-control": "^12.4.0",
+        "@alfalab/core-components-input": "^15.1.1",
+        "@alfalab/core-components-modal": "^9.5.0",
         "@alfalab/core-components-mq": "^4.3.0",
-        "@alfalab/core-components-popover": "^6.3.0",
-        "@alfalab/core-components-scrollbar": "^3.1.0",
-        "@alfalab/core-components-skeleton": "^5.1.0",
-        "@alfalab/core-components-shared": "^0.12.0",
+        "@alfalab/core-components-popover": "^6.3.1",
+        "@alfalab/core-components-scrollbar": "^3.1.1",
+        "@alfalab/core-components-skeleton": "^5.2.0",
+        "@alfalab/core-components-shared": "^0.12.1",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "@juggle/resize-observer": "^3.3.1",
@@ -39,6 +39,6 @@
         "react-virtual": "^2.3.2",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.1.0",
-    "varsVersion": "9.12.0"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

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-06aedfaf.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-c8ba558c.js');
 
 
 

package/presets/useSelectWithApply/hook.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('deep-equal');
 require('../../utils.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-06aedfaf.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../hook-c8ba558c.js');
 
 
 

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-06aedfaf.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-c8ba558c.js');
 require('./footer/Component.js');
 require('./header/Component.js');
 

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

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

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

@@ -1,4 +1,4 @@
-/* hash: f1i06 */
+/* hash: s7f2p */
 :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 {
     --color-light-base-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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,10 +23,12 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} .select__footer_xl99m {
+} :root {
+    --select-option-list-footer-button-gap: var(--gap-8);
+} .select__footer_1mgzl {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none
-} .select__footer_xl99m > .select__button_xl99m + .select__button_xl99m {
-        margin-left: var(--gap-8);
+} .select__footer_1mgzl > .select__button_1mgzl + .select__button_1mgzl {
+        margin-left: var(--select-option-list-footer-button-gap);
     }

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_rc4tb","mobile":"select__mobile_rc4tb"};
+var styles = {"desktop":"select__desktop_1g7v5","mobile":"select__mobile_1g7v5"};
 require('./index.css')
 
 var Header = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: 8sdjv */
+/* hash: lyame */
 :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 */
@@ -22,8 +22,8 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} .select__desktop_rc4tb {
+} .select__desktop_1g7v5 {
     padding: var(--gap-12);
-} .select__mobile_rc4tb {
+} .select__mobile_1g7v5 {
     padding: var(--gap-12) var(--gap-8);
 }

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

@@ -1 +1 @@
-export * from "../../../hook-06aedfaf";
+export * from "../../../hook-c8ba558c";

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-06aedfaf.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-c8ba558c.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_1tkpm"};
+var styles = {"skeleton":"select__skeleton_15yyc"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: pke3d */
-.select__skeleton_1tkpm {
+/* hash: 26o9h */
+.select__skeleton_15yyc {
     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-06aedfaf.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-c8ba558c.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-option/index.module.css

@@ -20,7 +20,7 @@
     }
 
     &.checkmarkBefore {
-        padding: 0 0 0 var(--gap-12);
+        padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12);
 
         &.mobile {
             padding-left: var(--gap-16);
@@ -28,7 +28,7 @@
     }
 
     &.checkmarkAfter.checkmarkAfter {
-        padding: 0 var(--gap-12) 0 0;
+        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0);
 
         &.mobile {
             padding-right: var(--gap-20);

package/src/components/base-select/index.module.css

@@ -34,10 +34,10 @@
 
 .optionsListBorder {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    top: var(--gap-0);
+    right: var(--gap-0);
+    bottom: var(--gap-0);
+    left: var(--gap-0);
     box-shadow: inset 0 0 0 1px var(--color-light-neutral-300);
     border-radius: inherit;
     pointer-events: none;
@@ -47,9 +47,9 @@
     opacity: 0;
     overflow: hidden;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    top: var(--gap-0);
+    bottom: var(--gap-0);
+    left: var(--gap-0);
     width: 100%;
     max-width: 100%;
     min-width: 0;
@@ -67,7 +67,7 @@
 }
 
 .search {
-    margin: var(--gap-12) var(--gap-12) 0;
+    margin: var(--gap-12) var(--gap-12) var(--gap-0);
 
     &:last-child {
         margin-bottom: var(--gap-12);

package/src/components/base-select/mobile.module.css

@@ -6,17 +6,17 @@
 }
 
 .sheetContent.sheetContent {
-    padding: 0;
+    padding: var(--gap-0);
 
     & .modalContent {
-        padding: 0;
+        padding: var(--gap-0);
         display: flex;
         flex-direction: column;
     }
 }
 
 .sheetContainer {
-    padding: 0;
+    padding: var(--gap-0);
 }
 
 .optionsListWrapper {

package/src/components/option/index.module.css

@@ -25,7 +25,7 @@
         position: absolute;
         left: var(--select-option-left-padding);
         right: var(--select-option-right-padding);
-        top: 0;
+        top: var(--gap-0);
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
@@ -90,7 +90,6 @@
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .textContent {

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

@@ -114,7 +114,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             );
         };
 
-        useVisibleOptions({
+        const measured = useVisibleOptions({
             ...(!nativeScrollbar && { styleTargetRef: scrollbarRef }),
             visibleOptions,
             listRef,
@@ -165,6 +165,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                     horizontalAutoStretch={optionsListWidth === 'content'}
                     scrollableNodeProps={scrollableNodeProps}
                     contentNodeProps={{ ref: listRef }}
+                    maskProps={{ className: measured ? undefined : styles.mask }}
                 >
                     {renderListItems()}
                 </Scrollbar>

package/src/components/options-list/index.module.css

@@ -20,7 +20,7 @@
 
 .optionsListFooter {
     position: sticky;
-    bottom: 0;
+    bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
     transition: border-color 0.2s ease;
@@ -35,6 +35,10 @@
     width: 100%;
 }
 
+.mask {
+    min-width: 4000px;
+}
+
 .emptyPlaceholder {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);

package/src/components/virtual-options-list/index.module.css

@@ -16,7 +16,7 @@
 
 .virtualOptionsListFooter {
     position: sticky;
-    bottom: 0;
+    bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
 
@@ -38,8 +38,8 @@
 
 .virtualRow {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: var(--gap-0);
+    left: var(--gap-0);
     width: 100%;
 
     &:before {
@@ -48,7 +48,7 @@
         z-index: 1;
         left: var(--select-option-left-padding);
         right: var(--select-option-right-padding);
-        top: 0;
+        top: var(--gap-0);
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);

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

@@ -1,4 +1,5 @@
 @import '@alfalab/core-components-vars/src/index.css';
+@import './vars.css';
 
 .footer {
     background-color: var(--color-light-base-bg-primary);
@@ -6,6 +7,6 @@
     outline: none;
 
     & > .button + .button {
-        margin-left: var(--gap-8);
+        margin-left: var(--select-option-list-footer-button-gap);
     }
 }

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

@@ -0,0 +1,3 @@
+:root {
+    --select-option-list-footer-button-gap: var(--gap-8);
+}

package/src/utils.ts

@@ -1,6 +1,14 @@
-import { cloneElement, isValidElement, ReactNode, RefObject, useEffect, useRef } from 'react';
-
-import { getDataTestId } from '@alfalab/core-components-shared';
+import {
+    cloneElement,
+    isValidElement,
+    ReactNode,
+    RefObject,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+
+import { fnUtils, getDataTestId, useIsMounted } from '@alfalab/core-components-shared';
 
 import { BaseSelectProps, GroupShape, OptionShape, OptionsListProps } from './typings';
 
@@ -154,6 +162,9 @@ export function useVisibleOptions({
     size,
     actualOptionsCount,
 }: useVisibleOptionsArgs) {
+    const [, runIfMounted] = useIsMounted();
+    const [measured, setMeasured] = useState(false);
+
     useEffect(() => {
         const measureOptionHeight = (element: HTMLElement) =>
             typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
@@ -205,8 +216,19 @@ export function useVisibleOptions({
                 }
             }
 
+            const prevHeight = styleTarget.style.height;
+
             styleTarget.style.height = `${height}px`;
+
+            setMeasured(true);
+
+            return () => {
+                styleTarget.style.height = prevHeight;
+                runIfMounted(() => setMeasured(false));
+            };
         }
+
+        return fnUtils.noop;
     }, [
         actualOptionsCount,
         listRef,
@@ -216,7 +238,10 @@ export function useVisibleOptions({
         styleTargetRef,
         visibleOptions,
         invalidate,
+        runIfMounted,
     ]);
+
+    return measured;
 }
 
 export function defaultFilterFn(optionText: string, search: string) {

package/src/vars.css

@@ -5,11 +5,11 @@
 
     /* options list */
 
-    --select-options-list-border-radius: var(--border-radius-m);
+    --select-options-list-border-radius: var(--border-radius-8);
     --select-options-list-box-shadow: var(--shadow-m);
     --select-options-list-offset: var(--gap-4);
-    --select-options-list-top-padding: 0;
-    --select-options-list-bottom-padding: 0;
+    --select-options-list-top-padding: var(--gap-0);
+    --select-options-list-bottom-padding: var(--gap-0);
     --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
     --select-option-divider-display: none;
     --select-option-divider-background: var(--color-light-neutral-400);
@@ -33,7 +33,7 @@
 
     /* checkmark */
 
-    --select-checkmark-margin: 0 var(--gap-8) 0 0;
+    --select-checkmark-margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-0);
     --select-checkmark-margin-after: var(--select-checkmark-margin);
     --select-checkmark-size: 4px;
     --select-checkmark-before-display: 'flex';

package/utils.d.ts

@@ -45,7 +45,7 @@ type useVisibleOptionsArgs = {
      */
     actualOptionsCount?: boolean;
 };
-declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, options, size, actualOptionsCount, }: useVisibleOptionsArgs): void;
+declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, options, size, actualOptionsCount, }: useVisibleOptionsArgs): boolean;
 declare function defaultFilterFn(optionText: string, search: string): boolean;
 declare function defaultGroupAccessor(option: GroupShape): string | undefined;
 declare function defaultAccessor(option: OptionShape): string;

package/utils.js

@@ -80,6 +80,8 @@ function processOptions(options, selected, filterFn, filterGroup) {
 }
 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, options = _a.options, size = _a.size, actualOptionsCount = _a.actualOptionsCount;
+    var _c = coreComponentsShared.useIsMounted(), runIfMounted = _c[1];
+    var _d = React.useState(false), measured = _d[0], setMeasured = _d[1];
     React.useEffect(function () {
         var measureOptionHeight = function (element) {
             return typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
@@ -109,8 +111,15 @@ function useVisibleOptions(_a) {
                     height += size / 2;
                 }
             }
+            var prevHeight_1 = styleTarget.style.height;
             styleTarget.style.height = "".concat(height, "px");
+            setMeasured(true);
+            return function () {
+                styleTarget.style.height = prevHeight_1;
+                runIfMounted(function () { return setMeasured(false); });
+            };
         }
+        return coreComponentsShared.fnUtils.noop;
     }, [
         actualOptionsCount,
         listRef,
@@ -120,7 +129,9 @@ function useVisibleOptions(_a) {
         styleTargetRef,
         visibleOptions,
         invalidate,
+        runIfMounted,
     ]);
+    return measured;
 }
 function defaultFilterFn(optionText, search) {
     if (!search)

package/esm/mobile.module-841dbab1.js

@@ -1,4 +0,0 @@
-var mobileStyles = {"sheet":"select__sheet_92zot","sheetContent":"select__sheetContent_92zot","modalContent":"select__modalContent_92zot","sheetContainer":"select__sheetContainer_92zot","optionsListWrapper":"select__optionsListWrapper_92zot","optionsList":"select__optionsList_92zot","scrollbar":"select__scrollbar_92zot","search":"select__search_92zot","option":"select__option_92zot","optionGroup":"select__optionGroup_92zot"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };

package/mobile.module-6a431abb.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var mobileStyles = {"sheet":"select__sheet_92zot","sheetContent":"select__sheetContent_92zot","modalContent":"select__modalContent_92zot","sheetContainer":"select__sheetContainer_92zot","optionsListWrapper":"select__optionsListWrapper_92zot","optionsList":"select__optionsList_92zot","scrollbar":"select__scrollbar_92zot","search":"select__search_92zot","option":"select__option_92zot","optionGroup":"select__optionGroup_92zot"};
-require('./components/base-select/mobile.css')
-
-exports.mobileStyles = mobileStyles;

package/modern/mobile.module-5583797d.js

@@ -1,4 +0,0 @@
-const mobileStyles = {"sheet":"select__sheet_92zot","sheetContent":"select__sheetContent_92zot","modalContent":"select__modalContent_92zot","sheetContainer":"select__sheetContainer_92zot","optionsListWrapper":"select__optionsListWrapper_92zot","optionsList":"select__optionsList_92zot","scrollbar":"select__scrollbar_92zot","search":"select__search_92zot","option":"select__option_92zot","optionGroup":"select__optionGroup_92zot"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };