@alfalab/core-components-select 14.3.4 → 15.0.0

package/esm/hook-326a5cea.js

@@ -0,0 +1,102 @@
+import { __rest, __assign, __spreadArray } from 'tslib';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { processOptions } from './utils.js';
+import { OptionsList } from './components/options-list/Component.js';
+import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
+import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+
+var OptionsListWithApply = forwardRef(function (_a, ref) {
+    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList$1 = _e === void 0 ? OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer$1 = _k === void 0 ? Footer : _k, _l = _a.Header, Header$1 = _l === void 0 ? Header : _l, headerProps = _a.headerProps, restProps = __rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "headerProps"]);
+    var getOptionProps = useCallback(function (option, index) {
+        var optionProps = defaultGetOptionProps(option, index);
+        var selected = option.key === SELECT_ALL_KEY
+            ? selectedDraft.length === flatOptions.length - 1
+            : selectedDraft.includes(option);
+        return __assign(__assign({}, optionProps), { selected: selected });
+    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
+    var handleApply = useCallback(function () {
+        onApply();
+        toggleMenu();
+    }, [onApply, toggleMenu]);
+    var handleClear = useCallback(function () {
+        onClear();
+        toggleMenu();
+    }, [onClear, toggleMenu]);
+    useEffect(function () {
+        var activeElement = document.activeElement;
+        return function () {
+            onClose();
+            if (activeElement) {
+                activeElement.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(OptionsList$1, __assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: showHeaderWithSelectAll ? React.createElement(Header$1, __assign({}, headerProps)) : undefined, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) })));
+});
+
+var SELECT_ALL_KEY = 'select_all';
+var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+function useSelectWithApply(_a) {
+    var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.optionsListProps, optionsListProps = _c === void 0 ? {} : _c, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.showSelectAll, showSelectAll = _e === void 0 ? false : _e, _f = _a.showHeaderWithSelectAll, showHeaderWithSelectAll = _f === void 0 ? false : _f;
+    var _g = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _g.flatOptions, selectedOptions = _g.selectedOptions;
+    var _h = useState(selectedOptions), selectedDraft = _h[0], setSelectedDraft = _h[1];
+    var selectedOptionsRef = useRef(selectedOptions);
+    var handleApply = function () {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+    var handleClear = function () {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+    var handleToggleAll = function () {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    var handleChange = function (_a) {
+        var initiator = _a.initiator, restArgs = __rest(_a, ["initiator"]);
+        if (!initiator) {
+            onChange(__assign({ initiator: null }, restArgs));
+            return;
+        }
+        var initiatorSelected = selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter(function (o) { return o !== initiator; })
+                : selectedDraft.concat(initiator));
+        }
+    };
+    var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
+    useEffect(function () {
+        setSelectedDraft(selectedOptions);
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+    var memoizedOptions = useMemo(function () { return (showSelectAll ? __spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: __assign(__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            } }),
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected: selected,
+    };
+}
+
+export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };

package/{cssm/hook-b4e70cb0.d.ts → esm/hook-9ea9e32c.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "./index";
+import { BaseSelectProps, OptionShape } from "./typings";
 type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
@@ -36,18 +36,20 @@ type UseSelectWithApplyProps = {
 };
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("./index").OptionsListProps & {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList?: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
         Header?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps> | undefined;
-        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined;
+        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined; /**
+         * Показывать кнопку очистки
+         */
         showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -62,11 +64,11 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     };
     allowUnselect: boolean;
     multiple: boolean;
-    options: (OptionShape | import("./index").GroupShape | {
+    options: (OptionShape | import("./typings").GroupShape | {
         key: string;
         content: string;
     })[];
-    onChange: (payload: import("./index").BaseSelectChangePayload) => void;
+    onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
 export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/esm/index-ebda875c.d.ts

@@ -1,80 +1,40 @@
 /// <reference types="react" />
+// TODO Вид кнопок зависит от порядка импорта стилей.
+/* eslint-disable simple-import-sort/imports */
 import React from "react";
-import { ButtonHTMLAttributes, ElementType, FC, AnchorHTMLAttributes } from "react";
-import { ButtonProps } from "@alfalab/core-components-button";
-interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { FC } from "react";
+import { BaseButtonProps } from "./typings-9211a437";
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+type SpinnerProps = {
     /**
-     * Вид компонента
+     * Управление видимостью компонента
      */
-    view: "desktop" | "mobile";
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Позиция крестика
-     */
-    align?: "left" | "right";
-    /**
-     * Фиксирует крестик
-     */
-    sticky?: boolean;
-    /**
-     * Иконка
-     */
-    icon?: ElementType;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Коллбэк закрытия.
-     */
-    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-}
-declare const Closer: FC<CloserProps>;
-type IconButtonProps = {
-    /**
-     * Компонент иконки
-     */
-    icon: ElementType<{
-        className?: string;
-    }>;
-    /**
-     * Тип кнопки
-     */
-    view?: "primary" | "secondary" | "transparent" | "tertiary" | "negative";
+    visible?: boolean;
     /**
      * Размер компонента
      */
-    size?: "xxs" | "xs" | "s";
+    size?: "xs" | "s" | "m";
     /**
      * Дополнительный класс
      */
     className?: string;
     /**
-     * Выравнивание иконки
-     * @default 'center'
+     * Идентификатор компонента в DOM
      */
-    alignIcon?: "left" | "center" | "right";
+    id?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Набор цветов для компонента
+     * Палитра, в контексте которой используется спиннер
      */
     colors?: "default" | "inverted";
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
-declare const IconButton: React.ForwardRefExoticComponent<{
-    icon: ElementType<{
-        className?: string;
-    }>;
-    view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
-    size?: "s" | "xs" | "xxs" | undefined;
-    className?: string | undefined;
-    alignIcon?: "right" | "left" | "center" | undefined;
-    dataTestId?: string | undefined;
-    colors?: "default" | "inverted" | undefined;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
-export { CloserProps, Closer, IconButtonProps, IconButton };
+};
+declare const Spinner: FC<SpinnerProps>;
+export { LOADER_MIN_DISPLAY_INTERVAL, BaseButton, SpinnerProps, Spinner };

package/esm/index.d.ts

@@ -1,5 +1,2 @@
-export * from "./Component";
-export * from "./components/index";
-export * from "./presets/index";
-export * from "./typings";
-export * from "./utils";
+export { SelectResponsive as Select, SelectResponsiveProps as SelectProps } from "./Component.responsive";
+export {};

package/esm/index.js

@@ -1,45 +1,43 @@
-export { Select } from './Component.js';
-export { Arrow } from './components/arrow/Component.js';
-export { BaseSelect } from './components/base-select/Component.js';
-export { b as SELECT_ALL_KEY, S as SelectMobile, a as SelectModalMobile, u as useSelectWithApply } from './Component-5e2bc757.js';
-export { Field } from './components/field/Component.js';
-export { Optgroup } from './components/optgroup/Component.js';
-export { Option } from './components/option/Component.js';
-export { OptionsList } from './components/options-list/Component.js';
-export { VirtualOptionsList } from './components/virtual-options-list/Component.js';
-export { BaseOption } from './components/base-option/Component.js';
-export { useSelectWithLoading } from './presets/useSelectWithLoading/hook.js';
-export { useLazyLoading } from './presets/useLazyLoading/hook.js';
-export { isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from './utils.js';
+export { SelectResponsive as Select } from './Component.responsive.js';
 import 'tslib';
 import 'react';
+import '@alfalab/hooks';
+import './Component.desktop.js';
+import '@alfalab/core-components-form-control/esm/desktop';
+import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
+import './components/base-select/Component.js';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
 import 'downshift';
 import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
-import './getDataTestId-fc7d4653.js';
+import '@alfalab/core-components-shared/esm';
+import './utils.js';
 import './components/native-select/Component.js';
-import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+import './components/field/Component.js';
+import './components/optgroup/Component.js';
+import './components/option/Component.js';
+import './components/checkmark/Component.js';
+import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-checkbox/esm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import './components/checkmark-mobile/Component.js';
+import './components/options-list/Component.js';
+import '@alfalab/core-components-scrollbar/esm';
+import './consts.js';
+import './Component.mobile.js';
+import '@alfalab/core-components-form-control/esm/mobile';
 import './components/base-select-mobile/Component.js';
 import '@alfalab/core-components-bottom-sheet/esm';
 import '@alfalab/core-components-modal/esm/mobile';
 import './components/base-select-mobile/footer/Component.js';
 import '@alfalab/core-components-base-modal/esm';
-import '@alfalab/core-components-button/esm';
-import '@alfalab/core-components-form-control/esm';
-import '@alfalab/core-components-badge/esm';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '@alfalab/core-components-skeleton/esm';
-import './intersection-observer-6768cbd0.js';
-import './consts.js';
-import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
-import './components/checkmark/Component.js';
-import './components/checkmark-mobile/Component.js';
-import '@alfalab/core-components-scrollbar/esm';
+import '@alfalab/core-components-button/esm/mobile';
+import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './components/base-checkmark/Component.js';
+import './hook-326a5cea.js';
+import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import '@alfalab/core-components-button/esm/desktop';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/esm/mobile-96988a65.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile-ebda875c";
+export {};

package/esm/mobile.d.ts

@@ -1,4 +1,5 @@
-export { SelectMobile } from "./components/select-mobile/index";
-export { SelectModalMobile } from "./components/select-modal-mobile/index";
-export type { SelectMobileProps } from "./components/select-mobile/index";
-export type { SelectModalMobileProps } from "./components/select-modal-mobile/index";
+export { SelectMobile } from "./Component.mobile";
+export { SelectModalMobile } from "./Component.modal.mobile";
+export type { SelectMobileProps } from "./Component.mobile";
+export type { SelectModalMobileProps } from "./Component.modal.mobile";
+export {};

package/esm/mobile.js

@@ -1,21 +1,20 @@
-export { S as SelectMobile, a as SelectModalMobile } from './Component-5e2bc757.js';
+export { SelectMobile } from './Component.mobile.js';
+export { SelectModalMobile } from './Component.modal.mobile.js';
 import 'tslib';
 import 'react';
-import './Component.js';
+import '@alfalab/core-components-form-control/esm/mobile';
 import './components/arrow/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
-import './components/base-select/Component.js';
+import './components/base-select-mobile/Component.js';
 import 'react-merge-refs';
-import '@juggle/resize-observer';
 import 'downshift';
-import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
-import './getDataTestId-fc7d4653.js';
+import '@alfalab/core-components-bottom-sheet/esm';
+import '@alfalab/core-components-modal/esm/mobile';
+import '@alfalab/core-components-shared/esm';
 import './utils.js';
-import './components/native-select/Component.js';
 import './components/field/Component.js';
-import '@alfalab/core-components-form-control/esm';
+import '@alfalab/hooks';
 import './components/optgroup/Component.js';
 import './components/option/Component.js';
 import './components/checkmark/Component.js';
@@ -27,15 +26,12 @@ import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '@alfalab/core-components-scrollbar/esm';
 import './consts.js';
-import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
-import './components/base-select-mobile/Component.js';
-import '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
 import './components/base-select-mobile/footer/Component.js';
 import '@alfalab/core-components-base-modal/esm';
-import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-button/esm/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import '@alfalab/core-components-skeleton/esm';
-import './intersection-observer-6768cbd0.js';
+import './hook-326a5cea.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import '@alfalab/core-components-button/esm/desktop';
+import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/esm/presets/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./useSelectWithLoading/hook";
 export * from "./useLazyLoading/hook";
-export * from "../hook-b4e70cb0";
+export * from "../hook-9ea9e32c";

package/esm/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-5e2bc757.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-326a5cea.js';
 import 'tslib';
 import 'react';
 import '@alfalab/core-components-skeleton/esm';
@@ -12,32 +12,13 @@ import '@alfalab/core-components-checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark-mobile/Component.js';
-import '../intersection-observer-6768cbd0.js';
-import '../Component.js';
-import '../components/arrow/Component.js';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '../components/base-select/Component.js';
-import 'react-merge-refs';
-import '@juggle/resize-observer';
-import 'downshift';
-import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
-import '../getDataTestId-fc7d4653.js';
 import '../utils.js';
-import '../components/native-select/Component.js';
-import '../components/field/Component.js';
-import '@alfalab/core-components-form-control/esm';
-import '../components/optgroup/Component.js';
 import '../components/options-list/Component.js';
+import 'react-merge-refs';
 import '@alfalab/core-components-scrollbar/esm';
+import '@alfalab/hooks';
 import '../consts.js';
-import './useSelectWithApply/options-list-with-apply/header/Component.js';
-import '../components/base-select-mobile/Component.js';
-import '@alfalab/core-components-bottom-sheet/esm';
-import '@alfalab/core-components-modal/esm/mobile';
-import '../components/base-select-mobile/footer/Component.js';
-import '@alfalab/core-components-base-modal/esm';
-import '@alfalab/core-components-button/esm';
-import '../components/virtual-options-list/Component.js';
-import 'react-virtual';
+import '../components/optgroup/Component.js';
 import './useSelectWithApply/options-list-with-apply/footer/Component.js';
+import '@alfalab/core-components-button/esm/desktop';
+import './useSelectWithApply/options-list-with-apply/header/Component.js';

package/esm/presets/useLazyLoading/hook.d.ts

@@ -28,7 +28,7 @@ type useLazyLoadingProps = {
 };
 declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option, }: useLazyLoadingProps): {
     optionsProps: {
-        Option: (props: OptionProps) => JSX.Element;
+        Option: (props: OptionProps) => React.JSX.Element;
         options: OptionShape[];
         optionsListProps: {
             ref: React.RefObject<HTMLDivElement>;