@cloud-ru/ds-drawer 1.0.0

package/dist/esm/helperComponents/DesktopDrawer/DesktopDrawer.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
+import cn from 'classnames';
+import { NESTED_DRAWER_PUSH_DISTANCE } from '../../components/Drawer/constants.js';
+import styles from '../../components/Drawer/styles.module.css';
+import { DrawerCustom } from '../../components/DrawerCustom/index.js';
+import { TEST_IDS } from '../../constants.js';
+/** Desktop-поверхность Drawer'а: панель (`DrawerCustom`) с пресетной разметкой. Internal. */
+export 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 ? (_jsx(FooterActions, { surface: 'window', size: 'l', approveButton: approveButton, cancelButton: cancelButton, additionalButton: additionalButton, footerActionsOrientation: footerActionsOrientation, testIds: {
+                approve: TEST_IDS.footerApprove,
+                cancel: TEST_IDS.footerCancel,
+                additional: TEST_IDS.footerAdditional,
+            } })) : null);
+    return (_jsxs(DrawerCustom, { ...rest, resizable: undefined, className: cn(styles.drawer, className), push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [media, _jsx("div", { className: styles.safeAreaTop }), showHeader && (_jsx(DrawerCustom.Header, { title: title, slotAfterTitle: slotAfterTitle, subtitle: subtitle, onBackButtonClick: onBackButtonClick, 
+                // Сохраняем публичный контракт test-id'ов drawer'а поверх общего `PopupHeader`.
+                // slotAfterTitle НЕ переопределяем: id тултипа ставит сам потребитель на своём span.
+                testIds: {
+                    header: TEST_IDS.header,
+                    title: TEST_IDS.title,
+                    subtitle: TEST_IDS.subtitle,
+                } })), _jsx(DrawerCustom.Body, { "data-test-id": TEST_IDS.body, content: content }), _jsx("div", { className: styles.safeAreaBottom }), footerContent != null && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, children: footerContent })), nestedDrawer] }));
+}

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

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

package/dist/esm/helperComponents/DesktopDrawer/index.js

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

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

@@ -0,0 +1,8 @@
+import { SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps } from '@cloud-ru/ds-bottom-sheet';
+import { DrawerBodyProps } from './DrawerBody/index.js';
+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/esm/helperComponents/DialogSlots.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OVERLAY_SURFACE, SheetBody, SheetFooter, SheetHeader, useOverlaySurface, } from '@cloud-ru/ds-bottom-sheet';
+import { DrawerBody } from './DrawerBody/index.js';
+export const DialogHeader = SheetHeader;
+export const DialogFooter = SheetFooter;
+export function DialogBody(props) {
+    return useOverlaySurface() === OVERLAY_SURFACE.Sheet ? _jsx(SheetBody, { ...props }) : _jsx(DrawerBody, { ...props });
+}

package/dist/esm/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/esm/helperComponents/DrawerBody/DrawerBody.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useOverlayBodyHeightAuto } from '@cloud-ru/ds-bottom-sheet';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import styles from './styles.module.css';
+/** Body дровера (desktop): `Scroll`; высота-по-контенту — из overlay-контекста. */
+export function DrawerBody({ content, children, bodyPadding = true, className, ...rest }) {
+    const heightAutoVertical = useOverlayBodyHeightAuto();
+    return (_jsx(Scroll, { size: 'm', barHideStrategy: 'never', className: cn(styles.body, heightAutoVertical && styles.bodyHeightAuto, className), "data-no-padding": bodyPadding === false || undefined, ...extractSupportProps(rest), children: children ?? content }));
+}

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

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

package/dist/esm/helperComponents/DrawerBody/index.js

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

package/dist/esm/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/esm/helperComponents/MobileDrawer/MobileDrawer.d.ts

@@ -0,0 +1,7 @@
+import { DrawerProps } from '../../components/Drawer/types.js';
+/**
+ * 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/esm/helperComponents/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { TEST_IDS } from '../../constants.js';
+/**
+ * Mobile-поверхность Drawer'а: контент в `BottomSheet`, слоты маппятся на API sheet'а
+ * (`subtitle` 1:1, `showBlackout→showBackdrop`, остальное 1:1). Internal. Desktop-only пропы
+ * уходят в `...rest`.
+ */
+export 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 (_jsx(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: TEST_IDS.footerApprove,
+            cancel: TEST_IDS.footerCancel,
+            additional: TEST_IDS.footerAdditional,
+        }, className: className, rootClassName: rootClassName, container: container, closeOnPopstate: closeOnPopstate, swipeEnabled: swipeEnabled, snapPoints: snapPoints, snapIndex: snapIndex, onSnapIndexChange: onSnapIndexChange, safeArea: safeArea, ...extractSupportProps(rest) }));
+}

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

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

package/dist/esm/helperComponents/MobileDrawer/index.js

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

package/dist/esm/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/index.js';
+export * from './MobileDrawer/index.js';
+export { DialogBody, DialogFooter, DialogHeader } from './DialogSlots.js';
+export type { DialogBodyProps, DialogFooterProps, DialogHeaderProps } from './DialogSlots.js';
+export { DrawerBody } from './DrawerBody/index.js';
+export type { DrawerBodyProps } from './DrawerBody/index.js';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,8 @@
+// Единая кнопка закрытия overlay'я вынесена в `@cloud-ru/ds-popup-private`; имена `ButtonClose`/`ButtonCloseProps` сохранены как фасад.
+export { PopupCloseButton as ButtonClose } from '@cloud-ru/ds-popup-private';
+// Surface-поверхности адаптивного Drawer'а: sheet-рендер на mobile (через `@cloud-ru/ds-bottom-sheet`), drawer-рендер в desktop-frame.
+export * from './DesktopDrawer/index.js';
+export * from './MobileDrawer/index.js';
+// Surface-aware слоты дровера: sheet-рендер на mobile (через `@cloud-ru/ds-bottom-sheet`), drawer-рендер в desktop-frame.
+export { DialogBody, DialogFooter, DialogHeader } from './DialogSlots.js';
+export { DrawerBody } from './DrawerBody/index.js';

package/dist/esm/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/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+// Футер-слоты типизированных кнопок общие с `@cloud-ru/ds-bottom-sheet` (adaptive мапит desktop↔mobile 1:1).
+export { FOOTER_ACTIONS_ORIENTATION } from '@cloud-ru/ds-bottom-sheet';
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';