@astral/ui 0.48.3 → 1.0.0-test.1670405759

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

@@ -1,52 +1,49 @@
 "use strict";
-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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var icons_1 = require("@astral/icons");
-var react_1 = require("react");
-var IconButton_1 = require("../IconButton");
-var IconDropdownButton_1 = require("../IconDropdownButton");
-var MenuItem_1 = require("../MenuItem");
-var Tooltip_1 = require("../Tooltip");
-var styles_1 = require("./styles");
-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 = (0, react_1.useCallback)(function (action) {
+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) {
-            var name_1 = action.name, actions = action.actions, icon_1 = action.icon;
-            return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ title: name_1 }, { children: (0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, __assign({ icon: icon_1, variant: "text" }, { children: actions.map(function (_a) {
-                        var nestedActionName = _a.name, onClick = _a.onClick;
-                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: nestedActionName }), nestedActionName));
-                    }) })) }), name_1));
+            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));
         }
-        var onClick = action.onClick, name = action.name, icon = action.icon;
-        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({ title: name }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: handleActionClick(onClick) }, { children: icon })) }), name));
-    }, [handleActionClick]);
-    var renderSecondaryActions = (0, react_1.useMemo)(function () {
+        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, __assign({ icon: (0, jsx_runtime_1.jsx)(icons_1.DotsVOutlineMd, {}), variant: "text" }, { children: secondary.map(function (_a) {
-                var name = _a.name, onClick = _a.onClick;
-                return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, __assign({ onClick: handleActionClick(onClick) }, { children: name }), name));
+        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, __assign({ onClick: function (event) { return event.stopPropagation(); } }, { children: [main.map(function (action) { return renderMainAction(action); }), renderSecondaryActions] })));
+    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/styles.js

@@ -1,10 +1,8 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCellWrapper = void 0;
-var styles_1 = require("../styles");
-exports.ActionCellWrapper = styles_1.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;
+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

@@ -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/Autocomplete/Autocomplete.js

@@ -1,15 +1,4 @@
 "use strict";
-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)
@@ -23,35 +12,38 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
-var react_1 = require("react");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
-var react_2 = require("react");
-var icons_1 = require("@astral/icons");
-var TextField_1 = require("../TextField");
-var Tag_1 = require("../Tag");
-var MenuItem_1 = require("../MenuItem");
-var Checkbox_1 = require("../Checkbox");
-var OverflowTypography_1 = require("../OverflowTypography");
-var constants_1 = require("./constants");
-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 = (0, react_2.useCallback)(function (tags, getTagProps) {
-        return tags.map(function (tag, index) {
-            var title = (getOptionLabel && getOptionLabel(tag)) || '';
-            return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, __assign({ deleteIcon: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}), color: "grey", label: title }, getTagProps({ index: index }))));
+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]);
-    var renderInput = (0, react_2.useCallback)(function (inputParams) { return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, __assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }))); }, [placeholder, label, success, error, helperText, size]);
-    var renderOption = (0, react_2.useCallback)(function (optionProps, option, optionState) {
+    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);
         }
-        var selected = Boolean(optionProps['aria-selected']);
-        return ((0, react_1.createElement)(MenuItem_1.MenuItem, __assign({}, optionProps, { key: optionProps.id }),
-            multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: selected }) })),
-            (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, __assign({ rowsCount: constants_1.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))));
+        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, __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, {}), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })));
+    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.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

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

package/Autocomplete/constants.js

@@ -1,9 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = exports.AutocompleteSizes = void 0;
-var AutocompleteSizes;
-(function (AutocompleteSizes) {
-    AutocompleteSizes["medium"] = "medium";
-    AutocompleteSizes["small"] = "small";
-})(AutocompleteSizes = exports.AutocompleteSizes || (exports.AutocompleteSizes = {}));
+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/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 { 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/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';