@cloud-ru/ds-popup-private 1.0.4-preview-5926424e.0 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +1 -2
- package/dist/cjs/components/PopupBody/PopupBody.d.ts +1 -1
- package/dist/cjs/components/PopupBody/PopupBody.js +2 -5
- package/dist/cjs/components/PopupHeader/PopupHeader.js +2 -1
- package/dist/cjs/components/PopupHeader/styles.module.css +0 -5
- package/dist/cjs/style.css +0 -5
- package/dist/cjs/types.d.ts +3 -6
- package/dist/esm/components/PopupBody/PopupBody.d.ts +1 -1
- package/dist/esm/components/PopupBody/PopupBody.js +3 -6
- package/dist/esm/components/PopupHeader/PopupHeader.js +2 -1
- package/dist/esm/components/PopupHeader/styles.module.css +0 -5
- package/dist/esm/style.css +0 -5
- package/dist/esm/types.d.ts +3 -6
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +7 -7
- package/src/components/PopupBody/PopupBody.tsx +2 -7
- package/src/components/PopupHeader/PopupHeader.tsx +2 -1
- package/src/components/PopupHeader/styles.module.scss +0 -7
- package/src/types.ts +5 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 1.0.4 (2026-08-28)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @ds/popup-private
|
|
9
|
+
|
|
6
10
|
## 1.0.3 (2026-08-27)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -65,7 +65,6 @@
|
|
|
65
65
|
| `className` | `string` | — | CSS-класс контейнера body. |
|
|
66
66
|
| `content` | `ReactNode` | — | Содержимое body (альтернатива `children`). |
|
|
67
67
|
| `data-test-id` | `string` | — | |
|
|
68
|
-
| `innerRef` | `Ref<HTMLElement>` | — | Ссылка на скроллируемый контейнер body. |
|
|
69
68
|
|
|
70
69
|
## PopupCloseButton
|
|
71
70
|
|
|
@@ -99,7 +98,7 @@
|
|
|
99
98
|
| `data-test-id` | `string` | — | |
|
|
100
99
|
| `onBackButtonClick` | `(() => void)` | — | Callback клика на back-кнопку (слева в шапке). <br/> Наличие callback'а авто-рендерит `Button view='function' icon={<ArrowLeftSVG />}`. |
|
|
101
100
|
| `slotAfterTitle` | `ReactNode` | — | Slot справа от title (например, `QuestionTooltip` из `@cloud-ru/ds-tooltip`). |
|
|
102
|
-
| `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`. <br/>
|
|
101
|
+
| `slotSecondTitle` | `ReactNode` | — | Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`. <br/> Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности. |
|
|
103
102
|
| `subtitle` | `ReactNode` | — | Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. |
|
|
104
103
|
| `testIds` | `PopupHeaderTestIds` | — | Переопределение `data-test-id` слотов шапки. Каждый пропущенный ключ берётся из `TEST_IDS`. <br/> Потребитель-обёртка (drawer/modal) прокидывает сюда свои id, чтобы сохранить публичный контракт. |
|
|
105
104
|
| `title` | `ReactNode` | — | Заголовок. Типографика зависит от поверхности: `title-l` на sheet, `headline-s` на window (modal/drawer). |
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { PopupBodyProps } from '../../types';
|
|
2
2
|
/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
|
|
3
|
-
export declare function PopupBody({ content, children, bodyPadding,
|
|
3
|
+
export declare function PopupBody({ content, children, bodyPadding, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -10,9 +10,6 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
const constants_1 = require("../../constants");
|
|
11
11
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
12
12
|
/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
|
|
13
|
-
function PopupBody({ content, children, bodyPadding = true,
|
|
14
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
15
|
-
// Публичный тип шире (`HTMLElement`), потому что drawer-ветка body отдаёт ref от `Scroll`.
|
|
16
|
-
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 }));
|
|
13
|
+
function PopupBody({ content, children, bodyPadding = true, className, ...rest }) {
|
|
14
|
+
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 }));
|
|
17
15
|
}
|
|
18
|
-
(0, utils_1.withInnerRefSupport)(PopupBody);
|
|
@@ -17,6 +17,7 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
|
17
17
|
/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
|
|
18
18
|
function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
|
|
19
19
|
const surface = (0, overlaySurface_1.useSurfaceTokenSegment)();
|
|
20
|
+
// `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
|
|
20
21
|
const isSheet = (0, overlaySurface_1.useOverlaySurface)() === overlaySurface_1.OVERLAY_SURFACE.Sheet;
|
|
21
22
|
const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
|
|
22
23
|
// Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
|
|
@@ -32,5 +33,5 @@ function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle
|
|
|
32
33
|
backButton: testIds?.backButton ?? constants_1.TEST_IDS.backButton,
|
|
33
34
|
actionButton: testIds?.actionButton ?? constants_1.TEST_IDS.actionButton,
|
|
34
35
|
};
|
|
35
|
-
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 }))] }));
|
|
36
|
+
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 }))] }));
|
|
36
37
|
}
|
|
@@ -122,9 +122,4 @@
|
|
|
122
122
|
[data-surface=bottomSheet] .secondWrapper{
|
|
123
123
|
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))));
|
|
124
124
|
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))));
|
|
125
|
-
}
|
|
126
|
-
[data-surface=window] .secondWrapper{
|
|
127
|
-
align-self:stretch;
|
|
128
|
-
padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
129
|
-
padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
130
125
|
}
|
package/dist/cjs/style.css
CHANGED
|
@@ -300,11 +300,6 @@
|
|
|
300
300
|
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))));
|
|
301
301
|
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))));
|
|
302
302
|
}
|
|
303
|
-
[data-surface=window] .secondWrapper{
|
|
304
|
-
align-self:stretch;
|
|
305
|
-
padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
306
|
-
padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
307
|
-
}
|
|
308
303
|
.wrapper{
|
|
309
304
|
touch-action:none;
|
|
310
305
|
overflow:hidden;
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonProps } from '@cloud-ru/ds-button';
|
|
2
2
|
import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
|
|
3
|
-
import { PropsWithChildren, ReactNode
|
|
3
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
4
4
|
import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants';
|
|
5
5
|
/**
|
|
6
6
|
* Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
|
|
@@ -39,9 +39,8 @@ export type PopupHeaderProps = WithSupportProps<{
|
|
|
39
39
|
/** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
|
|
40
40
|
subtitle?: ReactNode;
|
|
41
41
|
/**
|
|
42
|
-
* Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`.
|
|
43
|
-
*
|
|
44
|
-
* `subHeadlineWrapper` в мастере `window` (modal / drawer).
|
|
42
|
+
* Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
|
|
43
|
+
* Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
|
|
45
44
|
*/
|
|
46
45
|
slotSecondTitle?: ReactNode;
|
|
47
46
|
/**
|
|
@@ -87,8 +86,6 @@ export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
|
|
|
87
86
|
* @default true
|
|
88
87
|
*/
|
|
89
88
|
bodyPadding?: boolean;
|
|
90
|
-
/** Ссылка на скроллируемый контейнер body. */
|
|
91
|
-
innerRef?: Ref<HTMLElement>;
|
|
92
89
|
/** CSS-класс контейнера body. */
|
|
93
90
|
className?: string;
|
|
94
91
|
}>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { PopupBodyProps } from '../../types.js';
|
|
2
2
|
/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
|
|
3
|
-
export declare function PopupBody({ content, children, bodyPadding,
|
|
3
|
+
export declare function PopupBody({ content, children, bodyPadding, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { extractSupportProps
|
|
2
|
+
import { extractSupportProps } from '@cloud-ru/ds-utils';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { TEST_IDS } from '../../constants.js';
|
|
5
5
|
import styles from './styles.module.css';
|
|
6
6
|
/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
|
|
7
|
-
export function PopupBody({ content, children, bodyPadding = true,
|
|
8
|
-
return (_jsx("div", {
|
|
9
|
-
// Публичный тип шире (`HTMLElement`), потому что drawer-ветка body отдаёт ref от `Scroll`.
|
|
10
|
-
ref: innerRef, className: cn(styles.root, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
|
|
7
|
+
export function PopupBody({ content, children, bodyPadding = true, className, ...rest }) {
|
|
8
|
+
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 }));
|
|
11
9
|
}
|
|
12
|
-
withInnerRefSupport(PopupBody);
|
|
@@ -11,6 +11,7 @@ import styles from './styles.module.css';
|
|
|
11
11
|
/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
|
|
12
12
|
export function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
|
|
13
13
|
const surface = useSurfaceTokenSegment();
|
|
14
|
+
// `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
|
|
14
15
|
const isSheet = useOverlaySurface() === OVERLAY_SURFACE.Sheet;
|
|
15
16
|
const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
|
|
16
17
|
// Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
|
|
@@ -26,5 +27,5 @@ export function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSeco
|
|
|
26
27
|
backButton: testIds?.backButton ?? TEST_IDS.backButton,
|
|
27
28
|
actionButton: testIds?.actionButton ?? TEST_IDS.actionButton,
|
|
28
29
|
};
|
|
29
|
-
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 }))] }));
|
|
30
|
+
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 }))] }));
|
|
30
31
|
}
|
|
@@ -122,9 +122,4 @@
|
|
|
122
122
|
[data-surface=bottomSheet] .secondWrapper{
|
|
123
123
|
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))));
|
|
124
124
|
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))));
|
|
125
|
-
}
|
|
126
|
-
[data-surface=window] .secondWrapper{
|
|
127
|
-
align-self:stretch;
|
|
128
|
-
padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
129
|
-
padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
130
125
|
}
|
package/dist/esm/style.css
CHANGED
|
@@ -300,11 +300,6 @@
|
|
|
300
300
|
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))));
|
|
301
301
|
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))));
|
|
302
302
|
}
|
|
303
|
-
[data-surface=window] .secondWrapper{
|
|
304
|
-
align-self:stretch;
|
|
305
|
-
padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
306
|
-
padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
|
|
307
|
-
}
|
|
308
303
|
.wrapper{
|
|
309
304
|
touch-action:none;
|
|
310
305
|
overflow:hidden;
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonProps } from '@cloud-ru/ds-button';
|
|
2
2
|
import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
|
|
3
|
-
import { PropsWithChildren, ReactNode
|
|
3
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
4
4
|
import { FOOTER_ACTIONS_ORIENTATION, MEDIA_KIND } from './constants.js';
|
|
5
5
|
/**
|
|
6
6
|
* Пропсы action-кнопки футера — объект пропсов `Button` из `@cloud-ru/ds-button`. `view` / `appearance` имеют
|
|
@@ -39,9 +39,8 @@ export type PopupHeaderProps = WithSupportProps<{
|
|
|
39
39
|
/** Текстовая строка-подзаголовок под title (Figma `subtitleWrapper`). Рендерится на всех поверхностях. */
|
|
40
40
|
subtitle?: ReactNode;
|
|
41
41
|
/**
|
|
42
|
-
* Slot под подзаголовком — типично `SearchBar`, `SegmentControl` или `Filter`.
|
|
43
|
-
*
|
|
44
|
-
* `subHeadlineWrapper` в мастере `window` (modal / drawer).
|
|
42
|
+
* Slot под подзаголовком (Figma `secondWrapper`) — типично `SearchBar`, `SegmentControl` или `Filter`.
|
|
43
|
+
* Есть только в мастере `bottomSheet`, поэтому рендерится **только** на sheet-поверхности.
|
|
45
44
|
*/
|
|
46
45
|
slotSecondTitle?: ReactNode;
|
|
47
46
|
/**
|
|
@@ -87,8 +86,6 @@ export type PopupBodyProps = WithSupportProps<PropsWithChildren<{
|
|
|
87
86
|
* @default true
|
|
88
87
|
*/
|
|
89
88
|
bodyPadding?: boolean;
|
|
90
|
-
/** Ссылка на скроллируемый контейнер body. */
|
|
91
|
-
innerRef?: Ref<HTMLElement>;
|
|
92
89
|
/** CSS-класс контейнера body. */
|
|
93
90
|
className?: string;
|
|
94
91
|
}>>;
|