@astral/ui 4.52.1 → 4.53.1

package/components/DashboardContext/DashboardContext.d.ts

@@ -1,7 +1,6 @@
 import { type RefObject } from 'react';
-export type DashboardContextProps = {
-    isFocusedMode: boolean;
-    mobileHeaderPriorityFeature: 'profile' | 'menuOrg';
+import { type DashboardLayoutProps } from '../DashboardLayout';
+export type DashboardContextProps = Required<Pick<DashboardLayoutProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature' | 'desktopViewMode'>> & {
     setAlertElement?: (element: HTMLElement | null) => void;
     alertHeight: number;
     isLoading: boolean;

package/components/DashboardContext/DashboardContext.js

@@ -2,6 +2,7 @@ import { createContext, createRef } from 'react';
 export const DashboardContext = createContext({
     isFocusedMode: false,
     mobileHeaderPriorityFeature: 'menuOrg',
+    desktopViewMode: 'compact',
     alertHeight: 0,
     isLoading: false,
     hasMenuOrganizationRef: createRef(),

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type DashboardContextProps } from '../DashboardContext';
-type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature'> & {
+type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature' | 'desktopViewMode'> & {
     children: ReactNode;
     isLoading: boolean;
 };
-export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { DashboardContext, } from '../DashboardContext';
-export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }) => {
+export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }) => {
     const [alertElement, setAlertElement] = useState(null);
     const [alertHeight, setAlertHeight] = useState(0);
     const [isFocusedModeInternal, setFocusedMode] = useState(isFocusedMode);
@@ -29,6 +29,7 @@ export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, m
     return (_jsx(DashboardContext.Provider, { value: {
             isFocusedMode: isFocusedModeInternal,
             mobileHeaderPriorityFeature,
+            desktopViewMode,
             setAlertElement,
             alertHeight,
             isLoading,

package/components/DashboardLayout/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+};
+export declare const Container: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/DashboardLayout/Container/Container.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DashboardContext } from '../../DashboardContext';
+import { cva } from '../../utils/cva';
+import { containerClassnames } from './constants';
+import { Root } from './styles';
+const rootCva = cva(containerClassnames.root, {
+    variants: {
+        desktopViewMode: {
+            compact: containerClassnames.compact,
+            wide: containerClassnames.wide,
+        },
+        isFocusedMode: {
+            true: containerClassnames.focusedMode,
+        },
+    },
+});
+export const Container = ({ children }) => {
+    const { isFocusedMode, desktopViewMode } = useContext(DashboardContext);
+    return (_jsx(Root, { className: rootCva({
+            desktopViewMode,
+            isFocusedMode,
+        }), children: children }));
+};

package/components/DashboardLayout/Container/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const containerClassnames: {
+    root: string;
+    compact: string;
+    wide: string;
+    focusedMode: string;
+};

package/components/DashboardLayout/Container/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const containerClassnames = {
+    root: createUIKitClassname('dashboard-layout__container'),
+    compact: createUIKitClassname('dashboard-layout__container_view-mode_compact'),
+    wide: createUIKitClassname('dashboard-layout__container_view-mode_wide'),
+    focusedMode: createUIKitClassname('dashboard-layout__container_focused-mode'),
+};

package/components/DashboardLayout/Container/index.d.ts

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

package/components/DashboardLayout/Container/index.js

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

package/components/DashboardLayout/Container/styles.d.ts

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

package/components/DashboardLayout/Container/styles.js

@@ -0,0 +1,55 @@
+import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
+import { styled } from '../../styled';
+import { containerClassnames } from './constants';
+export const Root = styled.div `
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto 1fr;
+  flex-grow: 1;
+
+  height: 100vh;
+  padding: ${({ theme }) => theme.spacing(0, 4, 4)};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['max-width'], {
+        duration: theme.transitions.duration.complex,
+    });
+}};
+
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  &:has(.${dashboardSidebarClassnames.root}) {
+    column-gap: ${({ theme }) => theme.spacing(4)};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      column-gap: 0;
+    }
+  }
+
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    column-gap: 0;
+
+    min-width: unset;
+    max-width: unset;
+    padding: 0;
+  }
+
+  &.${containerClassnames.compact} {
+    max-width: 1572px;
+  }
+
+  &.${containerClassnames.wide} {
+    max-width: 1920px;
+  }
+
+  &.${containerClassnames.focusedMode} {
+    max-width: 100%;
+  }
+`;

package/components/DashboardLayout/DashboardLayout.d.ts

@@ -4,7 +4,7 @@ import { type DashboardLayoutProps } from './types';
  * Общий Layout приложения
  */
 export declare const DashboardLayout: {
-    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Sidebar: import("react").ForwardRefExoticComponent<import("../DashboardSidebar").DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;
     Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/DashboardLayout/DashboardLayout.js

@@ -7,8 +7,8 @@ import { Main } from './Main';
 /**
  * Общий Layout приложения
  */
-export const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', }) => {
-    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: _jsx(DashboardWrapper, { children: children }) }));
+export const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', desktopViewMode = 'compact', }) => {
+    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, desktopViewMode: desktopViewMode, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: _jsx(DashboardWrapper, { children: children }) }));
 };
 DashboardLayout.Header = Header;
 DashboardLayout.Sidebar = DashboardSidebar;

package/components/DashboardLayout/DashboardWrapper/DashboardWrapper.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { DashboardContext } from '../../DashboardContext';
 import { DashboardSidebarProvider } from '../../DashboardSidebarProvider';
+import { Container } from '../Container';
 import { dashboardLayoutClassnames } from '../constants';
-import { DecorativeHeaderBackground, LayoutContent, Wrapper } from './styles';
+import { DecorativeHeaderBackground, Wrapper } from './styles';
 export const DashboardWrapper = ({ children }) => {
     const { isFocusedMode } = useContext(DashboardContext);
-    return (_jsx(DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: _jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), _jsx(LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }));
+    return (_jsx(DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: _jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), _jsx(Container, { children: children })] }) }));
 };

package/components/DashboardLayout/DashboardWrapper/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const dashboardLayoutContainerClassnames: {
+    root: string;
+    compact: string;
+    wide: string;
+    focusedMode: string;
+};

package/components/DashboardLayout/DashboardWrapper/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const dashboardLayoutContainerClassnames = {
+    root: createUIKitClassname('dashboard-layout__container'),
+    compact: createUIKitClassname('dashboard-layout__container_compact'),
+    wide: createUIKitClassname('dashboard-layout__container_wide'),
+    focusedMode: createUIKitClassname('dashboard-layout__container_focused-mode'),
+};

package/components/DashboardLayout/DashboardWrapper/styles.d.ts

@@ -9,9 +9,3 @@ export declare const DecorativeHeaderBackground: import("../../styled").StyledCo
 } & {
     $isFocusedMode: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LayoutContent: import("../../styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $isFocusedMode: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayout/DashboardWrapper/styles.js

@@ -1,4 +1,3 @@
-import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
 import { styled } from '../../styled';
 import { HEADER_HEIGHT_DESKTOP, HEADER_HEIGHT_LAPTOP } from '../constants';
 export const Wrapper = styled('div') `
@@ -36,47 +35,3 @@ export const DecorativeHeaderBackground = styled.div `
     display: none;
   }
 `;
-export const LayoutContent = styled('div', {
-    shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
-}) `
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto 1fr;
-  flex-grow: 1;
-
-  /* Максимальная ширина с отступами */
-  max-width: ${({ $isFocusedMode }) => ($isFocusedMode ? '100%' : '1572px')};
-  height: 100vh;
-  padding: ${({ theme }) => theme.spacing(0, 4, 4)};
-
-  transition: ${({ theme }) => {
-    return theme.transitions.create(['max-width'], {
-        duration: theme.transitions.duration.complex,
-    });
-}};
-
-  /* Причина игнора: Не критично для отображения */
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(.${dashboardSidebarClassnames.root}) {
-    column-gap: ${({ theme }) => theme.spacing(4)};
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      column-gap: 0;
-    }
-  }
-
-  /* Причина игнора: Прогрессивное улучшение */
-  /* stylelint-disable plugin/no-unsupported-browser-features */
-  @supports (height: 100dvh) {
-    height: 100dvh;
-  }
-  /* stylelint-enable plugin/no-unsupported-browser-features */
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    column-gap: 0;
-
-    min-width: unset;
-    max-width: unset;
-    padding: 0;
-  }
-`;

package/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -5,7 +5,7 @@ export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
-    mobileHeaderPriorityFeature: "profile" | "menuOrg";
+    mobileHeaderPriorityFeature: "menuOrg" | "profile";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;

package/components/DashboardLayout/types.d.ts

@@ -15,4 +15,9 @@ export type DashboardLayoutProps = {
      * Второстепенный будет помещен в sidebar.
      */
     mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
+    /**
+     * Compact - ширина layout ограничена 1572px. Необходимо для удобного чтения контента, без лишнего растягивания
+     * Wide - ширина layout ограничена 1920px. Применяйте, когда в вашем приложении отображается много табличных данных с большим количеством колонок. Пример - админки
+     */
+    desktopViewMode?: 'wide' | 'compact';
 };

package/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from '../DashboardLayout/Container';
 import { dashboardLayoutClassnames } from '../DashboardLayout/constants';
 import { DashboardLayout } from '../DashboardLayout/DashboardLayout';
-import { DecorativeHeaderBackground, LayoutContent, Wrapper, } from '../DashboardLayout/DashboardWrapper/styles';
+import { DecorativeHeaderBackground, Wrapper, } from '../DashboardLayout/DashboardWrapper/styles';
 import { Header } from '../DashboardLayout/Header';
 import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
 import { MenuOrganizationSkeleton } from '../MenuOrganization';
@@ -11,7 +12,7 @@ import { Content } from './styles';
  * Компонент можно использовать для отображения состояния загрузки дашборда
  */
 export const DashboardLayoutSkeleton = ({ product, productSwitcher, hasSidebar = true, hasProfile = true, hasMenuOrganization = true, }) => {
-    return (_jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), _jsxs(LayoutContent, { "$isFocusedMode": false, children: [hasSidebar && _jsx(DashboardSidebarSkeleton, {}), _jsx(Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => _jsx(MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
+    return (_jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), _jsxs(Container, { children: [hasSidebar && _jsx(DashboardSidebarSkeleton, {}), _jsx(Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => _jsx(MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
                             ? { displayName: '', isLoading: true, menuList: [] }
                             : undefined }), _jsx(DashboardLayout.Main, { children: _jsx(Content, { children: _jsx(LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445" }) }) })] })] }));
 };

package/node/components/DashboardContext/DashboardContext.d.ts

@@ -1,7 +1,6 @@
 import { type RefObject } from 'react';
-export type DashboardContextProps = {
-    isFocusedMode: boolean;
-    mobileHeaderPriorityFeature: 'profile' | 'menuOrg';
+import { type DashboardLayoutProps } from '../DashboardLayout';
+export type DashboardContextProps = Required<Pick<DashboardLayoutProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature' | 'desktopViewMode'>> & {
     setAlertElement?: (element: HTMLElement | null) => void;
     alertHeight: number;
     isLoading: boolean;

package/node/components/DashboardContext/DashboardContext.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 exports.DashboardContext = (0, react_1.createContext)({
     isFocusedMode: false,
     mobileHeaderPriorityFeature: 'menuOrg',
+    desktopViewMode: 'compact',
     alertHeight: 0,
     isLoading: false,
     hasMenuOrganizationRef: (0, react_1.createRef)(),

package/node/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type DashboardContextProps } from '../DashboardContext';
-type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature'> & {
+type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature' | 'desktopViewMode'> & {
     children: ReactNode;
     isLoading: boolean;
 };
-export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -4,7 +4,7 @@ exports.DashboardContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DashboardContext_1 = require("../DashboardContext");
-const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }) => {
+const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }) => {
     const [alertElement, setAlertElement] = (0, react_1.useState)(null);
     const [alertHeight, setAlertHeight] = (0, react_1.useState)(0);
     const [isFocusedModeInternal, setFocusedMode] = (0, react_1.useState)(isFocusedMode);
@@ -32,6 +32,7 @@ const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHe
     return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContext.Provider, { value: {
             isFocusedMode: isFocusedModeInternal,
             mobileHeaderPriorityFeature,
+            desktopViewMode,
             setAlertElement,
             alertHeight,
             isLoading,

package/node/components/DashboardLayout/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+};
+export declare const Container: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/DashboardLayout/Container/Container.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DashboardContext_1 = require("../../DashboardContext");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const rootCva = (0, cva_1.cva)(constants_1.containerClassnames.root, {
+    variants: {
+        desktopViewMode: {
+            compact: constants_1.containerClassnames.compact,
+            wide: constants_1.containerClassnames.wide,
+        },
+        isFocusedMode: {
+            true: constants_1.containerClassnames.focusedMode,
+        },
+    },
+});
+const Container = ({ children }) => {
+    const { isFocusedMode, desktopViewMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    return ((0, jsx_runtime_1.jsx)(styles_1.Root, { className: rootCva({
+            desktopViewMode,
+            isFocusedMode,
+        }), children: children }));
+};
+exports.Container = Container;

package/node/components/DashboardLayout/Container/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const containerClassnames: {
+    root: string;
+    compact: string;
+    wide: string;
+    focusedMode: string;
+};

package/node/components/DashboardLayout/Container/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.containerClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.containerClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container'),
+    compact: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_view-mode_compact'),
+    wide: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_view-mode_wide'),
+    focusedMode: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_focused-mode'),
+};

package/node/components/DashboardLayout/Container/index.d.ts

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

package/node/components/DashboardLayout/Container/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("./Container"), exports);

package/node/components/DashboardLayout/Container/styles.d.ts

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

package/node/components/DashboardLayout/Container/styles.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Root = void 0;
+const constants_1 = require("../../DashboardSidebar/constants");
+const styled_1 = require("../../styled");
+const constants_2 = require("./constants");
+exports.Root = styled_1.styled.div `
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto 1fr;
+  flex-grow: 1;
+
+  height: 100vh;
+  padding: ${({ theme }) => theme.spacing(0, 4, 4)};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['max-width'], {
+        duration: theme.transitions.duration.complex,
+    });
+}};
+
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  &:has(.${constants_1.dashboardSidebarClassnames.root}) {
+    column-gap: ${({ theme }) => theme.spacing(4)};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      column-gap: 0;
+    }
+  }
+
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
+  @supports (height: 100dvh) {
+    height: 100dvh;
+  }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    column-gap: 0;
+
+    min-width: unset;
+    max-width: unset;
+    padding: 0;
+  }
+
+  &.${constants_2.containerClassnames.compact} {
+    max-width: 1572px;
+  }
+
+  &.${constants_2.containerClassnames.wide} {
+    max-width: 1920px;
+  }
+
+  &.${constants_2.containerClassnames.focusedMode} {
+    max-width: 100%;
+  }
+`;

package/node/components/DashboardLayout/DashboardLayout.d.ts

@@ -4,7 +4,7 @@ import { type DashboardLayoutProps } from './types';
  * Общий Layout приложения
  */
 export declare const DashboardLayout: {
-    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, desktopViewMode, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Sidebar: import("react").ForwardRefExoticComponent<import("../DashboardSidebar").DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;
     Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/DashboardLayout/DashboardLayout.js

@@ -10,8 +10,8 @@ const Main_1 = require("./Main");
 /**
  * Общий Layout приложения
  */
-const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', }) => {
-    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: (0, jsx_runtime_1.jsx)(DashboardWrapper_1.DashboardWrapper, { children: children }) }));
+const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', desktopViewMode = 'compact', }) => {
+    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, desktopViewMode: desktopViewMode, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: (0, jsx_runtime_1.jsx)(DashboardWrapper_1.DashboardWrapper, { children: children }) }));
 };
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardLayout.Header = Header_1.Header;

package/node/components/DashboardLayout/DashboardWrapper/DashboardWrapper.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DashboardContext_1 = require("../../DashboardContext");
 const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const Container_1 = require("../Container");
 const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const DashboardWrapper = ({ children }) => {
     const { isFocusedMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
-    return ((0, jsx_runtime_1.jsx)(DashboardSidebarProvider_1.DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), (0, jsx_runtime_1.jsx)(styles_1.LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }));
+    return ((0, jsx_runtime_1.jsx)(DashboardSidebarProvider_1.DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), (0, jsx_runtime_1.jsx)(Container_1.Container, { children: children })] }) }));
 };
 exports.DashboardWrapper = DashboardWrapper;

package/node/components/DashboardLayout/DashboardWrapper/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const dashboardLayoutContainerClassnames: {
+    root: string;
+    compact: string;
+    wide: string;
+    focusedMode: string;
+};

package/node/components/DashboardLayout/DashboardWrapper/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dashboardLayoutContainerClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.dashboardLayoutContainerClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container'),
+    compact: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_compact'),
+    wide: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_wide'),
+    focusedMode: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout__container_focused-mode'),
+};

package/node/components/DashboardLayout/DashboardWrapper/styles.d.ts

@@ -9,9 +9,3 @@ export declare const DecorativeHeaderBackground: import("@emotion/styled/dist/de
 } & {
     $isFocusedMode: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LayoutContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $isFocusedMode: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DashboardLayout/DashboardWrapper/styles.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutContent = exports.DecorativeHeaderBackground = exports.Wrapper = void 0;
-const constants_1 = require("../../DashboardSidebar/constants");
+exports.DecorativeHeaderBackground = exports.Wrapper = void 0;
 const styled_1 = require("../../styled");
-const constants_2 = require("../constants");
+const constants_1 = require("../constants");
 exports.Wrapper = (0, styled_1.styled)('div') `
   display: flex;
   justify-content: center;
@@ -20,7 +19,7 @@ exports.DecorativeHeaderBackground = styled_1.styled.div `
   left: 0;
 
   width: 100%;
-  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT_DESKTOP)};
+  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_1.HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
@@ -32,54 +31,10 @@ exports.DecorativeHeaderBackground = styled_1.styled.div `
 }};
 
  ${({ theme }) => theme.breakpoints.down('laptop')} {
-    height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT_LAPTOP)}
+    height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_1.HEADER_HEIGHT_LAPTOP)}
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
-exports.LayoutContent = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
-}) `
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto 1fr;
-  flex-grow: 1;
-
-  /* Максимальная ширина с отступами */
-  max-width: ${({ $isFocusedMode }) => ($isFocusedMode ? '100%' : '1572px')};
-  height: 100vh;
-  padding: ${({ theme }) => theme.spacing(0, 4, 4)};
-
-  transition: ${({ theme }) => {
-    return theme.transitions.create(['max-width'], {
-        duration: theme.transitions.duration.complex,
-    });
-}};
-
-  /* Причина игнора: Не критично для отображения */
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(.${constants_1.dashboardSidebarClassnames.root}) {
-    column-gap: ${({ theme }) => theme.spacing(4)};
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      column-gap: 0;
-    }
-  }
-
-  /* Причина игнора: Прогрессивное улучшение */
-  /* stylelint-disable plugin/no-unsupported-browser-features */
-  @supports (height: 100dvh) {
-    height: 100dvh;
-  }
-  /* stylelint-enable plugin/no-unsupported-browser-features */
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    column-gap: 0;
-
-    min-width: unset;
-    max-width: unset;
-    padding: 0;
-  }
-`;

package/node/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -5,7 +5,7 @@ export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
-    mobileHeaderPriorityFeature: "profile" | "menuOrg";
+    mobileHeaderPriorityFeature: "menuOrg" | "profile";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;

package/node/components/DashboardLayout/types.d.ts

@@ -15,4 +15,9 @@ export type DashboardLayoutProps = {
      * Второстепенный будет помещен в sidebar.
      */
     mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
+    /**
+     * Compact - ширина layout ограничена 1572px. Необходимо для удобного чтения контента, без лишнего растягивания
+     * Wide - ширина layout ограничена 1920px. Применяйте, когда в вашем приложении отображается много табличных данных с большим количеством колонок. Пример - админки
+     */
+    desktopViewMode?: 'wide' | 'compact';
 };

package/node/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardLayoutSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const Container_1 = require("../DashboardLayout/Container");
 const constants_1 = require("../DashboardLayout/constants");
 const DashboardLayout_1 = require("../DashboardLayout/DashboardLayout");
 const styles_1 = require("../DashboardLayout/DashboardWrapper/styles");
@@ -14,7 +15,7 @@ const styles_2 = require("./styles");
  * Компонент можно использовать для отображения состояния загрузки дашборда
  */
 const DashboardLayoutSkeleton = ({ product, productSwitcher, hasSidebar = true, hasProfile = true, hasMenuOrganization = true, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), (0, jsx_runtime_1.jsxs)(styles_1.LayoutContent, { "$isFocusedMode": false, children: [hasSidebar && (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {}), (0, jsx_runtime_1.jsx)(Header_1.Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => (0, jsx_runtime_1.jsx)(MenuOrganization_1.MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": false }), (0, jsx_runtime_1.jsxs)(Container_1.Container, { children: [hasSidebar && (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {}), (0, jsx_runtime_1.jsx)(Header_1.Header, { productSwitcher: productSwitcher, product: product, menuOrganization: hasMenuOrganization ? () => (0, jsx_runtime_1.jsx)(MenuOrganization_1.MenuOrganizationSkeleton, {}) : undefined, profile: hasProfile
                             ? { displayName: '', isLoading: true, menuList: [] }
                             : undefined }), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Main, { children: (0, jsx_runtime_1.jsx)(styles_2.Content, { children: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445" }) }) })] })] }));
 };

package/package.json

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