@astral/ui 4.17.5 → 4.17.6

package/node/components/PageHeader/hooks/usePageTitle/usePageTitle.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageTitle = void 0;
+const react_1 = require("react");
+const ConfigProvider_1 = require("../../../ConfigProvider");
+const utils_1 = require("../../../utils");
+const usePageTitle = ({ shouldUpdateDocumentTitle, title, htmlTitle, }) => {
+    const prevTitleRef = (0, react_1.useRef)(null);
+    const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    (0, react_1.useEffect)(() => {
+        const isDynamicTitle = typeof shouldUpdateDocumentTitle === 'boolean'
+            ? shouldUpdateDocumentTitle
+            : components?.layout?.defaultProps?.shouldUpdateDocumentTitle;
+        if (!isDynamicTitle) {
+            return;
+        }
+        const newTitle = (0, utils_1.getNodeText)(title);
+        if (!newTitle && !htmlTitle) {
+            // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
+            console.warn('@astral/ui:PageHeader: Не получилось определить заголовок страницы. Передайте htmlTitle.');
+            return;
+        }
+        prevTitleRef.current = document.title;
+        document.title = htmlTitle ?? newTitle;
+        return () => {
+            if (prevTitleRef.current !== null) {
+                document.title = prevTitleRef.current;
+            }
+        };
+    }, [
+        shouldUpdateDocumentTitle,
+        title,
+        components?.layout?.defaultProps,
+        htmlTitle,
+    ]);
+};
+exports.usePageTitle = usePageTitle;

package/node/components/PageHeader/public.d.ts

@@ -0,0 +1,4 @@
+export { pageHeaderClassnames } from './constants';
+export { PageActionSkeleton, PageActions, type PageActionsProps, } from './PageActions';
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './types';

package/node/components/PageHeader/public.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = exports.PageActions = exports.PageActionSkeleton = exports.pageHeaderClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageHeaderClassnames", { enumerable: true, get: function () { return constants_1.pageHeaderClassnames; } });
+var PageActions_1 = require("./PageActions");
+Object.defineProperty(exports, "PageActionSkeleton", { enumerable: true, get: function () { return PageActions_1.PageActionSkeleton; } });
+Object.defineProperty(exports, "PageActions", { enumerable: true, get: function () { return PageActions_1.PageActions; } });
+var PageHeader_1 = require("./PageHeader");
+Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return PageHeader_1.PageHeader; } });

package/node/components/PageHeader/styles.d.ts

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

package/node/components/PageHeader/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileTitleWrapper = exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+const constants_1 = require("./constants");
+exports.Wrapper = styled_1.styled.header `
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  grid-template-columns: min-content 1fr auto;
+  grid-template-rows: repeat(4, auto);
+  order: 2;
+
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+    padding: unset;
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+  }
+`;
+exports.MobileTitleWrapper = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    top: 0;
+    
+    align-items: center;
+    order: 1;
+    
+    background-color: ${({ theme }) => theme.palette.background.default};
+    
+    &.${constants_1.pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${constants_1.pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
+  }
+`;

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

@@ -0,0 +1,80 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+import type { ButtonProps } from '../Button';
+import type { Theme } from '../theme';
+import type { PageActionsProps } from './PageActions';
+export type PageHeaderProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = {
+    /**
+     * Заголовок страницы
+     * @example <PageHeader title="Заголовок страницы" />
+     */
+    title?: ReactNode;
+    /**
+     * Описание страницы
+     * @example <PageHeader description="Описание страницы" />
+     */
+    description?: ReactNode;
+    /**
+     * Набор компонент, отображаемый в нижней части блока
+     * @example <PageHeader subheader={<TextField placeholder="Поиск на
+     *   странице..." size="small" />} />
+     */
+    subheader?: ReactNode;
+    /**
+     * Хлебные крошки
+     * @example <PageHeader breadcrumbs={
+     * <Breadcrumbs>
+     *   <Link>Первая ссылка</Link>,
+     *   <Link>Вторая ссылка</Link>,
+     *   <>Текст</>
+     * </Breadcrumbs>
+     * } />
+     */
+    breadcrumbs?: ReactNode;
+    /**
+     * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
+     * через secondary
+     * @example <PageHeader actions={{
+     *  main: [
+     *    {
+     *      text: 'Основное действие',
+     *    },
+     *  ],
+     *  secondary: [
+     *    {
+     *      text: 'Вспомогательное действие',
+     *    },
+     *  ]
+     * }} />
+     */
+    actions?: PageActionsProps<TMainActionComponent, TSecondaryActionComponent>;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Флаг загрузки данных
+     */
+    isLoading?: boolean;
+    /**
+     * Динамическое изменение html title в зависимости от title страницы
+     */
+    shouldUpdateDocumentTitle?: boolean;
+    /**
+     * HTML-заголовок страницы.
+     * Если задан, будет использован как заголовок вкладки браузера.
+     */
+    htmlTitle?: string;
+    /**
+     * Кнопка возврата на предыдущий экран
+     * @example
+     * <PageHeader
+     *  backButton={{
+     *    onClick: () => {},
+     *  }}
+     * />
+     */
+    backButton?: Omit<ButtonProps, 'children' | 'variant'> & {
+        component?: TBackButtonComponent;
+        theme?: Theme | undefined;
+    } & ComponentProps<ElementType extends TBackButtonComponent ? 'button' : TBackButtonComponent>;
+};

package/node/components/PageHeader/useLogic/useLogic.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const PageContext_1 = require("../../PageContext");
+const utils_1 = require("../../utils");
+const constants_1 = require("../constants");
+const hooks_1 = require("../hooks");
+const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
+    //Переопределение Html title на title из параметров
+    (0, hooks_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
+    const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const isShowMobileActions = actions && !mobileTitleActions;
+    const mobileClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
+        [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageLayout/PageLayout.d.ts

@@ -1,8 +1,8 @@
 import { type ElementType, type ReactNode } from 'react';
-import { type PageAsideProps } from './PageAside';
-import { type PageContentProps } from './PageContent';
-import { type PageHeaderProps } from './PageHeader';
-import { type PageLayoutFooterProps } from './PageLayoutFooter';
+import { type PageAsideProps } from '../PageAside';
+import { type PageContentProps } from '../PageContent';
+import { type PageHeaderProps } from '../PageHeader';
+import { type PageLayoutFooterProps } from '../PageLayoutFooter';
 export type PageLayoutProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = {
     /**
      * Конфигурация PageHeader

package/node/components/PageLayout/PageLayout.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const PageAside_1 = require("../PageAside");
+const PageContent_1 = require("../PageContent");
+const PageContext_1 = require("../PageContext");
+const PageHeader_1 = require("../PageHeader");
+const PageLayoutContainer_1 = require("../PageLayoutContainer");
 const placeholders_1 = require("../placeholders");
-const PageAside_1 = require("./PageAside");
-const PageContent_1 = require("./PageContent");
-const PageContext_1 = require("./PageContext");
-const PageHeader_1 = require("./PageHeader");
-const PageLayoutContainer_1 = require("./PageLayoutContainer");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PageLayout = (props) => {

package/node/components/PageLayout/index.d.ts

@@ -1,11 +1 @@
-export { PageAlert, type PageAlertProps } from './PageAlert';
-export { PageAside, type PageAsideProps } from './PageAside';
-export { PageAsideBlock, type PageAsideBlockProps } from './PageAsideBlock';
-export { PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, pageContentClassnames, type PageContentProps, } from './PageContent';
-export { PageContext, type PageContextProps, PageContextProvider, } from './PageContext';
-export { PageActionSkeleton, PageActions, type PageActionsProps, PageHeader, type PageHeaderProps, pageHeaderClassnames, } from './PageHeader';
 export { PageLayout, type PageLayoutProps } from './PageLayout';
-export { PageLayoutContainer, type PageLayoutContainerProps, } from './PageLayoutContainer';
-export { PageLayoutFooter, type PageLayoutFooterProps, } from './PageLayoutFooter';
-export { PageLayoutLoader } from './PageLayoutLoader';
-export { PagePinnableAside, type PagePinnableAsideProps, } from './PagePinnableAside';

package/node/components/PageLayout/index.js

@@ -1,32 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.pageHeaderClassnames = exports.PageHeader = exports.PageActions = exports.PageActionSkeleton = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = void 0;
-var PageAlert_1 = require("./PageAlert");
-Object.defineProperty(exports, "PageAlert", { enumerable: true, get: function () { return PageAlert_1.PageAlert; } });
-var PageAside_1 = require("./PageAside");
-Object.defineProperty(exports, "PageAside", { enumerable: true, get: function () { return PageAside_1.PageAside; } });
-var PageAsideBlock_1 = require("./PageAsideBlock");
-Object.defineProperty(exports, "PageAsideBlock", { enumerable: true, get: function () { return PageAsideBlock_1.PageAsideBlock; } });
-var PageContent_1 = require("./PageContent");
-Object.defineProperty(exports, "PageContent", { enumerable: true, get: function () { return PageContent_1.PageContent; } });
-Object.defineProperty(exports, "PageContentHeader", { enumerable: true, get: function () { return PageContent_1.PageContentHeader; } });
-Object.defineProperty(exports, "PageContentHeaderActions", { enumerable: true, get: function () { return PageContent_1.PageContentHeaderActions; } });
-Object.defineProperty(exports, "pageContentClassnames", { enumerable: true, get: function () { return PageContent_1.pageContentClassnames; } });
-var PageContext_1 = require("./PageContext");
-Object.defineProperty(exports, "PageContext", { enumerable: true, get: function () { return PageContext_1.PageContext; } });
-Object.defineProperty(exports, "PageContextProvider", { enumerable: true, get: function () { return PageContext_1.PageContextProvider; } });
-var PageHeader_1 = require("./PageHeader");
-Object.defineProperty(exports, "PageActionSkeleton", { enumerable: true, get: function () { return PageHeader_1.PageActionSkeleton; } });
-Object.defineProperty(exports, "PageActions", { enumerable: true, get: function () { return PageHeader_1.PageActions; } });
-Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return PageHeader_1.PageHeader; } });
-Object.defineProperty(exports, "pageHeaderClassnames", { enumerable: true, get: function () { return PageHeader_1.pageHeaderClassnames; } });
+exports.PageLayout = void 0;
 var PageLayout_1 = require("./PageLayout");
 Object.defineProperty(exports, "PageLayout", { enumerable: true, get: function () { return PageLayout_1.PageLayout; } });
-var PageLayoutContainer_1 = require("./PageLayoutContainer");
-Object.defineProperty(exports, "PageLayoutContainer", { enumerable: true, get: function () { return PageLayoutContainer_1.PageLayoutContainer; } });
-var PageLayoutFooter_1 = require("./PageLayoutFooter");
-Object.defineProperty(exports, "PageLayoutFooter", { enumerable: true, get: function () { return PageLayoutFooter_1.PageLayoutFooter; } });
-var PageLayoutLoader_1 = require("./PageLayoutLoader");
-Object.defineProperty(exports, "PageLayoutLoader", { enumerable: true, get: function () { return PageLayoutLoader_1.PageLayoutLoader; } });
-var PagePinnableAside_1 = require("./PagePinnableAside");
-Object.defineProperty(exports, "PagePinnableAside", { enumerable: true, get: function () { return PagePinnableAside_1.PagePinnableAside; } });

package/node/components/PageLayout/public.d.ts

@@ -1,11 +1 @@
-export { PageAlert, type PageAlertProps } from './PageAlert';
-export { PageAside, type PageAsideProps } from './PageAside';
-export { PageAsideBlock, type PageAsideBlockProps } from './PageAsideBlock';
-export { PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, type PageContentProps, pageContentClassnames, } from './PageContent';
-export { PageContext, type PageContextProps, PageContextProvider, } from './PageContext';
-export { PageActionSkeleton, PageActions, type PageActionsProps, PageHeader, type PageHeaderProps, pageHeaderClassnames, } from './PageHeader';
 export { PageLayout, type PageLayoutProps } from './PageLayout';
-export { PageLayoutContainer, type PageLayoutContainerProps, } from './PageLayoutContainer';
-export { PageLayoutFooter, type PageLayoutFooterProps, } from './PageLayoutFooter';
-export { PageLayoutLoader } from './PageLayoutLoader';
-export { PagePinnableAside, type PagePinnableAsideProps, } from './PagePinnableAside';

package/node/components/PageLayout/public.js

@@ -1,32 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.pageHeaderClassnames = exports.PageHeader = exports.PageActions = exports.PageActionSkeleton = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = void 0;
-var PageAlert_1 = require("./PageAlert");
-Object.defineProperty(exports, "PageAlert", { enumerable: true, get: function () { return PageAlert_1.PageAlert; } });
-var PageAside_1 = require("./PageAside");
-Object.defineProperty(exports, "PageAside", { enumerable: true, get: function () { return PageAside_1.PageAside; } });
-var PageAsideBlock_1 = require("./PageAsideBlock");
-Object.defineProperty(exports, "PageAsideBlock", { enumerable: true, get: function () { return PageAsideBlock_1.PageAsideBlock; } });
-var PageContent_1 = require("./PageContent");
-Object.defineProperty(exports, "PageContent", { enumerable: true, get: function () { return PageContent_1.PageContent; } });
-Object.defineProperty(exports, "PageContentHeader", { enumerable: true, get: function () { return PageContent_1.PageContentHeader; } });
-Object.defineProperty(exports, "PageContentHeaderActions", { enumerable: true, get: function () { return PageContent_1.PageContentHeaderActions; } });
-Object.defineProperty(exports, "pageContentClassnames", { enumerable: true, get: function () { return PageContent_1.pageContentClassnames; } });
-var PageContext_1 = require("./PageContext");
-Object.defineProperty(exports, "PageContext", { enumerable: true, get: function () { return PageContext_1.PageContext; } });
-Object.defineProperty(exports, "PageContextProvider", { enumerable: true, get: function () { return PageContext_1.PageContextProvider; } });
-var PageHeader_1 = require("./PageHeader");
-Object.defineProperty(exports, "PageActionSkeleton", { enumerable: true, get: function () { return PageHeader_1.PageActionSkeleton; } });
-Object.defineProperty(exports, "PageActions", { enumerable: true, get: function () { return PageHeader_1.PageActions; } });
-Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return PageHeader_1.PageHeader; } });
-Object.defineProperty(exports, "pageHeaderClassnames", { enumerable: true, get: function () { return PageHeader_1.pageHeaderClassnames; } });
+exports.PageLayout = void 0;
 var PageLayout_1 = require("./PageLayout");
 Object.defineProperty(exports, "PageLayout", { enumerable: true, get: function () { return PageLayout_1.PageLayout; } });
-var PageLayoutContainer_1 = require("./PageLayoutContainer");
-Object.defineProperty(exports, "PageLayoutContainer", { enumerable: true, get: function () { return PageLayoutContainer_1.PageLayoutContainer; } });
-var PageLayoutFooter_1 = require("./PageLayoutFooter");
-Object.defineProperty(exports, "PageLayoutFooter", { enumerable: true, get: function () { return PageLayoutFooter_1.PageLayoutFooter; } });
-var PageLayoutLoader_1 = require("./PageLayoutLoader");
-Object.defineProperty(exports, "PageLayoutLoader", { enumerable: true, get: function () { return PageLayoutLoader_1.PageLayoutLoader; } });
-var PagePinnableAside_1 = require("./PagePinnableAside");
-Object.defineProperty(exports, "PagePinnableAside", { enumerable: true, get: function () { return PagePinnableAside_1.PagePinnableAside; } });

package/node/components/PageLayout/styles.d.ts

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

package/node/components/PageLayout/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoaderWrapper = exports.DesktopAlertWrapper = exports.MobileAlertWrapper = void 0;
-const styles_1 = require("../styles");
-exports.MobileAlertWrapper = styles_1.styled.div `
+const styled_1 = require("../styled");
+exports.MobileAlertWrapper = styled_1.styled.div `
   display: none;
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: block;
@@ -10,14 +10,14 @@ exports.MobileAlertWrapper = styles_1.styled.div `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
-exports.DesktopAlertWrapper = styles_1.styled.div `
+exports.DesktopAlertWrapper = styled_1.styled.div `
   display: block;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
-exports.LoaderWrapper = styles_1.styled.div `
+exports.LoaderWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     order: 4;
 

package/node/components/PageLayoutContainer/PageLayoutContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+exports.PageLayoutContainer = (0, react_1.forwardRef)(({ children, className }, forwardedRef) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.StylePaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+});

package/node/components/PageLayoutContainer/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageLayoutClassnames = void 0;
+const utils_1 = require("../utils");
+exports.pageLayoutClassnames = {
+    root: (0, utils_1.createUIKitClassname)('page-layout'),
+};

package/node/components/PageLayoutContainer/public.d.ts

@@ -0,0 +1 @@
+export { PageLayoutContainer, type PageLayoutContainerProps, } from './PageLayoutContainer';

package/node/components/PageLayoutContainer/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutContainer = void 0;
+var PageLayoutContainer_1 = require("./PageLayoutContainer");
+Object.defineProperty(exports, "PageLayoutContainer", { enumerable: true, get: function () { return PageLayoutContainer_1.PageLayoutContainer; } });

package/node/components/PageLayoutContainer/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StylePaper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/PageLayoutContainer/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StylePaper = exports.Wrapper = void 0;
+const Paper_1 = require("../Paper");
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: grid;
+  grid-row-gap: ${({ theme }) => theme.spacing(4)};
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  flex-grow: 1;
+
+  height: 100%;
+  min-height: 0;
+  padding-top: ${({ theme }) => theme.spacing(4)};
+
+  background-color: ${({ theme }) => theme.palette.common.white};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    scroll-behavior: smooth;
+
+    overflow: hidden auto;
+    display: flex;
+    grid-row-gap: 0;
+    flex-direction: column;
+
+    margin-bottom: 0;
+    padding-top: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.body};
+    border: unset;
+  }
+`;
+exports.StylePaper = (0, styled_1.styled)(Paper_1.Paper) `
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+  }
+`;

package/node/components/PageLayoutFooter/public.d.ts

@@ -0,0 +1 @@
+export { PageLayoutFooter, type PageLayoutFooterProps, } from './PageLayoutFooter';

package/node/components/PageLayoutFooter/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutFooter = void 0;
+var PageLayoutFooter_1 = require("./PageLayoutFooter");
+Object.defineProperty(exports, "PageLayoutFooter", { enumerable: true, get: function () { return PageLayoutFooter_1.PageLayoutFooter; } });

package/node/components/PageLayoutFooter/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $hasAside: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/node/components/PageLayoutFooter/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.footer `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  align-items: center;
+  justify-content: flex-end;
+
+  min-height: 64px;
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom-right-radius: ${({ theme, $hasAside }) => ($hasAside ? 0 : theme.shape.medium)};
+  border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;

package/node/components/PageLayoutLoader/PageLayoutLoader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const placeholders_1 = require("../placeholders");
+const styles_1 = require("./styles");
+/**
+ * Легковесный компонент для отображения Suspense fallback для lazy import PageLayout
+ */
+const PageLayoutLoader = () => ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(placeholders_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) }));
+exports.PageLayoutLoader = PageLayoutLoader;

package/node/components/PageLayoutLoader/public.d.ts

@@ -0,0 +1 @@
+export { PageLayoutLoader } from './PageLayoutLoader';

package/node/components/PageLayoutLoader/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutLoader = void 0;
+var PageLayoutLoader_1 = require("./PageLayoutLoader");
+Object.defineProperty(exports, "PageLayoutLoader", { enumerable: true, get: function () { return PageLayoutLoader_1.PageLayoutLoader; } });

package/node/components/PageLayoutLoader/styles.d.ts

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

package/node/components/PageLayoutLoader/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.palette.common.white};
+  border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.shape.medium};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    background-color: unset;
+  }
+`;

package/node/components/PagePinnableAside/PagePinnableAside.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePinnableAside = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../../icons");
+const PinButton_1 = require("../PinButton");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Открепляемый aside
+ */
+const PagePinnableAside = ({ children, className, ...restProps }) => {
+    const { isPinned, togglePin } = (0, useLogic_1.useLogic)(restProps);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Aside, { "$isPinned": isPinned, children: [(0, jsx_runtime_1.jsx)(styles_1.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(icons_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { "$isPinned": isPinned, className: (0, utils_1.classNames)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsx)(styles_1.ChildrenWrapper, { children: children }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] }));
+};
+exports.PagePinnableAside = PagePinnableAside;

package/node/components/PagePinnableAside/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASIDE_LOCAL_STORAGE_KEY = exports.pinnableAsideClassnames = void 0;
+const utils_1 = require("../utils");
+exports.pinnableAsideClassnames = {
+    content: (0, utils_1.createUIKitClassname)('pinnable-aside__content'),
+};
+exports.ASIDE_LOCAL_STORAGE_KEY = (0, utils_1.generateLocalStorageKey)('Aside', 'isPinned');

package/node/components/PagePinnableAside/public.d.ts

@@ -0,0 +1,2 @@
+export { PagePinnableAside } from './PagePinnableAside';
+export type { PagePinnableAsideProps } from './types';

package/node/components/PagePinnableAside/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePinnableAside = void 0;
+var PagePinnableAside_1 = require("./PagePinnableAside");
+Object.defineProperty(exports, "PagePinnableAside", { enumerable: true, get: function () { return PagePinnableAside_1.PagePinnableAside; } });