@alfalab/core-components-select 17.2.0 → 17.3.0

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-5269e0eb.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-6aa923ff.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

@@ -101,7 +101,7 @@ export const BaseSelect = forwardRef(
             name,
             id,
             selected,
-            size = 's',
+            size = 48,
             optionsSize = size,
             error,
             hint,
@@ -149,7 +149,6 @@ export const BaseSelect = forwardRef(
         const listRef = useRef<HTMLDivElement>(null);
         const initiatorRef = useRef<OptionShape | null>(null);
         const searchRef = useRef<HTMLInputElement>(null);
-        const alreadyClickedRef = useRef<boolean>(false);
         const scrollableContainerRef = useRef<HTMLDivElement>(null);
         const onOpenRef = useRef(onOpen);
 
@@ -249,6 +248,26 @@ export const BaseSelect = forwardRef(
             isItemDisabled,
             defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
             scrollIntoView,
+            onSelectedItemChange: (changes) => {
+                const selectedItem = changes.selectedItem || initiatorRef.current;
+
+                if (selectedItem && !selectedItem.disabled) {
+                    const alreadySelected = selectedItems.includes(selectedItem);
+                    const allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
+
+                    if (alreadySelected && allowRemove) {
+                        removeSelectedItem(selectedItem);
+                    }
+
+                    if (!alreadySelected) {
+                        if (multiple) {
+                            addSelectedItem(selectedItem);
+                        } else {
+                            setSelectedItems([selectedItem]);
+                        }
+                    }
+                }
+            },
             onIsOpenChange: (changes) => {
                 if (onOpenRef.current) {
                     /**
@@ -275,18 +294,10 @@ export const BaseSelect = forwardRef(
                     }
                 }
             },
-            // eslint-disable-next-line complexity
             stateReducer: (state, actionAndChanges) => {
                 const { type, changes } = actionAndChanges;
-                const { selectedItem } = changes;
 
                 switch (type) {
-                    case useCombobox.stateChangeTypes.InputBlur:
-                        if (view === 'mobile') {
-                            return state;
-                        }
-
-                        return changes;
                     case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
                         if (!circularNavigation && state.highlightedIndex === options.length - 1) {
                             return { ...changes, highlightedIndex: state.highlightedIndex };
@@ -301,37 +312,14 @@ export const BaseSelect = forwardRef(
                         return changes;
 
                     case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                    case useCombobox.stateChangeTypes.ItemClick:
-                        initiatorRef.current = selectedItem || null;
-
-                        if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
-                            // TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
-                            if (view === 'mobile' && React.version.indexOf('18') === 0) {
-                                alreadyClickedRef.current = true;
-                                setTimeout(() => {
-                                    alreadyClickedRef.current = false;
-                                });
-                            }
-
-                            const alreadySelected = selectedItems.includes(selectedItem);
-                            const allowRemove =
-                                allowUnselect || (multiple && selectedItems.length > 1);
-
-                            if (alreadySelected && allowRemove) {
-                                removeSelectedItem(selectedItem);
-                            }
+                    case useCombobox.stateChangeTypes.ItemClick: {
+                        const { selectedItem } = changes;
 
-                            if (!alreadySelected) {
-                                if (multiple) {
-                                    addSelectedItem(selectedItem);
-                                } else {
-                                    setSelectedItems([selectedItem]);
-                                }
-                            }
-                        }
+                        initiatorRef.current = selectedItem || null;
 
                         return {
                             ...changes,
+                            selectedItem: state.selectedItem === selectedItem ? null : selectedItem,
                             isOpen: !closeOnSelect || (view === 'mobile' && multiple),
                             // при closeOnSelect === false - сохраняем подсвеченный индекс
                             highlightedIndex:
@@ -339,14 +327,32 @@ export const BaseSelect = forwardRef(
                                     ? state.highlightedIndex
                                     : changes.highlightedIndex,
                         };
+                    }
                     default:
                         return changes;
                 }
             },
         });
 
-        const menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
+        useEffect(() => {
+            /*
+             * При изменении openProp, состояние внутри downshift в useEnhancedReducer не меняется, поэтому меняем его таким способом
+             * Скорее всего это исправят в будущих версиях downshift
+             */
+            if (openProp !== undefined) {
+                if (openProp) {
+                    openMenu();
+                } else {
+                    closeMenu();
+                }
+            }
+        }, [openProp, openMenu, closeMenu]);
+
         const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
+        const { ref: menuRef, ...menuProps } = getMenuProps(
+            { ref: listRef },
+            { suppressRefError: true },
+        );
 
         const handleEntered = (node: HTMLElement, isAppearing: boolean) => {
             if (showSearch) searchRef.current?.focus();
@@ -593,6 +599,7 @@ export const BaseSelect = forwardRef(
             return (
                 <div
                     {...menuProps}
+                    ref={view === 'desktop' ? menuRef : undefined}
                     className={cn(
                         optionsListClassName,
                         view === 'mobile' && mobileStyles.optionsListWrapper,
@@ -668,6 +675,7 @@ export const BaseSelect = forwardRef(
                         swipeable={swipeable}
                         initialHeight={showSearch ? 'full' : 'default'}
                         {...bottomSheetProps}
+                        sheetContainerRef={menuRef}
                         scrollableContainerRef={scrollableContainerRef}
                         onClose={() => {
                             closeMenu();
@@ -704,6 +712,7 @@ export const BaseSelect = forwardRef(
                         open={open}
                         hasCloser={true}
                         {...modalProps}
+                        componentRef={menuRef}
                         onClose={(...args) => {
                             closeMenu();
                             modalProps?.onClose?.(...args);

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

@@ -35,7 +35,7 @@
     }
 }
 
-.after {
+.after.after {
     display: var(--select-checkmark-after-display);
 
     &.single {

package/src/components/field/Component.tsx

@@ -18,7 +18,7 @@ type FieldProps = {
 };
 
 export const Field = ({
-    size = 'm',
+    size = 56,
     open,
     multiple,
     error,

package/src/components/footer/Component.tsx

@@ -40,7 +40,7 @@ export const Footer = ({
         >
             {showClear && (
                 <ButtonMobile
-                    size='m'
+                    size={56}
                     view='secondary'
                     className={styles.button}
                     onClick={handleClear}
@@ -51,7 +51,7 @@ export const Footer = ({
             )}
 
             <ButtonMobile
-                size='m'
+                size={56}
                 view='primary'
                 className={styles.button}
                 onClick={handleApply}

package/src/components/optgroup/Component.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { OptgroupProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const Optgroup = ({ children, className, label, size = 's' }: OptgroupProps) => (
+export const Optgroup = ({ children, className, label, size = 48 }: OptgroupProps) => (
     <React.Fragment>
-        <div className={cn(styles.optgroup, className, styles[size])}>
+        <div className={cn(styles.optgroup, className, styles[SIZE_TO_CLASSNAME_MAP[size]])}>
             <span className={styles.label}>{label}</span>
         </div>
         {children}

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

@@ -23,8 +23,8 @@
     color: var(--select-optgroup-color);
 }
 
-.l,
-.xl {
+.size-64,
+.size-72 {
     padding-left: var(--select-optgroup-l-left-padding);
     padding-right: var(--select-optgroup-l-right-padding);
 }

package/src/components/option/Component.tsx

@@ -1,6 +1,7 @@
 import React, { FC, isValidElement } from 'react';
 import cn from 'classnames';
 
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { OptionProps } from '../../typings';
 import { Checkmark as DefaultCheckMark } from '../checkmark';
 import { Checkmark as DefaultMobileCheckmark } from '../checkmark-mobile';
@@ -8,7 +9,7 @@ import { Checkmark as DefaultMobileCheckmark } from '../checkmark-mobile';
 import styles from './index.module.css';
 
 export const Option: FC<OptionProps> = ({
-    size = 's',
+    size = 48,
     className,
     option,
     children,
@@ -27,7 +28,7 @@ export const Option: FC<OptionProps> = ({
     return (
         <div
             {...innerProps}
-            className={cn(styles.option, styles[size], className, {
+            className={cn(styles.option, styles[SIZE_TO_CLASSNAME_MAP[size]], className, {
                 [styles.highlighted]: !mobile && highlighted,
                 [styles.selected]: selected,
                 [styles.disabled]: disabled,

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

@@ -37,24 +37,24 @@
     }
 }
 
-.s {
+.size-48 {
     min-height: var(--size-s-height);
 }
 
-.m {
+.size-56 {
     min-height: var(--size-m-height);
 }
 
-.l {
+.size-64 {
     min-height: var(--size-l-height);
 }
 
-.xl {
+.size-72 {
     min-height: var(--size-xl-height);
 }
 
-.l,
-.xl {
+.size-64,
+.size-72 {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding);
 

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

@@ -6,7 +6,7 @@ import { useMatchMedia } from '@alfalab/core-components-mq';
 import { Scrollbar } from '@alfalab/core-components-scrollbar';
 import { isClient } from '@alfalab/core-components-shared';
 
-import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
+import { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
 import { isGroup, useVisibleOptions } from '../../utils';
 import { Optgroup as DefaultOptgroup } from '../optgroup';
@@ -23,7 +23,7 @@ const createCounter = () => {
 export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
     (
         {
-            size = 's',
+            size = 48,
             className,
             optionGroupClassName,
             scrollbarClassName,
@@ -130,7 +130,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
         return (
             <div
                 {...(nativeScrollbar && { 'data-test-id': dataTestId })}
-                className={cn(styles.optionsList, styles[size], className)}
+                className={cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className)}
             >
                 {header && (
                     <div className={styles.optionsListHeader} onMouseEnter={resetHighlightedIndex}>

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

@@ -34,7 +34,7 @@
     color: var(--select-options-list-empty-placeholder-color);
 }
 
-.l .emptyPlaceholder,
-.xl .emptyPlaceholder {
+.size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
     padding: var(--gap-xl) var(--gap-m);
 }

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

@@ -7,7 +7,7 @@ import { useMatchMedia } from '@alfalab/core-components-mq';
 import { Scrollbar } from '@alfalab/core-components-scrollbar';
 import { isClient } from '@alfalab/core-components-shared';
 
-import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
+import { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';
 import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
 import { isGroup, lastIndexOf, usePrevious, useVisibleOptions } from '../../utils';
 import { Optgroup as DefaultOptgroup } from '../optgroup';
@@ -17,7 +17,7 @@ import styles from './index.module.css';
 export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
     (
         {
-            size = 's',
+            size = 48,
             flatOptions = [],
             highlightedIndex = -1,
             className,
@@ -201,7 +201,11 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
 
         return (
             <div
-                className={cn(styles.virtualOptionsList, styles[size], className)}
+                className={cn(
+                    styles.virtualOptionsList,
+                    styles[SIZE_TO_CLASSNAME_MAP[size]],
+                    className,
+                )}
                 data-test-id={dataTestId}
             >
                 {header && (

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

@@ -70,7 +70,7 @@
     color: var(--select-options-list-empty-placeholder-color);
 }
 
-.l .emptyPlaceholder,
-.xl .emptyPlaceholder {
+.size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
     padding: var(--gap-xl) var(--gap-m);
 }

package/src/consts.ts

@@ -1 +1,12 @@
 export const DEFAULT_VISIBLE_OPTIONS = 5;
+
+export const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};

package/src/mobile/Component.mobile.tsx

@@ -35,8 +35,8 @@ export const SelectMobile = forwardRef(
             circularNavigation = false,
             defaultOpen = false,
             open: openProp,
-            size = 'm',
-            optionsSize = 'm',
+            size = 56,
+            optionsSize = 56,
             fieldProps = {},
             optionProps = {},
             optionsListProps = {},

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

@@ -28,7 +28,7 @@ export const Footer = ({
         className={styles.footer}
     >
         <ButtonDesktop
-            size='xxs'
+            size={32}
             view='primary'
             onClick={handleApply}
             dataTestId={getDataTestId(dataTestId, 'apply')}
@@ -38,7 +38,7 @@ export const Footer = ({
 
         {showClear && selectedDraft.length > 0 && (
             <ButtonDesktop
-                size='xxs'
+                size={32}
                 view='secondary'
                 onClick={handleClear}
                 dataTestId={getDataTestId(dataTestId, 'clear')}

package/src/typings.ts

@@ -144,13 +144,15 @@ export type BaseSelectProps = {
 
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
 
     /**
      * Размер пунктов меню
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    optionsSize?: 's' | 'm' | 'l' | 'xl';
+    optionsSize?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
 
     /**
      * Растягивает компонент на ширину контейнера
@@ -477,8 +479,9 @@ export type OptionsListProps = {
 
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
 
     /**
      * Компонент пункта меню
@@ -605,8 +608,9 @@ export type OptgroupProps = {
 
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
 
     /**
      * Заголовок группы
@@ -627,8 +631,9 @@ export type OptionProps = {
 
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
 
     /**
      * Контент пункта меню

package/typings.d.ts

@@ -107,12 +107,14 @@ type BaseSelectProps = {
     multiple?: boolean;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Размер пунктов меню
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    optionsSize?: 's' | 'm' | 'l' | 'xl';
+    optionsSize?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -377,8 +379,9 @@ type OptionsListProps = {
     scrollbarClassName?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Компонент пункта меню
      */
@@ -480,8 +483,9 @@ type OptgroupProps = {
     className?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Заголовок группы
      */
@@ -498,8 +502,9 @@ type OptionProps = {
     className?: string;
     /**
      * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
      */
-    size?: 's' | 'm' | 'l' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
     /**
      * Контент пункта меню
      */