@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/dist/cjs/components/PageForm/styles.module.css

@@ -0,0 +1,104 @@
+.container{
+  display:flex;
+  gap:var(--sn-primitive-dimension-24, 24px);
+  justify-content:center;
+  box-sizing:border-box;
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  min-height:100%;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.form{
+  flex-shrink:0;
+  width:800px;
+  min-height:100%;
+}
+
+.container > .form[data-size=l]{
+  padding:var(--sn-primitive-dimension-56, 56px);
+}
+
+.formContent{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-32, 32px);
+}
+
+.headline{
+  position:relative;
+}
+
+.body{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  flex:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.footerSticky{
+  position:sticky;
+  bottom:0;
+  box-sizing:border-box;
+  margin:calc(0px - var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)))) calc(0px - var(--sn-primitive-dimension-56, 56px)) calc(0px - var(--sn-primitive-dimension-56, 56px));
+  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px))) var(--sn-primitive-dimension-56, 56px) var(--sn-primitive-dimension-56, 56px);
+  border-radius:0 0 var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px))) var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  transition:border-radius 0.15s ease, padding 0.15s ease;
+}
+.footerSticky::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:inherit;
+  opacity:0;
+  transition:opacity 0.15s ease;
+}
+
+.footerStuck{
+  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+}
+.footerStuck::before{
+  opacity:1;
+}
+
+.footerSentinel{
+  pointer-events:none;
+  position:absolute;
+  bottom:calc(0px - var(--sn-primitive-dimension-56, 56px));
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--sn-primitive-dimension-2, 2px);
+  height:var(--sn-primitive-dimension-1, 1px);
+}
+
+.mainActions{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+  margin-left:auto;
+}
+
+.sideItems{
+  position:sticky;
+  top:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-self:flex-start;
+  width:304px;
+}

package/dist/cjs/components/PageForm/types.d.ts

@@ -0,0 +1,47 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ModalCustomProps } from '@cloud-ru/ds-modal';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types';
+import { HeadlineProps } from '../Headline';
+export type DesktopPageFormProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'subtitle'> & {
+    className?: string;
+    /** Закрепляет футер внизу формы при прокрутке контента. */
+    stickyFooter?: boolean;
+    stepper?: ReactNode;
+    priceSummary?: {
+        total: ReactNode;
+        content?: ReactNode;
+    };
+    sideBlock?: {
+        label: string;
+        content: ReactNode;
+        /**
+         * Только mobile: высота листа sideBlock'а (snap-точки `BottomSheet`). `[1]` — на всю высоту.
+         * По умолчанию — по высоте контента (fit-content).
+         */
+        snapPoints?: ModalCustomProps['snapPoints'];
+    }[];
+    footer?: {
+        buttonPrimary: ({
+            variant: ButtonPrimaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonSecondary?: ({
+            variant: ButtonSecondaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonAdditional?: ButtonProps & {
+            tooltip?: TooltipProps;
+        };
+    };
+}>>;

package/dist/cjs/components/PageForm/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/PageLoading/PageLoading.d.ts

@@ -0,0 +1,6 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+export type PageLoadingProps = WithSupportProps<{
+    /** CSS-класс */
+    className?: string;
+}>;
+export declare function PageLoading({ className, ...rest }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PageLoading/PageLoading.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLoading = PageLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const loader_1 = require("@cloud-ru/ds-loader");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PageLoading({ className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: loader_1.LOADER_SIZE.M, className: styles_module_scss_1.default.spinner }) }));
+}

package/dist/cjs/components/PageLoading/index.d.ts

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

package/dist/cjs/components/PageLoading/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("./PageLoading"), exports);

package/dist/cjs/components/PageLoading/styles.module.css

@@ -0,0 +1,13 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.spinner{
+  flex-shrink:0;
+}

package/dist/cjs/components/PageServices/DesktopPageServices.d.ts

@@ -0,0 +1,5 @@
+import { DesktopPageServicesProps } from './types';
+export declare function DesktopPageServices({ children, title, actions, className, sidebar, slotBeforeTitle, subtitle, slotAfterTitle, truncateTitle, autoHeight, limitContentMaxWidth, ...rest }: DesktopPageServicesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopPageServices {
+    var displayName: string;
+}

package/dist/cjs/components/PageServices/DesktopPageServices.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopPageServices = DesktopPageServices;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const Headline_1 = require("../Headline");
+const PageSidebar_1 = require("../PageSidebar");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DesktopPageServices({ children, title, actions, className, sidebar, slotBeforeTitle, subtitle, slotAfterTitle, truncateTitle, autoHeight, limitContentMaxWidth, ...rest }) {
+    const height = (0, hooks_1.usePageHeight)(autoHeight);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), ...(!autoHeight && { style: { height } }), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tempContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, "data-limited": limitContentMaxWidth, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, actions: actions, slotBeforeTitle: slotBeforeTitle, slotAfterTitle: slotAfterTitle, subtitle: subtitle, truncateTitle: truncateTitle }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.childWrapper, children: children })] }) }), sidebar && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sidebar, children: (0, jsx_runtime_1.jsx)(PageSidebar_1.PageSidebar, { ...sidebar }) }))] }));
+}
+DesktopPageServices.displayName = 'DesktopPageServices';

package/dist/cjs/components/PageServices/MobilePageServices.d.ts

@@ -0,0 +1,12 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { ActionsProps } from '../Actions';
+import { HeadlineProps } from '../Headline';
+import { SidebarSelectProps } from '../PageSidebar';
+export type MobilePageServicesProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'slotBeforeTitle' | 'subtitle' | 'slotAfterTitle'> & {
+    className?: string;
+    sidebar?: SidebarSelectProps;
+    actions?: ActionsProps['items'];
+    maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+}>>;
+export declare function MobilePageServices({ children, title, actions, className, sidebar, slotAfterTitle, subtitle, slotBeforeTitle, maxVisibleActionsItems, ...rest }: MobilePageServicesProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PageServices/MobilePageServices.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePageServices = MobilePageServices;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const Actions_1 = require("../Actions");
+const Headline_1 = require("../Headline");
+const PageSidebar_1 = require("../PageSidebar");
+const mobileStyles_module_scss_1 = __importDefault(require('./mobileStyles.module.css'));
+function MobilePageServices({ children, title, actions = [], className, sidebar, slotAfterTitle, subtitle, slotBeforeTitle, maxVisibleActionsItems, ...rest }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(mobileStyles_module_scss_1.default.wrapper, className), ...(0, utils_1.extractSupportProps)(rest), children: [sidebar && (0, jsx_runtime_1.jsx)(PageSidebar_1.SidebarSelect, { ...sidebar, className: mobileStyles_module_scss_1.default.sidebarSelect }), (0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.body, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, slotBeforeTitle: slotBeforeTitle, slotAfterTitle: slotAfterTitle, subtitle: subtitle }), actions.length > 0 && (0, jsx_runtime_1.jsx)(Actions_1.MobileActions, { items: actions, maxVisibleItems: maxVisibleActionsItems }), (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.childWrapper, children: children })] })] }));
+}

package/dist/cjs/components/PageServices/PageServices.d.ts

@@ -0,0 +1,14 @@
+import { MobilePageServicesProps } from './MobilePageServices';
+import { DesktopPageServicesProps } from './types';
+export type PageServicesProps = Omit<DesktopPageServicesProps, 'actions'> & Pick<MobilePageServicesProps, 'actions' | 'maxVisibleActionsItems'>;
+/**
+ * Адаптивный `PageServices`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageServices` и передаёт `actions` структурированным массивом; на остальных раскладках
+ * оборачивает `actions` в `DesktopActions` и отдаёт `DesktopPageServices` через слот `actions`.
+ * Форс платформы — `withLayoutType` / вложенный `<AdaptiveProvider layoutType=…>`; пропа
+ * `layoutType` у компонента нет.
+ */
+export declare function PageServices({ actions, maxVisibleActionsItems, ...props }: PageServicesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageServices {
+    var displayName: string;
+}

package/dist/cjs/components/PageServices/PageServices.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageServices = PageServices;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const Actions_1 = require("../Actions");
+const DesktopPageServices_1 = require("./DesktopPageServices");
+const MobilePageServices_1 = require("./MobilePageServices");
+/**
+ * Адаптивный `PageServices`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageServices` и передаёт `actions` структурированным массивом; на остальных раскладках
+ * оборачивает `actions` в `DesktopActions` и отдаёт `DesktopPageServices` через слот `actions`.
+ * Форс платформы — `withLayoutType` / вложенный `<AdaptiveProvider layoutType=…>`; пропа
+ * `layoutType` у компонента нет.
+ */
+function PageServices({ actions, maxVisibleActionsItems, ...props }) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    if ((0, adaptive_1.isMobileLayout)(layoutType)) {
+        return (0, jsx_runtime_1.jsx)(MobilePageServices_1.MobilePageServices, { actions: actions, maxVisibleActionsItems: maxVisibleActionsItems, ...props });
+    }
+    const actionsNode = actions ? (0, jsx_runtime_1.jsx)(Actions_1.DesktopActions, { items: actions }) : undefined;
+    return (0, jsx_runtime_1.jsx)(DesktopPageServices_1.DesktopPageServices, { ...props, actions: actionsNode });
+}
+PageServices.displayName = 'PageServices';

package/dist/cjs/components/PageServices/hooks.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Высота страницы сервиса, синхронизированная с глобальным контейнером приложения
+ * (`GLOBAL_CONTAINER_ID`) через `ResizeObserver`. При `autoHeight` наблюдение отключается —
+ * страница занимает высоту по контенту.
+ */
+export declare function usePageHeight(autoHeight?: boolean): number;

package/dist/cjs/components/PageServices/hooks.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageHeight = usePageHeight;
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+/**
+ * Высота страницы сервиса, синхронизированная с глобальным контейнером приложения
+ * (`GLOBAL_CONTAINER_ID`) через `ResizeObserver`. При `autoHeight` наблюдение отключается —
+ * страница занимает высоту по контенту.
+ */
+function usePageHeight(autoHeight) {
+    const [height, setHeight] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (autoHeight)
+            return;
+        const container = document.getElementById(constants_1.GLOBAL_CONTAINER_ID);
+        if (!container)
+            return;
+        const observer = new ResizeObserver(entities => entities.forEach(entity => {
+            if (entity.target === container) {
+                const [{ blockSize }] = entity.contentBoxSize;
+                setHeight(Math.floor(blockSize));
+            }
+        }));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [autoHeight]);
+    return height;
+}

package/dist/cjs/components/PageServices/index.d.ts

@@ -0,0 +1,4 @@
+export * from './PageServices';
+export * from './DesktopPageServices';
+export * from './MobilePageServices';
+export * from './types';

package/dist/cjs/components/PageServices/index.js

@@ -0,0 +1,20 @@
+"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("./PageServices"), exports);
+__exportStar(require("./DesktopPageServices"), exports);
+__exportStar(require("./MobilePageServices"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/PageServices/mobileStyles.module.css

@@ -0,0 +1,28 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  width:100%;
+  min-height:100%;
+}
+
+.sidebarSelect{
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  box-sizing:border-box;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

package/dist/cjs/components/PageServices/styles.module.css

@@ -0,0 +1,48 @@
+.wrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  justify-content:flex-end;
+  min-width:100%;
+  height:100%;
+}
+
+.sidebar{
+  position:relative;
+  flex-grow:0;
+  flex-shrink:0;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:256px;
+}
+
+.tempContainer{
+  position:relative;
+  overflow-y:auto;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+  min-width:992px;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  min-height:100%;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+.container[data-limited=true]{
+  max-width:1248px;
+  margin:0 auto;
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

package/dist/cjs/components/PageServices/types.d.ts

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { HeadlineProps } from '../Headline';
+import { PageSidebarProps } from '../PageSidebar';
+export type DesktopPageServicesProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'actions' | 'subtitle' | 'slotAfterTitle' | 'slotBeforeTitle' | 'truncateTitle'> & {
+    className?: string;
+    sidebar?: PageSidebarProps;
+    autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
+}>>;

package/dist/cjs/components/PageServices/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/PageSidebar/PageSidebar.d.ts

@@ -0,0 +1,21 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { Documentation, HeaderProps, SidebarItem } from './types';
+export type PageSidebarProps = WithSupportProps<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChanged?(open: boolean): void;
+    items: SidebarItem[];
+    footerItems?: SidebarItem[];
+    header?: HeaderProps;
+    selected?: string | number;
+    onSelect?(id: string | number): void;
+    className?: string;
+    /** Зарезервировано, в текущей реализации не используется. */
+    documentation?: Documentation;
+    /** Зарезервировано, в текущей реализации не используется. */
+    pageContainerId?: string;
+    hasSearch?: boolean;
+    collapse?: ListProps['collapse'];
+}>;
+export declare function PageSidebar(props: PageSidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PageSidebar/PageSidebar.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSidebar = PageSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const contexts_1 = require("./contexts");
+const useItemsCreator_1 = require("./hooks/useItemsCreator");
+const useSearchFilter_1 = require("./hooks/useSearchFilter");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PrivateSideBar({ open: openProp, defaultOpen, onOpenChanged, className, items, footerItems = [], header, selected, onSelect, hasSearch, collapse, 
+// documentation / pageContainerId — зарезервированы, в текущей реализации не используются.
+// Деструктурируем, чтобы не попадали в otherProps и не ломали extractSupportProps.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+documentation, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+pageContainerId, ...otherProps }) {
+    const [open, setOpenState] = (0, utils_1.useUncontrolledProp)(openProp, defaultOpen || true, onOpenChanged);
+    const [hoverOff, setHoverOff] = (0, react_1.useState)(false);
+    const toggleOpen = (0, react_1.useCallback)((newValue = !open) => {
+        if (newValue === open) {
+            return;
+        }
+        if (!newValue) {
+            /* кнопка сворачивания внутри сайдбара, а он раскрывается по ховеру — после клика
+            на время отключаем ховер, чтобы дать ему свернуться */
+            setHoverOff(true);
+            setTimeout(() => setHoverOff(false), 300);
+        }
+        setOpenState(newValue);
+    }, [open, setOpenState]);
+    const { filteredList, searchValue, searchCollapseState } = (0, useSearchFilter_1.useSearchFilter)(items);
+    const list = (0, useItemsCreator_1.useItemsContent)(filteredList, onSelect);
+    const footerList = (0, useItemsCreator_1.useItemsContent)(footerItems);
+    const { pinTop } = (0, useItemsCreator_1.useTopPinnedContent)(header, hasSearch);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.extractSupportProps)(otherProps), "data-collapsed": !open || undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: [!open && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Elevated, appearance: button_1.APPEARANCE.Neutral, className: styles_module_scss_1.default.expandButton, "data-test-id": constants_1.TEST_IDS.sidebarToggle.expand, icon: (0, jsx_runtime_1.jsx)(product_1.VerticalMenuOpenSVG, {}), onClick: () => toggleOpen(true) })), (0, jsx_runtime_1.jsx)("div", { "data-collapsed": !open || undefined, "data-hover-off": hoverOff || undefined, "data-has-search": hasSearch || undefined, className: styles_module_scss_1.default.body, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-collapsed": !open || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.list, children: (0, jsx_runtime_1.jsx)(list_1.List, { selection: { mode: 'single', value: selected }, size: 'm', items: list, pinTop: pinTop, pinBottom: footerList, scroll: true, scrollToSelectedItem: true, collapse: searchValue ? searchCollapseState : collapse, 
+                                // Пустой список при активном поиске — это «ничего не найдено» (noResultsState),
+                                // а не «нет данных» (noDataState). Флаг переключает empty-state в @cloud-ru/ds-list.
+                                dataFiltered: Boolean(searchValue), barHideStrategy: 'leave' }) }), open && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.toggler, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Elevated, appearance: button_1.APPEARANCE.Neutral, icon: (0, jsx_runtime_1.jsx)(product_1.VerticalMenuCloseSVG, {}), className: styles_module_scss_1.default.button, "data-test-id": constants_1.TEST_IDS.sidebarToggle.collapse, onClick: () => toggleOpen(false) }) }))] }) })] }));
+}
+function PageSidebar(props) {
+    return ((0, jsx_runtime_1.jsx)(contexts_1.SearchContextProvider, { children: (0, jsx_runtime_1.jsx)(PrivateSideBar, { ...props }) }));
+}

package/dist/cjs/components/PageSidebar/contexts.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+type SearchContextValue = {
+    searchValue: string;
+    setSearchValue(searchValue: string): void;
+    searchOpened: boolean;
+    setSearchOpened: Dispatch<SetStateAction<boolean>>;
+};
+export declare const SearchContext: import("react").Context<SearchContextValue>;
+export declare function useSearchContext(): SearchContextValue;
+export declare function SearchContextProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/PageSidebar/contexts.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchContext = void 0;
+exports.useSearchContext = useSearchContext;
+exports.SearchContextProvider = SearchContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SearchContext = (0, react_1.createContext)({
+    searchValue: '',
+    searchOpened: false,
+    setSearchValue: () => { },
+    setSearchOpened: () => { },
+});
+function useSearchContext() {
+    return (0, react_1.useContext)(exports.SearchContext);
+}
+function SearchContextProvider({ children }) {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [searchOpened, setSearchOpened] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(exports.SearchContext.Provider, { value: { searchValue, setSearchValue, searchOpened, setSearchOpened }, children: children }));
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.d.ts

@@ -0,0 +1 @@
+export declare function SidebarSearch(): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearch = SidebarSearch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const search_1 = require("@cloud-ru/ds-search");
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const contexts_1 = require("../../contexts");
+function SidebarSearch() {
+    const { searchValue, setSearchValue, searchOpened } = (0, contexts_1.useSearchContext)();
+    const ref = (0, react_1.useRef)(null);
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    (0, react_1.useEffect)(() => {
+        if (searchOpened) {
+            ref?.current?.focus();
+        }
+    }, [searchOpened]);
+    if (!searchOpened)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(search_1.Search, { ref: ref, size: search_1.SIZE.M, placeholder: t('PageSidebar.searchByServices'), value: searchValue, onChange: setSearchValue }));
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearch/index.d.ts

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearch/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("./SidebarSearch"), exports);

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.d.ts

@@ -0,0 +1 @@
+export declare function SidebarSearchToggle(): import("react/jsx-runtime").JSX.Element;