@astral/ui 4.71.4 → 4.73.0

package/components/PageAsideNavigation/styles.js

@@ -0,0 +1,48 @@
+import { styled } from '../styled';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(10)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: 100%;
+    padding: ${({ theme }) => theme.spacing(0, 0, 3)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+`;
+export const NavigationList = styled.ul `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+    flex-direction: row;
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+  }
+`;
+export const AddonNavigationWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+`;

package/components/PageAsideNavigation/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type PageAsideNavigationProps = {
+    children?: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Дополнительный контент для навигации
+     */
+    addonNavigation?: ReactNode;
+    /**
+     * Позиционирование дополнительного контента для навигации
+     * @default 'start'
+     */
+    addonNavigationPosition?: 'start' | 'end';
+};

package/components/PageAsideNavigation/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/components/PageContent/PageContentHeader/PageContentHeader.js

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

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

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

package/components/PageContent/PageContentHeader/constants.js

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

package/components/PageContent/PageContentHeader/styles.js

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

package/components/PageHeader/HeaderContent/styles.js

@@ -17,8 +17,6 @@ export const PageSubheader = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
-
-    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 export const DesktopTitleWrapper = styled.div `

package/components/PageHeader/PageHeader.js

@@ -22,6 +22,12 @@ const rootCva = cva(pageHeaderClassnames.root, {
         hasActions: {
             true: pageHeaderClassnames.hasActions,
         },
+        hasSubheader: {
+            true: pageHeaderClassnames.hasSubheader,
+        },
+        hasFilters: {
+            true: pageHeaderClassnames.hasFilters,
+        },
     },
 });
 export const PageHeader = (props) => {
@@ -30,5 +36,9 @@ export const PageHeader = (props) => {
     return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
                     hasBackButton: Boolean(backButton),
-                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(rootCva({ hasActions: Boolean(actions) }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(rootCva({
+                    hasActions: Boolean(actions),
+                    hasSubheader: Boolean(subheader),
+                    hasFilters: Boolean(filters),
+                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/styles.js

@@ -1,3 +1,4 @@
+import { pageAsideClassnames } from '../PageAside/constants';
 import { styled } from '../styled';
 import { PAGE_HEADER_HEIGHT_MOBILE, pageHeaderClassnames } from './constants';
 export const Wrapper = styled.header `
@@ -29,6 +30,10 @@ export const Wrapper = styled.header `
     padding: unset;
 
     background-color: ${({ theme }) => theme.palette.background.default};
+
+    &.${pageHeaderClassnames.hasSubheader}, &.${pageHeaderClassnames.hasFilters} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
   }
 
   .${pageHeaderClassnames.filters} {
@@ -39,10 +44,6 @@ export const Wrapper = styled.header `
       grid-column: 3;
       grid-row: 1 / -1;
     }
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
-    }
   }
 
   .${pageHeaderClassnames.quickFilters} {
@@ -77,7 +78,8 @@ export const MobileTitleWrapper = styled.div `
     /* stylelint-disable plugin/no-unsupported-browser-features */
     &:not(:has(+ .${pageHeaderClassnames.root} :is(
       .${pageHeaderClassnames.filters},
-      .${pageHeaderClassnames.subheader}
+      .${pageHeaderClassnames.subheader},
+      .${pageAsideClassnames.mobileNavigation}
     ))) {
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }

package/components/PagePinnableAside/PagePinnableAside.d.ts

@@ -2,4 +2,4 @@ import type { PagePinnableAsideProps } from './types';
 /**
  * Открепляемый aside
  */
-export declare const PagePinnableAside: ({ children, className, ...restProps }: PagePinnableAsideProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PagePinnableAside: ({ header, children, className, navigation, ...restProps }: PagePinnableAsideProps) => import("react/jsx-runtime").JSX.Element;

package/components/PagePinnableAside/PagePinnableAside.js

@@ -1,14 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
 import { MenuOnOutlineMd } from '../../icons/MenuOnOutlineMd';
+import { MobileAsideButton, pageAsideClassnames } from '../PageAside';
+import { AsideHeader, MobileAsideHeader, MobileAsideNavigation, StyledDivider, } from '../PageAside/styles';
 import { PinButton } from '../PinButton';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { pinnableAsideClassnames } from './constants';
 import { Aside, ChildrenWrapper, Content, Dummy, Footer } from './styles';
 import { useLogic } from './useLogic';
+const asideCva = cva(pinnableAsideClassnames.root, {
+    variants: {
+        withHeader: {
+            true: pinnableAsideClassnames.withHeader,
+        },
+    },
+});
 /**
  * Открепляемый 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 }) })] })] }));
+export const PagePinnableAside = ({ header, children, className, navigation, ...restProps }) => {
+    const { isPinned, togglePin, pageHeaderContainer, isMobileNavigationVisible, } = useLogic({ navigation, ...restProps });
+    return (_jsxs(_Fragment, { children: [isMobileNavigationVisible &&
+                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [_jsx(Dummy, { "$isPinned": isPinned, children: _jsx(MenuOnOutlineMd, {}) }), _jsxs(Content, { "$isPinned": isPinned, className: classNames(className, pinnableAsideClassnames.content), children: [_jsxs(ChildrenWrapper, { children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
 };

package/components/PagePinnableAside/constants.d.ts

@@ -1,4 +1,6 @@
 export declare const pinnableAsideClassnames: {
     content: string;
+    withHeader: string;
+    root: string;
 };
 export declare const ASIDE_LOCAL_STORAGE_KEY: string;

package/components/PagePinnableAside/constants.js

@@ -2,5 +2,7 @@ import { createUIKitClassname } from '../utils/createUIKitClassname';
 import { generateLocalStorageKey } from '../utils/generateLocalStorageKey';
 export const pinnableAsideClassnames = {
     content: createUIKitClassname('pinnable-aside__content'),
+    withHeader: createUIKitClassname('pinnable-aside_with-header'),
+    root: createUIKitClassname('pinnable-aside'),
 };
 export const ASIDE_LOCAL_STORAGE_KEY = generateLocalStorageKey('Aside', 'isPinned');

package/components/PagePinnableAside/styles.js

@@ -1,5 +1,6 @@
 import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
 import { PAGE_ASIDE_WIDTH } from '../PageAside';
+import { pageAsideNavigationClassnames } from '../PageAsideNavigation/constants';
 import { css, styled } from '../styled';
 import { pinnableAsideClassnames } from './constants';
 export const Aside = styled('aside', {
@@ -21,18 +22,14 @@ export const Aside = styled('aside', {
     }
   }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    z-index: 0;
-
-    overflow: unset;
-    order: 3;
-
-    width: ${({ theme }) => `calc(100% - ${theme.spacing(8)})`};
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+  &.${pinnableAsideClassnames.withHeader} {
+    & .${pageAsideNavigationClassnames.root} {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+  }
 
-    background-color: ${({ theme }) => theme.palette.background.default};
-    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
-    border-radius: ${({ theme }) => theme.shape.medium};
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
   }
 `;
 export const Dummy = styled('div', {

package/components/PagePinnableAside/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type PagePinnableAsideProps = {
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Название класса, применяется к корневому компоненту
      */
@@ -27,4 +27,20 @@ export type PagePinnableAsideProps = {
          */
         id: string;
     };
+    /**
+     * Заголовок боковой панели
+     */
+    header?: ReactNode;
+    /**
+     * Компонент для отображения навигации
+     * @example
+     * <PagePinnableAside navigation={
+     *   <PageAsideNavigation>
+     *     <PageAsideNavigationItem>
+     *       Home
+     *     </PageAsideNavigationItem>
+     *   </PageAsideNavigation>}
+     * />
+     */
+    navigation?: ReactNode;
 };

package/components/PagePinnableAside/useLogic/useLogic.d.ts

@@ -1,7 +1,9 @@
 import type { PagePinnableAsideProps } from '../types';
-type UseLogicParams = Pick<PagePinnableAsideProps, 'isPinned' | 'onPin' | 'persistState'>;
-export declare const useLogic: ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }: UseLogicParams) => {
+type UseLogicParams = Pick<PagePinnableAsideProps, 'isPinned' | 'onPin' | 'persistState' | 'navigation'>;
+export declare const useLogic: ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, navigation, }: UseLogicParams) => {
     isPinned: boolean;
     togglePin: () => void;
+    pageHeaderContainer: Element | null;
+    isMobileNavigationVisible: false | "" | 0 | 0n | Element | null | undefined;
 };
 export {};

package/components/PagePinnableAside/useLogic/useLogic.js

@@ -1,7 +1,9 @@
 import { useEffect, useMemo } from 'react';
+import { usePageAside } from '../../PageAside';
 import { useLocalStorage } from '../../useLocalStorage';
 import { ASIDE_LOCAL_STORAGE_KEY } from '../constants';
-export const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) => {
+export const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, navigation, }) => {
+    const { pageHeaderContainer } = usePageAside({ navigation });
     useEffect(() => {
         const hasIsPinned = isPinnedProp !== undefined;
         const hasOnPin = onPinProp !== undefined;
@@ -31,5 +33,11 @@ export const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistStat
         }
         setStoredValue(newValue);
     };
-    return { isPinned, togglePin };
+    const isMobileNavigationVisible = navigation && pageHeaderContainer;
+    return {
+        isPinned,
+        togglePin,
+        pageHeaderContainer,
+        isMobileNavigationVisible,
+    };
 };

package/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useScrollToActiveTab } from './hooks';
+import { useScrollToActiveElement } from '../useScrollToActiveElement';
 import { Container, Divider, StyledTabs, Wrapper } from './styles';
 export const Tabs = ({ ...tabsProps }) => {
-    const { containerRef } = useScrollToActiveTab();
+    const { containerRef } = useScrollToActiveElement();
     return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef }), _jsx(Divider, {})] }) }));
 };

package/components/Tabs/hooks/index.d.ts

@@ -1 +1 @@
-export * from './useScrollToActiveTab';
+export * from '../../useScrollToActiveElement';

package/components/Tabs/hooks/index.js

@@ -1 +1 @@
-export * from './useScrollToActiveTab';
+export * from '../../useScrollToActiveElement';

package/components/useScrollToActiveElement/index.d.ts

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

package/components/useScrollToActiveElement/index.js

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

package/components/useScrollToActiveElement/useScrollToActiveElement.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type UseScrollToActiveElementParams = {
+    behavior?: ScrollBehavior;
+    block?: ScrollLogicalPosition;
+    inline?: ScrollLogicalPosition;
+};
+export declare const useScrollToActiveElement: <T extends HTMLElement = HTMLDivElement>(params?: UseScrollToActiveElementParams) => {
+    containerRef: import("react").RefObject<T | null>;
+};

package/components/useScrollToActiveElement/useScrollToActiveElement.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+import { useViewportType } from '../useViewportType';
+export const useScrollToActiveElement = (params) => {
+    const { behavior = 'smooth', block = 'nearest', inline = 'nearest', } = params || {};
+    const containerRef = useRef(null);
+    const { isMobile } = useViewportType();
+    useEffect(() => {
+        if (!containerRef.current || !isMobile) {
+            return;
+        }
+        const container = containerRef.current;
+        const performScroll = () => {
+            const activeItem = container.querySelector('[aria-selected="true"]');
+            if (activeItem) {
+                activeItem.scrollIntoView({
+                    behavior,
+                    block,
+                    inline,
+                });
+            }
+        };
+        if (document.fonts) {
+            document.fonts.ready.then(() => {
+                performScroll();
+            });
+        }
+    }, []);
+    return { containerRef };
+};

package/node/components/PageAside/MobileAsideButton/MobileAsideButton.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type MobileAsideButtonProps = {
+    content?: ReactNode;
+};
+export declare const MobileAsideButton: ({ content }: MobileAsideButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/node/components/PageAside/MobileAsideButton/MobileAsideButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileAsideButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChevronDOutlineMd_1 = require("../../../icons/ChevronDOutlineMd");
+const useToggle_1 = require("../../useToggle");
+const styles_1 = require("./styles");
+const MobileAsideButton = ({ content }) => {
+    const [isDrawerOpen, handleOpenDrawer, handleCloseDrawer] = (0, useToggle_1.useToggle)({
+        initialState: false,
+    });
+    if (!content) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: "outlined", color: "grey", endIcon: (0, jsx_runtime_1.jsx)(ChevronDOutlineMd_1.ChevronDOutlineMd, {}), onClick: handleOpenDrawer, children: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F" }), (0, jsx_runtime_1.jsx)(styles_1.StyledBottomDrawer, { title: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F", open: isDrawerOpen, onClose: handleCloseDrawer, children: (0, jsx_runtime_1.jsx)(styles_1.DrawerContent, { children: content }) })] }));
+};
+exports.MobileAsideButton = MobileAsideButton;

package/node/components/PageAside/MobileAsideButton/index.d.ts

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

package/node/components/PageAside/MobileAsideButton/index.js

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

package/node/components/PageAside/MobileAsideButton/styles.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DrawerContent: 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>, {}>;
+export declare const StyledBottomDrawer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    drawerHeaderHeight?: number | undefined;
+    headerContent?: import("react").ReactNode;
+} & import("../..").WithoutEmotionSpecific<Omit<import("@mui/material").DrawerProps, "title" | "anchor" | "variant">> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/PageAside/MobileAsideButton/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledBottomDrawer = exports.DrawerContent = exports.StyledButton = void 0;
+const material_1 = require("@mui/material");
+const BottomDrawer_1 = require("../../BottomDrawer");
+const constants_1 = require("../../BottomDrawer/constants");
+const Button_1 = require("../../Button");
+const styled_1 = require("../../styled");
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    order: 3;
+
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+  }
+`;
+exports.DrawerContent = styled_1.styled.div `
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+exports.StyledBottomDrawer = (0, styled_1.styled)(BottomDrawer_1.BottomDrawer) `
+  & .${material_1.paperClasses.root} {
+     height: calc(100vh - ${constants_1.OFFSET_TOP_SCREEN});
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${constants_1.OFFSET_TOP_SCREEN});
+    }
+  }
+`;

package/node/components/PageAside/PageAside.d.ts

@@ -1,9 +1,2 @@
-import { type ReactNode } from 'react';
-export type PageAsideProps = {
-    children: ReactNode;
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-};
-export declare const PageAside: ({ children, className }: PageAsideProps) => import("react/jsx-runtime").JSX.Element;
+import { type PageAsideProps } from './types';
+export declare const PageAside: ({ children, className, header, navigation, }: PageAsideProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/PageAside/PageAside.js

@@ -2,8 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageAside = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+const MobileAsideButton_1 = require("./MobileAsideButton");
 const styles_1 = require("./styles");
-const PageAside = ({ children, className }) => {
-    return (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: children });
+const asideCva = (0, cva_1.cva)(constants_1.pageAsideClassnames.root, {
+    variants: {
+        withHeader: {
+            true: constants_1.pageAsideClassnames.withHeader,
+        },
+    },
+});
+const PageAside = ({ children, className, header, navigation, }) => {
+    const { pageHeaderContainer, isMobileNavigationVisible } = (0, hooks_1.usePageAside)({
+        navigation,
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobileNavigationVisible &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(styles_1.MobileAsideNavigation, { className: constants_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(MobileAsideButton_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, asideCva({ withHeader: Boolean(header) })), children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] })] }));
 };
 exports.PageAside = PageAside;

package/node/components/PageAside/constants.d.ts

@@ -1 +1,6 @@
 export declare const PAGE_ASIDE_WIDTH = "320px";
+export declare const pageAsideClassnames: {
+    mobileNavigation: string;
+    withHeader: string;
+    root: string;
+};

package/node/components/PageAside/constants.js

@@ -1,4 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PAGE_ASIDE_WIDTH = void 0;
+exports.pageAsideClassnames = exports.PAGE_ASIDE_WIDTH = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.PAGE_ASIDE_WIDTH = '320px';
+exports.pageAsideClassnames = {
+    mobileNavigation: (0, createUIKitClassname_1.createUIKitClassname)('page-aside__mobile-navigation'),
+    withHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-aside_with-header'),
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-aside'),
+};

package/node/components/PageAside/hooks/index.d.ts

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

package/node/components/{Tabs/hooks/useScrollToActiveTab → PageAside/hooks}/index.js

@@ -14,4 +14,4 @@ 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("./useScrollToActiveTab"), exports);
+__exportStar(require("./usePageAside"), exports);

package/node/components/PageAside/hooks/usePageAside/index.d.ts

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

package/node/components/PageAside/hooks/usePageAside/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("./usePageAside"), exports);