@cloud-ru/ds-drawer 1.0.0

package/dist/cjs/helperComponents/DesktopDrawer/DesktopDrawer.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopDrawer = DesktopDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../components/Drawer/constants");
+const styles_module_scss_1 = __importDefault(require('../../components/Drawer/styles.module.css'));
+const DrawerCustom_1 = require("../../components/DrawerCustom");
+const constants_2 = require("../../constants");
+/** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
+function DesktopDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, nestedDrawer, className, ...rest }) {
+    const showHeader = Boolean(title || subtitle || slotAfterTitle);
+    // Футер: произвольный `footer` (приоритет) либо сборка из слотов через общий `FooterActions`.
+    const footerContent = footer ??
+        (approveButton || cancelButton || additionalButton ? ((0, jsx_runtime_1.jsx)(bottom_sheet_1.FooterActions, { surface: 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
+                approve: constants_2.TEST_IDS.footerApprove,
+                cancel: constants_2.TEST_IDS.footerCancel,
+                additional: constants_2.TEST_IDS.footerAdditional,
+            } })) : null);
+    return ((0, jsx_runtime_1.jsxs)(DrawerCustom_1.DrawerCustom, { ...rest, resizable: undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className), push: Boolean(nestedDrawer) && { distance: constants_1.NESTED_DRAWER_PUSH_DISTANCE }, children: [media, (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaTop }), showHeader && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick, 
+                // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
+                // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
+                testIds: {
+                    header: constants_2.TEST_IDS.header,
+                    title: constants_2.TEST_IDS.title,
+                    subtitle: constants_2.TEST_IDS.subtitle,
+                } })), (0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Body, { "data-test-id": constants_2.TEST_IDS.body, content: content }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaBottom }), footerContent != null && ((0, jsx_runtime_1.jsx)(DrawerCustom_1.DrawerCustom.Footer, { "data-test-id": constants_2.TEST_IDS.footer, children: footerContent })), nestedDrawer] }));
+}

package/dist/cjs/helperComponents/DesktopDrawer/index.d.ts

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

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

package/dist/cjs/helperComponents/DialogSlots.d.ts

@@ -0,0 +1,8 @@
+import { SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
+import { DrawerBodyProps } from './DrawerBody';
+export type DialogHeaderProps = SheetHeaderProps;
+export type DialogBodyProps = DrawerBodyProps;
+export type DialogFooterProps = SheetFooterProps;
+export declare const DialogHeader: typeof SheetHeader;
+export declare const DialogFooter: typeof SheetFooter;
+export declare function DialogBody(props: DialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/DialogSlots.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogFooter = exports.DialogHeader = void 0;
+exports.DialogBody = DialogBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const DrawerBody_1 = require("./DrawerBody");
+exports.DialogHeader = bottom_sheet_1.SheetHeader;
+exports.DialogFooter = bottom_sheet_1.SheetFooter;
+function DialogBody(props) {
+    return (0, bottom_sheet_1.useOverlaySurface)() === bottom_sheet_1.OVERLAY_SURFACE.Sheet ? (0, jsx_runtime_1.jsx)(bottom_sheet_1.SheetBody, { ...props }) : (0, jsx_runtime_1.jsx)(DrawerBody_1.DrawerBody, { ...props });
+}

package/dist/cjs/helperComponents/DrawerBody/DrawerBody.d.ts

@@ -0,0 +1,4 @@
+import { SheetBodyProps } from '@cloud-ru/ds-bottom-sheet';
+export type DrawerBodyProps = SheetBodyProps;
+/** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
+export declare function DrawerBody({ content, children, bodyPadding, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/DrawerBody/DrawerBody.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerBody = DrawerBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
+function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
+    const heightAutoVertical = (0, bottom_sheet_1.useOverlayBodyHeightAuto)();
+    return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 'm', barHideStrategy: 'never', className: (0, classnames_1.default)(styles_module_scss_1.default.body, heightAutoVertical && styles_module_scss_1.default.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...(0, utils_1.extractSupportProps)(rest), children: children ?? content }));
+}

package/dist/cjs/helperComponents/DrawerBody/index.d.ts

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

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

package/dist/cjs/helperComponents/DrawerBody/styles.module.css

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+.body{
+  padding-left:var(--sn-drawer-anatomy-container-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-drawer-anatomy-container-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-drawer-anatomy-container-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  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));
+}
+
+.body[data-no-padding]{
+  padding-right:0;
+  padding-left:0;
+}
+.bodyHeightAuto{
+  flex:0 1 auto;
+  height:auto !important;
+  min-height:0;
+  max-height:100%;
+}

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.d.ts

@@ -0,0 +1,7 @@
+import { DrawerProps } from '../../components/Drawer/types';
+/**
+ * Mobile-поверхность Drawer'а: контент в `BottomSheet`, слоты маппятся на API sheet'а
+ * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
+ * уходят в `...rest`.
+ */
+export declare function MobileDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDrawer = MobileDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const utils_1 = require("@cloud-ru/ds-utils");
+const constants_1 = require("../../constants");
+/**
+ * Mobile-поверхность Drawer'а: контент в `BottomSheet`, слоты маппятся на API sheet'а
+ * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
+ * уходят в `...rest`.
+ */
+function MobileDrawer({ content, media, title, slotAfterTitle, subtitle, onBackButtonClick, approveButton, cancelButton, additionalButton, footerActionsOrientation, footer, className, rootClassName, open, onClose, showBlackout, container, closeOnPopstate, swipeEnabled, snapPoints, snapIndex, onSnapIndexChange, safeArea, ...rest }) {
+    // Футер собирает сам `BottomSheet`.
+    return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet
+    // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+    , { 
+        // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+        withDividers: false, open: open, onClose: onClose, showBackdrop: showBlackout, title: title, subtitle: subtitle, slotAfterTitle: slotAfterTitle, onBackButtonClick: onBackButtonClick, media: media, content: content, approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, footer: footer, 
+        // Те же id футера, что у desktop-поверхности — стабильный селектор при свапе surface.
+        footerTestIds: {
+            approve: constants_1.TEST_IDS.footerApprove,
+            cancel: constants_1.TEST_IDS.footerCancel,
+            additional: constants_1.TEST_IDS.footerAdditional,
+        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeArea: safeArea, ...(0, utils_1.extractSupportProps)(rest) }));
+}

package/dist/cjs/helperComponents/MobileDrawer/index.d.ts

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

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

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,8 @@
+export { PopupCloseButton as ButtonClose } from '@cloud-ru/ds-popup-private';
+export type { PopupCloseButtonProps as ButtonCloseProps } from '@cloud-ru/ds-popup-private';
+export * from './DesktopDrawer';
+export * from './MobileDrawer';
+export { DialogBody, DialogFooter, DialogHeader } from './DialogSlots';
+export type { DialogBodyProps, DialogFooterProps, DialogHeaderProps } from './DialogSlots';
+export { DrawerBody } from './DrawerBody';
+export type { DrawerBodyProps } from './DrawerBody';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,30 @@
+"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 });
+exports.DrawerBody = exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.ButtonClose = void 0;
+// Единая кнопка закрытия overlay'я вынесена в `@cloud-ru/ds-popup-private`; имена `ButtonClose`/`ButtonCloseProps` сохранены как фасад.
+var popup_private_1 = require("@cloud-ru/ds-popup-private");
+Object.defineProperty(exports, "ButtonClose", { enumerable: true, get: function () { return popup_private_1.PopupCloseButton; } });
+// Surface-поверхности адаптивного Drawer'а: sheet-рендер на mobile (через `@cloud-ru/ds-bottom-sheet`), drawer-рендер в desktop-frame.
+__exportStar(require("./DesktopDrawer"), exports);
+__exportStar(require("./MobileDrawer"), exports);
+// Surface-aware слоты дровера: sheet-рендер на mobile (через `@cloud-ru/ds-bottom-sheet`), drawer-рендер в desktop-frame.
+var DialogSlots_1 = require("./DialogSlots");
+Object.defineProperty(exports, "DialogBody", { enumerable: true, get: function () { return DialogSlots_1.DialogBody; } });
+Object.defineProperty(exports, "DialogFooter", { enumerable: true, get: function () { return DialogSlots_1.DialogFooter; } });
+Object.defineProperty(exports, "DialogHeader", { enumerable: true, get: function () { return DialogSlots_1.DialogHeader; } });
+var DrawerBody_1 = require("./DrawerBody");
+Object.defineProperty(exports, "DrawerBody", { enumerable: true, get: function () { return DrawerBody_1.DrawerBody; } });

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export { FOOTER_ACTIONS_ORIENTATION } from '@cloud-ru/ds-bottom-sheet';
+export type { BottomSheetActionButton, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
+export * from './components';
+export * from './constants';
+export * from './types';

package/dist/cjs/index.js

@@ -0,0 +1,23 @@
+"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 });
+exports.FOOTER_ACTIONS_ORIENTATION = void 0;
+// Футер-слоты типизированных кнопок общие с `@cloud-ru/ds-bottom-sheet` (adaptive мапит desktop↔mobile 1:1).
+var bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+Object.defineProperty(exports, "FOOTER_ACTIONS_ORIENTATION", { enumerable: true, get: function () { return bottom_sheet_1.FOOTER_ACTIONS_ORIENTATION; } });
+__exportStar(require("./components"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}