@rc-component/drawer 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# rc-drawer
+
+[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-drawer.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-drawer
+[github-actions-image]: https://github.com/react-component/drawer/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/drawer/actions
+[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
+[node-url]: http://nodejs.org/download/
+[download-image]: https://img.shields.io/npm/dm/rc-drawer.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-drawer
+
+## Example
+
+https://drawer-react-component.vercel.app/
+
+## Usage
+
+```js
+import Drawer from 'rc-drawer';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+ReactDom.render(
+  <Drawer>
+    {menu children}
+  </Drawer>
+, mountNode);
+```
+
+## Install
+
+[![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
+
+## Browser Support
+
+| ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) |
+| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| IE 10+ ✔                                                                                  | Chrome 31.0+ ✔                                                                                    | Firefox 31.0+ ✔                                                                                      | Opera 30.0+ ✔                                                                                  | Safari 7.0+ ✔                                                                                     |
+
+## API
+
+| props              | type                                                                        | default                                | description                                                                   |
+| ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
+| className          | string                                                                      | null                                   | -                                                                             |
+| classNames         | { mask?: string; content?: string; wrapper?: string; }                      | -                                      | pass className to target area                                                 |
+| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | -                                      | pass style to target area                                                     |
+| prefixCls          | string                                                                      | 'drawer'                               | prefix class                                                                  |
+| width              | string \| number                                                            | null                                   | drawer content wrapper width, drawer level transition width                   |
+| height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |
+| open               | boolean                                                                     | false                                  | open or close menu                                                            |
+| defaultOpen        | boolean                                                                     | false                                  | default open menu                                                             |
+| placement          | string                                                                      | `left`                                 | `left` `top` `right` `bottom`                                                 |
+| level              | string \| array                                                             | `all`                                  | With the drawer level element. `all`/ null / className / id / tagName / array |
+| levelMove          | number \| array \| func                                                     | null                                   | level move value. default is drawer width                                     |
+| duration           | string                                                                      | `.3s`                                  | level animation duration                                                      |
+| ease               | string                                                                      | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function                                               |
+| getContainer       | string \| func \| HTMLElement                                               | `body`                                 | Return the mount node for Drawer. if is `null` use React.creactElement        |
+| showMask           | boolean                                                                     | true                                   | mask is show                                                                  |
+| maskClosable       | boolean                                                                     | true                                   | Clicking on the mask (area outside the Drawer) to close the Drawer or not.    |
+| maskStyle          | CSSProperties                                                               | null                                   | mask style                                                                    |
+| afterOpenChange    | func                                                                        | null                                   | transition end callback(open)                                                 |
+| onClose            | func                                                                        | null                                   | close click function                                                          |
+| keyboard           | boolean                                                                     | true                                   | Whether support press esc to close                                            |
+| autoFocus          | boolean                                                                     | true                                   | Whether focusing on the drawer after it opened                                |
+| onMouseEnter       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse enter drawer panel                                         |
+| onMouseOver        | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse over drawer panel                                          |
+| onMouseLeave       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse leave drawer panel                                         |
+| onClick            | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse click drawer panel                                         |
+| onKeyDown          | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse keydown on drawer panel                                    |
+| onKeyUp            | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse keyup on drawer panel                                      |
+
+> 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
+
+## Development
+
+```
+npm install
+npm start
+```

package/assets/index.css

@@ -0,0 +1,42 @@
+.rc-drawer {
+  inset: 0;
+  position: fixed;
+  z-index: 1050;
+  pointer-events: none;
+}
+.rc-drawer-inline {
+  position: absolute;
+}
+.rc-drawer-mask {
+  inset: 0;
+  position: absolute;
+  z-index: 1050;
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+}
+.rc-drawer-content-wrapper {
+  position: absolute;
+  z-index: 1050;
+  overflow: hidden;
+  transition: transform 0.3s;
+}
+.rc-drawer-content-wrapper-hidden {
+  display: none;
+}
+.rc-drawer-left .rc-drawer-content-wrapper {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+.rc-drawer-right .rc-drawer-content-wrapper {
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.rc-drawer-content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+  pointer-events: auto;
+}

package/es/Drawer.d.ts

@@ -0,0 +1,18 @@
+import type { PortalProps } from '@rc-component/portal';
+import * as React from 'react';
+import type { DrawerPanelAccessibility, DrawerPanelEvents } from './DrawerPanel';
+import type { DrawerPopupProps } from './DrawerPopup';
+import type { DrawerClassNames, DrawerStyles } from './inter';
+export type Placement = 'left' | 'top' | 'right' | 'bottom';
+export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls' | 'inline' | 'scrollLocker'>, DrawerPanelEvents, DrawerPanelAccessibility {
+    prefixCls?: string;
+    open?: boolean;
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    destroyOnClose?: boolean;
+    getContainer?: PortalProps['getContainer'];
+    panelRef?: React.Ref<HTMLDivElement>;
+    classNames?: DrawerClassNames;
+    styles?: DrawerStyles;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/es/Drawer.js

@@ -0,0 +1,108 @@
+import Portal from '@rc-component/portal';
+import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
+import * as React from 'react';
+import { RefContext } from "./context";
+import DrawerPopup from "./DrawerPopup";
+import { warnCheck } from "./util";
+const Drawer = props => {
+  const {
+    open = false,
+    prefixCls = 'rc-drawer',
+    placement = 'right',
+    autoFocus = true,
+    keyboard = true,
+    width = 378,
+    mask = true,
+    maskClosable = true,
+    getContainer,
+    forceRender,
+    afterOpenChange,
+    destroyOnClose,
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    // Refs
+    panelRef
+  } = props;
+  const [animatedVisible, setAnimatedVisible] = React.useState(false);
+
+  // ============================= Warn =============================
+  if (process.env.NODE_ENV !== 'production') {
+    warnCheck(props);
+  }
+
+  // ============================= Open =============================
+  const [mounted, setMounted] = React.useState(false);
+  useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  const mergedOpen = mounted ? open : false;
+
+  // ============================ Focus =============================
+  const popupRef = React.useRef(null);
+  const lastActiveRef = React.useRef(null);
+  useLayoutEffect(() => {
+    if (mergedOpen) {
+      lastActiveRef.current = document.activeElement;
+    }
+  }, [mergedOpen]);
+
+  // ============================= Open =============================
+  const internalAfterOpenChange = nextVisible => {
+    setAnimatedVisible(nextVisible);
+    afterOpenChange?.(nextVisible);
+    if (!nextVisible && lastActiveRef.current && !popupRef.current?.contains(lastActiveRef.current)) {
+      lastActiveRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  };
+
+  // =========================== Context ============================
+  const refContext = React.useMemo(() => ({
+    panel: panelRef
+  }), [panelRef]);
+
+  // ============================ Render ============================
+  if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
+    return null;
+  }
+  const eventHandlers = {
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    onClick,
+    onKeyDown,
+    onKeyUp
+  };
+  const drawerPopupProps = {
+    ...props,
+    open: mergedOpen,
+    prefixCls,
+    placement,
+    autoFocus,
+    keyboard,
+    width,
+    mask,
+    maskClosable,
+    inline: getContainer === false,
+    afterOpenChange: internalAfterOpenChange,
+    ref: popupRef,
+    ...eventHandlers
+  };
+  return /*#__PURE__*/React.createElement(RefContext.Provider, {
+    value: refContext
+  }, /*#__PURE__*/React.createElement(Portal, {
+    open: mergedOpen || forceRender || animatedVisible,
+    autoDestroy: false,
+    getContainer: getContainer,
+    autoLock: mask && (mergedOpen || animatedVisible)
+  }, /*#__PURE__*/React.createElement(DrawerPopup, drawerPopupProps)));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
+export default Drawer;

package/es/DrawerPanel.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface DrawerPanelRef {
+    focus: VoidFunction;
+}
+export interface DrawerPanelEvents {
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+export type DrawerPanelAccessibility = Pick<React.DialogHTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes>;
+export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessibility {
+    prefixCls: string;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    containerRef?: React.Ref<HTMLDivElement>;
+}
+declare const DrawerPanel: {
+    (props: DrawerPanelProps): React.JSX.Element;
+    displayName: string;
+};
+export default DrawerPanel;

package/es/DrawerPanel.js

@@ -0,0 +1,34 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import classNames from 'classnames';
+import * as React from 'react';
+import { RefContext } from "./context";
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import { useComposeRef } from "@rc-component/util/es/ref";
+const DrawerPanel = props => {
+  const {
+    prefixCls,
+    className,
+    containerRef,
+    ...restProps
+  } = props;
+  const {
+    panel: panelRef
+  } = React.useContext(RefContext);
+  const mergedRef = useComposeRef(panelRef, containerRef);
+
+  // =============================== Render ===============================
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(`${prefixCls}-section`, className),
+    role: "dialog",
+    ref: mergedRef
+  }, pickAttrs(props, {
+    aria: true
+  }), {
+    "aria-modal": "true"
+  }, restProps));
+};
+if (process.env.NODE_ENV !== 'production') {
+  DrawerPanel.displayName = 'DrawerPanel';
+}
+export default DrawerPanel;

package/es/DrawerPopup.d.ts

@@ -0,0 +1,40 @@
+import type { CSSMotionProps } from '@rc-component/motion';
+import * as React from 'react';
+import type { DrawerPanelAccessibility, DrawerPanelEvents } from './DrawerPanel';
+import type { DrawerClassNames, DrawerStyles } from './inter';
+export type Placement = 'left' | 'right' | 'top' | 'bottom';
+export interface PushConfig {
+    distance?: number | string;
+}
+export interface DrawerPopupProps extends DrawerPanelEvents, DrawerPanelAccessibility {
+    prefixCls: string;
+    open?: boolean;
+    inline?: boolean;
+    push?: boolean | PushConfig;
+    forceRender?: boolean;
+    autoFocus?: boolean;
+    keyboard?: boolean;
+    rootClassName?: string;
+    rootStyle?: React.CSSProperties;
+    zIndex?: number;
+    placement?: Placement;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    width?: number | string;
+    height?: number | string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskClassName?: string;
+    maskStyle?: React.CSSProperties;
+    motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
+    maskMotion?: CSSMotionProps;
+    afterOpenChange?: (open: boolean) => void;
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    classNames?: DrawerClassNames;
+    styles?: DrawerStyles;
+    drawerRender?: (node: React.ReactNode) => React.ReactNode;
+}
+declare const RefDrawerPopup: React.ForwardRefExoticComponent<DrawerPopupProps & React.RefAttributes<HTMLDivElement>>;
+export default RefDrawerPopup;

package/es/DrawerPopup.js

@@ -0,0 +1,274 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import classNames from 'classnames';
+import CSSMotion from '@rc-component/motion';
+import KeyCode from "@rc-component/util/es/KeyCode";
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import * as React from 'react';
+import DrawerContext from "./context";
+import DrawerPanel from "./DrawerPanel";
+import { parseWidthHeight } from "./util";
+const sentinelStyle = {
+  width: 0,
+  height: 0,
+  overflow: 'hidden',
+  outline: 'none',
+  position: 'absolute'
+};
+function DrawerPopup(props, ref) {
+  const {
+    prefixCls,
+    open,
+    placement,
+    inline,
+    push,
+    forceRender,
+    autoFocus,
+    keyboard,
+    // classNames
+    classNames: drawerClassNames,
+    // Root
+    rootClassName,
+    rootStyle,
+    zIndex,
+    // Drawer
+    className,
+    id,
+    style,
+    motion,
+    width,
+    height,
+    children,
+    // Mask
+    mask,
+    maskClosable,
+    maskMotion,
+    maskClassName,
+    maskStyle,
+    // Events
+    afterOpenChange,
+    onClose,
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    styles,
+    drawerRender
+  } = props;
+
+  // ================================ Refs ================================
+  const panelRef = React.useRef(null);
+  const sentinelStartRef = React.useRef(null);
+  const sentinelEndRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => panelRef.current);
+  const onPanelKeyDown = event => {
+    const {
+      keyCode,
+      shiftKey
+    } = event;
+    switch (keyCode) {
+      // Tab active
+      case KeyCode.TAB:
+        {
+          if (keyCode === KeyCode.TAB) {
+            if (!shiftKey && document.activeElement === sentinelEndRef.current) {
+              sentinelStartRef.current?.focus({
+                preventScroll: true
+              });
+            } else if (shiftKey && document.activeElement === sentinelStartRef.current) {
+              sentinelEndRef.current?.focus({
+                preventScroll: true
+              });
+            }
+          }
+          break;
+        }
+
+      // Close
+      case KeyCode.ESC:
+        {
+          if (onClose && keyboard) {
+            event.stopPropagation();
+            onClose(event);
+          }
+          break;
+        }
+    }
+  };
+
+  // ========================== Control ===========================
+  // Auto Focus
+  React.useEffect(() => {
+    if (open && autoFocus) {
+      panelRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  }, [open]);
+
+  // ============================ Push ============================
+  const [pushed, setPushed] = React.useState(false);
+  const parentContext = React.useContext(DrawerContext);
+
+  // Merge push distance
+  let pushConfig;
+  if (typeof push === 'boolean') {
+    pushConfig = push ? {} : {
+      distance: 0
+    };
+  } else {
+    pushConfig = push || {};
+  }
+  const pushDistance = pushConfig?.distance ?? parentContext?.pushDistance ?? 180;
+  const mergedContext = React.useMemo(() => ({
+    pushDistance,
+    push: () => {
+      setPushed(true);
+    },
+    pull: () => {
+      setPushed(false);
+    }
+  }), [pushDistance]);
+
+  // ========================= ScrollLock =========================
+  // Tell parent to push
+  React.useEffect(() => {
+    if (open) {
+      parentContext?.push?.();
+    } else {
+      parentContext?.pull?.();
+    }
+  }, [open]);
+
+  // Clean up
+  React.useEffect(() => () => {
+    parentContext?.pull?.();
+  }, []);
+
+  // ============================ Mask ============================
+  const maskNode = mask && /*#__PURE__*/React.createElement(CSSMotion, _extends({
+    key: "mask"
+  }, maskMotion, {
+    visible: open
+  }), ({
+    className: motionMaskClassName,
+    style: motionMaskStyle
+  }, maskRef) => /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-mask`, motionMaskClassName, drawerClassNames?.mask, maskClassName),
+    style: {
+      ...motionMaskStyle,
+      ...maskStyle,
+      ...styles?.mask
+    },
+    onClick: maskClosable && open ? onClose : undefined,
+    ref: maskRef
+  }));
+
+  // =========================== Panel ============================
+  const motionProps = typeof motion === 'function' ? motion(placement) : motion;
+  const wrapperStyle = {};
+  if (pushed && pushDistance) {
+    switch (placement) {
+      case 'top':
+        wrapperStyle.transform = `translateY(${pushDistance}px)`;
+        break;
+      case 'bottom':
+        wrapperStyle.transform = `translateY(${-pushDistance}px)`;
+        break;
+      case 'left':
+        wrapperStyle.transform = `translateX(${pushDistance}px)`;
+        break;
+      default:
+        wrapperStyle.transform = `translateX(${-pushDistance}px)`;
+        break;
+    }
+  }
+  if (placement === 'left' || placement === 'right') {
+    wrapperStyle.width = parseWidthHeight(width);
+  } else {
+    wrapperStyle.height = parseWidthHeight(height);
+  }
+  const eventHandlers = {
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    onClick,
+    onKeyDown,
+    onKeyUp
+  };
+  const panelNode = /*#__PURE__*/React.createElement(CSSMotion, _extends({
+    key: "panel"
+  }, motionProps, {
+    visible: open,
+    forceRender: forceRender,
+    onVisibleChanged: nextVisible => {
+      afterOpenChange?.(nextVisible);
+    },
+    removeOnLeave: false,
+    leavedClassName: `${prefixCls}-content-wrapper-hidden`
+  }), ({
+    className: motionClassName,
+    style: motionStyle
+  }, motionRef) => {
+    const content = /*#__PURE__*/React.createElement(DrawerPanel, _extends({
+      id: id,
+      containerRef: motionRef,
+      prefixCls: prefixCls,
+      className: classNames(className, drawerClassNames?.section),
+      style: {
+        ...style,
+        ...styles?.section
+      }
+    }, pickAttrs(props, {
+      aria: true
+    }), eventHandlers), children);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames(`${prefixCls}-content-wrapper`, drawerClassNames?.wrapper, motionClassName),
+      style: {
+        ...wrapperStyle,
+        ...motionStyle,
+        ...styles?.wrapper
+      }
+    }, pickAttrs(props, {
+      data: true
+    })), drawerRender ? drawerRender(content) : content);
+  });
+
+  // =========================== Render ===========================
+  const containerStyle = {
+    ...rootStyle
+  };
+  if (zIndex) {
+    containerStyle.zIndex = zIndex;
+  }
+  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
+    value: mergedContext
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+      [`${prefixCls}-open`]: open,
+      [`${prefixCls}-inline`]: inline
+    }),
+    style: containerStyle,
+    tabIndex: -1,
+    ref: panelRef,
+    onKeyDown: onPanelKeyDown
+  }, maskNode, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    ref: sentinelStartRef,
+    style: sentinelStyle,
+    "aria-hidden": "true",
+    "data-sentinel": "start"
+  }), panelNode, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    ref: sentinelEndRef,
+    style: sentinelStyle,
+    "aria-hidden": "true",
+    "data-sentinel": "end"
+  })));
+}
+const RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
+if (process.env.NODE_ENV !== 'production') {
+  RefDrawerPopup.displayName = 'DrawerPopup';
+}
+export default RefDrawerPopup;

package/es/context.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface DrawerContextProps {
+    pushDistance?: number | string;
+    push: VoidFunction;
+    pull: VoidFunction;
+}
+declare const DrawerContext: React.Context<DrawerContextProps>;
+export interface RefContextProps {
+    panel?: React.Ref<HTMLDivElement>;
+}
+export declare const RefContext: React.Context<RefContextProps>;
+export default DrawerContext;

package/es/context.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+const DrawerContext = /*#__PURE__*/React.createContext(null);
+export const RefContext = /*#__PURE__*/React.createContext({});
+export default DrawerContext;

package/es/index.d.ts

@@ -0,0 +1,4 @@
+import Drawer from './Drawer';
+import type { DrawerProps } from './Drawer';
+export type { DrawerProps };
+export default Drawer;