@cloud-ru/ds-popup-private 1.0.4 → 1.0.5-preview-0a01eea8.0

package/README.md

@@ -65,6 +65,7 @@
 | `className` | `string` | — | CSS-класс контейнера body. |
 | `content` | `ReactNode` | — | Содержимое body (альтернатива `children`). |
 | `data-test-id` | `string` | — |  |
+| `innerRef` | `Ref<HTMLElement>` | — | Ссылка на скроллируемый контейнер body. |
 
 ## PopupCloseButton
 
@@ -98,7 +99,7 @@
 | `data-test-id` | `string` | — |  |
 | `onBackButtonClick` | `(() => void)` | — | Callback клика на back-кнопку (слева в шапке). <br/> Наличие callback'а авто-рендерит `Button view='function' icon={<ArrowLeftSVG />}`. |
 | `slotAfterTitle` | `ReactNode` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
-| `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности. |
+| `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`, <br/> `subHeadlineWrapper` в мастере `window` (modal / drawer). |
 | `subtitle` | `ReactNode` | — | Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. |
 | `testIds` | `PopupHeaderTestIds` | — | Переопределение `data-test-id` слотов шапки. Каждый пропущенный ключ берётся из `TEST_IDS`. <br/> Потребитель-обёртка (drawer/modal) прокидывает сюда свои id, чтобы сохранить публичный контракт. |
 | `title` | `ReactNode` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |

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

@@ -1,3 +1,3 @@
 import { PopupBodyProps } from '../../types';
 /** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
-export declare function PopupBody({ content, children, bodyPadding, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopupBody({ content, children, bodyPadding, innerRef, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PopupBody/PopupBody.js

@@ -10,6 +10,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
-function PopupBody({ content, children, bodyPadding = true, className, ...rest }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
+function PopupBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { 
+        // Публичный тип шире (`HTMLElement`), потому что drawer-ветка body отдаёт ref от `Scroll`.
+        ref: innerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": constants_1.TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
 }
+(0, utils_1.withInnerRefSupport)(PopupBody);

package/dist/cjs/components/PopupHeader/PopupHeader.js

@@ -17,7 +17,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
 function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
     const surface = (0, overlaySurface_1.useSurfaceTokenSegment)();
-    // `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
     const isSheet = (0, overlaySurface_1.useOverlaySurface)() === overlaySurface_1.OVERLAY_SURFACE.Sheet;
     const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
     // Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
@@ -33,5 +32,5 @@ function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle
         backButton: testIds?.backButton ?? constants_1.TEST_IDS.backButton,
         actionButton: testIds?.actionButton ?? constants_1.TEST_IDS.actionButton,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": ids.header, children: [hasHeadline && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles_module_scss_1.default.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitleWrapper, "data-test-id": ids.subtitle, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 'm', className: styles_module_scss_1.default.subtitle, children: subtitleContent }) })), isSheet && slotSecondTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": ids.header, children: [hasHeadline && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles_module_scss_1.default.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitleWrapper, "data-test-id": ids.subtitle, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 'm', className: styles_module_scss_1.default.subtitle, children: subtitleContent }) })), slotSecondTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
 }

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

@@ -122,4 +122,9 @@
 [data-surface=bottomSheet] .secondWrapper{
   padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
   padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+}
+[data-surface=window] .secondWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
 }

package/dist/cjs/style.css

@@ -300,6 +300,11 @@
   padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
   padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
 }
+[data-surface=window] .secondWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
 .wrapper{
   touch-action:none;
   overflow:hidden;

package/dist/cjs/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from '@cloud-ru/ds-button';
 import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants';
 /**
  * Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
@@ -39,8 +39,9 @@ export type PopupHeaderProps = WithSupportProps<{
     /** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
     subtitle?: ReactNode;
     /**
-     * Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
-     * Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
+     * Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`.
+     * Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`,
+     * `subHeadlineWrapper` в мастере `window` (modal / drawer).
      */
     slotSecondTitle?: ReactNode;
     /**
@@ -86,6 +87,8 @@ export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
      * @default true
      */
     bodyPadding?: boolean;
+    /** Ссылка на скроллируемый контейнер body. */
+    innerRef?: Ref<HTMLElement>;
     /** CSS-класс контейнера body. */
     className?: string;
 }>>;

package/dist/esm/components/PopupBody/PopupBody.d.ts

@@ -1,3 +1,3 @@
 import { PopupBodyProps } from '../../types.js';
 /** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
-export declare function PopupBody({ content, children, bodyPadding, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopupBody({ content, children, bodyPadding, innerRef, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PopupBody/PopupBody.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { extractSupportProps, withInnerRefSupport } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { TEST_IDS } from '../../constants.js';
 import styles from './styles.module.css';
 /** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
-export function PopupBody({ content, children, bodyPadding = true, className, ...rest }) {
-    return (_jsx("div", { className: cn(styles.root, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
+export function PopupBody({ content, children, bodyPadding = true, innerRef, className, ...rest }) {
+    return (_jsx("div", { 
+        // Публичный тип шире (`HTMLElement`), потому что drawer-ветка body отдаёт ref от `Scroll`.
+        ref: innerRef, className: cn(styles.root, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
 }
+withInnerRefSupport(PopupBody);

package/dist/esm/components/PopupHeader/PopupHeader.js

@@ -11,7 +11,6 @@ import styles from './styles.module.css';
 /** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
 export function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
     const surface = useSurfaceTokenSegment();
-    // `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
     const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
     const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
     // Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
@@ -27,5 +26,5 @@ export function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSeco
         backButton: testIds?.backButton ?? TEST_IDS.backButton,
         actionButton: testIds?.actionButton ?? TEST_IDS.actionButton,
     };
-    return (_jsxs("div", { className: cn(styles.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...extractSupportProps(rest), "data-test-id": ids.header, children: [hasHeadline && (_jsxs("div", { className: styles.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && (_jsx(Button, { view: 'function', appearance: 'neutral', size: 'm', icon: _jsx(ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), _jsxs("div", { className: styles.headline, children: [title && (_jsx(Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && (_jsx("span", { className: styles.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && (_jsx("span", { className: styles.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && (_jsx("div", { className: styles.subtitleWrapper, "data-test-id": ids.subtitle, children: _jsx(Typography, { variant: 'body', size: 'm', className: styles.subtitle, children: subtitleContent }) })), isSheet && slotSecondTitle && (_jsx("div", { className: styles.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
+    return (_jsxs("div", { className: cn(styles.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...extractSupportProps(rest), "data-test-id": ids.header, children: [hasHeadline && (_jsxs("div", { className: styles.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && (_jsx(Button, { view: 'function', appearance: 'neutral', size: 'm', icon: _jsx(ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), _jsxs("div", { className: styles.headline, children: [title && (_jsx(Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && (_jsx("span", { className: styles.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && (_jsx("span", { className: styles.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && (_jsx("div", { className: styles.subtitleWrapper, "data-test-id": ids.subtitle, children: _jsx(Typography, { variant: 'body', size: 'm', className: styles.subtitle, children: subtitleContent }) })), slotSecondTitle && (_jsx("div", { className: styles.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
 }

package/dist/esm/components/PopupHeader/styles.module.css

@@ -122,4 +122,9 @@
 [data-surface=bottomSheet] .secondWrapper{
   padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
   padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+}
+[data-surface=window] .secondWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
 }

package/dist/esm/style.css

@@ -300,6 +300,11 @@
   padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
   padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
 }
+[data-surface=window] .secondWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
 .wrapper{
   touch-action:none;
   overflow:hidden;

package/dist/esm/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from '@cloud-ru/ds-button';
 import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, Ref } from 'react';
 import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants.js';
 /**
  * Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
@@ -39,8 +39,9 @@ export type PopupHeaderProps = WithSupportProps<{
     /** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
     subtitle?: ReactNode;
     /**
-     * Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
-     * Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
+     * Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`.
+     * Рендерится на обеих поверхностях: `secondWrapper` в мастере `bottomSheet`,
+     * `subHeadlineWrapper` в мастере `window` (modal / drawer).
      */
     slotSecondTitle?: ReactNode;
     /**
@@ -86,6 +87,8 @@ export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
      * @default true
      */
     bodyPadding?: boolean;
+    /** Ссылка на скроллируемый контейнер body. */
+    innerRef?: Ref<HTMLElement>;
     /** CSS-класс контейнера body. */
     className?: string;
 }>>;