@alfalab/core-components-select 17.10.1 → 17.12.0

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .checkmark {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .checkmark {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '@alfalab/core-components-input/src/vars.css';
 @import '../../vars.css';
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .footer {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .optgroup {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .option {
@@ -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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .optionsList {
@@ -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/search/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .component.component {

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .virtualOptionsList {
@@ -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-themes/src/default.css';
+@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/presets/useSelectWithApply/options-list-with-apply/header/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .desktop {
     padding: var(--gap-12);

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-eaf56278.js

@@ -1,4 +0,0 @@
-var mobileStyles = {"sheet":"select__sheet_rk2oo","sheetContent":"select__sheetContent_rk2oo","modalContent":"select__modalContent_rk2oo","sheetContainer":"select__sheetContainer_rk2oo","optionsListWrapper":"select__optionsListWrapper_rk2oo","optionsList":"select__optionsList_rk2oo","scrollbar":"select__scrollbar_rk2oo","search":"select__search_rk2oo","option":"select__option_rk2oo","optionGroup":"select__optionGroup_rk2oo"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };

package/mobile.module-8d14caac.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var mobileStyles = {"sheet":"select__sheet_rk2oo","sheetContent":"select__sheetContent_rk2oo","modalContent":"select__modalContent_rk2oo","sheetContainer":"select__sheetContainer_rk2oo","optionsListWrapper":"select__optionsListWrapper_rk2oo","optionsList":"select__optionsList_rk2oo","scrollbar":"select__scrollbar_rk2oo","search":"select__search_rk2oo","option":"select__option_rk2oo","optionGroup":"select__optionGroup_rk2oo"};
-require('./components/base-select/mobile.css')
-
-exports.mobileStyles = mobileStyles;

package/modern/mobile.module-2f7796c1.js

@@ -1,4 +0,0 @@
-const mobileStyles = {"sheet":"select__sheet_rk2oo","sheetContent":"select__sheetContent_rk2oo","modalContent":"select__modalContent_rk2oo","sheetContainer":"select__sheetContainer_rk2oo","optionsListWrapper":"select__optionsListWrapper_rk2oo","optionsList":"select__optionsList_rk2oo","scrollbar":"select__scrollbar_rk2oo","search":"select__search_rk2oo","option":"select__option_rk2oo","optionGroup":"select__optionGroup_rk2oo"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };