@alfalab/core-components-select 10.6.2 → 10.6.5

package/dist/esm/presets/index.js

@@ -1,4 +1,4 @@
-import '../tslib.es6-b60a7f7d.js';
+import '../tslib.es6-a9457d88.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,12 +17,16 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../components/native-select/Component.js';
-import '../components/base-select/Component.js';
+import '../Component-385efde8.js';
 import '../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../components/select-mobile/options-list/Component.js';
+import '../components/select-mobile/checkmark/Component.js';
+export { a as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-25510e34.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
-import '../intersection-observer-48ed3f14.js';
+import '../intersection-observer-0bdc3704.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-import '@alfalab/core-components-button/dist/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-3242a291.js';

package/dist/esm/presets/useLazyLoading/hook.js

@@ -1,13 +1,13 @@
-import { a as __assign, b as __spreadArrays } from '../../tslib.es6-b60a7f7d.js';
+import { a as __assign, b as __spreadArrays } from '../../tslib.es6-a9457d88.js';
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import 'classnames';
 import '@alfalab/core-components-checkbox/dist/esm';
 import '../../components/checkmark/Component.js';
 import { Option } from '../../components/option/Component.js';
 import { Skeleton } from '@alfalab/core-components-skeleton/dist/esm';
-import '../../intersection-observer-48ed3f14.js';
+import '../../intersection-observer-0bdc3704.js';
 
-var styles = {"skeleton":"select__skeleton_44bkd"};
+var styles = {"skeleton":"select__skeleton_up86v"};
 require('./index.css')
 
 var DEBOUNCE_TIMEOUT = 300;

package/dist/esm/presets/useLazyLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 1lphe */
-.select__skeleton_44bkd {
+/* hash: vyhxg */
+.select__skeleton_up86v {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/dist/esm/presets/useSelectWithApply/hook.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-b60a7f7d.js';
+import '../../tslib.es6-a9457d88.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../components/native-select/Component.js';
-import '../../components/base-select/Component.js';
+import '../../Component-385efde8.js';
 import '../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../components/select-mobile/options-list/Component.js';
+import '../../components/select-mobile/checkmark/Component.js';
+export { a as SELECT_ALL_KEY, u as useSelectWithApply } from '../../Component-25510e34.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../intersection-observer-48ed3f14.js';
-import '@alfalab/core-components-button/dist/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-3242a291.js';
+import '../../intersection-observer-0bdc3704.js';

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,4 +1,4 @@
-import '../../../tslib.es6-b60a7f7d.js';
+import '../../../tslib.es6-a9457d88.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../../components/native-select/Component.js';
-import '../../../components/base-select/Component.js';
+import '../../../Component-385efde8.js';
 import '../../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../../components/select-mobile/options-list/Component.js';
+import '../../../components/select-mobile/checkmark/Component.js';
+export { O as OptionsListWithApply } from '../../../Component-25510e34.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../../intersection-observer-48ed3f14.js';
-import '@alfalab/core-components-button/dist/esm';
-export { O as OptionsListWithApply } from '../../../hook-3242a291.js';
+import '../../../intersection-observer-0bdc3704.js';

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

@@ -1,4 +1,4 @@
-/* hash: q38zd */
+/* hash: c9hut */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-secondary: #e7e9eb;
@@ -26,14 +26,14 @@
 
     /* optgroup */
 }
-.select__footer_e6iy1 {
+.select__footer_wvuan {
     background: var(--color-light-bg-primary);
     padding: var(--gap-s) var(--gap-s) var(--gap-m);
     outline: none
 }
-.select__footer_e6iy1 > * + * {
+.select__footer_wvuan > * + * {
         margin-left: var(--gap-xs);
     }
-.select__withBorder_e6iy1 {
+.select__withBorder_wvuan {
     box-shadow: inset 0 1px 0 var(--color-light-border-secondary);
 }

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-3242a291";
+export * from "../../../Component-25510e34";

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

@@ -1,4 +1,4 @@
-import '../../../tslib.es6-b60a7f7d.js';
+import '../../../tslib.es6-a9457d88.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../../components/native-select/Component.js';
-import '../../../components/base-select/Component.js';
+import '../../../Component-385efde8.js';
 import '../../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../../components/select-mobile/options-list/Component.js';
+import '../../../components/select-mobile/checkmark/Component.js';
+export { O as OptionsListWithApply } from '../../../Component-25510e34.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../../intersection-observer-48ed3f14.js';
-import '@alfalab/core-components-button/dist/esm';
-export { O as OptionsListWithApply } from '../../../hook-3242a291.js';
+import '../../../intersection-observer-0bdc3704.js';

package/dist/esm/presets/useSelectWithLoading/hook.js

@@ -1,4 +1,4 @@
-import { a as __assign } from '../../tslib.es6-b60a7f7d.js';
+import { a as __assign } from '../../tslib.es6-a9457d88.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import '@alfalab/core-components-checkbox/dist/esm';
@@ -6,7 +6,7 @@ import '../../components/checkmark/Component.js';
 import { Option } from '../../components/option/Component.js';
 import { Skeleton } from '@alfalab/core-components-skeleton/dist/esm';
 
-var styles = {"skeleton":"select__skeleton_kceu4"};
+var styles = {"skeleton":"select__skeleton_19mid"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/dist/esm/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: 18119 */
-.select__skeleton_kceu4 {
+/* hash: 1xs0r */
+.select__skeleton_19mid {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/dist/esm/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ReactNode, FC, RefAttributes, AriaAttributes, FocusEvent, MouseEvent, ReactElement } from 'react';
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { InputProps } from "@alfalab/core-components-input";
@@ -50,6 +51,10 @@ type BaseSelectProps = {
      * Дополнительный класс для пункта меню
      */
     optionClassName?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
     /**
      * Дополнительный класс для поповера
      */
@@ -327,6 +332,10 @@ type OptionsListProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
     /**
      * Размер компонента
      */
@@ -399,8 +408,24 @@ type OptionsListProps = {
      * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
      */
     inputProps?: InputProps;
+    /**
+     * Нужно ли показывать футер
+     */
+    showFooter?: boolean;
+    /**
+     * Обработчик подтверждения изменений
+     */
+    onApply?: () => void;
+    /**
+     * Обработчик отмены изменений
+     */
+    onClear?: () => void;
 };
 type OptgroupProps = {
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    className?: string;
     /**
      * Размер компонента
      */
@@ -487,5 +512,9 @@ type CheckmarkProps = {
      * Расположение отметки
      */
     position?: 'before' | 'after';
+    /**
+     * Иконка выбранного пункта
+     */
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
 export { OptionShape, GroupShape, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/dist/getDataTestId-3fe0d3e6.d.ts

@@ -0,0 +1,2 @@
+declare const getDataTestId: (dataTestId?: string | undefined, element?: string | undefined) => string | undefined;
+export { getDataTestId };

package/dist/hook-f5b8fe4f.d.ts

@@ -30,11 +30,11 @@ declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, showClear, showSelectAll, }: useSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./index").OptionsListProps & {
         showClear?: boolean | undefined;
-        onApply?: (() => void) | undefined;
-        onClear?: (() => void) | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<unknown>> | undefined;
+        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<unknown>> | undefined; /**
+         * Показывать кнопку очистки
+         */
     } & import("react").RefAttributes<unknown>>;
     optionsListProps: {
         OptionsList: import("react").FC<import("./index").OptionsListProps> | undefined;

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-c247c66d.js');
+require('./tslib.es6-b9d0d522.js');
 require('react');
 require('classnames');
 require('@alfalab/hooks');
@@ -21,16 +21,20 @@ require('resize-observer');
 require('@alfalab/core-components-popover');
 require('downshift');
 require('./components/native-select/Component.js');
-var components_baseSelect_Component = require('./components/base-select/Component.js');
+var components_baseSelect_Component = require('./Component-b963ee30.js');
 var Component = require('./Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-button');
+require('@alfalab/core-components-base-modal');
+require('./components/select-mobile/options-list/Component.js');
+require('./components/select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('./Component-9404bb50.js');
 require('react-virtual');
 var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
 require('@alfalab/core-components-skeleton');
 var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
-require('./intersection-observer-d541dfd6.js');
+require('./intersection-observer-0fef5c01.js');
 var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
-require('@alfalab/core-components-button');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-e5ec46f1.js');
 
 
 
@@ -48,8 +52,9 @@ exports.OptionsList = components_optionsList_Component.OptionsList;
 exports.Option = components_option_Component.Option;
 exports.BaseSelect = components_baseSelect_Component.BaseSelect;
 exports.Select = Component.Select;
+exports.SELECT_ALL_KEY = presets_useSelectWithApply_hook.SELECT_ALL_KEY;
+exports.SelectMobile = presets_useSelectWithApply_hook.SelectMobile;
+exports.useSelectWithApply = presets_useSelectWithApply_hook.useSelectWithApply;
 exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
 exports.useSelectWithLoading = presets_useSelectWithLoading_hook.useSelectWithLoading;
 exports.useLazyLoading = presets_useLazyLoading_hook.useLazyLoading;
-exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Component.SELECT_ALL_KEY;
-exports.useSelectWithApply = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply;

package/dist/modern/Component-17dae8dc.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { OptionShape, OptionsListProps, BaseSelectProps } from "./typings";
+declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+    showClear?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    selectedDraft?: OptionShape[] | undefined;
+    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
+} & React.RefAttributes<unknown>>;
+type SelectMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll'> & {
+    /**
+     * Футер
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     *
+     */
+    swipeable?: boolean;
+};
+declare const SelectMobile: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "label" | "preventFlip" | "popperClassName" | "className" | "open" | "dataTestId" | "name" | "options" | "size" | "block" | "multiple" | "disabled" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "fieldClassName" | "error" | "hint" | "selected" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "nativeSelect" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "Field" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
+    /**
+     * Футер
+     */
+    footer?: React.ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     *
+     */
+    swipeable?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
+export { OptionsListWithApply, SelectMobileProps, SelectMobile };