@alfalab/core-components-select 15.2.3 → 16.0.0

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

@@ -18,7 +18,7 @@
     position: relative;
 }
 
-.optionsList {
+.optionsListWrapper {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);

package/src/components/{base-select-mobile/index.module.css → base-select/mobile.module.css}

@@ -1,13 +1,6 @@
 @import '@alfalab/core-components-themes/src/default.css';
 @import '../../vars.css';
 
-.component {
-    width: max-content;
-    position: relative;
-    outline: 0;
-    max-width: 100%;
-}
-
 .sheet {
     overflow: hidden;
 }
@@ -26,10 +19,6 @@
     padding: 0;
 }
 
-.block {
-    width: 100%;
-}
-
 .optionsListWrapper {
     flex: 1;
 }
@@ -44,10 +33,6 @@
     flex: 1;
 }
 
-.emptySearchPlaceholder {
-    text-align: center;
-}
-
 .search {
     padding: var(--gap-xs);
 }

package/src/components/{base-select-mobile/footer → footer}/Component.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 
 import { BaseModalContext } from '@alfalab/core-components-base-modal';
 import { ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { getDataTestId } from '@alfalab/core-components-shared';
 
 import styles from './index.module.css';
 
@@ -10,9 +11,19 @@ export type FooterProps = {
     handleClear?: () => void;
     handleApply?: () => void;
     showClear?: boolean;
+    clearText?: string;
+    applyText?: string;
+    dataTestId?: string;
 };
 
-export const Footer = ({ handleApply, handleClear, showClear }: FooterProps) => {
+export const Footer = ({
+    handleApply,
+    handleClear,
+    showClear,
+    clearText = 'Сбросить',
+    applyText = 'Применить',
+    dataTestId,
+}: FooterProps) => {
     const { footerHighlighted, setHasFooter } = useContext(BaseModalContext);
 
     useEffect(() => {
@@ -33,13 +44,20 @@ export const Footer = ({ handleApply, handleClear, showClear }: FooterProps) =>
                     view='secondary'
                     className={styles.button}
                     onClick={handleClear}
+                    dataTestId={getDataTestId(dataTestId, 'clear')}
                 >
-                    Сбросить
+                    {clearText}
                 </ButtonMobile>
             )}
 
-            <ButtonMobile size='m' view='primary' className={styles.button} onClick={handleApply}>
-                Применить
+            <ButtonMobile
+                size='m'
+                view='primary'
+                className={styles.button}
+                onClick={handleApply}
+                dataTestId={getDataTestId(dataTestId, 'apply')}
+            >
+                {applyText}
             </ButtonMobile>
         </div>
     );

package/src/components/{base-select-mobile/footer → footer}/index.module.css

@@ -1,5 +1,5 @@
 @import '@alfalab/core-components-themes/src/default.css';
-@import '../../../vars.css';
+@import '../../vars.css';
 
 .footer {
     display: flex;

package/src/components/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './Component';

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

@@ -2,8 +2,9 @@ import React, { forwardRef, useRef } 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 { useMedia } from '@alfalab/hooks';
+import { isClient } from '@alfalab/core-components-shared';
 
 import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
 import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
@@ -45,7 +46,10 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
         },
         ref,
     ) => {
-        let [nativeScrollbar] = useMedia<boolean>([[true, '(max-width: 1023px)']], false);
+        const query = '(max-width: 1023px)';
+        let [nativeScrollbar] = useMatchMedia(query, () =>
+            isClient() ? window.matchMedia(query).matches : true,
+        );
 
         nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
 

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

@@ -3,8 +3,9 @@ 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 { useMedia } from '@alfalab/hooks';
+import { isClient } from '@alfalab/core-components-shared';
 
 import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
 import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
@@ -44,7 +45,10 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
         const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
         const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
 
-        let [nativeScrollbar] = useMedia<boolean>([[true, '(max-width: 1023px)']], false);
+        const query = '(max-width: 1023px)';
+        let [nativeScrollbar] = useMatchMedia(query, () =>
+            isClient() ? window.matchMedia(query).matches : true,
+        );
 
         const rowVirtualizer = useVirtual({
             size: flatOptions.length,

package/src/desktop/index.ts

@@ -0,0 +1,2 @@
+export { SelectDesktop } from '../Component.desktop';
+export type { SelectDesktopProps } from '../typings';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/index.ts

@@ -1,4 +1,2 @@
-export {
-    SelectResponsive as Select,
-    SelectResponsiveProps as SelectProps,
-} from './Component.responsive';
+export { SelectResponsive as Select } from './Component.responsive';
+export type { SelectProps } from './typings';

package/src/mobile/index.ts

@@ -0,0 +1,4 @@
+export { SelectMobile } from '../Component.mobile';
+export { SelectModalMobile } from '../Component.modal.mobile';
+
+export type { SelectMobileProps, SelectModalMobileProps } from '../typings';

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/src/presets/useSelectWithApply/hook.tsx

@@ -73,18 +73,24 @@ export function useSelectWithApply({
     showSearch,
     searchProps = {},
 }: UseSelectWithApplyProps) {
-    const [search, setSearch] = useState('');
+    const [searchState, setSearchState] = useState('');
+
+    const [search, setSearch] =
+        typeof searchProps?.value === 'string'
+            ? [searchProps.value, searchProps.onChange]
+            : [searchState, setSearchState];
 
     const accessor = searchProps.accessor || defaultAccessor;
+    const filterFn = searchProps.filterFn || defaultFilterFn;
 
     const { flatOptions, selectedOptions } = useMemo(
         () =>
             processOptions(
                 options,
                 selected,
-                showSearch ? (option) => defaultFilterFn(accessor(option), search) : undefined,
+                showSearch ? (option) => filterFn(accessor(option), search) : undefined,
             ),
-        [accessor, options, search, selected, showSearch],
+        [filterFn, accessor, options, search, selected, showSearch],
     );
 
     const [selectedDraft, setSelectedDraft] = useState<OptionShape[]>(selectedOptions);

package/src/shared/index.ts

@@ -0,0 +1,13 @@
+export * from '../presets';
+export * from '../typings';
+export * from '../utils';
+
+export * from '../components/option';
+export * from '../components/base-option';
+export * from '../components/options-list';
+export * from '../components/virtual-options-list';
+export * from '../components/field';
+export * from '../components/arrow';
+export * from '../components/base-select';
+export * from '../components/optgroup';
+export * from '../components/footer';

package/src/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/typings.ts

@@ -1,4 +1,4 @@
-import {
+import type {
     AriaAttributes,
     FC,
     FocusEvent,
@@ -9,8 +9,14 @@ import {
     SVGProps,
 } from 'react';
 
-import { InputProps } from '@alfalab/core-components-input';
-import { PopoverProps } from '@alfalab/core-components-popover';
+import type { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+import type { FormControlProps } from '@alfalab/core-components-form-control';
+import type { InputProps } from '@alfalab/core-components-input';
+import type { ModalProps } from '@alfalab/core-components-modal';
+import type { ModalFooterProps, ModalHeaderProps } from '@alfalab/core-components-modal/shared';
+import type { PopoverProps } from '@alfalab/core-components-popover';
+
+import type { UseSelectWithApplyProps } from './presets/useSelectWithApply/hook';
 
 // eslint-disable-next-line
 export type AnyObject = Record<string, any>;
@@ -284,7 +290,7 @@ export type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps & RefAttributes<HTMLInputElement>>;
+    Search?: FC<SearchProps>;
 
     /**
      * Настройки поиска
@@ -292,6 +298,7 @@ export type BaseSelectProps = {
     searchProps?: {
         componentProps?: SearchProps;
         accessor?: (option: OptionShape) => string;
+        filterFn?: (optionText: string, search: string) => boolean;
         value?: string;
         onChange?: (value: string) => void;
     };
@@ -665,10 +672,10 @@ export type OptionProps = {
      */
     innerProps: {
         id: string;
-        onClick: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
-        role: string;
+        onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseMove?: (event: MouseEvent<HTMLDivElement>) => void;
+        role?: string;
     } & RefAttributes<HTMLDivElement> &
         AriaAttributes;
 
@@ -720,4 +727,98 @@ export type CheckmarkProps = {
     icon?: FC<SVGProps<SVGSVGElement>>;
 };
 
-export type SearchProps = InputProps;
+export type SearchProps = InputProps & RefAttributes<HTMLInputElement>;
+
+export type SelectFieldProps = Omit<FormControlProps, 'size'> & Record<string, unknown>;
+
+export type AdditionalMobileProps = {
+    /**
+     * Показывать кнопку 'Сбросить' в футере мобильного компонента
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка у мобильного компонента
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+
+    /**
+     * Использовать ли хук useSelectWithApply в мобильном компоненте
+     */
+    useWithApplyHook?: boolean;
+};
+
+export type BottomSheetSelectMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+};
+
+export type ModalSelectMobileProps = {
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<ModalProps & RefAttributes<HTMLDivElement>>;
+
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<ModalFooterProps>;
+};
+
+type ConditionalMobileProps =
+    | ({ isBottomSheet?: true } & BottomSheetSelectMobileProps)
+    | ({ isBottomSheet: false } & ModalSelectMobileProps);
+
+export type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark'> &
+    AdditionalMobileProps &
+    ModalSelectMobileProps;
+
+export type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark'> &
+    AdditionalMobileProps &
+    ConditionalMobileProps;
+
+export type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+
+export type SelectProps = BaseSelectProps &
+    AdditionalMobileProps &
+    ConditionalMobileProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+
+        /**
+         * Значение по-умолчанию для хука useMatchMedia
+         */
+        defaultMatchMediaValue?: boolean | (() => boolean);
+    };

package/src/vars.css

@@ -1,6 +1,6 @@
 :root {
     --select-error-color: var(--color-light-text-negative);
-    --select-arrow-color: var(--color-light-graphic-primary);
+    --select-arrow-color: var(--color-light-neutral-translucent-700);
     --select-arrow-hover-opacity: 0.7;
 
     /* options list */

package/typings.d.ts

@@ -1,6 +1,11 @@
 import { AriaAttributes, FC, FocusEvent, MouseEvent, ReactElement, ReactNode, RefAttributes, SVGProps } from 'react';
+import { BottomSheetProps } from "@alfalab/core-components-bottom-sheet";
+import { FormControlProps } from "@alfalab/core-components-form-control";
 import { InputProps } from "@alfalab/core-components-input";
+import { ModalProps } from "@alfalab/core-components-modal";
+import { ModalFooterProps, ModalHeaderProps } from "@alfalab/core-components-modal/shared";
 import { PopoverProps } from "@alfalab/core-components-popover";
+import { UseSelectWithApplyProps } from "./hook-ad89c253";
 type AnyObject = Record<string, any>;
 type OptionShape = {
     /**
@@ -217,13 +222,14 @@ type BaseSelectProps = {
     /**
      * Компонент поиска
      */
-    Search?: FC<SearchProps & RefAttributes<HTMLInputElement>>;
+    Search?: FC<SearchProps>;
     /**
      * Настройки поиска
      */
     searchProps?: {
         componentProps?: SearchProps;
         accessor?: (option: OptionShape) => string;
+        filterFn?: (optionText: string, search: string) => boolean;
         value?: string;
         onChange?: (value: string) => void;
     };
@@ -528,10 +534,10 @@ type OptionProps = {
      */
     innerProps: {
         id: string;
-        onClick: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
-        onMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
-        role: string;
+        onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+        onMouseMove?: (event: MouseEvent<HTMLDivElement>) => void;
+        role?: string;
     } & RefAttributes<HTMLDivElement> & AriaAttributes;
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -572,5 +578,78 @@ type CheckmarkProps = {
      */
     icon?: FC<SVGProps<SVGSVGElement>>;
 };
-type SearchProps = InputProps;
-export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps };
+type SearchProps = InputProps & RefAttributes<HTMLInputElement>;
+type SelectFieldProps = Omit<FormControlProps, 'size'> & Record<string, unknown>;
+type AdditionalMobileProps = {
+    /**
+     * Показывать кнопку 'Сбросить' в футере мобильного компонента
+     */
+    showClear?: UseSelectWithApplyProps['showClear'];
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: UseSelectWithApplyProps['showSelectAll'];
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка у мобильного компонента
+     */
+    showHeaderWithSelectAll?: UseSelectWithApplyProps['showHeaderWithSelectAll'];
+    /**
+     * Использовать ли хук useSelectWithApply в мобильном компоненте
+     */
+    useWithApplyHook?: boolean;
+};
+type BottomSheetSelectMobileProps = {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+};
+type ModalSelectMobileProps = {
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<ModalHeaderProps>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<ModalProps & RefAttributes<HTMLDivElement>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<ModalFooterProps>;
+};
+type ConditionalMobileProps = ({
+    isBottomSheet?: true;
+} & BottomSheetSelectMobileProps) | ({
+    isBottomSheet: false;
+} & ModalSelectMobileProps);
+type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark'> & AdditionalMobileProps & ModalSelectMobileProps;
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark'> & AdditionalMobileProps & ConditionalMobileProps;
+type SelectDesktopProps = Omit<BaseSelectProps, 'fieldProps'> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };

package/Component-89f0cb07.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-import { CommonButtonProps, PrivateButtonProps } from "./typings-89f0cb07";
-type SpinnerProps = {
-    /**
-     * Управление видимостью компонента
-     */
-    visible?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: "xs" | "s" | "m";
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор компонента в DOM
-     */
-    id?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Палитра, в контексте которой используется спиннер
-     */
-    colors?: "default" | "inverted";
-};
-declare const Spinner: FC<SpinnerProps>;
-/**
- * Минимальное время отображения лоадера - 500мс,
- * чтобы при быстрых ответах от сервера кнопка не «моргала».
- */
-declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
-declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/Component.mobile-ebda875c.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { BaseFormControlProps } from "./index-ebda875c";
-type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
-declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
-export { FormControlMobileProps, FormControlMobile };