@cloud-ru/ds-drawer 1.0.7-preview-5f569f3c.0 → 1.1.0

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

@@ -1,19 +1,3 @@
 .drawer{
   box-sizing:border-box;
-}
-
-.safeAreaTop{
-  display:flex;
-  flex-direction:column;
-  align-items:flex-start;
-  align-self:stretch;
-  padding-top:var(--sn-drawer-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
-}
-
-.safeAreaBottom{
-  display:flex;
-  flex-direction:column;
-  align-items:flex-start;
-  align-self:stretch;
-  padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
 }

package/dist/esm/components/Drawer/types.d.ts

@@ -1,16 +1,20 @@
 import { BottomSheetActionButton, BottomSheetProps, FooterActionsOrientation } from '@cloud-ru/ds-bottom-sheet';
 import { WithSupportProps } from '@cloud-ru/ds-utils';
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogBodyProps, DialogHeaderProps } from '../../helperComponents/index.js';
 import { DrawerCustomProps } from '../DrawerCustom/index.js';
 /**
  * Адаптивный Drawer: desktop — боковая/верхняя/нижняя панель, `mobile` — `BottomSheet`.
  *
  * Только desktop: `position`, `width`, `heightAuto`, `nestedDrawer` (на mobile игнорируются).
- * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`
+ * Только mobile: `swipeEnabled`, `snapPoints`, `snapIndex`, `onSnapIndexChange`, `safeArea`, `withDividers`
  * (на desktop-панели игнорируются — это анатомия `BottomSheet`).
  */
-export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
+export type DrawerProps = WithSupportProps<Omit<DrawerCustomProps, 'nestedDrawer' | 'push' | 'resizable'> & Pick<BottomSheetProps, 'swipeEnabled' | 'snapPoints' | 'snapIndex' | 'onSnapIndexChange' | 'safeArea'> & Pick<DialogHeaderProps, 'title' | 'slotAfterTitle' | 'slotSecondTitle' | 'onBackButtonClick'> & Pick<DialogBodyProps, 'content'> & {
+    /** Ссылка на скроллируемый контейнер контента (например, для дозагрузки по скроллу). */
+    contentRef?: Ref<HTMLElement>;
+    /** Только mobile: разделители между шапкой/контентом/футером sheet'а. @default false */
+    withDividers?: boolean;
     /** Текстовая строка-подзаголовок под title. */
     subtitle?: ReactNode;
     /** CSS-класс */

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

@@ -1,4 +1,4 @@
-import { DialogBody, DialogBodyProps, DialogFooterProps, DialogHeaderProps } from '../../helperComponents/index.js';
+import { DialogBody, DialogBodyProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps } from '../../helperComponents/index.js';
 import { DrawerCustomProps } from './types.js';
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
@@ -9,7 +9,7 @@ export declare namespace DrawerCustom {
     type HeaderProps = DialogHeaderProps;
     type BodyProps = DialogBodyProps;
     type FooterProps = DialogFooterProps;
-    const Header: typeof import("@cloud-ru/ds-popup-private").PopupHeader;
+    const Header: typeof DialogHeader;
     const Body: typeof DialogBody;
-    const Footer: typeof import("@cloud-ru/ds-popup-private").PopupFooter;
+    const Footer: typeof DialogFooter;
 }

package/dist/esm/components/DrawerCustom/DrawerCustom.js

@@ -53,7 +53,7 @@ function DrawerFrame(props) {
     const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
     return (_jsx(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: cn(styles.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
             section: cn(styles.drawer, className),
-        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: styles.prefixCls, ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.scrollLock, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+        }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.scrollLock, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
 }
 /**
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.

package/dist/esm/components/DrawerCustom/constants.js

@@ -1,12 +1,11 @@
-import styles from './styles.module.css';
 export const maskMotion = {
     motionAppear: true,
-    motionName: styles.maskMotionName,
+    motionName: 'maskMotion',
 };
 export const motion = placement => ({
     motionAppear: true,
     motionDeadline: 300,
-    motionName: `${styles.panelMotionName}-${placement}`,
+    motionName: `panelMotion-${placement}`,
 });
 export const motionProps = {
     maskMotion,

package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@cloud-ru/ds-tooltip';
 import { isBrowser } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import styles from '../styles.module.css';
-const DRAGGER_SELECTOR = `.${styles.prefixCls}-resizable-dragger`;
+const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
 export function useDrawerResize({ position, resizable: resizableProp }) {
     const targetRef = useRef(null);
     const targetRefCallbackRef = useRef();