@astral/ui 1.11.0 → 1.13.0

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

package/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBackdropStackToggle = void 0;
+var react_1 = require("react");
+var nanoid_1 = require("nanoid");
+var BackdropStackManager_1 = require("../../services/BackdropStackManager");
+/**
+ * @description хук предназначен для быстрого использования backdropStackManager в реакт компонентах, хранит неуправляемый стейт, если вам нужно управлять этим стейтом, воспользуйтесь backdropStackManager в своем компоненте напрямую.
+ */
+var useBackdropStackToggle = function (_a) {
+    var _b = _a === void 0 ? {} : _a, parentId = _b.id;
+    var id = (0, react_1.useRef)(parentId || (0, nanoid_1.nanoid)());
+    var pop = BackdropStackManager_1.backdropStackManager.pop, push = BackdropStackManager_1.backdropStackManager.push, remove = BackdropStackManager_1.backdropStackManager.remove;
+    var _c = (0, react_1.useState)(false), isOpened = _c[0], setOpened = _c[1];
+    var handleOpen = function () {
+        push(id.current);
+        setOpened(true);
+    };
+    var handleClose = function (_, reason) {
+        setOpened(!pop(id.current, reason));
+    };
+    (0, react_1.useEffect)(function () { return function () { return remove(id.current); }; }, []);
+    return { isOpened: isOpened, handleOpen: handleOpen, handleClose: 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,14 @@
+declare type PopId = string;
+export declare type Reason = 'escapeKeyDown' | 'backdropClick' | 'toggleInput' | 'blur' | null;
+declare class BackdropStackManager {
+    private stack;
+    private previousPopInfo;
+    private currentPointerId;
+    constructor();
+    private checkOn;
+    remove: (id: PopId) => void;
+    push: (id: PopId) => void;
+    pop: (id: PopId, reason?: Reason) => boolean;
+}
+export declare const backdropStackManager: BackdropStackManager;
+export {};

package/BackdropStack/services/BackdropStackManager/BackdropStackManager.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.backdropStackManager = void 0;
+var nanoid_1 = require("nanoid");
+var BackdropStackManager = /** @class */ (function () {
+    function BackdropStackManager() {
+        var _this = this;
+        this.stack = [];
+        // сохраняем информацию о том какой был предыдущий вызов pop,
+        // нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+        this.previousPopInfo = [null, null];
+        this.currentPointerId = null;
+        this.checkOn = function (reason) {
+            var _a = _this.previousPopInfo, previousReason = _a[0], previousPointerId = _a[1];
+            return (reason === 'backdropClick' &&
+                previousReason === 'blur' &&
+                previousPointerId === _this.currentPointerId);
+        };
+        this.remove = function (id) {
+            _this.stack = _this.stack.filter(function (item) { return item !== id; });
+        };
+        this.push = function (id) {
+            _this.stack.push(id);
+        };
+        this.pop = function (id, reason) {
+            if (_this.checkOn(reason)) {
+                return false;
+            }
+            var lastOpenedElement = _this.stack[_this.stack.length - 1];
+            if (lastOpenedElement === id) {
+                _this.previousPopInfo = [reason, _this.currentPointerId];
+                _this.stack.pop();
+                return true;
+            }
+            return false;
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener('pointerdown', function () { return (_this.currentPointerId = (0, nanoid_1.nanoid)()); });
+    }
+    return BackdropStackManager;
+}());
+exports.backdropStackManager = new BackdropStackManager();

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

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

package/BackdropStack/services/BackdropStackManager/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("./BackdropStackManager"), exports);

package/Description/Description.d.ts

@@ -7,6 +7,6 @@ export declare type DescriptionProps = {
 };
 export declare const Description: {
     ({ children }: DescriptionProps): JSX.Element;
-    Name: ({ children, ...props }: import("./Name").NameProps) => JSX.Element;
+    Name: ({ children, color, ...props }: import("./Name").NameProps) => JSX.Element;
     Value: ({ children, stub, ...props }: import("./Value").ValueProps) => JSX.Element;
 };

package/Description/Name/Name.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TypographyProps } from '../../Typography';
 export declare type NameProps = Pick<TypographyProps, 'color' | 'variant' | 'children'>;
-export declare const Name: ({ children, ...props }: NameProps) => JSX.Element;
+export declare const Name: ({ children, color, ...props }: NameProps) => JSX.Element;

package/Description/Name/Name.js

@@ -26,7 +26,7 @@ exports.Name = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Typography_1 = require("../../Typography");
 var Name = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, __assign({}, props, { children: [children, ":\u00A0"] })));
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'textSecondary' : _b, props = __rest(_a, ["children", "color"]);
+    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, __assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
 };
 exports.Name = Name;

package/Description/styles.js

@@ -6,8 +6,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionWrapper = void 0;
 var styles_1 = require("../styles");
-exports.DescriptionWrapper = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  ", " {\n    flex-direction: column;\n  }\n"])), function (_a) {
+exports.DescriptionWrapper = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.down('sm');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontSize;
 });
 var templateObject_1;

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

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

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

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

@@ -0,0 +1,14 @@
+declare type PopId = string;
+export declare type Reason = 'escapeKeyDown' | 'backdropClick' | 'toggleInput' | 'blur' | null;
+declare class BackdropStackManager {
+    private stack;
+    private previousPopInfo;
+    private currentPointerId;
+    constructor();
+    private checkOn;
+    remove: (id: PopId) => void;
+    push: (id: PopId) => void;
+    pop: (id: PopId, reason?: Reason) => boolean;
+}
+export declare const backdropStackManager: BackdropStackManager;
+export {};

package/esm/BackdropStack/services/BackdropStackManager/BackdropStackManager.js

@@ -0,0 +1,38 @@
+import { nanoid } from 'nanoid';
+var BackdropStackManager = /** @class */ (function () {
+    function BackdropStackManager() {
+        var _this = this;
+        this.stack = [];
+        // сохраняем информацию о том какой был предыдущий вызов pop,
+        // нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+        this.previousPopInfo = [null, null];
+        this.currentPointerId = null;
+        this.checkOn = function (reason) {
+            var _a = _this.previousPopInfo, previousReason = _a[0], previousPointerId = _a[1];
+            return (reason === 'backdropClick' &&
+                previousReason === 'blur' &&
+                previousPointerId === _this.currentPointerId);
+        };
+        this.remove = function (id) {
+            _this.stack = _this.stack.filter(function (item) { return item !== id; });
+        };
+        this.push = function (id) {
+            _this.stack.push(id);
+        };
+        this.pop = function (id, reason) {
+            if (_this.checkOn(reason)) {
+                return false;
+            }
+            var lastOpenedElement = _this.stack[_this.stack.length - 1];
+            if (lastOpenedElement === id) {
+                _this.previousPopInfo = [reason, _this.currentPointerId];
+                _this.stack.pop();
+                return true;
+            }
+            return false;
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener('pointerdown', function () { return (_this.currentPointerId = nanoid()); });
+    }
+    return BackdropStackManager;
+}());
+export var backdropStackManager = new BackdropStackManager();

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

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

package/esm/BackdropStack/services/BackdropStackManager/index.js

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

package/esm/Description/Description.d.ts

@@ -7,6 +7,6 @@ export declare type DescriptionProps = {
 };
 export declare const Description: {
     ({ children }: DescriptionProps): JSX.Element;
-    Name: ({ children, ...props }: import("./Name").NameProps) => JSX.Element;
+    Name: ({ children, color, ...props }: import("./Name").NameProps) => JSX.Element;
     Value: ({ children, stub, ...props }: import("./Value").ValueProps) => JSX.Element;
 };

package/esm/Description/Name/Name.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TypographyProps } from '../../Typography';
 export declare type NameProps = Pick<TypographyProps, 'color' | 'variant' | 'children'>;
-export declare const Name: ({ children, ...props }: NameProps) => JSX.Element;
+export declare const Name: ({ children, color, ...props }: NameProps) => JSX.Element;

package/esm/Description/Name/Name.js

@@ -23,6 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '../../Typography';
 export var Name = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (_jsxs(Typography, __assign({}, props, { children: [children, ":\u00A0"] })));
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'textSecondary' : _b, props = __rest(_a, ["children", "color"]);
+    return (_jsxs(Typography, __assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
 };

package/esm/Description/styles.js

@@ -3,8 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { styled } from '../styles';
-export var DescriptionWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  ", " {\n    flex-direction: column;\n  }\n"])), function (_a) {
+export var DescriptionWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.down('sm');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.fontSize;
 });
 var templateObject_1;

package/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
 export * from './Description';

package/esm/index.js

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
 export * from './Description';

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ActionCell';
 export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
 export * from './Description';

package/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ActionCell"), exports);
 __exportStar(require("./Alert"), exports);
 __exportStar(require("./Autocomplete"), exports);
+__exportStar(require("./BackdropStack"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Description"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^1.11.0",
+    "@astral/icons": "^1.13.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",
@@ -18,6 +18,7 @@
     "@mui/material": "^5.8.4",
     "date-fns": "^2.28.0",
     "lodash-es": "^4.17.21",
+    "nanoid": "^4.0.0",
     "react-datepicker": "4.7.0",
     "react-imask": "^6.4.2",
     "react-toastify": "9.0.3",