@astral/ui 4.40.0 → 4.42.0

package/components/Notification/constants.d.ts

@@ -18,9 +18,13 @@ export declare const NOTIFY_STATIC_CONTAINER_ID = "static-notify-container";
 export declare const BANNER_CONTAINER_ID = "banner-container-id";
 export declare const NOTIFY_NO_TRANSITION_ATTR = "data-no-transition";
 export declare const NOTIFY_HEIGHT = "56px";
+export declare const NOTIFY_HEIGHT_MOBILE = "40px";
 export declare const notifyClassnames: {
     root: string;
     body: string;
+    stack: string;
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: string;
     container: string;
     animationIn: string;
     animationOut: string;

package/components/Notification/constants.js

@@ -20,9 +20,13 @@ export const NOTIFY_STATIC_CONTAINER_ID = 'static-notify-container';
 export const BANNER_CONTAINER_ID = 'banner-container-id';
 export const NOTIFY_NO_TRANSITION_ATTR = 'data-no-transition';
 export const NOTIFY_HEIGHT = '56px';
+export const NOTIFY_HEIGHT_MOBILE = '40px';
 export const notifyClassnames = {
     root: createUIKitClassname('notify'),
     body: createUIKitClassname('notify__body'),
+    stack: createUIKitClassname('notify__stack'),
+    /** Обёртка только над stacked ToastContainer — без :has() отделяем внешний .Toastify от статичного */
+    stackHost: createUIKitClassname('notify__stack-host'),
     container: createUIKitClassname('notify__container'),
     animationIn: createUIKitClassname('notify_animation-in'),
     animationOut: createUIKitClassname('notify_animation-out'),

package/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSection: import("react").ForwardRefExoticComponent<PageLayoutSectionProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/PageLayoutSection/PageLayoutSection.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Section, SectionInner } from './styles';
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export const PageLayoutSection = forwardRef((props, ref) => {
+    const { children, className } = props;
+    return (_jsx(Section, { className: className, ref: ref, children: _jsx(SectionInner, { children: children }) }));
+});

package/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type PageLayoutSectionContainerProps = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * На десктопе между секциями отображается разделитель; на мобиле по-прежнему карточки с отступами между ними.
+     */
+    isShowDivider?: boolean;
+};
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export declare const PageLayoutSectionContainer: ({ children, className, isShowDivider, }: PageLayoutSectionContainerProps) => import("react/jsx-runtime").JSX.Element;

package/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { PageContext } from '../../PageContext';
+import { classNames } from '../../utils/classNames';
+import { pageLayoutSectionContainerClassnames } from './constants';
+import { SectionContainer } from './styles';
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+export const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
+    const { hasAside } = useContext(PageContext);
+    const classes = useMemo(() => {
+        return classNames(className, {
+            [pageLayoutSectionContainerClassnames.withAside]: hasAside,
+            [pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
+        });
+    }, [className, hasAside, isShowDivider]);
+    return _jsx(SectionContainer, { className: classes, children: children });
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageLayoutSectionContainerClassnames: {
+    withAside: string;
+    withDivider: string;
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/constants.js

@@ -0,0 +1,4 @@
+export const pageLayoutSectionContainerClassnames = {
+    withAside: 'page-layout-section__container_with-aside',
+    withDivider: 'page-layout-section__container_with-divider',
+};

package/components/PageLayoutSection/PageLayoutSectionContainer/index.d.ts

@@ -0,0 +1 @@
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/PageLayoutSectionContainer/index.js

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

package/components/PageLayoutSection/PageLayoutSectionContainer/styles.d.ts

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

package/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -0,0 +1,51 @@
+import { styled } from '../../styled';
+import { pageLayoutSectionContainerClassnames } from './constants';
+export const SectionContainer = styled.div `
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+
+  padding-top: 0;
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+
+  border-top: none;
+
+  &.${pageLayoutSectionContainerClassnames.withAside} {
+    padding-top: ${({ theme }) => theme.spacing(4)};
+
+    border-top: ${({ theme }) => `1px solid ${theme.palette.grey[300]}`};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    gap: ${({ theme }) => theme.spacing(5)};
+  }
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &.${pageLayoutSectionContainerClassnames.withDivider} {
+      & > :not(:last-child)::after {
+        content: '';
+
+        display: block;
+
+        width: 100%;
+        height: 1px;
+        margin-top: ${({ theme }) => theme.spacing(6)};
+
+        background-color: ${({ theme }) => theme.palette.grey[300]};
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: unset;
+    gap: ${({ theme }) => theme.spacing(4)};
+    order: 4;
+
+    &.${pageLayoutSectionContainerClassnames.withAside} {
+      padding-top: 0;
+
+      border-top: none;
+    }
+  }
+`;

package/components/PageLayoutSection/index.d.ts

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/index.js

@@ -0,0 +1,2 @@
+export { PageLayoutSection, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/public.d.ts

@@ -0,0 +1,2 @@
+export { PageLayoutSection, type PageLayoutSectionProps, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/public.js

@@ -0,0 +1,2 @@
+export { PageLayoutSection, } from './PageLayoutSection';
+export { PageLayoutSectionContainer, } from './PageLayoutSectionContainer';

package/components/PageLayoutSection/styles.d.ts

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

package/components/PageLayoutSection/styles.js

@@ -0,0 +1,21 @@
+import { styled } from '../styled';
+export const Section = styled.section `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(0, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+export const SectionInner = styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+`;

package/components/index.d.ts

@@ -146,6 +146,7 @@ export * from './OverflowTypography';
 export { PageAlert, type PageAlertProps, } from './PageAlert';
 export { PageAside, type PageAsideProps, } from './PageAside';
 export { PageLayout, type PageLayoutProps, } from './PageLayout';
+export { PageLayoutSection, type PageLayoutSectionProps, PageLayoutSectionContainer, type PageLayoutSectionContainerProps, } from './PageLayoutSection';
 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';

package/components/index.js

@@ -145,6 +145,7 @@ export * from './OverflowTypography';
 export { PageAlert, } from './PageAlert';
 export { PageAside, } from './PageAside';
 export { PageLayout, } from './PageLayout';
+export { PageLayoutSection, PageLayoutSectionContainer, } from './PageLayoutSection';
 export { PageAsideBlock, } from './PageAsideBlock';
 export { PageContent, PageContentHeader, PageContentHeaderActions, pageContentClassnames, } from './PageContent';
 export { PageContext, PageContextProvider, } from './PageContext';

package/node/components/Notification/Notification.js

@@ -8,6 +8,7 @@ const utils_1 = require("./utils");
 const leave = (0, react_toastify_next_1.cssTransition)({
     enter: constants_1.notifyClassnames.animationIn,
     exit: constants_1.notifyClassnames.animationOut,
+    collapse: false,
 });
 exports.notify = {
     success: (title, { icon, ...options } = {}) => (0, react_toastify_next_1.toast)(({ toastProps }) => constants_2.NOTIFICATION_VARIANT.success({ ...options, icon, title }, toastProps), {

package/node/components/Notification/NotificationContainer/styles.js

@@ -49,23 +49,28 @@ exports.Wrapper = (0, styled_1.styled)('div', {
       `}
   }
 
+  .Toastify__toast-container {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   .${constants_1.notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      animation: ${leaveInMobile} ease-in-out 0.34s;
+      animation: ${leaveInMobile} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
       animation-fill-mode: both;
     }
   }
 
   .${constants_1.notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${constants_1.notifyClassnames.root} {
-    min-height: ${constants_1.NOTIFY_HEIGHT};
     margin-bottom: ${({ theme }) => theme.spacing(1)};
     padding: 0;
 
@@ -84,6 +89,12 @@ exports.Wrapper = (0, styled_1.styled)('div', {
       width: 100%;
       height: 3px;
     }
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${constants_1.NOTIFY_HEIGHT_MOBILE};
+    }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-bottom: ${({ theme }) => theme.spacing(3)};

package/node/components/Notification/NotificationStackContainer/NotificationStackContainer.js

@@ -11,12 +11,12 @@ if (typeof window !== 'undefined') {
     (0, inject_style_1.injectStyle)();
 }
 const NotificationStackContainer = ({ containerId = constants_1.NOTIFY_CONTAINER_ID, staticContainerId = constants_1.NOTIFY_STATIC_CONTAINER_ID, bannerContainer, closeButton, ...props }) => {
-    const { isVisibleCloseButton, isHoveredContainer, isStartedClosingNotify, closeAll, } = (0, useLogic_1.useLogic)({
+    const { isVisibleCloseButton, isStackExpanded, isStartedClosingNotify, closeAll, } = (0, useLogic_1.useLogic)({
         containerId,
     });
     return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)({
-            [constants_1.notifyClassnames.container]: isHoveredContainer,
-        }), children: [(0, jsx_runtime_1.jsx)(styles_1.Inner, { ...props, ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }), isVisibleCloseButton && ((0, jsx_runtime_1.jsx)(styles_1.CloseButton, { size: "small", variant: "light", color: "grey", className: (0, classNames_1.classNames)({
+            [constants_1.notifyClassnames.container]: isStackExpanded,
+        }), children: [(0, jsx_runtime_1.jsx)("div", { className: constants_1.notifyClassnames.stackHost, children: (0, jsx_runtime_1.jsx)(styles_1.Inner, { ...props, className: (0, classNames_1.classNames)(constants_1.notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }) }), isVisibleCloseButton && ((0, jsx_runtime_1.jsx)(styles_1.CloseButton, { size: "small", variant: "light", color: "grey", className: (0, classNames_1.classNames)({
                     [constants_1.notifyClassnames.closeButtonAnimationOut]: isStartedClosingNotify,
                 }), onClick: closeAll, children: "\u0421\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })), (0, jsx_runtime_1.jsx)(styles_1.StaticInner, { containerId: staticContainerId, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }), bannerContainer] }));
 };