@cloud-ru/ds-drawer 1.0.0

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -0,0 +1,197 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { BottomSheetCustom, OVERLAY_SURFACE, OverlaySurfaceProvider } from '@cloud-ru/ds-bottom-sheet';
+import { PopupCloseButton } from '@cloud-ru/ds-popup-private';
+import { usePortalContext } from '@cloud-ru/ds-portal-context';
+import { extractSupportProps, useModalOpenState } from '@cloud-ru/ds-utils';
+import RcDrawerImport, { DrawerProps as RcDrawerBaseProps } from '@rc-component/drawer';
+import cn from 'classnames';
+import { ComponentType, CSSProperties, useMemo } from 'react';
+
+import { TEST_IDS, WIDTH_AS_VALUES } from '../../constants';
+import {
+  DialogBody,
+  DialogBodyProps,
+  DialogFooter,
+  DialogFooterProps,
+  DialogHeader,
+  DialogHeaderProps,
+} from '../../helperComponents';
+import { interopDefault } from '../../utils/interopDefault';
+import { motionProps } from './constants';
+import { useDrawerFocusTrap } from './hooks';
+import { useDrawerResize } from './hooks/useDrawerResize';
+import styles from './styles.module.scss';
+import { DrawerCustomProps } from './types';
+
+const RcDrawer = interopDefault<ComponentType<RcDrawerBaseProps>>(RcDrawerImport);
+
+/** Desktop-frame дровера: rc-drawer + position/width/push/nestedDrawer + close-button. Surface='drawer'. */
+function DrawerFrame(props: DrawerCustomProps) {
+  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,
+  } = useDrawerResize({
+    resizable,
+    position,
+  });
+  const width = resizable ? (userWidth ?? widthProp) : widthProp;
+  const isPredefinedWidth = typeof width === 'string' && WIDTH_AS_VALUES.includes(width);
+
+  // Wrapper height/inset задаёт CSS по `[data-height-auto]`; здесь только стили секции.
+  const drawerPanelStyle = useMemo((): CSSProperties | undefined => {
+    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`): иначе два независимых обработчика закрывают и вложенный, и родительский.
+  useModalOpenState(open, onClose, { closeOnPopstate, closeByCloseWatcher: !showBlackout });
+
+  const focusTrapRef = useDrawerFocusTrap(Boolean(open));
+
+  // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
+  // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
+  const portalContextRef = usePortalContext();
+  const resolvedContainer =
+    container ?? (portalContextRef.current ? () => portalContextRef.current as HTMLElement : undefined);
+
+  return (
+    <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
+      rootClassName={cn(styles.drawerRoot, rootClassName)}
+      style={drawerPanelStyle}
+      classNames={{
+        section: cn(styles.drawer, className),
+      }}
+      size={isPredefinedWidth ? 'null' : width}
+      {...extractSupportProps(rest)}
+      data-content-wrapper
+      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)}
+    >
+      <div ref={focusTrapRef} className={styles.focusScope}>
+        {showButtonClosed && (
+          <div className={styles.showButtonClosedWrapper}>
+            <PopupCloseButton
+              className={styles.showButtonClosed}
+              aria-label='close drawer'
+              data-test-id={TEST_IDS.closeButton}
+              onClick={onClose}
+            />
+          </div>
+        )}
+
+        <OverlaySurfaceProvider surface={OVERLAY_SURFACE.Drawer} bodyHeightAuto={heightAutoVertical}>
+          {children}
+        </OverlaySurfaceProvider>
+
+        {tooltip}
+
+        {nestedDrawer}
+      </div>
+    </RcDrawer>
+  );
+}
+
+/**
+ * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
+ * Композиция одна (surface-aware слоты `.Header/.Body/.Footer`). Форс — `withLayoutType`.
+ */
+export function DrawerCustom(props: DrawerCustomProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  if (isMobileLayout(layoutType)) {
+    const {
+      open,
+      onClose,
+      children,
+      className,
+      rootClassName,
+      container,
+      closeOnPopstate,
+      showBlackout,
+      snapPoints,
+      swipeEnabled,
+      safeArea,
+      disableMotions,
+      ...rest
+    } = props;
+    return (
+      <BottomSheetCustom
+        open={open}
+        onClose={onClose}
+        container={container}
+        className={className}
+        rootClassName={rootClassName}
+        closeOnPopstate={closeOnPopstate}
+        showBackdrop={showBlackout}
+        snapPoints={snapPoints}
+        swipeEnabled={swipeEnabled}
+        safeArea={safeArea}
+        disableMotions={disableMotions}
+        {...extractSupportProps(rest)}
+      >
+        {children}
+      </BottomSheetCustom>
+    );
+  }
+
+  return <DrawerFrame {...props} />;
+}
+
+export namespace DrawerCustom {
+  export type HeaderProps = DialogHeaderProps;
+  export type BodyProps = DialogBodyProps;
+  export type FooterProps = DialogFooterProps;
+  export const Header = DialogHeader;
+  export const Body = DialogBody;
+  export const Footer = DialogFooter;
+}

package/src/components/DrawerCustom/constants.ts

@@ -0,0 +1,17 @@
+import { DrawerProps } from '@rc-component/drawer';
+
+export const maskMotion: DrawerProps['maskMotion'] = {
+  motionAppear: true,
+  motionName: 'maskMotion',
+};
+
+export const motion: DrawerProps['motion'] = placement => ({
+  motionAppear: true,
+  motionDeadline: 300,
+  motionName: `panelMotion-${placement}`,
+});
+
+export const motionProps: Partial<DrawerProps> = {
+  maskMotion,
+  motion,
+};

package/src/components/DrawerCustom/hooks/index.ts

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

package/src/components/DrawerCustom/hooks/useDrawerFocusTrap.ts

@@ -0,0 +1,97 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useEffect, useRef } from 'react';
+import { tabbable } from 'tabbable';
+
+/**
+ * Focus scope для Drawer-панели:
+ *  - запоминает activeElement до открытия и возвращает фокус после закрытия;
+ *  - устанавливает фокус на контейнер при открытии (без прыжка на первый focusable);
+ *  - цикличный Tab / Shift+Tab внутри контейнера.
+ *
+ * Возвращает ref, который нужно повесить на корневой DOM-узел панели.
+ */
+export function useDrawerFocusTrap(active: boolean) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  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]);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      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 = 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/src/components/DrawerCustom/hooks/useDrawerResize.tsx

@@ -0,0 +1,78 @@
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { isBrowser } from '@cloud-ru/ds-utils';
+import { DrawerProps } from '@rc-component/drawer';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { DrawerCustomProps } from '../types';
+
+const DRAGGER_SELECTOR = '.rc-drawer-resizable-dragger';
+
+type UseDrawerResizeParams = Pick<DrawerCustomProps, 'position' | 'resizable'>;
+
+type UseDrawerResizeResult = {
+  /** JSX Тултипа для ползунка изменения ширины */
+  tooltip: React.ReactNode;
+  /** Функция поиска ползунка в DOM-дереве. Стоит вызывать тогда, когда он отрендерен. */
+  checkElement: () => void;
+  /** Ресайз-хендлер для rc-drawer */
+  resizable: DrawerProps['resizable'];
+  /** Ширина ползунка в пикселях */
+  width?: number;
+};
+
+export function useDrawerResize({ position, resizable: resizableProp }: UseDrawerResizeParams): UseDrawerResizeResult {
+  const targetRef = useRef<HTMLElement | null>(null);
+  const targetRefCallbackRef = useRef<(node: HTMLElement) => void | undefined>();
+  const [width, setWidth] = useState<number | undefined>(resizableProp?.default);
+  const [muted, setMuted] = useState(false);
+  const [open, setOpen] = useState(false);
+  const draggerTooltip = resizableProp?.draggerTooltip;
+
+  const checkElement = useCallback(() => {
+    if (isBrowser() && draggerTooltip) {
+      const element = document.querySelector(DRAGGER_SELECTOR) as HTMLElement;
+
+      if (!element) return;
+
+      targetRefCallbackRef.current ? targetRefCallbackRef.current(element) : (targetRef.current = element);
+    }
+  }, [draggerTooltip]);
+
+  const tooltip = draggerTooltip ? (
+    <Tooltip placement={position} offset={4} tip={draggerTooltip} open={open && !muted} onOpenChange={setOpen}>
+      {({ ref: targetRefCallback }) => {
+        if (!targetRefCallback) return null;
+
+        targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
+      }}
+    </Tooltip>
+  ) : null;
+
+  const resizable = 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);
+            },
+          } satisfies DrawerProps['resizable'])
+        : undefined,
+    [resizableProp, width],
+  );
+
+  return { tooltip, checkElement, resizable, width };
+}

package/src/components/DrawerCustom/index.ts

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