@alfalab/core-components-select 17.9.0 → 17.10.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-5239a013.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../hook-46669d2d.js');
 
 
 

package/presets/useSelectWithLoading/hook.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"skeleton":"select__skeleton_dfnn9"};
+var styles = {"skeleton":"select__skeleton_hgyhv"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: rhxpi */
-.select__skeleton_dfnn9 {
+/* hash: z9ogh */
+.select__skeleton_hgyhv {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

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-5239a013.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../hook-46669d2d.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

@@ -95,6 +95,8 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             onFocus,
             onBlur,
             onScroll,
+            onClear,
+            clear,
             Arrow,
             Field = () => null,
             OptionsList = () => null,
@@ -527,6 +529,11 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             );
         };
 
+        const handleFieldClear = (event: MouseEvent<HTMLButtonElement>) => {
+            setSelectedItems([]);
+            onClear?.(event);
+        };
+
         const renderSearch = () => {
             if (!showSearch) return null;
 
@@ -672,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/typings.ts

@@ -341,6 +341,16 @@ export type BaseSelectProps = {
      */
     onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
 
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+    /**
+     * Флаг, показать крестик для очистки поля
+     */
+    clear?: boolean;
+
     /**
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
@@ -914,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";
@@ -267,6 +268,14 @@ type BaseSelectProps = {
      * Обработчик скрола
      */
     onScroll?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик нажатия на крестик для очистки поля
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Флаг, показать крестик для очистки поля
+     */
+    clear?: boolean;
     /**
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
@@ -718,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-750045f8.js

@@ -1,4 +0,0 @@
-var mobileStyles = {"sheet":"select__sheet_qp2pg","sheetContent":"select__sheetContent_qp2pg","modalContent":"select__modalContent_qp2pg","sheetContainer":"select__sheetContainer_qp2pg","optionsListWrapper":"select__optionsListWrapper_qp2pg","optionsList":"select__optionsList_qp2pg","scrollbar":"select__scrollbar_qp2pg","search":"select__search_qp2pg","option":"select__option_qp2pg","optionGroup":"select__optionGroup_qp2pg"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };

package/mobile.module-df2dd6ff.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var mobileStyles = {"sheet":"select__sheet_qp2pg","sheetContent":"select__sheetContent_qp2pg","modalContent":"select__modalContent_qp2pg","sheetContainer":"select__sheetContainer_qp2pg","optionsListWrapper":"select__optionsListWrapper_qp2pg","optionsList":"select__optionsList_qp2pg","scrollbar":"select__scrollbar_qp2pg","search":"select__search_qp2pg","option":"select__option_qp2pg","optionGroup":"select__optionGroup_qp2pg"};
-require('./components/base-select/mobile.css')
-
-exports.mobileStyles = mobileStyles;

package/modern/mobile.module-b4726f1a.js

@@ -1,4 +0,0 @@
-const mobileStyles = {"sheet":"select__sheet_qp2pg","sheetContent":"select__sheetContent_qp2pg","modalContent":"select__modalContent_qp2pg","sheetContainer":"select__sheetContainer_qp2pg","optionsListWrapper":"select__optionsListWrapper_qp2pg","optionsList":"select__optionsList_qp2pg","scrollbar":"select__scrollbar_qp2pg","search":"select__search_qp2pg","option":"select__option_qp2pg","optionGroup":"select__optionGroup_qp2pg"};
-require('./components/base-select/mobile.css')
-
-export { mobileStyles as m };