@astral/ui 4.17.4 → 4.17.6

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare const TitleWrapper: import("../../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../../Typography").TypographyColor | undefined;
+    variant?: import("../../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $hasDescription?: boolean | undefined;
+    $hasBreadcrumbs?: boolean | undefined;
+}, {}, {}>;
+export declare const BackButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSkeleton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
+    component?: import("react").ElementType | undefined;
+    variant?: "text" | "rounded" | "circular" | undefined;
+    shapeSize?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageHeader/Title/styles.js

@@ -0,0 +1,52 @@
+import { IconButton } from '../../IconButton';
+import { Skeleton } from '../../Skeleton';
+import { styled } from '../../styled';
+import { Typography } from '../../Typography';
+const getGridRow = (hasDescription, hasBreadcrumbs) => {
+    if (!hasDescription && !hasBreadcrumbs) {
+        return '1 / 4';
+    }
+    if (!hasDescription) {
+        return '2 / 4';
+    }
+    if (!hasBreadcrumbs) {
+        return '1 / 3';
+    }
+    return '2';
+};
+export const TitleWrapper = styled(Typography, {
+    shouldForwardProp: (prop) => !['$hasDescription', '$hasBreadcrumbs'].includes(prop),
+}) `
+  overflow: hidden;
+  grid-column: 2;
+  grid-row: ${({ $hasDescription, $hasBreadcrumbs }) => getGridRow($hasDescription, $hasBreadcrumbs)};
+  align-self: center;
+
+  margin-right: ${({ theme }) => theme.spacing(3)};
+
+  line-height: ${({ theme }) => theme.typography.h2.lineHeight};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    font-size: ${({ theme }) => theme.typography.h5.fontSize};
+    line-height: ${({ theme }) => theme.typography.h5.lineHeight};
+    white-space: nowrap;
+  }
+`;
+export const BackButton = styled(IconButton) `
+  grid-column: 1;
+  grid-row: 1 / 4;
+
+  margin-right: ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-right: ${({ theme }) => theme.spacing(1)};
+    
+    border: unset;
+  }
+`;
+export const StyledSkeleton = styled(Skeleton) `
+  grid-column: 2;
+  grid-row: 2;
+
+  margin: ${({ theme }) => theme.spacing(1, 0)};
+`;

package/components/PageHeader/constants.js

@@ -0,0 +1,8 @@
+import { createUIKitClassname } from '../utils';
+export const pageHeaderClassnames = {
+    pageHeaderMobileTitle: createUIKitClassname('page-header__mobile-title'),
+    pageHeaderActions: createUIKitClassname('page-header__actions'),
+    hasBackButton: createUIKitClassname('page-header_has-back-button'),
+    hasTitle: createUIKitClassname('page-header_has-title'),
+};
+export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

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

@@ -0,0 +1,33 @@
+import { useContext, useEffect, useRef } from 'react';
+import { ConfigContext } from '../../../ConfigProvider';
+import { getNodeText } from '../../../utils';
+export const usePageTitle = ({ shouldUpdateDocumentTitle, title, htmlTitle, }) => {
+    const prevTitleRef = useRef(null);
+    const { components } = useContext(ConfigContext);
+    useEffect(() => {
+        const isDynamicTitle = typeof shouldUpdateDocumentTitle === 'boolean'
+            ? shouldUpdateDocumentTitle
+            : components?.layout?.defaultProps?.shouldUpdateDocumentTitle;
+        if (!isDynamicTitle) {
+            return;
+        }
+        const newTitle = 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,
+    ]);
+};

package/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/components/PageHeader/public.js

@@ -0,0 +1,3 @@
+export { pageHeaderClassnames } from './constants';
+export { PageActionSkeleton, PageActions, } from './PageActions';
+export { PageHeader } from './PageHeader';

package/components/PageHeader/styles.d.ts

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

package/components/PageHeader/styles.js

@@ -0,0 +1,47 @@
+import { styled } from '../styled';
+import { PAGE_HEADER_HEIGHT_MOBILE, pageHeaderClassnames } from './constants';
+export const Wrapper = 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};
+  }
+`;
+export const MobileTitleWrapper = 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};
+    
+    &.${pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
+  }
+`;

package/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/components/PageHeader/useLogic/useLogic.js

@@ -0,0 +1,21 @@
+import { useContext, useMemo } from 'react';
+import { PageContext } from '../../PageContext';
+import { classNames } from '../../utils';
+import { pageHeaderClassnames } from '../constants';
+import { usePageTitle } from '../hooks';
+export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
+    //Переопределение Html title на title из параметров
+    usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
+    const { mobileTitleActions, isLoading } = useContext(PageContext);
+    const isShowMobileActions = actions && !mobileTitleActions;
+    const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
+        [pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
+};

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
+import { PageAside } from '../PageAside';
+import { PageContent } from '../PageContent';
+import { PageContextProvider } from '../PageContext';
+import { PageHeader } from '../PageHeader';
+import { PageLayoutContainer } from '../PageLayoutContainer';
 import { LoadingPlaceholder } from '../placeholders';
-import { PageAside } from './PageAside';
-import { PageContent } from './PageContent';
-import { PageContextProvider } from './PageContext';
-import { PageHeader } from './PageHeader';
-import { PageLayoutContainer } from './PageLayoutContainer';
 import { DesktopAlertWrapper, LoaderWrapper, MobileAlertWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const PageLayout = (props) => {

package/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/components/PageLayout/index.js

@@ -1,11 +1 @@
-export { PageAlert } from './PageAlert';
-export { PageAside } from './PageAside';
-export { PageAsideBlock } from './PageAsideBlock';
-export { PageContent, PageContentHeader, PageContentHeaderActions, pageContentClassnames, } from './PageContent';
-export { PageContext, PageContextProvider, } from './PageContext';
-export { PageActionSkeleton, PageActions, PageHeader, pageHeaderClassnames, } from './PageHeader';
 export { PageLayout } from './PageLayout';
-export { PageLayoutContainer, } from './PageLayoutContainer';
-export { PageLayoutFooter, } from './PageLayoutFooter';
-export { PageLayoutLoader } from './PageLayoutLoader';
-export { PagePinnableAside, } from './PagePinnableAside';

package/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/components/PageLayout/public.js

@@ -1,11 +1 @@
-export { PageAlert } from './PageAlert';
-export { PageAside } from './PageAside';
-export { PageAsideBlock } from './PageAsideBlock';
-export { PageContent, PageContentHeader, PageContentHeaderActions, pageContentClassnames, } from './PageContent';
-export { PageContext, PageContextProvider, } from './PageContext';
-export { PageActionSkeleton, PageActions, PageHeader, pageHeaderClassnames, } from './PageHeader';
 export { PageLayout } from './PageLayout';
-export { PageLayoutContainer, } from './PageLayoutContainer';
-export { PageLayoutFooter, } from './PageLayoutFooter';
-export { PageLayoutLoader } from './PageLayoutLoader';
-export { PagePinnableAside, } from './PagePinnableAside';

package/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("../styled").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("../styled").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("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../styles';
+import { styled } from '../styled';
 export const MobileAlertWrapper = styled.div `
   display: none;
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/PageLayoutContainer/PageLayoutContainer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../utils';
+import { pageLayoutClassnames } from './constants';
+import { StylePaper, Wrapper } from './styles';
+export const PageLayoutContainer = forwardRef(({ children, className }, forwardedRef) => {
+    return (_jsx(StylePaper, { variant: "outlined", children: _jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+});

package/components/PageLayoutContainer/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils';
+export const pageLayoutClassnames = {
+    root: createUIKitClassname('page-layout'),
+};

package/components/PageLayoutContainer/public.d.ts

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

package/components/PageLayoutContainer/public.js

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

package/components/PageLayoutContainer/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../styled").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("../styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageLayoutContainer/styles.js

@@ -0,0 +1,37 @@
+import { Paper } from '../Paper';
+import { styled } from '../styled';
+export const Wrapper = 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;
+  }
+`;
+export const StylePaper = styled(Paper) `
+  height: 100%;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border: unset;
+  }
+`;

package/components/PageLayoutFooter/public.d.ts

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

package/components/PageLayoutFooter/public.js

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

package/components/PageLayoutFooter/styles.d.ts

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

package/components/PageLayoutFooter/styles.js

@@ -0,0 +1,22 @@
+import { styled } from '../styled';
+export const Wrapper = 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/components/PageLayoutLoader/PageLayoutLoader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingPlaceholder } from '../placeholders';
+import { Wrapper } from './styles';
+/**
+ * Легковесный компонент для отображения Suspense fallback для lazy import PageLayout
+ */
+export const PageLayoutLoader = () => (_jsx(Wrapper, { children: _jsx(LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) }));

package/components/PageLayoutLoader/public.d.ts

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

package/components/PageLayoutLoader/public.js

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

package/components/PageLayoutLoader/styles.d.ts

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

package/components/PageLayoutLoader/styles.js

@@ -0,0 +1,12 @@
+import { styled } from '../styled';
+export const Wrapper = 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/components/PagePinnableAside/PagePinnableAside.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuOnOutlineMd } from '../../icons';
+import { PinButton } from '../PinButton';
+import { classNames } from '../utils';
+import { pinnableAsideClassnames } from './constants';
+import { Aside, ChildrenWrapper, Content, Dummy, Footer } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Открепляемый aside
+ */
+export const PagePinnableAside = ({ children, className, ...restProps }) => {
+    const { isPinned, togglePin } = useLogic(restProps);
+    return (_jsxs(Aside, { "$isPinned": isPinned, children: [_jsx(Dummy, { "$isPinned": isPinned, children: _jsx(MenuOnOutlineMd, {}) }), _jsxs(Content, { "$isPinned": isPinned, className: classNames(className, pinnableAsideClassnames.content), children: [_jsx(ChildrenWrapper, { children: children }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] }));
+};

package/components/PagePinnableAside/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname, generateLocalStorageKey } from '../utils';
+export const pinnableAsideClassnames = {
+    content: createUIKitClassname('pinnable-aside__content'),
+};
+export const ASIDE_LOCAL_STORAGE_KEY = generateLocalStorageKey('Aside', 'isPinned');

package/components/PagePinnableAside/public.d.ts

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

package/components/PagePinnableAside/public.js

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

package/components/PagePinnableAside/styles.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const Aside: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const Dummy: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChildrenWrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Footer: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;