@alfalab/core-components-select 15.2.3 → 16.0.0

package/components/base-select-mobile/Component.js

@@ -1,296 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var downshift = require('downshift');
-var coreComponentsBottomSheet = require('@alfalab/core-components-bottom-sheet');
-var mobile = require('@alfalab/core-components-modal/mobile');
-var coreComponentsShared = require('@alfalab/core-components-shared');
-var utils = require('../../utils.js');
-var components_arrow_Component = require('../arrow/Component.js');
-var components_field_Component = require('../field/Component.js');
-var components_optgroup_Component = require('../optgroup/Component.js');
-var components_option_Component = require('../option/Component.js');
-var components_optionsList_Component = require('../options-list/Component.js');
-var components_search_Component = require('../search/Component.js');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('@alfalab/hooks');
-require('../checkmark/Component.js');
-require('@alfalab/core-components-badge');
-require('@alfalab/core-components-checkbox');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
-require('../checkmark-mobile/Component.js');
-require('@alfalab/core-components-scrollbar');
-require('../../consts.js');
-require('@alfalab/core-components-input');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-
-var styles = {"component":"select__component_r2ukf","sheet":"select__sheet_r2ukf","sheetContent":"select__sheetContent_r2ukf","modalContent":"select__modalContent_r2ukf","sheetContainer":"select__sheetContainer_r2ukf","block":"select__block_r2ukf","optionsListWrapper":"select__optionsListWrapper_r2ukf","optionsList":"select__optionsList_r2ukf","scrollbar":"select__scrollbar_r2ukf","emptySearchPlaceholder":"select__emptySearchPlaceholder_r2ukf","search":"select__search_r2ukf","option":"select__option_r2ukf","optionGroup":"select__optionGroup_r2ukf"};
-require('./index.css')
-
-var BaseSelectMobile = React.forwardRef(function (_a, ref) {
-    var _b;
-    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.autocomplete, autocomplete = _d === void 0 ? false : _d, _e = _a.multiple, multiple = _e === void 0 ? false : _e, _f = _a.allowUnselect, allowUnselect = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.closeOnSelect, closeOnSelect = _h === void 0 ? !multiple : _h, _j = _a.circularNavigation, circularNavigation = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.optionsListWidth, optionsListWidth = _l === void 0 ? 'content' : _l, name = _a.name, id = _a.id, _m = _a.selected, selected = _m === void 0 ? [] : _m, _o = _a.size, size = _o === void 0 ? 'm' : _o, _p = _a.optionsSize, optionsSize = _p === void 0 ? 'm' : _p, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _q = _a.fieldProps, fieldProps = _q === void 0 ? {} : _q, _r = _a.optionProps, optionProps = _r === void 0 ? {} : _r, _s = _a.searchProps, searchProps = _s === void 0 ? {} : _s, _t = _a.showSearch, showSearch = _t === void 0 ? false : _t, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, _u = _a.Arrow, Arrow = _u === void 0 ? components_arrow_Component.Arrow : _u, _v = _a.Field, Field = _v === void 0 ? components_field_Component.Field : _v, _w = _a.Optgroup, Optgroup = _w === void 0 ? components_optgroup_Component.Optgroup : _w, _x = _a.Option, Option = _x === void 0 ? components_option_Component.Option : _x, _y = _a.OptionsList, OptionsList = _y === void 0 ? components_optionsList_Component.OptionsList : _y, _z = _a.Search, Search = _z === void 0 ? components_search_Component.Search : _z, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps, modalProps = _a.modalProps, modalHeaderProps = _a.modalHeaderProps, modalFooterProps = _a.modalFooterProps, _0 = _a.showEmptyOptionsList, showEmptyOptionsList = _0 === void 0 ? false : _0;
-    var rootRef = React.useRef(null);
-    var fieldRef = React.useRef(null);
-    var listRef = React.useRef(null);
-    var initiatorRef = React.useRef(null);
-    var alreadyClickedRef = React.useRef(false);
-    var searchRef = React.useRef(null);
-    var _1 = React__default.default.useState(''), searchState = _1[0], setSearchState = _1[1];
-    var _2 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
-        ? [searchProps.value, searchProps.onChange]
-        : [searchState, setSearchState], search = _2[0], setSearch = _2[1];
-    var itemToString = function (option) { return (option ? option.key : ''); };
-    var accessor = searchProps.accessor || utils.defaultAccessor;
-    var _3 = React.useMemo(function () {
-        return utils.processOptions(options, selected, function (option) {
-            return utils.defaultFilterFn(accessor(option), search);
-        });
-    }, [accessor, options, search, selected]), filteredOptions = _3.filteredOptions, flatOptions = _3.flatOptions, selectedOptions = _3.selectedOptions;
-    var scrollableContainerRef = React.useRef(null);
-    var useMultipleSelectionProps = {
-        itemToString: itemToString,
-        onSelectedItemsChange: function (changes) {
-            if (onChange) {
-                var _a = changes.selectedItems, selectedItems_1 = _a === void 0 ? [] : _a;
-                onChange({
-                    selectedMultiple: selectedItems_1,
-                    selected: selectedItems_1.length ? selectedItems_1[0] : null,
-                    initiator: initiatorRef.current,
-                    name: name,
-                });
-                initiatorRef.current = null;
-            }
-        },
-        stateReducer: function (state, actionAndChanges) {
-            var type = actionAndChanges.type, changes = actionAndChanges.changes;
-            if (!allowUnselect &&
-                type === downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace) {
-                return state;
-            }
-            return changes;
-        },
-    };
-    if (selected !== undefined) {
-        useMultipleSelectionProps.selectedItems = selectedOptions;
-    }
-    var _4 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _4.selectedItems, addSelectedItem = _4.addSelectedItem, setSelectedItems = _4.setSelectedItems, removeSelectedItem = _4.removeSelectedItem, getDropdownProps = _4.getDropdownProps;
-    var _5 = downshift.useCombobox({
-        id: id,
-        isOpen: openProp,
-        circularNavigation: circularNavigation,
-        items: flatOptions,
-        itemToString: itemToString,
-        defaultHighlightedIndex: -1,
-        onIsOpenChange: function (_a) {
-            var isOpen = _a.isOpen;
-            if (onOpen) {
-                /**
-                 *  Вызываем обработчик асинхронно.
-                 *
-                 * Иначе при клике вне открытого селекта сначала сработает onOpen, который закроет селект,
-                 * А затем сработает onClick кнопки открытия\закрытия с open=false и в итоге селект откроется снова.
-                 */
-                setTimeout(function () {
-                    onOpen({
-                        open: isOpen,
-                        name: name,
-                    });
-                }, 0);
-            }
-            if (showSearch) {
-                if (isOpen) {
-                    setTimeout(function () {
-                        var _a;
-                        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        // BottomSheet transition duration
-                    }, 500);
-                }
-                else {
-                    setSearch === null || setSearch === void 0 ? void 0 : setSearch('');
-                }
-            }
-        },
-        stateReducer: function (state, actionAndChanges) {
-            var type = actionAndChanges.type, changes = actionAndChanges.changes;
-            var selectedItem = changes.selectedItem;
-            switch (type) {
-                case downshift.useCombobox.stateChangeTypes.InputBlur:
-                    return state;
-                case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-                case downshift.useCombobox.stateChangeTypes.ItemClick:
-                    initiatorRef.current = selectedItem;
-                    if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
-                        // TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
-                        if (React__default.default.version.indexOf('18') === 0) {
-                            alreadyClickedRef.current = true;
-                            setTimeout(function () {
-                                alreadyClickedRef.current = false;
-                            });
-                        }
-                        var alreadySelected = selectedItems.includes(selectedItem);
-                        var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
-                        if (alreadySelected && allowRemove) {
-                            if (multiple) {
-                                removeSelectedItem(selectedItem);
-                            }
-                            else {
-                                setSelectedItems([]);
-                            }
-                        }
-                        if (!alreadySelected) {
-                            if (multiple) {
-                                addSelectedItem(selectedItem);
-                            }
-                            else {
-                                setSelectedItems([selectedItem]);
-                            }
-                        }
-                    }
-                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect || multiple, 
-                        // при closeOnSelect === false - сохраняем подсвеченный индекс
-                        highlightedIndex: state.isOpen && !closeOnSelect
-                            ? state.highlightedIndex
-                            : changes.highlightedIndex });
-                default:
-                    return changes;
-            }
-        },
-    }), open = _5.isOpen, getMenuProps = _5.getMenuProps, getInputProps = _5.getInputProps, getItemProps = _5.getItemProps, getComboboxProps = _5.getComboboxProps, getLabelProps = _5.getLabelProps, highlightedIndex = _5.highlightedIndex, toggleMenu = _5.toggleMenu, openMenu = _5.openMenu;
-    var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
-    var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
-    var handleFieldFocus = function (event) {
-        if (onFocus)
-            onFocus(event);
-        if (autocomplete && !open) {
-            openMenu();
-        }
-    };
-    var handleFieldBlur = function (event) {
-        if (!open && onBlur)
-            onBlur(event);
-    };
-    var handleFieldKeyDown = function (event) {
-        inputProps.onKeyDown(event);
-        // https://caniuse.com/?search=KeyboardEvent.key
-        var isKeyUnsupported = event.key === 'Unidentified';
-        if (autocomplete &&
-            !open &&
-            (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')) {
-            // Для автокомплита - открываем меню при начале ввода
-            openMenu();
-        }
-        if ([' ', 'Enter'].includes(event.key) &&
-            !autocomplete &&
-            event.target.tagName !== 'INPUT' &&
-            event.target.tagName !== 'BUTTON') {
-            // Открываем\закрываем меню по нажатию enter или пробела
-            event.preventDefault();
-            if (!open || highlightedIndex === -1)
-                toggleMenu();
-        }
-    };
-    var handleFieldClick = function (event) {
-        if (!autocomplete || event.target.tagName !== 'INPUT') {
-            toggleMenu();
-        }
-        else {
-            openMenu();
-        }
-    };
-    var getOptionProps = function (option, index) {
-        var selectedItem = selectedItems.some(function (_a) {
-            var key = _a.key;
-            return key === option.key;
-        });
-        return tslib.__assign(tslib.__assign({}, optionProps), { mobile: true, className: cn__default.default(styles.option, optionClassName), innerProps: getItemProps({
-                index: index,
-                item: option,
-                disabled: option.disabled,
-                onMouseDown: function (event) { return event.preventDefault(); },
-            }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItem, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'option') });
-    };
-    React.useEffect(function () {
-        if (defaultOpen)
-            openMenu();
-    }, [defaultOpen, openMenu]);
-    React.useEffect(function () {
-        if (openProp) {
-            openMenu();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var handleClose = function () {
-        toggleMenu();
-    };
-    var renderValue = function () {
-        return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
-    };
-    var renderSearch = function () {
-        return showSearch && (React__default.default.createElement(Search, tslib.__assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: function (_, payload) { return setSearch === null || setSearch === void 0 ? void 0 : setSearch(payload.value); }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'search'), onClear: function () { return setSearch === null || setSearch === void 0 ? void 0 : setSearch(''); }, className: styles.search, ref: searchRef })));
-    };
-    var emptyPlaceholder = optionsListProps.emptyPlaceholder;
-    var renderEmptyPlaceholder = function () {
-        if (emptyPlaceholder) {
-            return emptyPlaceholder;
-        }
-        if (showSearch) {
-            return React__default.default.createElement("div", { className: styles.emptySearchPlaceholder }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C");
-        }
-        return undefined;
-    };
-    var renderOptionsList = function () {
-        if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
-            return null;
-        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(styles.optionsListWrapper, optionsListClassName) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, optionsListProps, { ref: scrollableContainerRef, className: styles.optionsList, scrollbarClassName: styles.scrollbar, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: 0, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles.optionGroup, optionGroupClassName), emptyPlaceholder: renderEmptyPlaceholder() }))));
-    };
-    return (React__default.default.createElement("div", tslib.__assign({}, getComboboxProps(tslib.__assign(tslib.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
-        React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
-                onBlur: handleFieldBlur,
-                onFocus: disabled ? undefined : handleFieldFocus,
-                onClick: disabled ? undefined : handleFieldClick,
-                tabIndex: disabled ? -1 : 0,
-                ref: mergeRefs__default.default([inputProps.ref]),
-                id: inputProps.id,
-                'aria-labelledby': inputProps['aria-labelledby'],
-                'aria-controls': inputProps['aria-controls'],
-                'aria-autocomplete': autocomplete
-                    ? inputProps['aria-autocomplete']
-                    : undefined,
-            }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'field') }, fieldProps)),
-        name && renderValue(),
-        isBottomSheet ? (React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, tslib.__assign({ open: open, onClose: handleClose, className: styles.sheet, contentClassName: styles.sheetContent, containerClassName: styles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, scrollableContainerRef: scrollableContainerRef, initialHeight: showSearch ? 'full' : 'default' }, bottomSheetProps, { bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
-                renderSearch(), bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 :
-                bottomSheetProps.bottomAddons) }), renderOptionsList())) : (React__default.default.createElement(mobile.ModalMobile, tslib.__assign({ open: open, hasCloser: true }, modalProps, { onClose: function () {
-                var _a;
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                handleClose();
-                (_a = modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose) === null || _a === void 0 ? void 0 : _a.call.apply(_a, tslib.__spreadArray([modalProps], args, false));
-            }, contentClassName: cn__default.default(styles.sheetContent, modalProps === null || modalProps === void 0 ? void 0 : modalProps.contentClassName), ref: mergeRefs__default.default([
-                scrollableContainerRef,
-                modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
-            ]) }),
-            React__default.default.createElement(mobile.ModalMobile.Header, tslib.__assign({ hasCloser: true, sticky: true }, modalHeaderProps, { title: undefined, bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
-                    renderSearch(), modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 :
-                    modalHeaderProps.bottomAddons) }), (modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 : modalHeaderProps.title) || label || placeholder),
-            React__default.default.createElement(mobile.ModalMobile.Content, { flex: true, className: styles.modalContent }, renderOptionsList()),
-            (modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React__default.default.createElement(mobile.ModalMobile.Footer, tslib.__assign({}, modalFooterProps))))));
-});
-
-exports.BaseSelectMobile = BaseSelectMobile;

package/components/base-select-mobile/footer/Component.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-type FooterProps = {
-    handleClear?: () => void;
-    handleApply?: () => void;
-    showClear?: boolean;
-};
-declare const Footer: ({ handleApply, handleClear, showClear }: FooterProps) => React.JSX.Element;
-export { FooterProps, Footer };

package/components/base-select-mobile/footer/index.d.ts

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

package/components/base-select-mobile/index.d.ts

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

package/components/base-select-mobile/index.js

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_baseSelectMobile_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('react-merge-refs');
-require('classnames');
-require('downshift');
-require('@alfalab/core-components-bottom-sheet');
-require('@alfalab/core-components-modal/mobile');
-require('@alfalab/core-components-shared');
-require('../../utils.js');
-require('../arrow/Component.js');
-require('@alfalab/icons-glyph/ChevronDownMIcon');
-require('../field/Component.js');
-require('@alfalab/hooks');
-require('../optgroup/Component.js');
-require('../option/Component.js');
-require('../checkmark/Component.js');
-require('@alfalab/core-components-badge');
-require('@alfalab/core-components-checkbox');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/CheckmarkMIcon');
-require('../checkmark-mobile/Component.js');
-require('../options-list/Component.js');
-require('@alfalab/core-components-scrollbar');
-require('../../consts.js');
-require('../search/Component.js');
-require('@alfalab/core-components-input');
-require('@alfalab/icons-glyph/MagnifierMIcon');
-
-
-
-exports.BaseSelectMobile = components_baseSelectMobile_Component.BaseSelectMobile;

package/cssm/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/cssm/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 };