@rc-component/drawer 1.0.0

package/es/index.js

@@ -0,0 +1,3 @@
+// export this package's api
+import Drawer from "./Drawer";
+export default Drawer;

package/es/inter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface DrawerClassNames {
+    mask?: string;
+    wrapper?: string;
+    section?: string;
+}
+export interface DrawerStyles {
+    mask?: React.CSSProperties;
+    wrapper?: React.CSSProperties;
+    section?: React.CSSProperties;
+}

package/es/inter.js

@@ -0,0 +1 @@
+export {};

package/es/util.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerProps } from './Drawer';
+export declare function parseWidthHeight(value?: number | string): string | number;
+export declare function warnCheck(props: DrawerProps): void;

package/es/util.js

@@ -0,0 +1,13 @@
+import warning from "@rc-component/util/es/warning";
+import canUseDom from "@rc-component/util/es/Dom/canUseDom";
+export function parseWidthHeight(value) {
+  if (typeof value === 'string' && String(Number(value)) === value) {
+    warning(false, 'Invalid value type of `width` or `height` which should be number type instead.');
+    return Number(value);
+  }
+  return value;
+}
+export function warnCheck(props) {
+  warning(!('wrapperClassName' in props), `'wrapperClassName' is removed. Please use 'rootClassName' instead.`);
+  warning(canUseDom() || !props.open, `Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.`);
+}

package/lib/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/lib/Drawer.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _portal = _interopRequireDefault(require("@rc-component/portal"));
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var React = _interopRequireWildcard(require("react"));
+var _context = require("./context");
+var _DrawerPopup = _interopRequireDefault(require("./DrawerPopup"));
+var _util = require("./util");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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') {
+    (0, _util.warnCheck)(props);
+  }
+
+  // ============================= Open =============================
+  const [mounted, setMounted] = React.useState(false);
+  (0, _useLayoutEffect.default)(() => {
+    setMounted(true);
+  }, []);
+  const mergedOpen = mounted ? open : false;
+
+  // ============================ Focus =============================
+  const popupRef = React.useRef(null);
+  const lastActiveRef = React.useRef(null);
+  (0, _useLayoutEffect.default)(() => {
+    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(_context.RefContext.Provider, {
+    value: refContext
+  }, /*#__PURE__*/React.createElement(_portal.default, {
+    open: mergedOpen || forceRender || animatedVisible,
+    autoDestroy: false,
+    getContainer: getContainer,
+    autoLock: mask && (mergedOpen || animatedVisible)
+  }, /*#__PURE__*/React.createElement(_DrawerPopup.default, drawerPopupProps)));
+};
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
+var _default = exports.default = Drawer;

package/lib/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/lib/DrawerPanel.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _context = require("./context");
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+var _ref = require("@rc-component/util/lib/ref");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const DrawerPanel = props => {
+  const {
+    prefixCls,
+    className,
+    containerRef,
+    ...restProps
+  } = props;
+  const {
+    panel: panelRef
+  } = React.useContext(_context.RefContext);
+  const mergedRef = (0, _ref.useComposeRef)(panelRef, containerRef);
+
+  // =============================== Render ===============================
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classnames.default)(`${prefixCls}-section`, className),
+    role: "dialog",
+    ref: mergedRef
+  }, (0, _pickAttrs.default)(props, {
+    aria: true
+  }), {
+    "aria-modal": "true"
+  }, restProps));
+};
+if (process.env.NODE_ENV !== 'production') {
+  DrawerPanel.displayName = 'DrawerPanel';
+}
+var _default = exports.default = DrawerPanel;

package/lib/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/lib/DrawerPopup.js

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
+var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"));
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("./context"));
+var _DrawerPanel = _interopRequireDefault(require("./DrawerPanel"));
+var _util = require("./util");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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.default.TAB:
+        {
+          if (keyCode === _KeyCode.default.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.default.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(_context.default);
+
+  // 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(_motion.default, _extends({
+    key: "mask"
+  }, maskMotion, {
+    visible: open
+  }), ({
+    className: motionMaskClassName,
+    style: motionMaskStyle
+  }, maskRef) => /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(`${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 = (0, _util.parseWidthHeight)(width);
+  } else {
+    wrapperStyle.height = (0, _util.parseWidthHeight)(height);
+  }
+  const eventHandlers = {
+    onMouseEnter,
+    onMouseOver,
+    onMouseLeave,
+    onClick,
+    onKeyDown,
+    onKeyUp
+  };
+  const panelNode = /*#__PURE__*/React.createElement(_motion.default, _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.default, _extends({
+      id: id,
+      containerRef: motionRef,
+      prefixCls: prefixCls,
+      className: (0, _classnames.default)(className, drawerClassNames?.section),
+      style: {
+        ...style,
+        ...styles?.section
+      }
+    }, (0, _pickAttrs.default)(props, {
+      aria: true
+    }), eventHandlers), children);
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: (0, _classnames.default)(`${prefixCls}-content-wrapper`, drawerClassNames?.wrapper, motionClassName),
+      style: {
+        ...wrapperStyle,
+        ...motionStyle,
+        ...styles?.wrapper
+      }
+    }, (0, _pickAttrs.default)(props, {
+      data: true
+    })), drawerRender ? drawerRender(content) : content);
+  });
+
+  // =========================== Render ===========================
+  const containerStyle = {
+    ...rootStyle
+  };
+  if (zIndex) {
+    containerStyle.zIndex = zIndex;
+  }
+  return /*#__PURE__*/React.createElement(_context.default.Provider, {
+    value: mergedContext
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(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';
+}
+var _default = exports.default = RefDrawerPopup;

package/lib/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/lib/context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RefContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DrawerContext = /*#__PURE__*/React.createContext(null);
+const RefContext = exports.RefContext = /*#__PURE__*/React.createContext({});
+var _default = exports.default = DrawerContext;

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// export this package's api
+var _default = exports.default = _Drawer.default;

package/lib/inter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface DrawerClassNames {
+    mask?: string;
+    wrapper?: string;
+    section?: string;
+}
+export interface DrawerStyles {
+    mask?: React.CSSProperties;
+    wrapper?: React.CSSProperties;
+    section?: React.CSSProperties;
+}

package/lib/inter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/util.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerProps } from './Drawer';
+export declare function parseWidthHeight(value?: number | string): string | number;
+export declare function warnCheck(props: DrawerProps): void;

package/lib/util.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseWidthHeight = parseWidthHeight;
+exports.warnCheck = warnCheck;
+var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"));
+var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function parseWidthHeight(value) {
+  if (typeof value === 'string' && String(Number(value)) === value) {
+    (0, _warning.default)(false, 'Invalid value type of `width` or `height` which should be number type instead.');
+    return Number(value);
+  }
+  return value;
+}
+function warnCheck(props) {
+  (0, _warning.default)(!('wrapperClassName' in props), `'wrapperClassName' is removed. Please use 'rootClassName' instead.`);
+  (0, _warning.default)((0, _canUseDom.default)() || !props.open, `Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.`);
+}