@alfalab/core-components-select 18.2.5 → 18.2.6

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

@@ -1,12 +1,78 @@
 import React from 'react';
-import { type OptionShape, type OptionsListProps } from '../../../typings';
+import { type OptionShape } from '../../../typings';
 import { type FooterProps } from './footer/Component';
 import { type HeaderProps } from './header/Component';
-export declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+export declare const OptionsListWithApply: React.ForwardRefExoticComponent<Pick<import("../../../typings").SelectProps, "client"> & {
+    className?: string | undefined;
+    optionGroupClassName?: string | undefined;
+    scrollbarClassName?: string | undefined;
+    footerClassName?: string | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+    Option: React.ComponentType<import("../../../typings").OptionProps>;
+    getOptionProps: (option: OptionShape, index: number) => import("../../../typings").OptionProps;
+    groupOptionProps?: import("../../../typings").AnyObject | undefined;
+    selectedItems?: OptionShape[] | undefined;
+    setSelectedItems: (selected: OptionShape[]) => void;
+    toggleMenu: () => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    options?: (OptionShape | import("../../../typings").GroupShape)[] | undefined;
+    flatOptions?: OptionShape[] | undefined;
+    highlightedIndex?: number | undefined;
+    open?: boolean | undefined;
+    Optgroup?: React.ComponentType<import("../../../typings").OptgroupProps> | undefined;
+    emptyPlaceholder?: React.ReactNode;
+    visibleOptions?: number | undefined;
+    onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    dataTestId?: string | undefined;
+    inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+    showFooter?: boolean | undefined;
+    nativeScrollbar?: boolean | undefined;
+    optionsListWidth?: "field" | "content" | undefined;
+    onApply?: (() => void) | undefined;
+    onClear?: (() => void) | undefined;
+    setHighlightedIndex?: ((index: number) => void) | undefined;
+    search?: string | undefined;
+    multiple?: boolean | undefined;
+    limitDynamicOptionGroupSize?: boolean | undefined;
+} & {
     showClear?: boolean | undefined;
     onClose?: (() => void) | undefined;
     selectedDraft?: OptionShape[] | undefined;
-    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    OptionsList?: React.FC<Pick<import("../../../typings").SelectProps, "client"> & {
+        className?: string | undefined;
+        optionGroupClassName?: string | undefined;
+        scrollbarClassName?: string | undefined;
+        footerClassName?: string | undefined;
+        size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+        Option: React.ComponentType<import("../../../typings").OptionProps>;
+        getOptionProps: (option: OptionShape, index: number) => import("../../../typings").OptionProps;
+        groupOptionProps?: import("../../../typings").AnyObject | undefined;
+        selectedItems?: OptionShape[] | undefined;
+        setSelectedItems: (selected: OptionShape[]) => void;
+        toggleMenu: () => void;
+        header?: React.ReactNode;
+        footer?: React.ReactNode;
+        options?: (OptionShape | import("../../../typings").GroupShape)[] | undefined;
+        flatOptions?: OptionShape[] | undefined;
+        highlightedIndex?: number | undefined;
+        open?: boolean | undefined;
+        Optgroup?: React.ComponentType<import("../../../typings").OptgroupProps> | undefined;
+        emptyPlaceholder?: React.ReactNode;
+        visibleOptions?: number | undefined;
+        onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        dataTestId?: string | undefined;
+        inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+        showFooter?: boolean | undefined;
+        nativeScrollbar?: boolean | undefined;
+        optionsListWidth?: "field" | "content" | undefined;
+        onApply?: (() => void) | undefined;
+        onClear?: (() => void) | undefined;
+        setHighlightedIndex?: ((index: number) => void) | undefined;
+        search?: string | undefined;
+        multiple?: boolean | undefined;
+        limitDynamicOptionGroupSize?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>> | undefined;
     Footer?: React.FC<FooterProps> | undefined;
     Header?: React.FC<HeaderProps> | undefined;
     headerProps?: HeaderProps | undefined;

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

@@ -9,12 +9,12 @@
     --gap-16: var(--gap-m);
 } :root {
     --select-option-list-footer-button-gap: var(--gap-8);
-} .select__footer_16d02 {
+} .select__footer_1nczv {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
-} .select__footer_16d02.select__size-72_16d02 {
+} .select__footer_1nczv.select__size-72_1nczv {
         padding: var(--gap-12) var(--gap-16);
-    } .select__footer_16d02 > .select__button_16d02 + .select__button_16d02 {
+    } .select__footer_1nczv > .select__button_1nczv + .select__button_1nczv {
         margin-left: var(--select-option-list-footer-button-gap);
     }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_16d02","size-72":"select__size-72_16d02","button":"select__button_16d02"};
+var styles = {"footer":"select__footer_1nczv","size-72":"select__size-72_1nczv","button":"select__button_1nczv"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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

@@ -5,10 +5,10 @@
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
-} .select__desktop_jh5ie {
+} .select__desktop_1cwzq {
     padding: var(--gap-12);
-} .select__desktop_jh5ie.select__size-72_jh5ie {
+} .select__desktop_1cwzq.select__size-72_1cwzq {
         padding-left: var(--gap-16);
-    } .select__mobile_jh5ie {
+    } .select__mobile_1cwzq {
     padding: var(--gap-12) var(--gap-8);
 }

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

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"desktop":"select__desktop_jh5ie","size-72":"select__size-72_jh5ie","mobile":"select__mobile_jh5ie"};
+var styles = {"desktop":"select__desktop_1cwzq","size-72":"select__size-72_1cwzq","mobile":"select__mobile_1cwzq"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_m6hzz {
+.select__skeleton_1r7w6 {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/presets/useSelectWithLoading/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"skeleton":"select__skeleton_m6hzz"};
+var styles = {"skeleton":"select__skeleton_1r7w6"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

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

@@ -590,6 +590,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                         size && styles[SIZE_TO_CLASSNAME_MAP[size]],
                     )}
                     ref={mergeRefs([searchRef, searchProps?.componentProps?.ref || null])}
+                    client={view}
                 />
             );
         };
@@ -672,6 +673,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                         search={search}
                         multiple={multiple}
                         limitDynamicOptionGroupSize={limitDynamicOptionGroupSize}
+                        client={view}
                     />
                     {view === 'desktop' && <div className={styles.optionsListBorder} />}
                 </div>

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

@@ -2,11 +2,10 @@ import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-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, SIZE_TO_CLASSNAME_MAP } from '../../consts';
+import { useNativeScrollbar } from '../../hooks/use-native-scrollbar';
 import { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';
 import { isGroup, useVisibleOptions } from '../../utils';
 import { Optgroup as DefaultOptgroup } from '../optgroup';
@@ -50,18 +49,17 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             setSelectedItems,
             multiple,
             limitDynamicOptionGroupSize = false,
+            client,
         },
         ref,
     ) => {
         const [scrollTop, setScrollTop] = useState(true);
         const [scrollBottom, setScrollBottom] = useState(false);
 
-        const query = '(max-width: 1023px)';
-        let [nativeScrollbar] = useMatchMedia(query, () =>
-            isClient() ? window.matchMedia(query).matches : true,
-        );
-
-        nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+        const nativeScrollbar = useNativeScrollbar({
+            nativeScrollbar: nativeScrollbarProp,
+            client,
+        });
 
         const handleScroll = useCallback(
             (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

package/src/components/search/Component.tsx

@@ -2,12 +2,25 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
 import { Input } from '@alfalab/core-components-input';
+import { InputDesktop } from '@alfalab/core-components-input/desktop';
+import { InputMobile } from '@alfalab/core-components-input/mobile';
 import { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';
 
 import { type SearchProps } from '../../typings';
 
 import styles from './index.module.css';
 
+const getComponent = (client: SearchProps['client']) => {
+    switch (client) {
+        case 'desktop':
+            return InputDesktop;
+        case 'mobile':
+            return InputMobile;
+        default:
+            return Input;
+    }
+};
+
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
     (
         {
@@ -18,14 +31,20 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             ...restProps
         },
         ref,
-    ) => (
-        <Input
-            ref={ref}
-            className={cn(styles.component, className)}
-            placeholder={placeholder}
-            leftAddons={leftAddons}
-            clear={clear}
-            {...restProps}
-        />
-    ),
+    ) => {
+        const { client } = restProps;
+
+        const Component = getComponent(client);
+
+        return (
+            <Component
+                ref={ref}
+                className={cn(styles.component, className)}
+                placeholder={placeholder}
+                leftAddons={leftAddons}
+                clear={clear}
+                {...restProps}
+            />
+        );
+    },
 );

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

@@ -3,11 +3,10 @@ import mergeRefs from 'react-merge-refs';
 import { useVirtual } from 'react-virtual';
 import cn from 'classnames';
 
-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, SIZE_TO_CLASSNAME_MAP } from '../../consts';
+import { useNativeScrollbar } from '../../hooks/use-native-scrollbar';
 import { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';
 import { isGroup, lastIndexOf, usePrevious, useVirtualVisibleOptions } from '../../utils';
 import { Optgroup as DefaultOptgroup } from '../optgroup';
@@ -43,6 +42,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             search,
             multiple,
             scrollbarClassName,
+            client,
         },
         ref,
     ) => {
@@ -52,19 +52,16 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
         const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
         const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
 
-        const query = '(max-width: 1023px)';
-        let [nativeScrollbar] = useMatchMedia(query, () =>
-            isClient() ? window.matchMedia(query).matches : true,
-        );
-
         const rowVirtualizer = useVirtual({
             size: flatOptions.length,
             parentRef: (ref || parentRef) as React.RefObject<HTMLDivElement>,
             overscan: 15,
         });
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+        const nativeScrollbar = useNativeScrollbar({
+            nativeScrollbar: nativeScrollbarProp,
+            client,
+        });
 
         // Сколл к выбранному пункту при открытии меню
         useEffect(() => {

package/src/hooks/use-native-scrollbar.ts

@@ -0,0 +1,36 @@
+import { useMatchMedia } from '@alfalab/core-components-mq';
+import { isClient } from '@alfalab/core-components-shared';
+
+import { type OptionsListProps } from '../typings';
+
+type Params = Pick<OptionsListProps, 'nativeScrollbar' | 'client'>;
+
+export const useNativeScrollbar = (params: Params) => {
+    const { nativeScrollbar: scrollbarByProp, client } = params;
+
+    const query = '(max-width: 1023px)';
+
+    const [nativeScrollbar] = useMatchMedia(query, () =>
+        isClient() ? window.matchMedia(query).matches : true,
+    );
+
+    /**
+     * Условия отображения custom/native scrollbar
+     * 1. Принудительное управление через пропс
+     * 2. Для desktop/mobile выключаем и включаем соответственно
+     * 3. Иначе ориентируемся на медиа-запрос
+     */
+    if (scrollbarByProp) {
+        return scrollbarByProp;
+    }
+
+    if (client === 'desktop') {
+        return false;
+    }
+
+    if (client === 'mobile') {
+        return true;
+    }
+
+    return nativeScrollbar;
+};

package/src/typings.ts

@@ -531,7 +531,7 @@ export type ArrowProps = {
     size?: BaseSelectProps['size'];
 };
 
-export type OptionsListProps = {
+export type OptionsListProps = Pick<SelectProps, 'client'> & {
     /**
      * Дополнительный класс
      */

package/typings.d.ts

@@ -410,7 +410,7 @@ export declare type ArrowProps = {
      */
     size?: BaseSelectProps['size'];
 };
-export declare type OptionsListProps = {
+export declare type OptionsListProps = Pick<SelectProps, 'client'> & {
     /**
      * Дополнительный класс
      */