@cloud-ru/ds-drawer 1.0.0

package/dist/cjs/components/DrawerCustom/DrawerCustom.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerCustom = DrawerCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const popup_private_1 = require("@cloud-ru/ds-popup-private");
+const portal_context_1 = require("@cloud-ru/ds-portal-context");
+const utils_1 = require("@cloud-ru/ds-utils");
+const drawer_1 = __importDefault(require("@rc-component/drawer"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const interopDefault_1 = require("../../utils/interopDefault");
+const constants_2 = require("./constants");
+const hooks_1 = require("./hooks");
+const useDrawerResize_1 = require("./hooks/useDrawerResize");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const RcDrawer = (0, interopDefault_1.interopDefault)(drawer_1.default);
+/** Desktop-frame дровера: rc-drawer + position/width/push/nestedDrawer + close-button. Surface='drawer'. */
+function DrawerFrame(props) {
+    const { showBlackout = true, showButtonClosed = true, open, onClose, rootClassName, className, push, container, children, nestedDrawer, closeOnPopstate, position, heightAuto, width: widthProp, resizable: resizableProp, disableMotions = false, ...rest } = props;
+    const heightAutoVertical = Boolean(heightAuto && (position === 'top' || position === 'bottom'));
+    const resizable = heightAutoVertical ? undefined : resizableProp;
+    const { tooltip, checkElement, width: userWidth, resizable: drawerResizable, } = (0, useDrawerResize_1.useDrawerResize)({
+        resizable,
+        position,
+    });
+    const width = resizable ? (userWidth ?? widthProp) : widthProp;
+    const isPredefinedWidth = typeof width === 'string' && constants_1.WIDTH_AS_VALUES.includes(width);
+    // Wrapper height/inset задаёт CSS по `[data-height-auto]`; здесь только стили секции.
+    const drawerPanelStyle = (0, react_1.useMemo)(() => {
+        if (!heightAutoVertical) {
+            return undefined;
+        }
+        return {
+            height: 'auto',
+            maxHeight: '100%',
+            minHeight: 0,
+            overflow: 'hidden',
+        };
+    }, [heightAutoVertical]);
+    // Esc обрабатывает rc-drawer (`keyboard={showBlackout}`) — он уважает стек порталов и закрывает
+    // только верхний дровер. `CloseWatcher` подключаем лишь там, где rc-drawer Esc не слушает
+    // (`showBlackout=false`): иначе два независимых обработчика закрывают и вложенный, и родительский.
+    (0, utils_1.useModalOpenState)(open, onClose, { closeOnPopstate, closeByCloseWatcher: !showBlackout });
+    const focusTrapRef = (0, hooks_1.useDrawerFocusTrap)(Boolean(open));
+    // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
+    // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
+    const portalContextRef = (0, portal_context_1.usePortalContext)();
+    const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
+    return ((0, jsx_runtime_1.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: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
+            section: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
+        }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.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 ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)("div", { ref: focusTrapRef, className: styles_module_scss_1.default.focusScope, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
+}
+/**
+ * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
+ * Композиция одна (surface-aware слоты `.Header/.Body/.Footer`). Форс — `withLayoutType`.
+ */
+function DrawerCustom(props) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    if ((0, adaptive_1.isMobileLayout)(layoutType)) {
+        const { open, onClose, children, className, rootClassName, container, closeOnPopstate, showBlackout, snapPoints, swipeEnabled, safeArea, disableMotions, ...rest } = props;
+        return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetCustom, { open: open, onClose: onClose, container: container, className: className, rootClassName: rootClassName, closeOnPopstate: closeOnPopstate, showBackdrop: showBlackout, snapPoints: snapPoints, swipeEnabled: swipeEnabled, safeArea: safeArea, disableMotions: disableMotions, ...(0, utils_1.extractSupportProps)(rest), children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)(DrawerFrame, { ...props });
+}
+(function (DrawerCustom) {
+    DrawerCustom.Header = helperComponents_1.DialogHeader;
+    DrawerCustom.Body = helperComponents_1.DialogBody;
+    DrawerCustom.Footer = helperComponents_1.DialogFooter;
+})(DrawerCustom || (exports.DrawerCustom = DrawerCustom = {}));

package/dist/cjs/components/DrawerCustom/constants.d.ts

@@ -0,0 +1,4 @@
+import { DrawerProps } from '@rc-component/drawer';
+export declare const maskMotion: DrawerProps['maskMotion'];
+export declare const motion: DrawerProps['motion'];
+export declare const motionProps: Partial<DrawerProps>;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.motionProps = exports.motion = exports.maskMotion = void 0;
+exports.maskMotion = {
+    motionAppear: true,
+    motionName: 'maskMotion',
+};
+const motion = placement => ({
+    motionAppear: true,
+    motionDeadline: 300,
+    motionName: `panelMotion-${placement}`,
+});
+exports.motion = motion;
+exports.motionProps = {
+    maskMotion: exports.maskMotion,
+    motion: exports.motion,
+};

package/dist/cjs/components/DrawerCustom/hooks/index.d.ts

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

package/dist/cjs/components/DrawerCustom/hooks/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("./useDrawerFocusTrap"), exports);

package/dist/cjs/components/DrawerCustom/hooks/useDrawerFocusTrap.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Focus scope для Drawer-панели:
+ *  - запоминает activeElement до открытия и возвращает фокус после закрытия;
+ *  - устанавливает фокус на контейнер при открытии (без прыжка на первый focusable);
+ *  - цикличный Tab / Shift+Tab внутри контейнера.
+ *
+ * Возвращает ref, который нужно повесить на корневой DOM-узел панели.
+ */
+export declare function useDrawerFocusTrap(active: boolean): import("react").RefObject<HTMLDivElement>;

package/dist/cjs/components/DrawerCustom/hooks/useDrawerFocusTrap.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerFocusTrap = useDrawerFocusTrap;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const tabbable_1 = require("tabbable");
+/**
+ * Focus scope для Drawer-панели:
+ *  - запоминает activeElement до открытия и возвращает фокус после закрытия;
+ *  - устанавливает фокус на контейнер при открытии (без прыжка на первый focusable);
+ *  - цикличный Tab / Shift+Tab внутри контейнера.
+ *
+ * Возвращает ref, который нужно повесить на корневой DOM-узел панели.
+ */
+function useDrawerFocusTrap(active) {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!active) {
+            return;
+        }
+        // Панель rc-drawer монтируется отдельным коммитом, поэтому `containerRef` здесь ещё пуст —
+        // возврат фокуса от него не зависит и на его отсутствие завязываться нельзя.
+        // Начальный фокус ставит сам rc-drawer (autoFocus на panelRef).
+        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        return () => {
+            if (previous &&
+                previous !== document.body &&
+                previous !== document.documentElement &&
+                document.documentElement.contains(previous)) {
+                previous.focus({ preventScroll: true });
+            }
+        };
+    }, [active]);
+    (0, react_1.useEffect)(() => {
+        if (!active) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Tab') {
+                return;
+            }
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            if (!(activeElement instanceof HTMLElement)) {
+                return;
+            }
+            const focusInsideDialog = container.contains(activeElement);
+            const nodes = (0, tabbable_1.tabbable)(container);
+            if (nodes.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const first = nodes[0];
+            const last = nodes[nodes.length - 1];
+            if (!focusInsideDialog) {
+                // Фокус ушёл наружу (rc-drawer sentinel / body) — вернём внутрь.
+                event.preventDefault();
+                if (event.shiftKey) {
+                    last?.focus();
+                }
+                else {
+                    first?.focus();
+                }
+                return;
+            }
+            if (event.shiftKey && activeElement === first) {
+                event.preventDefault();
+                last?.focus();
+                return;
+            }
+            if (!event.shiftKey && activeElement === last) {
+                event.preventDefault();
+                first?.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [active]);
+    return containerRef;
+}

package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.d.ts

@@ -0,0 +1,15 @@
+import { DrawerProps } from '@rc-component/drawer';
+import { DrawerCustomProps } from '../types';
+type UseDrawerResizeParams = Pick<DrawerCustomProps, 'position' | 'resizable'>;
+type UseDrawerResizeResult = {
+    /** JSX Тултипа для ползунка изменения ширины */
+    tooltip: React.ReactNode;
+    /** Функция поиска ползунка в DOM-дереве. Стоит вызывать тогда, когда он отрендерен. */
+    checkElement: () => void;
+    /** Ресайз-хендлер для rc-drawer */
+    resizable: DrawerProps['resizable'];
+    /** Ширина ползунка в пикселях */
+    width?: number;
+};
+export declare function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult;
+export {};

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerResize = useDrawerResize;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const DRAGGER_SELECTOR = '.rc-drawer-resizable-dragger';
+function useDrawerResize({ position, resizable: resizableProp }) {
+    const targetRef = (0, react_1.useRef)(null);
+    const targetRefCallbackRef = (0, react_1.useRef)();
+    const [width, setWidth] = (0, react_1.useState)(resizableProp?.default);
+    const [muted, setMuted] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const draggerTooltip = resizableProp?.draggerTooltip;
+    const checkElement = (0, react_1.useCallback)(() => {
+        if ((0, utils_1.isBrowser)() && draggerTooltip) {
+            const element = document.querySelector(DRAGGER_SELECTOR);
+            if (!element)
+                return;
+            targetRefCallbackRef.current ? targetRefCallbackRef.current(element) : (targetRef.current = element);
+        }
+    }, [draggerTooltip]);
+    const tooltip = draggerTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { placement: position, offset: 4, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
+            if (!targetRefCallback)
+                return null;
+            targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
+        } })) : null;
+    const resizable = (0, react_1.useMemo)(() => resizableProp
+        ? {
+            onResize: value => {
+                if (value < (resizableProp?.min || 0))
+                    return;
+                if (value > (resizableProp?.max || Infinity))
+                    return;
+                setWidth(value);
+                resizableProp?.onResize?.(value);
+            },
+            onResizeEnd: () => {
+                setOpen(false);
+                setMuted(false);
+                resizableProp?.onResizeEnd?.(width ?? 0);
+            },
+            onResizeStart: () => {
+                setMuted(true);
+            },
+        }
+        : undefined, [resizableProp, width]);
+    return { tooltip, checkElement, resizable, width };
+}

package/dist/cjs/components/DrawerCustom/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DrawerCustom';
+export type { DrawerCustomProps } from './types';

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

package/dist/cjs/components/DrawerCustom/motion.css

@@ -0,0 +1,93 @@
+.rc-drawer.rc-drawer-open .rc-drawer-mask{
+  opacity:unset;
+  transition:none;
+}
+
+.rc-drawer .rc-drawer-mask.maskMotion{
+  opacity:unset;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-enter, .rc-drawer .rc-drawer-mask.maskMotion-appear{
+  opacity:0;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-enter-active, .rc-drawer .rc-drawer-mask.maskMotion-appear-active{
+  opacity:1;
+  transition:opacity 0.2s;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-leave{
+  opacity:1;
+}
+.rc-drawer .rc-drawer-mask.maskMotion-leave-active{
+  opacity:0;
+  transition:opacity 0.1s;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion{
+  transform:unset;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear{
+  transform:translateX(-100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-active{
+  transform:translateX(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave{
+  transform:translateX(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-active{
+  transform:translateX(-100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear{
+  transform:translateX(100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-active{
+  transform:translateX(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave{
+  transform:translateX(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-active{
+  transform:translateX(100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear{
+  transform:translateY(-100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-active{
+  transform:translateY(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave{
+  transform:translateY(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-active{
+  transform:translateY(-100%) !important;
+  transition:transform 0.1s ease-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-start{
+  transition:none !important;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear{
+  transform:translateY(100%);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-active{
+  transform:translateY(0);
+  transition:transform 0.2s ease-in-out;
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave{
+  transform:translateY(0);
+}
+.rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-active{
+  transform:translateY(100%) !important;
+  transition:transform 0.1s ease-out;
+}