@astral/ui 0.48.4 → 1.0.0-test.1670405759

package/docs/Case/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaseContentWrapper = exports.CaseWrapper = void 0;
+const styles_1 = require("../../styles");
+exports.CaseWrapper = styles_1.styled.div `
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : '70%')};
+  margin-top: ${({ theme }) => theme.spacing(6)};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+exports.CaseContentWrapper = styles_1.styled.div `
+  padding: ${({ theme }) => theme.spacing(8, 0)};
+
+  background: ${({ theme }) => theme.palette.background.element};
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.small};
+`;

package/docs/ExampleTemplate/ExampleTemplate.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type ExampleTemplateProps = {
+    children?: ReactNode;
+};
+export declare const ExampleTemplate: {
+    ({ children }: ExampleTemplateProps): JSX.Element;
+    Case: (props: {
+        title: string;
+        descriptionList?: string[] | undefined;
+        children: ReactNode;
+        fullWidth?: boolean | undefined;
+    }) => JSX.Element;
+};
+export {};

package/docs/ExampleTemplate/ExampleTemplate.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Case_1 = require("../Case");
+const ExampleTemplate = ({ children }) => ((0, jsx_runtime_1.jsx)("section", { children: children }));
+exports.ExampleTemplate = ExampleTemplate;
+exports.ExampleTemplate.Case = Case_1.Case;

package/docs/ExampleTemplate/index.d.ts

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

package/docs/ExampleTemplate/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("./ExampleTemplate"), exports);

package/docs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Case';
+export * from './ExampleTemplate';

package/docs/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("./Case"), exports);
+__exportStar(require("./ExampleTemplate"), exports);

package/esm/ActionCell/ActionCell.d.ts

@@ -1,15 +1,18 @@
 import { ReactNode } from 'react';
-export declare type NestedAction<T> = {
+import { BaseButtonProps } from '../ButtonBase';
+import { MenuItemProps } from '../MenuItem';
+import { TooltipProps } from '../Tooltip';
+export type NestedAction<T> = MenuItemProps & {
     /**
      * Обработчик действия
      */
-    onClick: (row: T) => void;
+    onClick?: (row: T) => void;
     /**
      * Название действия
      */
     name: string;
 };
-export declare type SingleAction<T> = {
+export type SingleAction<T> = {
     /**
      * Иконка действия
      */
@@ -17,7 +20,7 @@ export declare type SingleAction<T> = {
     /**
      * Обработчик действия
      */
-    onClick: (row: T) => void;
+    onClick?: (row: T) => void;
     /**
      * Название действия
      */
@@ -27,7 +30,7 @@ export declare type SingleAction<T> = {
      */
     nested?: false;
 };
-export declare type MultipleAction<T> = {
+export type MultipleAction<T> = MenuItemProps & {
     /**
      * Иконка действия
      */
@@ -45,8 +48,9 @@ export declare type MultipleAction<T> = {
      */
     name: string;
 };
-export declare type MainAction<T> = SingleAction<T> | MultipleAction<T>;
-export declare type Actions<T> = {
+export type MainAction<T> = (BaseButtonProps & SingleAction<T>) | MultipleAction<T>;
+export type SecondaryAction<T> = MenuItemProps & SingleAction<T>;
+export type Actions<T> = {
     /**
      * Основные действия
      */
@@ -54,9 +58,9 @@ export declare type Actions<T> = {
     /**
      * Второстепенные действия
      */
-    secondary?: SingleAction<T>[];
+    secondary?: SecondaryAction<T>[];
 };
-export declare type ActionsCellProps<T> = {
+export type ActionsCellProps<T> = {
     /**
      * Действия
      */
@@ -65,5 +69,9 @@ export declare type ActionsCellProps<T> = {
      * Данные строки из DataGrid
      */
     row: T;
+    /**
+     * Позиция тултипа
+     */
+    tooltipPlacement?: TooltipProps['placement'];
 };
-export declare function ActionCell<T>({ actions: { main, secondary }, row, }: ActionsCellProps<T>): JSX.Element;
+export declare function ActionCell<T>({ actions: { main, secondary }, row, tooltipPlacement, }: ActionsCellProps<T>): JSX.Element;

package/esm/ActionCell/ActionCell.js

@@ -1,13 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
+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;
-    };
-    return __assign.apply(this, arguments);
+    return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DotsVOutlineMd } from '@astral/icons';
@@ -17,32 +17,29 @@ import { IconDropdownButton } from '../IconDropdownButton';
 import { MenuItem } from '../MenuItem';
 import { Tooltip } from '../Tooltip';
 import { ActionCellWrapper } from './styles';
-export function ActionCell(_a) {
-    var _b = _a.actions, _c = _b.main, main = _c === void 0 ? [] : _c, _d = _b.secondary, secondary = _d === void 0 ? [] : _d, row = _a.row;
-    var handleActionClick = function (onClick) {
-        return function () {
-            onClick(row);
-        };
-    };
-    var renderMainAction = useCallback(function (action) {
+export function ActionCell({ actions: { main = [], secondary = [] }, row, tooltipPlacement, }) {
+    const handleActionClick = useCallback((onClick) => () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(row);
+    }, [row]);
+    const renderMainAction = useCallback((action) => {
         if (action.nested) {
-            var name_1 = action.name, actions = action.actions, icon_1 = action.icon;
-            return (_jsx(Tooltip, __assign({ title: name_1 }, { children: _jsx(IconDropdownButton, __assign({ icon: icon_1, variant: "text" }, { children: actions.map(function (_a) {
-                        var nestedActionName = _a.name, onClick = _a.onClick;
-                        return (_jsx(MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: nestedActionName }), nestedActionName));
-                    }) })) }), name_1));
+            const { name, actions, icon } = action;
+            return (_jsx(Tooltip, Object.assign({ title: name, placement: tooltipPlacement }, { children: _jsx(IconDropdownButton, Object.assign({ icon: icon, variant: "text" }, { children: actions.map((_a) => {
+                        var { name: nestedActionName, onClick } = _a, props = __rest(_a, ["name", "onClick"]);
+                        return (_jsx(MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, props, { children: nestedActionName }), nestedActionName));
+                    }) })) }), name));
         }
-        var onClick = action.onClick, name = action.name, icon = action.icon;
-        return (_jsx(Tooltip, __assign({ title: name }, { children: _jsx(IconButton, __assign({ variant: "text", onClick: handleActionClick(onClick) }, { children: icon })) }), name));
-    }, [handleActionClick]);
-    var renderSecondaryActions = useMemo(function () {
+        const { onClick, name, icon, nested } = action, props = __rest(action, ["onClick", "name", "icon", "nested"]);
+        return (_jsx(Tooltip, Object.assign({ title: name, placement: tooltipPlacement }, { children: _jsx(IconButton, Object.assign({ variant: "text", onClick: handleActionClick(onClick) }, props, { children: icon })) }), name));
+    }, [handleActionClick, tooltipPlacement]);
+    const renderSecondaryActions = useMemo(() => {
         if (!Boolean(secondary.length)) {
             return null;
         }
-        return (_jsx(IconDropdownButton, __assign({ icon: _jsx(DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map(function (_a) {
-                var name = _a.name, onClick = _a.onClick;
-                return (_jsx(MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: name }), name));
+        return (_jsx(IconDropdownButton, Object.assign({ icon: _jsx(DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map((_a) => {
+                var { name, onClick, nested } = _a, props = __rest(_a, ["name", "onClick", "nested"]);
+                return (_jsx(MenuItem, Object.assign({ onClick: handleActionClick(onClick) }, props, { children: name }), name));
             }) })));
     }, [secondary, handleActionClick]);
-    return (_jsxs(ActionCellWrapper, __assign({ onClick: function (event) { return event.stopPropagation(); } }, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] })));
+    return (_jsxs(ActionCellWrapper, Object.assign({ onClick: (event) => event.stopPropagation() }, { children: [main.map(renderMainAction), renderSecondaryActions] })));
 }

package/esm/ActionCell/styles.js

@@ -1,7 +1,5 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../styles';
-export var ActionCellWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1;
+export const ActionCellWrapper = styled.div `
+  display: inline-flex;
+  align-items: center;
+`;

package/esm/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/esm/Alert/Alert.js

@@ -0,0 +1,27 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTitle } from '@mui/material';
+import { ErrorFillMd, InfoFillMd, SuccessFillMd, WarningFillMd, } from '@astral/icons';
+import { Typography } from '../Typography';
+import { Grid } from '../Grid';
+import { Collapse } from '../Collapse';
+import { StyledAlert } from './styles';
+export const Alert = (_a) => {
+    var { children, title, closeText = 'Скрыть', display = true, actions, onClose } = _a, props = __rest(_a, ["children", "title", "closeText", "display", "actions", "onClose"]);
+    return (_jsx(Collapse, Object.assign({ in: display }, { children: _jsxs(StyledAlert, Object.assign({}, props, { closeText: closeText, variant: "filled", onClose: onClose, iconMapping: {
+                info: _jsx(InfoFillMd, {}),
+                error: _jsx(ErrorFillMd, {}),
+                success: _jsx(SuccessFillMd, {}),
+                warning: _jsx(WarningFillMd, {}),
+            } }, { children: [title && (_jsx(AlertTitle, { children: _jsx(Typography, Object.assign({ variant: "h5" }, { children: title })) })), _jsx(Typography, Object.assign({ gutterBottom: Boolean(actions) }, { children: children })), _jsx(Grid, Object.assign({ container: true, spacing: 4, autoFlow: "column", justifyContent: "flex-start" }, { children: actions }))] })) })));
+};

package/esm/Alert/index.d.ts

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

package/esm/Alert/index.js

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

package/esm/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/esm/Alert/styles.js

@@ -0,0 +1,17 @@
+import { Alert } from '@mui/material';
+import { styled } from '../styles';
+export const StyledAlert = styled(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/esm/Autocomplete/Autocomplete.d.ts

@@ -2,9 +2,10 @@
 import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
 import { TextFieldProps } from '../TextField';
 import { OverflowedElementProps } from '../OverflowTypography';
-import { AutocompleteSizes } from './constants';
-export declare type AutocompleteSize = `${AutocompleteSizes}`;
-export declare type AutocompleteProps<AutocompleteValueProps, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<MuiAutocompleteProps<AutocompleteValueProps, Multiple, DisableClearable, FreeSolo>, 'size' | 'renderInput'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label'> & {
+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;
 };

package/esm/Autocomplete/Autocomplete.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -30,24 +19,27 @@ import { Tag } from '../Tag';
 import { MenuItem } from '../MenuItem';
 import { Checkbox } from '../Checkbox';
 import { OverflowTypography, } from '../OverflowTypography';
-import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, } from './constants';
-export var Autocomplete = function (props) {
-    var multiple = props.multiple, placeholder = props.placeholder, error = props.error, success = props.success, helperText = props.helperText, label = props.label, _a = props.size, size = _a === void 0 ? 'medium' : _a, getOptionLabel = props.getOptionLabel, externalRenderOption = props.renderOption, overflowOption = props.overflowOption, restProps = __rest(props, ["multiple", "placeholder", "error", "success", "helperText", "label", "size", "getOptionLabel", "renderOption", "overflowOption"]);
-    var renderTags = useCallback(function (tags, getTagProps) {
-        return tags.map(function (tag, index) {
-            var title = (getOptionLabel && getOptionLabel(tag)) || '';
-            return (_jsx(Tag, __assign({ deleteIcon: _jsx(CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index: index }))));
+import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT } from './constants';
+export 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 = useCallback((tags, getTagProps) => {
+        return tags.map((tag, index) => {
+            const title = (getOptionLabel && getOptionLabel(tag)) || '';
+            return (_jsx(Tag, Object.assign({ deleteIcon: _jsx(CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index }))));
         });
     }, [getOptionLabel]);
-    var renderInput = useCallback(function (inputParams) { return (_jsx(TextField, __assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))); }, [placeholder, label, success, error, helperText, size]);
-    var renderOption = useCallback(function (optionProps, option, optionState) {
+    const isOptionEqualToValue = useCallback((option, value) => {
+        return JSON.stringify(option) === JSON.stringify(value);
+    }, []);
+    const renderInput = useCallback((inputParams) => (_jsx(TextField, Object.assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))), [placeholder, label, success, error, helperText, size]);
+    const renderOption = useCallback((optionProps, option, optionState) => {
         if (externalRenderOption) {
             return externalRenderOption(optionProps, option, optionState);
         }
-        var selected = Boolean(optionProps['aria-selected']);
-        return (_createElement(MenuItem, __assign({}, optionProps, { key: optionProps.id }),
-            multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: selected }) })),
-            _jsx(OverflowTypography, __assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
+        const selected = Boolean(optionProps['aria-selected']);
+        return (_createElement(MenuItem, Object.assign({}, optionProps, { key: optionProps.id }),
+            multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { role: "menuitemcheckbox", checked: selected }) })),
+            _jsx(OverflowTypography, Object.assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
     }, [multiple, externalRenderOption]);
-    return (_jsx(MuiAutocomplete, __assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: _jsx(ChevronDOutlineMd, {}), clearIcon: _jsx(CrossSmOutlineSm, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
+    return (_jsx(MuiAutocomplete, Object.assign({}, restProps, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: _jsx(ChevronDOutlineMd, {}), clearIcon: _jsx(CrossSmOutlineSm, {}), isOptionEqualToValue: isOptionEqualToValue, componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
 };

package/esm/Autocomplete/Autocomplete.test.js

@@ -0,0 +1,96 @@
+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());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, renderWithTheme, screen, userEvents } from '@astral/tests';
+import { Autocomplete } from './Autocomplete';
+describe('Autocomplete', () => {
+    it('Prop:options: при пустом массиве отображается плейсхолдер', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(Autocomplete, { options: [] }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        const noDataPlaceholder = screen.getByText('Нет данных');
+        expect(noDataPlaceholder).toBeVisible();
+    }));
+    it('Focus: не отображается popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderWithTheme(_jsx(Autocomplete, { options: [] }));
+        fireEvent.focus(screen.getByRole('combobox'));
+        const noDataPlaceholder = 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' },
+        ];
+        renderWithTheme(_jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        const vasya = screen.getByText('Pupkin');
+        const kolya = 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' },
+        ];
+        renderWithTheme(_jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        const selectedOption = screen.getByRole('option', { name: 'Pupkin' });
+        yield userEvents.click(selectedOption);
+        expect(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' },
+        ];
+        renderWithTheme(_jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        const option = screen.getByRole('option', { name: 'Pupkin' });
+        yield userEvents.click(option);
+        const input = 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' }];
+        renderWithTheme(_jsx(Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        const checkbox = 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' }];
+        renderWithTheme(_jsx(Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        yield userEvents.click(screen.getByRole('menuitemcheckbox'));
+        const checkbox = screen
+            .getByRole('menuitemcheckbox')
+            .getElementsByTagName('input')[0];
+        expect(checkbox).toBeChecked();
+        const tag = 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' }];
+        renderWithTheme(_jsx(Autocomplete, { multiple: true, options: options, getOptionLabel: (option) => option.surname }));
+        yield userEvents.click(screen.getByRole('combobox'));
+        yield userEvents.click(screen.getByRole('menuitemcheckbox'));
+        const tagDeleteIcon = screen
+            .getByRole('button', { name: 'Pupkin' })
+            .getElementsByTagName('svg')[0];
+        yield userEvents.click(tagDeleteIcon);
+        const checkbox = screen
+            .getByRole('menuitemcheckbox')
+            .getElementsByTagName('input')[0];
+        expect(checkbox).not.toBeChecked();
+        const tag = screen.queryByRole('button', { name: 'Pupkin' });
+        expect(tag).toBeNull();
+    }));
+});

package/esm/Autocomplete/constants.d.ts

@@ -1,5 +1 @@
-export declare enum AutocompleteSizes {
-    medium = "medium",
-    small = "small"
-}
 export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;

package/esm/Autocomplete/constants.js

@@ -1,6 +1 @@
-export var AutocompleteSizes;
-(function (AutocompleteSizes) {
-    AutocompleteSizes["medium"] = "medium";
-    AutocompleteSizes["small"] = "small";
-})(AutocompleteSizes || (AutocompleteSizes = {}));
-export var DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;

package/esm/Autocomplete/enums.d.ts

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

package/esm/Autocomplete/enums.js

@@ -0,0 +1,5 @@
+export var AutocompleteSizes;
+(function (AutocompleteSizes) {
+    AutocompleteSizes["medium"] = "medium";
+    AutocompleteSizes["small"] = "small";
+})(AutocompleteSizes || (AutocompleteSizes = {}));

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

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

package/esm/BackdropStack/hooks/useBackdropStackToggle/index.js

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

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

@@ -0,0 +1,33 @@
+import { SyntheticEvent } from 'react';
+import { Reason } 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?: Reason) => void;
+};
+type UseBackdropStackToggleFunc = (options?: Options) => ReturnElements;
+/**
+ * @description хук предназначен для быстрого использования backdropStackManager в реакт компонентах, хранит неуправляемый стейт, если вам нужно управлять этим стейтом, воспользуйтесь backdropStackManager в своем компоненте напрямую.
+ */
+export declare const useBackdropStackToggle: UseBackdropStackToggleFunc;
+export {};

package/esm/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.js

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

package/esm/BackdropStack/index.d.ts

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

package/esm/BackdropStack/index.js

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