@alfalab/core-components-select 17.8.5 → 17.10.0

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

@@ -86,6 +86,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             fieldProps = {},
             optionsListProps = {},
             optionProps = {},
+            groupOptionProps = {},
             searchProps = {},
             showSearch = false,
             valueRenderer,
@@ -94,6 +95,8 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             onFocus,
             onBlur,
             onScroll,
+            onClear,
+            clear,
             Arrow,
             Field = () => null,
             OptionsList = () => null,
@@ -526,6 +529,11 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             );
         };
 
+        const handleFieldClear = (event: MouseEvent<HTMLButtonElement>) => {
+            setSelectedItems([]);
+            onClear?.(event);
+        };
+
         const renderSearch = () => {
             if (!showSearch) return null;
 
@@ -621,6 +629,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                         selectedItems={selectedItems}
                         setSelectedItems={setSelectedItems}
                         toggleMenu={toggleMenu}
+                        groupOptionProps={groupOptionProps}
                         getOptionProps={getOptionProps}
                         visibleOptions={view === 'desktop' ? visibleOptions : 0}
                         dataTestId={getDataTestId(dataTestId, 'options-list')}
@@ -670,6 +679,8 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                     hint={hint}
                     valueRenderer={valueRenderer}
                     className={fieldClassName}
+                    clear={clear}
+                    onClear={handleFieldClear}
                     innerProps={{
                         onBlur: handleFieldBlur,
                         onFocus: disabled ? undefined : handleFieldFocus,

package/src/components/clear-button/Component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Button } from '@alfalab/core-components-button';
+import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
+
+import { ClearButtonProps } from '../../typings';
+
+import styles from './index.module.css';
+
+export const ClearButton = ({ disabled, onClick, dataTestId }: ClearButtonProps) => (
+    <Button
+        type='button'
+        view='text'
+        disabled={disabled}
+        aria-label='Очистить'
+        className={styles.clearButton}
+        onClick={onClick}
+        tabIndex={-1}
+        dataTestId={dataTestId}
+    >
+        <CrossCircleMIcon className={styles.clearIcon} />
+    </Button>
+);

package/src/components/clear-button/index.module.css

@@ -0,0 +1,23 @@
+@import '@alfalab/core-components-input/src/vars.css';
+@import '../../vars.css';
+
+.clearIcon {
+    display: block;
+    color: var(--color-light-neutral-translucent-500);
+
+    &:hover {
+        color: var(--color-light-neutral-translucent-500-hover);
+    }
+
+    &:active {
+        color: var(--color-light-neutral-translucent-500-press);
+    }
+}
+
+.clearButton + [data-addon='error-icon'] {
+    display: var(--input-error-icon-display);
+}
+
+.clearButton + * {
+    margin-left: var(--gap-2xs);
+}

package/src/components/clear-button/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/components/field/Component.tsx

@@ -7,6 +7,7 @@ import { useFocus } from '@alfalab/hooks';
 
 import { FieldProps as BaseFieldProps } from '../../typings';
 import { joinOptions } from '../../utils';
+import { ClearButton } from '../clear-button';
 
 import styles from './index.module.css';
 
@@ -38,6 +39,8 @@ export const Field = ({
     dataTestId,
     fieldClassName,
     FormControlComponent,
+    clear,
+    onClear,
     ...restProps
 }: BaseFieldProps & FormControlProps & FieldProps) => {
     const [focused, setFocused] = useState(false);
@@ -82,6 +85,13 @@ export const Field = ({
                         (Arrow || rightAddons) && (
                             <React.Fragment>
                                 {rightAddons}
+                                {clear && filled ? (
+                                    <ClearButton
+                                        onClick={onClear}
+                                        disabled={disabled}
+                                        dataTestId={getDataTestId(dataTestId, 'clear-icon')}
+                                    />
+                                ) : null}
                                 {/* TODO: стоит переделать, но это будет мажорка */}
                                 {Arrow
                                     ? React.cloneElement(Arrow, { className: styles.arrow })

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

@@ -29,6 +29,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             scrollbarClassName,
             Option,
             getOptionProps,
+            groupOptionProps = {},
             options = [],
             Optgroup = DefaultOptgroup,
             dataTestId,
@@ -106,6 +107,7 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                     setSelectedItems={handleSelectedItems}
                     search={search}
                     multiple={multiple}
+                    {...groupOptionProps}
                 >
                     {group.options.map((option) => renderOption(option, counter()))}
                 </Optgroup>

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

@@ -23,6 +23,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             optionGroupClassName,
             className,
             getOptionProps,
+            groupOptionProps = {},
             Option,
             open,
             options = [],
@@ -169,6 +170,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                             setSelectedItems={handleSelectedItems}
                             search={search}
                             multiple={multiple}
+                            {...groupOptionProps}
                         />
                     );
                 };

package/src/typings.ts

@@ -273,6 +273,11 @@ export type BaseSelectProps = {
      */
     optionProps?: unknown;
 
+    /**
+     * Пропсы, которые будут прокинуты в компонент группового пункта меню
+     */
+    groupOptionProps?: AnyObject;
+
     /**
      * Компонент выпадающего меню
      */
@@ -336,6 +341,16 @@ export type BaseSelectProps = {
      */
     onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
 
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Флаг, показать крестик для очистки поля
+     */
+    clear?: boolean;
+
     /**
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
@@ -516,6 +531,11 @@ export type OptionsListProps = {
      */
     getOptionProps: (option: OptionShape, index: number) => OptionProps;
 
+    /**
+     * Пропсы, которые будут прокинуты в компонент группового пункта меню
+     */
+    groupOptionProps?: AnyObject;
+
     /**
      * Список выбранных пунктов
      */
@@ -904,3 +924,20 @@ export type SelectProps = BaseSelectProps &
          */
         defaultMatchMediaValue?: boolean | (() => boolean);
     };
+
+export type ClearButtonProps = {
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};

package/src/utils.ts

@@ -269,6 +269,7 @@ export function getSelectTestIds(dataTestId: string) {
         fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
         fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
+        fieldClearIcon: getDataTestId(dataTestId, 'field-clear-icon'),
         searchInput: getDataTestId(dataTestId, 'search'),
         searchFormControl: getDataTestId(dataTestId, 'search-form-control'),
         searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),

package/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AriaAttributes, ComponentType, 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";
@@ -208,6 +209,10 @@ type BaseSelectProps = {
      * Пропсы, которые будут прокинуты в компонент пункта меню
      */
     optionProps?: unknown;
+    /**
+     * Пропсы, которые будут прокинуты в компонент группового пункта меню
+     */
+    groupOptionProps?: AnyObject;
     /**
      * Компонент выпадающего меню
      */
@@ -263,6 +268,14 @@ type BaseSelectProps = {
      * Обработчик скрола
      */
     onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Флаг, показать крестик для очистки поля
+     */
+    clear?: boolean;
     /**
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
@@ -400,6 +413,10 @@ type OptionsListProps = {
      * Функция для получения пропсов для ячейки
      */
     getOptionProps: (option: OptionShape, index: number) => OptionProps;
+    /**
+     * Пропсы, которые будут прокинуты в компонент группового пункта меню
+     */
+    groupOptionProps?: AnyObject;
     /**
      * Список выбранных пунктов
      */
@@ -710,4 +727,18 @@ type SelectProps = BaseSelectProps & AdditionalMobileProps & ConditionalMobilePr
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
-export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps };
+type ClearButtonProps = {
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Флаг, поле заблокировано
+     */
+    disabled?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+export { AnyObject, OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps, SearchProps, SelectFieldProps, AdditionalMobileProps, BottomSheetSelectMobileProps, ModalSelectMobileProps, SelectModalMobileProps, SelectMobileProps, SelectDesktopProps, SelectProps, ClearButtonProps };

package/utils.d.ts

@@ -63,6 +63,7 @@ declare function getSelectTestIds(dataTestId: string): {
     fieldRightAddons: string;
     fieldError: string;
     fieldHint: string;
+    fieldClearIcon: string;
     searchInput: string;
     searchFormControl: string;
     searchInner: string;

package/utils.js

@@ -166,6 +166,7 @@ function getSelectTestIds(dataTestId) {
         fieldRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-message'),
         fieldHint: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-hint'),
+        fieldClearIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-clear-icon'),
         searchInput: coreComponentsShared.getDataTestId(dataTestId, 'search'),
         searchFormControl: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control'),
         searchInner: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control-inner'),

package/esm/mobile.module-dfdae193.js

@@ -1,4 +0,0 @@
-var mobileStyles = {"sheet":"select__sheet_10p5k","sheetContent":"select__sheetContent_10p5k","modalContent":"select__modalContent_10p5k","sheetContainer":"select__sheetContainer_10p5k","optionsListWrapper":"select__optionsListWrapper_10p5k","optionsList":"select__optionsList_10p5k","scrollbar":"select__scrollbar_10p5k","search":"select__search_10p5k","option":"select__option_10p5k","optionGroup":"select__optionGroup_10p5k"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };

package/mobile.module-355cdfc8.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var mobileStyles = {"sheet":"select__sheet_10p5k","sheetContent":"select__sheetContent_10p5k","modalContent":"select__modalContent_10p5k","sheetContainer":"select__sheetContainer_10p5k","optionsListWrapper":"select__optionsListWrapper_10p5k","optionsList":"select__optionsList_10p5k","scrollbar":"select__scrollbar_10p5k","search":"select__search_10p5k","option":"select__option_10p5k","optionGroup":"select__optionGroup_10p5k"};
-require('./components/base-select/mobile.css')
-
-exports.mobileStyles = mobileStyles;

package/modern/mobile.module-4df6ec5d.js

@@ -1,4 +0,0 @@
-const mobileStyles = {"sheet":"select__sheet_10p5k","sheetContent":"select__sheetContent_10p5k","modalContent":"select__modalContent_10p5k","sheetContainer":"select__sheetContainer_10p5k","optionsListWrapper":"select__optionsListWrapper_10p5k","optionsList":"select__optionsList_10p5k","scrollbar":"select__scrollbar_10p5k","search":"select__search_10p5k","option":"select__option_10p5k","optionGroup":"select__optionGroup_10p5k"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };