@atlaskit/drawer 7.1.7 → 7.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/drawer
 
+## 7.1.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.1.9
+
+### Patch Changes
+
+- [`45e0af67ad3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45e0af67ad3) - Internal change to make styles statically analyzable
+
+## 7.1.8
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 7.1.7
 
 ### Patch Changes

package/constants/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/constants.js",
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
+  "sideEffects": false,
   "types": "../dist/types/constants.d.ts"
 }

package/dist/cjs/components/blanket.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
+
+var _motion = require("@atlaskit/motion");
+
+var _constants = require("../constants");
+
+/**
+ * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
+ */
+var Blanket = function Blanket(_ref) {
+  var isOpen = _ref.isOpen,
+      onBlanketClicked = _ref.onBlanketClicked;
+  return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
+    appear: true
+  }, isOpen && /*#__PURE__*/_react.default.createElement(_motion.FadeIn
+  /**
+   * We double the duration because the fade in keyframes have
+   * `opacity: 1` at `50%`.
+   *
+   * The fade out animation uses half the passed duration so it evens out.
+   */
+  , {
+    duration: _constants.transitionDurationMs * 2
+    /**
+     * We don't expose this on `FadeIn` but it does get passed down.
+     * TODO: figure out how we want to handle this...
+     */
+    // @ts-ignore
+    ,
+    animationTimingFunction: _constants.animationTimingFunction
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+      isTinted: true,
+      onBlanketClicked: onBlanketClicked
+    }));
+  }));
+};
+
+var _default = Blanket;
+exports.default = _default;

package/dist/cjs/components/index.js

@@ -27,22 +27,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _exenv = require("exenv");
 
-var _reactTransitionGroup = require("react-transition-group");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
-
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
-var _constants = require("../constants");
+var _blanket = _interopRequireDefault(require("./blanket"));
 
 var _focusLock = _interopRequireDefault(require("./focus-lock"));
 
 var _primitives = _interopRequireDefault(require("./primitives"));
 
-var _transitions = require("./transitions");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -52,13 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.1.7";
-
-var OnlyChild = function OnlyChild(_ref) {
-  var children = _ref.children;
-  return _react.Children.toArray(children)[0] || null;
-};
-
+var packageVersion = "7.1.10";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -172,24 +160,12 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
           isFocusLockEnabled = _this$props3.isFocusLockEnabled,
           shouldReturnFocus = _this$props3.shouldReturnFocus,
           overrides = _this$props3.overrides;
-      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
-        in: isOpen,
-        timeout: {
-          enter: 0,
-          exit: _constants.transitionDurationMs
-        },
-        mountOnEnter: true,
-        unmountOnExit: true
-      }, /*#__PURE__*/_react.default.createElement(_portal.default, {
+      return /*#__PURE__*/_react.default.createElement(_portal.default, {
         zIndex: "unset"
-      }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
-        component: OnlyChild
-      }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_transitions.Fade, {
-        in: isOpen
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
-        isTinted: true,
+        isOpen: isOpen,
         onBlanketClicked: this.handleBlanketClick
-      })), /*#__PURE__*/_react.default.createElement(_focusLock.default, {
+      }), /*#__PURE__*/_react.default.createElement(_focusLock.default, {
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,
         shouldReturnFocus: shouldReturnFocus
@@ -203,7 +179,7 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         width: width,
         shouldUnmountOnExit: shouldUnmountOnExit,
         overrides: overrides
-      }, children))))));
+      }, children)));
     }
   }]);
   return DrawerBase;

package/dist/cjs/components/primitives/index.js

@@ -7,20 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = require("react");
@@ -29,11 +15,13 @@ var _core = require("@emotion/core");
 
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 
+var _motion = require("@atlaskit/motion");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _transitions = require("../transitions");
+var _constants2 = require("../../constants");
 
 var _utils = require("../utils");
 
@@ -43,19 +31,9 @@ var _iconButton = _interopRequireDefault(require("./icon-button"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
-var _excluded = ["width", "shouldUnmountOnExit", "style"],
-    _excluded2 = ["children", "icon", "onClose", "onCloseComplete", "onOpenComplete", "overrides", "testId"],
-    _excluded3 = ["component"],
-    _excluded4 = ["component"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+var _excluded = ["children", "icon", "onClose", "onCloseComplete", "onOpenComplete", "overrides", "testId", "in"],
+    _excluded2 = ["component"],
+    _excluded3 = ["component"];
 // Misc.
 // ------------------------------
 var widths = {
@@ -75,74 +53,92 @@ var wrapperStyles = (0, _core.css)({
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   overflow: 'hidden'
 });
-
-var Wrapper = function Wrapper(_ref) {
-  var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'narrow' : _ref$width,
-      shouldUnmountOnExit = _ref.shouldUnmountOnExit,
-      style = _ref.style,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      width: widths[width]
-    }),
-    css: wrapperStyles
-  }, props));
-};
-
 var defaults = {
   Sidebar: _sidebar.default,
   Content: _content.default
 };
+/**
+ * This wrapper is used to specify separate durations for enter and exit.
+ */
+
+var CustomSlideIn = function CustomSlideIn(_ref) {
+  var children = _ref.children,
+      onFinish = _ref.onFinish;
+
+  var _useExitingPersistenc = (0, _motion.useExitingPersistence)(),
+      isExiting = _useExitingPersistenc.isExiting;
+  /**
+   * The actual duration should be the same for both enter and exit,
+   * but motion halves the passed duration for exit animations,
+   * so we double it when exiting.
+   */
+
+
+  var duration = isExiting ? _constants2.transitionDurationMs * 2 : _constants2.transitionDurationMs;
+  return (0, _core.jsx)(_motion.SlideIn, {
+    animationTimingFunction: _constants2.animationTimingFunction,
+    duration: duration,
+    enterFrom: "left",
+    exitTo: "left",
+    fade: "none",
+    onFinish: onFinish
+  }, children);
+};
 
-var DrawerPrimitive = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DrawerPrimitive, _Component);
-
-  var _super = _createSuper(DrawerPrimitive);
-
-  function DrawerPrimitive() {
-    (0, _classCallCheck2.default)(this, DrawerPrimitive);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(DrawerPrimitive, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          Icon = _this$props.icon,
-          onClose = _this$props.onClose,
-          onCloseComplete = _this$props.onCloseComplete,
-          onOpenComplete = _this$props.onOpenComplete,
-          overrides = _this$props.overrides,
-          testId = _this$props.testId,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
-      var getOverrides = (0, _utils.createExtender)(defaults, overrides);
-
-      var _getOverrides = getOverrides('Sidebar'),
-          Sidebar = _getOverrides.component,
-          sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded3);
-
-      var _getOverrides2 = getOverrides('Content'),
-          Content = _getOverrides2.component,
-          contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded4);
-
-      return (0, _core.jsx)(_transitions.Slide, (0, _extends2.default)({
-        component: Wrapper,
-        onExited: onCloseComplete,
-        onEntered: onOpenComplete,
-        "data-testid": testId
-      }, props), (0, _core.jsx)(Sidebar, sideBarOverrides, (0, _core.jsx)(_iconButton.default, {
-        onClick: onClose,
-        testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-      }, Icon ? (0, _core.jsx)(Icon, {
-        size: "large"
-      }) : (0, _core.jsx)(_arrowLeft.default, {
-        label: "Close drawer"
-      }))), (0, _core.jsx)(Content, contentOverrides, children));
+var DrawerPrimitive = function DrawerPrimitive(_ref2) {
+  var children = _ref2.children,
+      Icon = _ref2.icon,
+      onClose = _ref2.onClose,
+      onCloseComplete = _ref2.onCloseComplete,
+      onOpenComplete = _ref2.onOpenComplete,
+      overrides = _ref2.overrides,
+      testId = _ref2.testId,
+      isOpen = _ref2.in,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var getOverrides = (0, _utils.createExtender)(defaults, overrides);
+
+  var _getOverrides = getOverrides('Sidebar'),
+      Sidebar = _getOverrides.component,
+      sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded2);
+
+  var _getOverrides2 = getOverrides('Content'),
+      Content = _getOverrides2.component,
+      contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded3);
+
+  var ref = (0, _react.useRef)(null);
+  var onFinish = (0, _react.useCallback)(function (state) {
+    if (state === 'entering') {
+      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(ref.current);
+    } else if (state === 'exiting') {
+      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(ref.current);
     }
-  }]);
-  return DrawerPrimitive;
-}(_react.Component);
+  }, [onCloseComplete, onOpenComplete]);
+  return (0, _core.jsx)(_motion.ExitingPersistence, {
+    appear: true
+  }, isOpen && (0, _core.jsx)(CustomSlideIn, {
+    onFinish: onFinish
+  }, function (_ref3) {
+    var _props$width;
+
+    var className = _ref3.className;
+    return (0, _core.jsx)("div", {
+      className: className,
+      css: wrapperStyles,
+      style: {
+        width: widths[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'narrow']
+      },
+      "data-testid": testId,
+      ref: ref
+    }, (0, _core.jsx)(Sidebar, sideBarOverrides, (0, _core.jsx)(_iconButton.default, {
+      onClick: onClose,
+      testId: testId && 'DrawerPrimitiveSidebarCloseButton'
+    }, Icon ? (0, _core.jsx)(Icon, {
+      size: "large"
+    }) : (0, _core.jsx)(_arrowLeft.default, {
+      label: "Close drawer"
+    }))), (0, _core.jsx)(Content, contentOverrides, children));
+  }));
+};
 
-exports.default = DrawerPrimitive;
+var _default = DrawerPrimitive;
+exports.default = _default;

package/dist/cjs/constants.js

@@ -3,12 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = void 0;
+exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.animationTimingFunction = void 0;
+
+var _curves = require("@atlaskit/motion/curves");
+
 var transitionDuration = '0.22s';
 exports.transitionDuration = transitionDuration;
 var transitionDurationMs = 220;
 exports.transitionDurationMs = transitionDurationMs;
-var transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
+var transitionTimingFunction = _curves.easeOut;
 exports.transitionTimingFunction = transitionTimingFunction;
 var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
-exports.widths = widths;
+exports.widths = widths;
+
+var animationTimingFunction = function animationTimingFunction() {
+  return _curves.easeOut;
+};
+
+exports.animationTimingFunction = animationTimingFunction;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.1.7",
+	"version": "7.1.10",
 	"sideEffects": false
 }

package/dist/es2019/components/blanket.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import AkBlanket from '@atlaskit/blanket';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { animationTimingFunction, transitionDurationMs } from '../constants';
+
+/**
+ * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
+ */
+const Blanket = ({
+  isOpen,
+  onBlanketClicked
+}) => {
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, isOpen && /*#__PURE__*/React.createElement(FadeIn
+  /**
+   * We double the duration because the fade in keyframes have
+   * `opacity: 1` at `50%`.
+   *
+   * The fade out animation uses half the passed duration so it evens out.
+   */
+  , {
+    duration: transitionDurationMs * 2
+    /**
+     * We don't expose this on `FadeIn` but it does get passed down.
+     * TODO: figure out how we want to handle this...
+     */
+    // @ts-ignore
+    ,
+    animationTimingFunction: animationTimingFunction
+  }, ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(AkBlanket, {
+    isTinted: true,
+    onBlanketClicked: onBlanketClicked
+  }))));
+};
+
+export default Blanket;

package/dist/es2019/components/index.js

@@ -1,21 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Children, Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { canUseDOM } from 'exenv';
-import { Transition, TransitionGroup } from 'react-transition-group';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Blanket from '@atlaskit/blanket';
 import Portal from '@atlaskit/portal';
-import { transitionDurationMs } from '../constants';
+import Blanket from './blanket';
 import FocusLock from './focus-lock';
 import DrawerPrimitive from './primitives';
-import { Fade } from './transitions';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.1.7";
-
-const OnlyChild = ({
-  children
-}) => Children.toArray(children)[0] || null;
-
+const packageVersion = "7.1.10";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
@@ -122,24 +114,12 @@ export class DrawerBase extends Component {
       shouldReturnFocus,
       overrides
     } = this.props;
-    return /*#__PURE__*/React.createElement(Transition, {
-      in: isOpen,
-      timeout: {
-        enter: 0,
-        exit: transitionDurationMs
-      },
-      mountOnEnter: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/React.createElement(Portal, {
+    return /*#__PURE__*/React.createElement(Portal, {
       zIndex: "unset"
-    }, /*#__PURE__*/React.createElement(TransitionGroup, {
-      component: OnlyChild
-    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Fade, {
-      in: isOpen
     }, /*#__PURE__*/React.createElement(Blanket, {
-      isTinted: true,
+      isOpen: isOpen,
       onBlanketClicked: this.handleBlanketClick
-    })), /*#__PURE__*/React.createElement(FocusLock, {
+    }), /*#__PURE__*/React.createElement(FocusLock, {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
@@ -153,7 +133,7 @@ export class DrawerBase extends Component {
       width: width,
       shouldUnmountOnExit: shouldUnmountOnExit,
       overrides: overrides
-    }, children))))));
+    }, children)));
   }
 
 }

package/dist/es2019/components/primitives/index.js

@@ -1,12 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
-import { Component } from 'react';
+import { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
+import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { N0 } from '@atlaskit/theme/colors';
 import { gridSize, layers } from '@atlaskit/theme/constants';
-import { Slide } from '../transitions';
+import { animationTimingFunction, transitionDurationMs } from '../../constants';
 import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import IconButton from './icon-button';
@@ -30,52 +29,84 @@ const wrapperStyles = css({
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   overflow: 'hidden'
 });
-
-const Wrapper = ({
-  width = 'narrow',
-  shouldUnmountOnExit,
-  style,
-  ...props
-}) => {
-  return jsx("div", _extends({
-    style: { ...style,
-      width: widths[width]
-    },
-    css: wrapperStyles
-  }, props));
-};
-
 const defaults = {
   Sidebar: SidebarOverrides,
   Content: ContentOverrides
 };
-export default class DrawerPrimitive extends Component {
-  render() {
-    const {
-      children,
-      icon: Icon,
-      onClose,
-      onCloseComplete,
-      onOpenComplete,
-      overrides,
-      testId,
-      ...props
-    } = this.props;
-    const getOverrides = createExtender(defaults, overrides);
-    const {
-      component: Sidebar,
-      ...sideBarOverrides
-    } = getOverrides('Sidebar');
-    const {
-      component: Content,
-      ...contentOverrides
-    } = getOverrides('Content');
-    return jsx(Slide, _extends({
-      component: Wrapper,
-      onExited: onCloseComplete,
-      onEntered: onOpenComplete,
-      "data-testid": testId
-    }, props), jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
+/**
+ * This wrapper is used to specify separate durations for enter and exit.
+ */
+
+const CustomSlideIn = ({
+  children,
+  onFinish
+}) => {
+  const {
+    isExiting
+  } = useExitingPersistence();
+  /**
+   * The actual duration should be the same for both enter and exit,
+   * but motion halves the passed duration for exit animations,
+   * so we double it when exiting.
+   */
+
+  const duration = isExiting ? transitionDurationMs * 2 : transitionDurationMs;
+  return jsx(SlideIn, {
+    animationTimingFunction: animationTimingFunction,
+    duration: duration,
+    enterFrom: "left",
+    exitTo: "left",
+    fade: "none",
+    onFinish: onFinish
+  }, children);
+};
+
+const DrawerPrimitive = ({
+  children,
+  icon: Icon,
+  onClose,
+  onCloseComplete,
+  onOpenComplete,
+  overrides,
+  testId,
+  in: isOpen,
+  ...props
+}) => {
+  const getOverrides = createExtender(defaults, overrides);
+  const {
+    component: Sidebar,
+    ...sideBarOverrides
+  } = getOverrides('Sidebar');
+  const {
+    component: Content,
+    ...contentOverrides
+  } = getOverrides('Content');
+  const ref = useRef(null);
+  const onFinish = useCallback(state => {
+    if (state === 'entering') {
+      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(ref.current);
+    } else if (state === 'exiting') {
+      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(ref.current);
+    }
+  }, [onCloseComplete, onOpenComplete]);
+  return jsx(ExitingPersistence, {
+    appear: true
+  }, isOpen && jsx(CustomSlideIn, {
+    onFinish: onFinish
+  }, ({
+    className
+  }) => {
+    var _props$width;
+
+    return jsx("div", {
+      className: className,
+      css: wrapperStyles,
+      style: {
+        width: widths[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'narrow']
+      },
+      "data-testid": testId,
+      ref: ref
+    }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'
     }, Icon ? jsx(Icon, {
@@ -83,6 +114,7 @@ export default class DrawerPrimitive extends Component {
     }) : jsx(ArrowLeft, {
       label: "Close drawer"
     }))), jsx(Content, contentOverrides, children));
-  }
+  }));
+};
 
-}
+export default DrawerPrimitive;