@astral/ui 4.40.0 → 4.42.0

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("./styles");
+/**
+ * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+exports.PageLayoutSection = (0, react_1.forwardRef)((props, ref) => {
+    const { children, className } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: className, ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionInner, { children: children }) }));
+});

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageContext_1 = require("../../PageContext");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+/**
+ * Контейнер для секций страницы.
+ *
+ * @example
+ * <PageLayout content={
+ *   <PageLayoutSectionContainer>
+ *     <PageLayoutSection>
+ *           Секция 1
+ *     </PageLayoutSection>
+ *   </PageLayoutSectionContainer>
+ * } />
+ */
+const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
+    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const classes = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)(className, {
+            [constants_1.pageLayoutSectionContainerClassnames.withAside]: hasAside,
+            [constants_1.pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
+        });
+    }, [className, hasAside, isShowDivider]);
+    return (0, jsx_runtime_1.jsx)(styles_1.SectionContainer, { className: classes, children: children });
+};
+exports.PageLayoutSectionContainer = PageLayoutSectionContainer;

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

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

package/node/components/PageLayoutSection/PageLayoutSectionContainer/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageLayoutSectionContainerClassnames = void 0;
+exports.pageLayoutSectionContainerClassnames = {
+    withAside: 'page-layout-section__container_with-aside',
+    withDivider: 'page-layout-section__container_with-divider',
+};

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

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

package/node/components/PageLayoutSection/PageLayoutSectionContainer/index.js

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SectionContainer: 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>, {}>;

package/node/components/PageLayoutSection/PageLayoutSectionContainer/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionContainer = void 0;
+const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
+exports.SectionContainer = styled_1.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;
+
+  &.${constants_1.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')} {
+    &.${constants_1.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;
+
+    &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
+      padding-top: 0;
+
+      border-top: none;
+    }
+  }
+`;

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

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

package/node/components/PageLayoutSection/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = exports.PageLayoutSection = void 0;
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+var PageLayoutSectionContainer_1 = require("./PageLayoutSectionContainer");
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSectionContainer_1.PageLayoutSectionContainer; } });

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

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

package/node/components/PageLayoutSection/public.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayoutSectionContainer = exports.PageLayoutSection = void 0;
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+var PageLayoutSectionContainer_1 = require("./PageLayoutSectionContainer");
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSectionContainer_1.PageLayoutSectionContainer; } });

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Section: 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<HTMLElement>, HTMLElement>, {}>;
+export declare const SectionInner: 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>, {}>;

package/node/components/PageLayoutSection/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionInner = exports.Section = void 0;
+const styled_1 = require("../styled");
+exports.Section = styled_1.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};
+  }
+`;
+exports.SectionInner = styled_1.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/node/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/node/components/index.js

@@ -16,8 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploaderFile = exports.FileUploaderDropzone = exports.FileUploader = exports.Filename = exports.Fieldset = exports.Zoom = exports.Slide = exports.Grow = exports.Fade = exports.expansionPanelClassnames = exports.ExpansionPanel = exports.EmailOrPhoneField = exports.EmailField = exports.DescriptionList = exports.DescriptionCell = exports.datePickerClassnames = exports.DatePicker = exports.DataGridMinimalisticPagination = exports.DataGridSecondaryActionsSkeleton = exports.DataGridSecondaryActions = exports.DataGridMainActions = exports.DataGridActionCell = exports.SidebarContext = exports.SidebarSkeleton = exports.SidebarPopover = exports.MenuSidebarButton = exports.SidebarCounter = exports.SidebarButton = exports.DashboardContext = exports.DashboardLayout = exports.DashboardAlert = exports.Counter = exports.CopyTypography = exports.confirmActionClassnames = exports.ConfirmAction = exports.ComplianceStatus = exports.CodeField = exports.BulletListItem = exports.BulletListInlineItem = exports.BulletList = exports.Breadcrumbs = exports.AvatarGroup = exports.Avatar = exports.AutoSaveIndicator = exports.AsyncAutocomplete = exports.Alert = exports.alertClassnames = exports.AddressAutocomplete = exports.useMainActions = exports.ActionGroup = void 0;
 exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridColumnHintIcon = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.useViewportType = exports.useUpdateEffect = exports.useToggle = exports.useStickyButton = exports.useSet = exports.useSecondsCountdown = exports.useScrollManagement = exports.useRadioGroup = exports.usePopoverAnimation = exports.usePopover = exports.useMenu = exports.useLocalStorage = exports.useLocaleDateTimeFormat = exports.useLoadingState = exports.useInterval = exports.useInputPopover = exports.useForwardedRef = exports.useFocusAwayEffect = exports.useFirstMountState = exports.useFeatureFlags = exports.useEscapeClickEffect = exports.useClickAwayEffect = exports.useCheckControlled = exports.useAsyncOptions = exports.HintIcon = exports.GuidTypography = exports.previewFileUploaderClassnames = exports.fileUploaderClassnames = exports.PreviewFileUploaderFile = exports.PreviewFileUploaderDropZone = exports.PreviewFileUploader = exports.usePreviewFileUploader = exports.useFileUploader = void 0;
-exports.getInertProps = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.LoadingPlaceholder = exports.Placeholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.PageLayoutLoader = exports.PagePinnableAside = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageActions = exports.PageActionSkeleton = exports.PageHeader = exports.pageHeaderClassnames = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageLayout = exports.PageAside = exports.PageAlert = exports.NumberField = void 0;
-exports.WelcomeScreen = void 0;
+exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.LoadingPlaceholder = exports.Placeholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.PageLayoutLoader = exports.PagePinnableAside = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageActions = exports.PageActionSkeleton = exports.PageHeader = exports.pageHeaderClassnames = exports.PageContextProvider = exports.PageContext = exports.pageContentClassnames = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageLayoutSectionContainer = exports.PageLayoutSection = exports.PageLayout = exports.PageAside = exports.PageAlert = exports.NumberField = void 0;
+exports.WelcomeScreen = exports.getInertProps = exports.redirectToLink = void 0;
 __exportStar(require("./Accordion"), exports);
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
@@ -269,6 +269,9 @@ var PageAside_1 = require("./PageAside");
 Object.defineProperty(exports, "PageAside", { enumerable: true, get: function () { return PageAside_1.PageAside; } });
 var PageLayout_1 = require("./PageLayout");
 Object.defineProperty(exports, "PageLayout", { enumerable: true, get: function () { return PageLayout_1.PageLayout; } });
+var PageLayoutSection_1 = require("./PageLayoutSection");
+Object.defineProperty(exports, "PageLayoutSection", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSection; } });
+Object.defineProperty(exports, "PageLayoutSectionContainer", { enumerable: true, get: function () { return PageLayoutSection_1.PageLayoutSectionContainer; } });
 var PageAsideBlock_1 = require("./PageAsideBlock");
 Object.defineProperty(exports, "PageAsideBlock", { enumerable: true, get: function () { return PageAsideBlock_1.PageAsideBlock; } });
 var PageContent_1 = require("./PageContent");

package/package.json

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