@astral/ui 1.0.0-test.1671118037 → 1.0.0-test.1671167423

package/ActionCell/ActionCell.d.ts

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { BaseButtonProps } from '../ButtonBase';
+import { MenuItemProps } from '../MenuItem';
+import { TooltipProps } from '../Tooltip';
+export type NestedAction<T> = MenuItemProps & {
+    /**
+     * Обработчик действия
+     */
+    onClick?: (row: T) => void;
+    /**
+     * Название действия
+     */
+    name: string;
+};
+export type SingleAction<T> = {
+    /**
+     * Иконка действия
+     */
+    icon?: ReactNode;
+    /**
+     * Обработчик действия
+     */
+    onClick?: (row: T) => void;
+    /**
+     * Название действия
+     */
+    name: string;
+    /**
+     * Флаг показа выпадающего списка при клике
+     */
+    nested?: false;
+};
+export type MultipleAction<T> = MenuItemProps & {
+    /**
+     * Иконка действия
+     */
+    icon: ReactNode;
+    /**
+     * Список действий для выпадающего списка
+     */
+    actions: Array<NestedAction<T>>;
+    /**
+     * Флаг показа выпадающего списка при клике
+     */
+    nested: true;
+    /**
+     * Название действия
+     */
+    name: string;
+};
+export type MainAction<T> = (BaseButtonProps & SingleAction<T>) | MultipleAction<T>;
+export type SecondaryAction<T> = MenuItemProps & SingleAction<T>;
+export type Actions<T> = {
+    /**
+     * Основные действия
+     */
+    main: MainAction<T>[];
+    /**
+     * Второстепенные действия
+     */
+    secondary?: SecondaryAction<T>[];
+};
+export type ActionsCellProps<T> = {
+    /**
+     * Действия
+     */
+    actions: Actions<T>;
+    /**
+     * Данные строки из DataGrid
+     */
+    row: T;
+    /**
+     * Позиция тултипа
+     */
+    tooltipPlacement?: TooltipProps['placement'];
+};
+export declare function ActionCell<T>({ actions: { main, secondary }, row, tooltipPlacement, }: ActionsCellProps<T>): JSX.Element;

package/ActionCell/ActionCell.js

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@astral/icons");
+const react_1 = require("react");
+const IconButton_1 = require("../IconButton");
+const IconDropdownButton_1 = require("../IconDropdownButton");
+const MenuItem_1 = require("../MenuItem");
+const Tooltip_1 = require("../Tooltip");
+const styles_1 = require("./styles");
+function ActionCell({ actions: { main = [], secondary = [] }, row, tooltipPlacement, }) {
+    const handleActionClick = (0, react_1.useCallback)((onClick) => () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(row);
+    }, [row]);
+    const renderMainAction = (0, react_1.useCallback)((action) => {
+        if (action.nested) {
+            const { name, actions, icon } = action;
+            return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: name, placement: tooltipPlacement }, { children: (0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, Object.assign({ icon: icon, variant: "text" }, { children: actions.map((_a) => {
+                        var { name: nestedActionName, onClick } = _a, props = __rest(_a, ["name", "onClick"]);
+                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, props, { children: nestedActionName }), nestedActionName));
+                    }) })) }), name));
+        }
+        const { onClick, name, icon, nested } = action, props = __rest(action, ["onClick", "name", "icon", "nested"]);
+        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: name, placement: tooltipPlacement }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ variant: "text", onClick: handleActionClick(onClick) }, props, { children: icon })) }), name));
+    }, [handleActionClick, tooltipPlacement]);
+    const renderSecondaryActions = (0, react_1.useMemo)(() => {
+        if (!Boolean(secondary.length)) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, Object.assign({ icon: (0, jsx_runtime_1.jsx)(icons_1.DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map((_a) => {
+                var { name, onClick, nested } = _a, props = __rest(_a, ["name", "onClick", "nested"]);
+                return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, props, { children: name }), name));
+            }) })));
+    }, [secondary, handleActionClick]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ActionCellWrapper, Object.assign({ onClick: (event) => event.stopPropagation() }, { children: [main.map(renderMainAction), renderSecondaryActions] })));
+}
+exports.ActionCell = ActionCell;

package/ActionCell/index.d.ts

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

package/ActionCell/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ActionCell"), exports);

package/ActionCell/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ActionCellWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ActionCell/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCellWrapper = void 0;
+const styles_1 = require("../styles");
+exports.ActionCellWrapper = styles_1.styled.div `
+  display: inline-flex;
+  align-items: center;
+`;

package/Alert/Alert.d.ts

@@ -0,0 +1,26 @@
+import { AlertProps as MuiAlertProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { WithoutEmotionSpecific } from '../types';
+export type AlertProps = Omit<WithoutEmotionSpecific<MuiAlertProps>, 'variant' | 'action' | 'color' | 'iconMapping'> & {
+    /**
+     * @example <Alert title="Заголовок">Сообщение</Alert>
+     * Заголовок
+     */
+    title?: string;
+    /**
+     * @example <Alert actions={
+     *   <>
+     *     <button>действие 1</button>
+     *     <button>действие 2</button>
+     *   </>
+     * }>Сообщение</Alert>
+     * Используется для отображения набора действий
+     */
+    actions?: ReactNode;
+    /**
+     * @example <Alert display={false}>Сообщение</Alert>
+     * Флаг для отображения/скрытия компонента Alert
+     */
+    display?: boolean;
+};
+export declare const Alert: ({ children, title, closeText, display, actions, onClose, ...props }: AlertProps) => JSX.Element;

package/Alert/Alert.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const icons_1 = require("@astral/icons");
+const Typography_1 = require("../Typography");
+const Grid_1 = require("../Grid");
+const Collapse_1 = require("../Collapse");
+const styles_1 = require("./styles");
+const Alert = (_a) => {
+    var { children, title, closeText = 'Скрыть', display = true, actions, onClose } = _a, props = __rest(_a, ["children", "title", "closeText", "display", "actions", "onClose"]);
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, Object.assign({ in: display }, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledAlert, Object.assign({}, props, { closeText: closeText, variant: "filled", onClose: onClose, iconMapping: {
+                info: (0, jsx_runtime_1.jsx)(icons_1.InfoFillMd, {}),
+                error: (0, jsx_runtime_1.jsx)(icons_1.ErrorFillMd, {}),
+                success: (0, jsx_runtime_1.jsx)(icons_1.SuccessFillMd, {}),
+                warning: (0, jsx_runtime_1.jsx)(icons_1.WarningFillMd, {}),
+            } }, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: "h5" }, { children: title })) })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ gutterBottom: Boolean(actions) }, { children: children })), (0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ container: true, spacing: 4, autoFlow: "column", justifyContent: "flex-start" }, { children: actions }))] })) })));
+};
+exports.Alert = Alert;

package/Alert/index.d.ts

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

package/Alert/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Alert"), exports);

package/Alert/styles.d.ts

@@ -0,0 +1,4 @@
+import { AlertProps } from '@mui/material';
+export declare const StyledAlert: import("@emotion/styled").StyledComponent<AlertProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/Alert/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAlert = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("../styles");
+exports.StyledAlert = (0, styles_1.styled)(material_1.Alert) `
+  padding: ${({ theme }) => theme.spacing(3)};
+
+  .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {
+    padding: ${({ theme }) => theme.spacing(3, 0)};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    padding: ${({ theme }) => theme.spacing(2, 4)};
+
+    .MuiAlert-message > *:last-child:not(:empty):not(.MuiTypography-root) {
+      padding: 0;
+    }
+  }
+`;

package/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
+import { TextFieldProps } from '../TextField';
+import { OverflowedElementProps } from '../OverflowTypography';
+import { WithoutEmotionSpecific } from '../types';
+import { AutocompleteSizes } from './enums';
+export type AutocompleteSize = `${AutocompleteSizes}`;
+export type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<WithoutEmotionSpecific<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
+    size?: AutocompleteSize;
+    overflowOption?: OverflowedElementProps;
+};
+export declare const Autocomplete: <AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean>(props: AutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>) => JSX.Element;

package/Autocomplete/Autocomplete.js

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const icons_1 = require("@astral/icons");
+const TextField_1 = require("../TextField");
+const Tag_1 = require("../Tag");
+const MenuItem_1 = require("../MenuItem");
+const Checkbox_1 = require("../Checkbox");
+const OverflowTypography_1 = require("../OverflowTypography");
+const constants_1 = require("./constants");
+const Autocomplete = (props) => {
+    const { multiple, placeholder, error, success, helperText, label, size = 'medium', getOptionLabel, renderOption: externalRenderOption, overflowOption } = props, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
+    const renderTags = (0, react_2.useCallback)((tags, getTagProps) => {
+        return tags.map((tag, index) => {
+            const title = (getOptionLabel && getOptionLabel(tag)) || '';
+            return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, Object.assign({ deleteIcon: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index }))));
+        });
+    }, [getOptionLabel]);
+    const isOptionEqualToValue = (0, react_2.useCallback)((option, value) => {
+        return JSON.stringify(option) === JSON.stringify(value);
+    }, []);
+    const renderInput = (0, react_2.useCallback)((inputParams) => ((0, jsx_runtime_1.jsx)(TextField_1.TextField, Object.assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))), [placeholder, label, success, error, helperText, size]);
+    const renderOption = (0, react_2.useCallback)((optionProps, option, optionState) => {
+        if (externalRenderOption) {
+            return externalRenderOption(optionProps, option, optionState);
+        }
+        const selected = Boolean(optionProps['aria-selected']);
+        return ((0, react_1.createElement)(MenuItem_1.MenuItem, Object.assign({}, optionProps, { key: optionProps.id }),
+            multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { role: "menuitemcheckbox", checked: selected }) })),
+            (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, Object.assign({ rowsCount: constants_1.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
+    }, [multiple, externalRenderOption]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, Object.assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: (0, jsx_runtime_1.jsx)(icons_1.ChevronDOutlineMd, {}), clearIcon: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}), isOptionEqualToValue: isOptionEqualToValue, componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
+};
+exports.Autocomplete = Autocomplete;

package/Autocomplete/Autocomplete.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Autocomplete/Autocomplete.test.js

@@ -0,0 +1,98 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const Autocomplete_1 = require("./Autocomplete");
+describe('Autocomplete', () => {
+    it('Prop:options: при пустом массиве отображается плейсхолдер', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { options: [] }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        const noDataPlaceholder = tests_1.screen.getByText('Нет данных');
+        expect(noDataPlaceholder).toBeVisible();
+    }));
+    it('Focus: не отображается popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { options: [] }));
+        tests_1.fireEvent.focus(tests_1.screen.getByRole('combobox'));
+        const noDataPlaceholder = tests_1.screen.queryByText('Нет данных');
+        expect(noDataPlaceholder).toBeNull();
+    }));
+    it('Prop:getOptionLabel: позволяет отображать в popover label', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { name: 'Vasya', surname: 'Pupkin' },
+            { name: 'Kolya', surname: 'Kolin' },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        const vasya = tests_1.screen.getByText('Pupkin');
+        const kolya = tests_1.screen.getByText('Kolin');
+        expect(vasya).toBeVisible();
+        expect(kolya).toBeVisible();
+    }));
+    it('Закрывается popover после выбора значения', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { name: 'Vasya', surname: 'Pupkin' },
+            { name: 'Kolya', surname: 'Kolin' },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        const selectedOption = tests_1.screen.getByRole('option', { name: 'Pupkin' });
+        yield tests_1.userEvents.click(selectedOption);
+        expect(tests_1.screen.queryByRole('option')).toBeNull();
+    }));
+    it('Props:multiple=false: в инпут сетится label после выбора option', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [
+            { name: 'Vasya', surname: 'Pupkin' },
+            { name: 'Kolya', surname: 'Kolin' },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        const option = tests_1.screen.getByRole('option', { name: 'Pupkin' });
+        yield tests_1.userEvents.click(option);
+        const input = tests_1.screen.getByRole('combobox');
+        expect(input).toHaveAttribute('value', 'Pupkin');
+    }));
+    it('Prop:multiple: в options отображаются чекбоксы', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [{ name: 'Vasya', surname: 'Pupkin' }];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        const checkbox = tests_1.screen.getByRole('menuitemcheckbox');
+        expect(checkbox).toBeVisible();
+    }));
+    it('Prop:multiple: после выбора option в инпуте появляется tag', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [{ name: 'Vasya', surname: 'Pupkin' }];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('menuitemcheckbox'));
+        const checkbox = tests_1.screen
+            .getByRole('menuitemcheckbox')
+            .getElementsByTagName('input')[0];
+        expect(checkbox).toBeChecked();
+        const tag = tests_1.screen.getByRole('button', { name: 'Pupkin' });
+        expect(tag).toBeVisible();
+    }));
+    it('Prop:multiple: tag из инпута можно удалить', () => __awaiter(void 0, void 0, void 0, function* () {
+        const options = [{ name: 'Vasya', surname: 'Pupkin' }];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('combobox'));
+        yield tests_1.userEvents.click(tests_1.screen.getByRole('menuitemcheckbox'));
+        const tagDeleteIcon = tests_1.screen
+            .getByRole('button', { name: 'Pupkin' })
+            .getElementsByTagName('svg')[0];
+        yield tests_1.userEvents.click(tagDeleteIcon);
+        const checkbox = tests_1.screen
+            .getByRole('menuitemcheckbox')
+            .getElementsByTagName('input')[0];
+        expect(checkbox).not.toBeChecked();
+        const tag = tests_1.screen.queryByRole('button', { name: 'Pupkin' });
+        expect(tag).toBeNull();
+    }));
+});

package/Autocomplete/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;

package/Autocomplete/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = void 0;
+exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;

package/Autocomplete/enums.d.ts

@@ -0,0 +1,4 @@
+export declare enum AutocompleteSizes {
+    medium = "medium",
+    small = "small"
+}

package/Autocomplete/enums.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteSizes = void 0;
+var AutocompleteSizes;
+(function (AutocompleteSizes) {
+    AutocompleteSizes["medium"] = "medium";
+    AutocompleteSizes["small"] = "small";
+})(AutocompleteSizes = exports.AutocompleteSizes || (exports.AutocompleteSizes = {}));

package/Autocomplete/index.d.ts

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

package/Autocomplete/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Autocomplete"), exports);

package/BackdropStack/hooks/useBackdropStackToggle/index.d.ts

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

package/BackdropStack/hooks/useBackdropStackToggle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBackdropStackToggle"), exports);

package/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.d.ts

@@ -0,0 +1,33 @@
+import { SyntheticEvent } from 'react';
+import { CloseEventReason } from '../../../types';
+/**
+ * @description необязательные настройки для использоввания хука
+ */
+type Options = {
+    /**
+     * @default undefined
+     * @description айдишка, которая записывается в стек при открытии, если не передана, будет сгенерирована автоматически
+     */
+    id?: string;
+};
+type ReturnElements = {
+    /**
+     * @initial false
+     * @description стейт для контроля состояния открытости элемента, следует использовать, если у элемента могут быть свои дочерние всплываемые элементы
+     */
+    isOpened: boolean;
+    /**
+     * @description метод вызываемый при открытии элемента
+     */
+    handleOpen: () => void;
+    /**
+     * @description метод вызываемый при закрытии элемента, внутри него определяется состояние isOpened
+     */
+    handleClose: (event?: SyntheticEvent<Element, Event> | Event | {}, reason?: CloseEventReason) => void;
+};
+type UseBackdropStackToggleFunc = (options?: Options) => ReturnElements;
+/**
+ * @description хук предназначен для быстрого использования backdropStackManager в реакт компонентах, хранит неуправляемый стейт, если вам нужно управлять этим стейтом, воспользуйтесь backdropStackManager в своем компоненте напрямую.
+ */
+export declare const useBackdropStackToggle: UseBackdropStackToggleFunc;
+export {};

package/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBackdropStackToggle = void 0;
+const react_1 = require("react");
+const BackdropStackManager_1 = require("../../services/BackdropStackManager");
+/**
+ * @description хук предназначен для быстрого использования backdropStackManager в реакт компонентах, хранит неуправляемый стейт, если вам нужно управлять этим стейтом, воспользуйтесь backdropStackManager в своем компоненте напрямую.
+ */
+const useBackdropStackToggle = ({ id: parentId, } = {}) => {
+    const { pop, push, remove, generateID } = BackdropStackManager_1.backdropStackManager;
+    const id = (0, react_1.useRef)(parentId || generateID());
+    const [isOpened, setOpened] = (0, react_1.useState)(false);
+    const handleOpen = () => {
+        if (!isOpened) {
+            push(id.current);
+            setOpened(true);
+        }
+    };
+    const handleClose = (_, reason) => {
+        if (isOpened) {
+            setOpened(!pop(id.current, reason));
+        }
+    };
+    (0, react_1.useEffect)(() => () => remove(id.current), []);
+    return { isOpened, handleOpen, handleClose };
+};
+exports.useBackdropStackToggle = useBackdropStackToggle;

package/BackdropStack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './services/BackdropStackManager';
+export * from './hooks/useBackdropStackToggle';

package/BackdropStack/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./services/BackdropStackManager"), exports);
+__exportStar(require("./hooks/useBackdropStackToggle"), exports);

package/BackdropStack/services/BackdropStackManager/BackdropStackManager.d.ts

@@ -0,0 +1,43 @@
+import { CloseEventReason } from '../../../types';
+/**
+ * @description айдишка модалки/поппера/тултипа
+ */
+type PopId = string;
+declare class BackdropStackManager {
+    private stack;
+    /**
+     * @description сохраняем информацию о том какой был предыдущий вызов pop,
+     * нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+     */
+    private previousPopInfo;
+    /**
+     * @description крайняя айдишка клика по странице
+     */
+    private currentPointerId;
+    constructor();
+    /**
+     * @description  метод проверки на конфликт причины закрытия с предыдущим
+     */
+    private checkOn;
+    /**
+     * @description  метод генерации случайной айдишки
+     */
+    generateID: () => string;
+    /**
+     * @description форс метод для удалении подписанного компонента из очереди,
+     * может быть полезно при массовом анмаунте компонентов
+     */
+    remove: (id: PopId) => void;
+    /**
+     * @description метод добавления в стек
+     */
+    push: (id: PopId) => void;
+    /**
+     * @description метод для запроса на выход из очереди,
+     * если все ок, то вернется true, что означает разрешение на выход и компонент будет вычеркнут из очереди,
+     * соответственно возврат false означает запрет, и компонент остается в очереди
+     */
+    pop: (id: PopId, reason?: CloseEventReason) => boolean;
+}
+export declare const backdropStackManager: BackdropStackManager;
+export {};