@astral/ui 4.71.3 → 4.72.0

package/components/PageContent/PageContentHeader/Description/Description.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type DescriptionProps = {
     description?: ReactNode;
     isLoading?: boolean;
+    className?: string;
 };
-export declare const Description: ({ description, isLoading }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Description: ({ className, description, isLoading, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageContent/PageContentHeader/Description/Description.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '../../../Skeleton';
 import { Typography } from '../../../Typography';
-export const Description = ({ description, isLoading }) => {
+export const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return _jsx(Skeleton, { height: 20, width: 300 });
+        return _jsx(Skeleton, { className: className, height: 20, width: 300 });
     }
     if (typeof description === 'string') {
-        return _jsx(Typography, { variant: "body1", children: description });
+        return (_jsx(Typography, { className: className, variant: "body1", children: description }));
     }
-    return (_jsx(Typography, { component: "div", variant: "body1", children: description }));
+    return (_jsx(Typography, { className: className, component: "div", variant: "body1", children: description }));
 };

package/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pageContentHeaderClassnames } from './constants';
 import { Description } from './Description';
 import { TitleBlock, Wrapper } from './styles';
 import { Title } from './Title';
 export const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return (_jsxs(Wrapper, { children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { description: description, isLoading: isLoading })] }), actions && actions] }));
+    return (_jsxs(Wrapper, { className: pageContentHeaderClassnames.pageContentHeader, children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { className: pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
 };

package/components/PageContent/PageContentHeader/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageContentHeaderClassnames: {
+    pageContentHeader: string;
+    description: string;
+};

package/components/PageContent/PageContentHeader/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const pageContentHeaderClassnames = {
+    pageContentHeader: createUIKitClassname('page-content-header'),
+    description: createUIKitClassname('page-content-header__description'),
+};

package/components/PageContent/PageContentHeader/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../../styled';
+import { pageContentHeaderClassnames } from './constants';
 export const Wrapper = styled.header `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -23,4 +24,10 @@ export const TitleBlock = styled.div `
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${pageContentHeaderClassnames.description} {
+      display: none;
+    }
+  }
 `;

package/components/ThemeProvider/ThemeProvider.d.ts

@@ -15,4 +15,10 @@ export type ThemeProviderProps = {
      */
     withScopedStyles?: boolean;
 };
+/**
+ * Содержит:
+ * - Provider для доступа к theme
+ * - Установка глобальных стилей
+ * - ErrorBoundary для отлова ошибок рендера, включая ошибки загрузка js chunk
+ */
 export declare const ThemeProvider: (props: PropsWithChildren<ThemeProviderProps>) => import("react/jsx-runtime").JSX.Element;

package/components/ThemeProvider/ThemeProvider.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ErrorBoundary } from '../ErrorBoundary';
 import { GlobalStyles } from '../GlobalStyles';
+/**
+ * Содержит:
+ * - Provider для доступа к theme
+ * - Установка глобальных стилей
+ * - ErrorBoundary для отлова ошибок рендера, включая ошибки загрузка js chunk
+ */
 export const ThemeProvider = (props) => {
     const { children, theme, withScopedStyles = false } = props;
-    return (_jsx(MuiThemeProvider, { theme: theme, children: _jsx(EmotionThemeProvider, { theme: theme, children: _jsx(GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }));
+    return (_jsx(ErrorBoundary, { children: _jsx(MuiThemeProvider, { theme: theme, children: _jsx(EmotionThemeProvider, { theme: theme, children: _jsx(GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }) }));
 };

package/node/components/PageContent/PageContentHeader/Description/Description.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 type DescriptionProps = {
     description?: ReactNode;
     isLoading?: boolean;
+    className?: string;
 };
-export declare const Description: ({ description, isLoading }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Description: ({ className, description, isLoading, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/PageContent/PageContentHeader/Description/Description.js

@@ -4,13 +4,13 @@ exports.Description = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../../Skeleton");
 const Typography_1 = require("../../../Typography");
-const Description = ({ description, isLoading }) => {
+const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 300 });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 20, width: 300 });
     }
     if (typeof description === 'string') {
-        return (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", children: description });
+        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, variant: "body1", children: description }));
     }
-    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "div", variant: "body1", children: description }));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, component: "div", variant: "body1", children: description }));
 };
 exports.Description = Description;

package/node/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
 const Description_1 = require("./Description");
 const styles_1 = require("./styles");
 const Title_1 = require("./Title");
 const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading })] }), actions && actions] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
 };
 exports.PageContentHeader = PageContentHeader;

package/node/components/PageContent/PageContentHeader/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageContentHeaderClassnames: {
+    pageContentHeader: string;
+    description: string;
+};

package/node/components/PageContent/PageContentHeader/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageContentHeaderClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.pageContentHeaderClassnames = {
+    pageContentHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-content-header'),
+    description: (0, createUIKitClassname_1.createUIKitClassname)('page-content-header__description'),
+};

package/node/components/PageContent/PageContentHeader/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TitleBlock = exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.header `
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -26,4 +27,10 @@ exports.TitleBlock = styled_1.styled.div `
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${constants_1.pageContentHeaderClassnames.description} {
+      display: none;
+    }
+  }
 `;

package/node/components/ThemeProvider/ThemeProvider.d.ts

@@ -15,4 +15,10 @@ export type ThemeProviderProps = {
      */
     withScopedStyles?: boolean;
 };
+/**
+ * Содержит:
+ * - Provider для доступа к theme
+ * - Установка глобальных стилей
+ * - ErrorBoundary для отлова ошибок рендера, включая ошибки загрузка js chunk
+ */
 export declare const ThemeProvider: (props: PropsWithChildren<ThemeProviderProps>) => import("react/jsx-runtime").JSX.Element;

package/node/components/ThemeProvider/ThemeProvider.js

@@ -4,9 +4,16 @@ exports.ThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const styles_1 = require("@mui/material/styles");
+const ErrorBoundary_1 = require("../ErrorBoundary");
 const GlobalStyles_1 = require("../GlobalStyles");
+/**
+ * Содержит:
+ * - Provider для доступа к theme
+ * - Установка глобальных стилей
+ * - ErrorBoundary для отлова ошибок рендера, включая ошибки загрузка js chunk
+ */
 const ThemeProvider = (props) => {
     const { children, theme, withScopedStyles = false } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { withScopedStyles: withScopedStyles, children: children }) }) }) }));
 };
 exports.ThemeProvider = ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.71.3",
+  "version": "4.72.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/ErrorBoundary/ErrorBoundary.stubs.d.ts

@@ -1,12 +0,0 @@
-/**
- * Кнопка для вызова ошибки type = Default
- */
-export declare const BuggyButton: () => import("react/jsx-runtime").JSX.Element;
-/**
- * Кнопка для вызова ошибки чанков ErrorChunkError c type = OutdatedRelease
- */
-export declare const ChunkLoadErrorButton: () => import("react/jsx-runtime").JSX.Element;
-/**
- * Кнопка для вызова ошибки чанков Failed to fetch dynamically imported module c type = OutdatedRelease
- */
-export declare const FailedFetchModuleButton: () => import("react/jsx-runtime").JSX.Element;

package/components/ErrorBoundary/ErrorBoundary.stubs.js

@@ -1,50 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '../Button';
-/**
- * Кастомная ошибка подгрузки чанков при релизах
- */
-class OutdatedReleaseError extends Error {
-    constructor(message = '') {
-        super(message);
-        this.name = 'ChunkLoadError';
-    }
-}
-/**
- * Компонент, который выбрасывает ошибку при рендере
- */
-const ThrowError = ({ error, children, }) => {
-    throw error;
-    // biome-ignore lint/correctness/noUnreachable: Необходимо для теста
-    return _jsx(_Fragment, { children: children });
-};
-/**
- * Кнопка для вызова ошибки type = Default
- */
-export const BuggyButton = () => {
-    const [count, setCount] = useState(0);
-    const onClick = () => {
-        setCount(count + 1);
-    };
-    return (_jsxs(_Fragment, { children: [count === 2 && (_jsx(ThrowError, { error: new Error('Кнопка сломалась на 2 клике') })), _jsx(Button, { onClick: onClick, children: "\u0421\u043B\u043E\u043C\u0430\u044E\u0441\u044C \u043D\u0430 2 \u043A\u043B\u0438\u043A\u0435" })] }));
-};
-/**
- * Кнопка для вызова ошибки чанков ErrorChunkError c type = OutdatedRelease
- */
-export const ChunkLoadErrorButton = () => {
-    const [isClicked, setIsClicked] = useState(false);
-    const onClick = () => {
-        setIsClicked(true);
-    };
-    return (_jsxs(_Fragment, { children: [isClicked && (_jsx(ThrowError, { error: new OutdatedReleaseError('Ошибка загрузки приложения') })), _jsx(Button, { onClick: onClick, children: "\u0412\u044B\u0437\u043E\u0432\u0443 \u043E\u0448\u0438\u0431\u043A\u0443 \u0440\u0435\u043B\u0438\u0437\u0430" })] }));
-};
-/**
- * Кнопка для вызова ошибки чанков Failed to fetch dynamically imported module c type = OutdatedRelease
- */
-export const FailedFetchModuleButton = () => {
-    const [isClicked, setIsClicked] = useState(false);
-    const onClick = () => {
-        setIsClicked(true);
-    };
-    return (_jsxs(_Fragment, { children: [isClicked && (_jsx(ThrowError, { error: new Error('Failed to fetch dynamically imported module') })), _jsx(Button, { onClick: onClick, children: "\u0412\u044B\u0437\u043E\u0432\u0443 \u043E\u0448\u0438\u0431\u043A\u0443 \u0440\u0435\u043B\u0438\u0437\u0430" })] }));
-};

package/node/components/ErrorBoundary/ErrorBoundary.stubs.d.ts

@@ -1,12 +0,0 @@
-/**
- * Кнопка для вызова ошибки type = Default
- */
-export declare const BuggyButton: () => import("react/jsx-runtime").JSX.Element;
-/**
- * Кнопка для вызова ошибки чанков ErrorChunkError c type = OutdatedRelease
- */
-export declare const ChunkLoadErrorButton: () => import("react/jsx-runtime").JSX.Element;
-/**
- * Кнопка для вызова ошибки чанков Failed to fetch dynamically imported module c type = OutdatedRelease
- */
-export declare const FailedFetchModuleButton: () => import("react/jsx-runtime").JSX.Element;

package/node/components/ErrorBoundary/ErrorBoundary.stubs.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FailedFetchModuleButton = exports.ChunkLoadErrorButton = exports.BuggyButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../Button");
-/**
- * Кастомная ошибка подгрузки чанков при релизах
- */
-class OutdatedReleaseError extends Error {
-    constructor(message = '') {
-        super(message);
-        this.name = 'ChunkLoadError';
-    }
-}
-/**
- * Компонент, который выбрасывает ошибку при рендере
- */
-const ThrowError = ({ error, children, }) => {
-    throw error;
-    // biome-ignore lint/correctness/noUnreachable: Необходимо для теста
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-};
-/**
- * Кнопка для вызова ошибки type = Default
- */
-const BuggyButton = () => {
-    const [count, setCount] = (0, react_1.useState)(0);
-    const onClick = () => {
-        setCount(count + 1);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [count === 2 && ((0, jsx_runtime_1.jsx)(ThrowError, { error: new Error('Кнопка сломалась на 2 клике') })), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "\u0421\u043B\u043E\u043C\u0430\u044E\u0441\u044C \u043D\u0430 2 \u043A\u043B\u0438\u043A\u0435" })] }));
-};
-exports.BuggyButton = BuggyButton;
-/**
- * Кнопка для вызова ошибки чанков ErrorChunkError c type = OutdatedRelease
- */
-const ChunkLoadErrorButton = () => {
-    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
-    const onClick = () => {
-        setIsClicked(true);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isClicked && ((0, jsx_runtime_1.jsx)(ThrowError, { error: new OutdatedReleaseError('Ошибка загрузки приложения') })), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "\u0412\u044B\u0437\u043E\u0432\u0443 \u043E\u0448\u0438\u0431\u043A\u0443 \u0440\u0435\u043B\u0438\u0437\u0430" })] }));
-};
-exports.ChunkLoadErrorButton = ChunkLoadErrorButton;
-/**
- * Кнопка для вызова ошибки чанков Failed to fetch dynamically imported module c type = OutdatedRelease
- */
-const FailedFetchModuleButton = () => {
-    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
-    const onClick = () => {
-        setIsClicked(true);
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isClicked && ((0, jsx_runtime_1.jsx)(ThrowError, { error: new Error('Failed to fetch dynamically imported module') })), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "\u0412\u044B\u0437\u043E\u0432\u0443 \u043E\u0448\u0438\u0431\u043A\u0443 \u0440\u0435\u043B\u0438\u0437\u0430" })] }));
-};
-exports.FailedFetchModuleButton = FailedFetchModuleButton;