@astral/ui 4.72.0 → 4.73.0

package/node/components/PageHeader/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileTitleWrapper = exports.Wrapper = void 0;
+const constants_1 = require("../PageAside/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.header `
   display: grid;
   grid-column: 1 / -1;
@@ -16,7 +17,7 @@ exports.Wrapper = styled_1.styled.header `
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(0, 4)};
 
-    &.${constants_1.pageHeaderClassnames.hasActions} {
+    &.${constants_2.pageHeaderClassnames.hasActions} {
       grid-template-columns: min-content 1fr auto auto;
     }
   }
@@ -24,7 +25,7 @@ exports.Wrapper = styled_1.styled.header `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
-    top: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+    top: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
 
     display: block;
 
@@ -32,9 +33,13 @@ exports.Wrapper = styled_1.styled.header `
     padding: unset;
 
     background-color: ${({ theme }) => theme.palette.background.default};
+
+    &.${constants_2.pageHeaderClassnames.hasSubheader}, &.${constants_2.pageHeaderClassnames.hasFilters} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    }
   }
 
-  .${constants_1.pageHeaderClassnames.filters} {
+  .${constants_2.pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
     grid-row: 4;
 
@@ -42,13 +47,9 @@ exports.Wrapper = styled_1.styled.header `
       grid-column: 3;
       grid-row: 1 / -1;
     }
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
-    }
   }
 
-  .${constants_1.pageHeaderClassnames.quickFilters} {
+  .${constants_2.pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
     grid-row: 5;
 
@@ -78,23 +79,24 @@ exports.MobileTitleWrapper = styled_1.styled.div `
 
     /* Причина игнора: прогрессивное улучшение */
     /* stylelint-disable plugin/no-unsupported-browser-features */
-    &:not(:has(+ .${constants_1.pageHeaderClassnames.root} :is(
-      .${constants_1.pageHeaderClassnames.filters},
-      .${constants_1.pageHeaderClassnames.subheader}
+    &:not(:has(+ .${constants_2.pageHeaderClassnames.root} :is(
+      .${constants_2.pageHeaderClassnames.filters},
+      .${constants_2.pageHeaderClassnames.subheader},
+      .${constants_1.pageAsideClassnames.mobileNavigation}
     ))) {
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
-    &.${constants_1.pageHeaderClassnames.hasTitle} {
+    &.${constants_2.pageHeaderClassnames.hasTitle} {
       display: flex;
 
-      height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
-      min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      height: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${constants_2.PAGE_HEADER_HEIGHT_MOBILE};
       padding: ${({ theme }) => theme.spacing(4)};
     }
 
-    &.${constants_1.pageHeaderClassnames.hasBackButton} {
+    &.${constants_2.pageHeaderClassnames.hasBackButton} {
       padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
     }
   }

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

@@ -2,17 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PagePinnableAside = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
 const MenuOnOutlineMd_1 = require("../../icons/MenuOnOutlineMd");
+const PageAside_1 = require("../PageAside");
+const styles_1 = require("../PageAside/styles");
 const PinButton_1 = require("../PinButton");
 const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
-const styles_1 = require("./styles");
+const styles_2 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const asideCva = (0, cva_1.cva)(constants_1.pinnableAsideClassnames.root, {
+    variants: {
+        withHeader: {
+            true: constants_1.pinnableAsideClassnames.withHeader,
+        },
+    },
+});
 /**
  * Открепляемый 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)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { "$isPinned": isPinned, className: (0, classNames_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 }) })] })] }));
+const PagePinnableAside = ({ header, children, className, navigation, ...restProps }) => {
+    const { isPinned, togglePin, pageHeaderContainer, isMobileNavigationVisible, } = (0, useLogic_1.useLogic)({ navigation, ...restProps });
+    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: PageAside_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(PageAside_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_2.Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [(0, jsx_runtime_1.jsx)(styles_2.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_2.Content, { "$isPinned": isPinned, className: (0, classNames_1.classNames)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsxs)(styles_2.ChildrenWrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] }), (0, jsx_runtime_1.jsx)(styles_2.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
 };
 exports.PagePinnableAside = PagePinnableAside;

package/node/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/node/components/PagePinnableAside/constants.js

@@ -5,5 +5,7 @@ const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 const generateLocalStorageKey_1 = require("../utils/generateLocalStorageKey");
 exports.pinnableAsideClassnames = {
     content: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside__content'),
+    withHeader: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside_with-header'),
+    root: (0, createUIKitClassname_1.createUIKitClassname)('pinnable-aside'),
 };
 exports.ASIDE_LOCAL_STORAGE_KEY = (0, generateLocalStorageKey_1.generateLocalStorageKey)('Aside', 'isPinned');

package/node/components/PagePinnableAside/styles.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = exports.ChildrenWrapper = exports.Content = exports.Dummy = exports.Aside = void 0;
 const constants_1 = require("../constants");
 const PageAside_1 = require("../PageAside");
+const constants_2 = require("../PageAsideNavigation/constants");
 const styled_1 = require("../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.Aside = (0, styled_1.styled)('aside', {
     shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
 }) `
@@ -19,23 +20,19 @@ exports.Aside = (0, styled_1.styled)('aside', {
   border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
 
   &:hover {
-    .${constants_2.pinnableAsideClassnames.content} {
+    .${constants_3.pinnableAsideClassnames.content} {
       transform: translateX(0);
     }
   }
 
-  ${({ 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)};
+  &.${constants_3.pinnableAsideClassnames.withHeader} {
+    & .${constants_2.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;
   }
 `;
 exports.Dummy = (0, styled_1.styled)('div', {

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

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const PageAside_1 = require("../../PageAside");
 const useLocalStorage_1 = require("../../useLocalStorage");
 const constants_1 = require("../constants");
-const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) => {
+const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, navigation, }) => {
+    const { pageHeaderContainer } = (0, PageAside_1.usePageAside)({ navigation });
     (0, react_1.useEffect)(() => {
         const hasIsPinned = isPinnedProp !== undefined;
         const hasOnPin = onPinProp !== undefined;
@@ -34,6 +36,12 @@ const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) =
         }
         setStoredValue(newValue);
     };
-    return { isPinned, togglePin };
+    const isMobileNavigationVisible = navigation && pageHeaderContainer;
+    return {
+        isPinned,
+        togglePin,
+        pageHeaderContainer,
+        isMobileNavigationVisible,
+    };
 };
 exports.useLogic = useLogic;

package/node/components/Tabs/Tabs.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("./hooks");
+const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
 const styles_1 = require("./styles");
 const Tabs = ({ ...tabsProps }) => {
-    const { containerRef } = (0, hooks_1.useScrollToActiveTab)();
+    const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
     return ((0, jsx_runtime_1.jsx)(styles_1.Container, { children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledTabs, { ...tabsProps, ref: containerRef }), (0, jsx_runtime_1.jsx)(styles_1.Divider, {})] }) }));
 };
 exports.Tabs = Tabs;

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollToActiveElement = void 0;
+const react_1 = require("react");
+const useViewportType_1 = require("../useViewportType");
+const useScrollToActiveElement = (params) => {
+    const { behavior = 'smooth', block = 'nearest', inline = 'nearest', } = params || {};
+    const containerRef = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    (0, react_1.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 };
+};
+exports.useScrollToActiveElement = useScrollToActiveElement;

package/package.json

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

package/components/DashboardLayout/Sidebar/MenuSidebarButton/types.js

@@ -1 +0,0 @@
-"use strict";

package/components/DashboardLayout/Sidebar/Sidebar.js

@@ -1 +0,0 @@
-"use strict";

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

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

package/components/Tabs/hooks/useScrollToActiveTab/index.js

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

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const useScrollToActiveTab: () => {
-    containerRef: import("react").RefObject<HTMLDivElement | null>;
-};

package/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js

@@ -1,24 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useViewportType } from '../../../useViewportType';
-export const useScrollToActiveTab = () => {
-    const containerRef = useRef(null);
-    const { isMobile } = useViewportType();
-    useEffect(() => {
-        if (!containerRef.current || !isMobile) {
-            return;
-        }
-        const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
-        const runScroll = () => {
-            if (selectedTab) {
-                selectedTab.scrollIntoView({
-                    behavior: 'smooth',
-                });
-            }
-        };
-        // TODO: Убрать setTimeout после отказа от MUI в компоненте
-        setTimeout(() => {
-            runScroll();
-        }, 200);
-    }, []);
-    return { containerRef };
-};

package/node/components/DashboardLayout/Sidebar/MenuSidebarButton/types.js

@@ -1 +0,0 @@
-"use strict";

package/node/components/DashboardLayout/Sidebar/Sidebar.js

@@ -1 +0,0 @@
-"use strict";

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

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

package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const useScrollToActiveTab: () => {
-    containerRef: import("react").RefObject<HTMLDivElement | null>;
-};

package/node/components/Tabs/hooks/useScrollToActiveTab/useScrollToActiveTab.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollToActiveTab = void 0;
-const react_1 = require("react");
-const useViewportType_1 = require("../../../useViewportType");
-const useScrollToActiveTab = () => {
-    const containerRef = (0, react_1.useRef)(null);
-    const { isMobile } = (0, useViewportType_1.useViewportType)();
-    (0, react_1.useEffect)(() => {
-        if (!containerRef.current || !isMobile) {
-            return;
-        }
-        const selectedTab = containerRef.current.querySelector('[aria-selected="true"]');
-        const runScroll = () => {
-            if (selectedTab) {
-                selectedTab.scrollIntoView({
-                    behavior: 'smooth',
-                });
-            }
-        };
-        // TODO: Убрать setTimeout после отказа от MUI в компоненте
-        setTimeout(() => {
-            runScroll();
-        }, 200);
-    }, []);
-    return { containerRef };
-};
-exports.useScrollToActiveTab = useScrollToActiveTab;