@atlaskit/drawer 7.1.7 → 7.1.10

package/dist/es2019/constants.js

@@ -1,4 +1,6 @@
+import { easeOut } from '@atlaskit/motion/curves';
 export const transitionDuration = '0.22s';
 export const transitionDurationMs = 220;
-export const transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-export const widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export const transitionTimingFunction = easeOut;
+export const widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export const animationTimingFunction = () => easeOut;

package/dist/es2019/version.json

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

package/dist/esm/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.
+ */
+var Blanket = function Blanket(_ref) {
+  var isOpen = _ref.isOpen,
+      onBlanketClicked = _ref.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
+  }, function (_ref2) {
+    var className = _ref2.className;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(AkBlanket, {
+      isTinted: true,
+      onBlanketClicked: onBlanketClicked
+    }));
+  }));
+};
+
+export default Blanket;

package/dist/esm/components/index.js

@@ -10,24 +10,15 @@ 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; } }
 
-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';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.1.7";
-
-var OnlyChild = function OnlyChild(_ref) {
-  var children = _ref.children;
-  return Children.toArray(children)[0] || null;
-};
-
+var packageVersion = "7.1.10";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -148,24 +139,12 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
           isFocusLockEnabled = _this$props3.isFocusLockEnabled,
           shouldReturnFocus = _this$props3.shouldReturnFocus,
           overrides = _this$props3.overrides;
-      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
@@ -179,7 +158,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         width: width,
         shouldUnmountOnExit: shouldUnmountOnExit,
         overrides: overrides
-      }, children))))));
+      }, children)));
     }
   }]);
 

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

@@ -1,31 +1,16 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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) { _defineProperty(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"];
 
 /** @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';
@@ -49,78 +34,92 @@ var wrapperStyles = css({
   backgroundColor: "var(--ds-surface-overlay, ".concat(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 = _objectWithoutProperties(_ref, _excluded);
-
-  return jsx("div", _extends({
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      width: widths[width]
-    }),
-    css: wrapperStyles
-  }, props));
-};
-
 var defaults = {
   Sidebar: SidebarOverrides,
   Content: ContentOverrides
 };
+/**
+ * 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 = 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 ? transitionDurationMs * 2 : transitionDurationMs;
+  return jsx(SlideIn, {
+    animationTimingFunction: animationTimingFunction,
+    duration: duration,
+    enterFrom: "left",
+    exitTo: "left",
+    fade: "none",
+    onFinish: onFinish
+  }, children);
+};
 
-var DrawerPrimitive = /*#__PURE__*/function (_Component) {
-  _inherits(DrawerPrimitive, _Component);
-
-  var _super = _createSuper(DrawerPrimitive);
-
-  function DrawerPrimitive() {
-    _classCallCheck(this, DrawerPrimitive);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(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 = _objectWithoutProperties(_this$props, _excluded2);
-
-      var getOverrides = createExtender(defaults, overrides);
-
-      var _getOverrides = getOverrides('Sidebar'),
-          Sidebar = _getOverrides.component,
-          sideBarOverrides = _objectWithoutProperties(_getOverrides, _excluded3);
-
-      var _getOverrides2 = getOverrides('Content'),
-          Content = _getOverrides2.component,
-          contentOverrides = _objectWithoutProperties(_getOverrides2, _excluded4);
-
-      return jsx(Slide, _extends({
-        component: Wrapper,
-        onExited: onCloseComplete,
-        onEntered: onOpenComplete,
-        "data-testid": testId
-      }, props), jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
-        onClick: onClose,
-        testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-      }, Icon ? jsx(Icon, {
-        size: "large"
-      }) : jsx(ArrowLeft, {
-        label: "Close drawer"
-      }))), 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 = _objectWithoutProperties(_ref2, _excluded);
+
+  var getOverrides = createExtender(defaults, overrides);
+
+  var _getOverrides = getOverrides('Sidebar'),
+      Sidebar = _getOverrides.component,
+      sideBarOverrides = _objectWithoutProperties(_getOverrides, _excluded2);
+
+  var _getOverrides2 = getOverrides('Content'),
+      Content = _getOverrides2.component,
+      contentOverrides = _objectWithoutProperties(_getOverrides2, _excluded3);
+
+  var ref = useRef(null);
+  var onFinish = 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;
-}(Component);
+  }, [onCloseComplete, onOpenComplete]);
+  return jsx(ExitingPersistence, {
+    appear: true
+  }, isOpen && jsx(CustomSlideIn, {
+    onFinish: onFinish
+  }, function (_ref3) {
+    var _props$width;
+
+    var className = _ref3.className;
+    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, {
+      size: "large"
+    }) : jsx(ArrowLeft, {
+      label: "Close drawer"
+    }))), jsx(Content, contentOverrides, children));
+  }));
+};
 
-export { DrawerPrimitive as default };
+export default DrawerPrimitive;

package/dist/esm/constants.js

@@ -1,4 +1,8 @@
+import { easeOut } from '@atlaskit/motion/curves';
 export var transitionDuration = '0.22s';
 export var transitionDurationMs = 220;
-export var transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-export var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export var transitionTimingFunction = easeOut;
+export var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+export var animationTimingFunction = function animationTimingFunction() {
+  return easeOut;
+};

package/dist/esm/version.json

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

package/dist/types/components/blanket.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type BlanketProps = {
+    isOpen: boolean;
+    onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+/**
+ * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
+ */
+declare const Blanket: ({ isOpen, onBlanketClicked }: BlanketProps) => JSX.Element;
+export default Blanket;

package/dist/types/components/index.d.ts

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<DrawerProps, "width" | "children" | "onKeyDown" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "shouldUnmountOnExit" | "testId" | "onClose" | "icon" | "onOpenComplete" | "onCloseComplete" | "overrides" | "isOpen">, "children" | "onKeyDown" | "shouldUnmountOnExit" | "testId" | "onClose" | "icon" | "onOpenComplete" | "onCloseComplete" | "overrides" | "isOpen"> & Partial<Pick<Pick<DrawerProps, "width" | "children" | "onKeyDown" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "shouldUnmountOnExit" | "testId" | "onClose" | "icon" | "onOpenComplete" | "onCloseComplete" | "overrides" | "isOpen">, "width" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "isOpen" | "testId" | "icon" | "onClose" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus">> & Partial<Pick<{
     width: DrawerWidth;
     isFocusLockEnabled: boolean;
     shouldReturnFocus: boolean;
     autoFocusFirstElem: boolean;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "shouldUnmountOnExit" | "testId" | "onClose" | "icon" | "onOpenComplete" | "onCloseComplete" | "overrides" | "isOpen" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "isOpen" | "analyticsContext" | "testId" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "icon" | "onClose" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/primitives/index.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import { Component } from 'react';
+/// <reference types="react" />
 import { DrawerPrimitiveProps } from '../types';
-export default class DrawerPrimitive extends Component<DrawerPrimitiveProps> {
-    render(): JSX.Element;
-}
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, ...props }: DrawerPrimitiveProps) => JSX.Element;
+export default DrawerPrimitive;

package/dist/types/components/types.d.ts

@@ -18,11 +18,14 @@ export interface BaseProps {
     icon?: ComponentType<any>;
     /** Available drawer sizes. */
     width?: DrawerWidth;
-    /** Callback function called when the drawer has finished its opening transition. */
-    onOpenComplete?: (node: HTMLElement) => void;
-    /** Callback function called when the drawer has finished its close transition. */
-    onCloseComplete?: (node: HTMLElement) => void;
-    /** Controls if drawer state should be retained/discarded on close. */
+    /** A callback function that will be called when the drawer has finished its opening transition. */
+    onOpenComplete?: (node: HTMLElement | null) => void;
+    /** A callback function that will be called when the drawer has finished its close transition. */
+    onCloseComplete?: (node: HTMLElement | null) => void;
+    /**
+     *  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release.
+     * Boolean that controls if drawer should be retained/discarded
+     * */
     shouldUnmountOnExit?: boolean;
     /** Override drawer components. */
     overrides?: OverridesType;

package/dist/types/constants.d.ts

@@ -1,5 +1,6 @@
 import type { DrawerWidth } from './components/types';
 export declare const transitionDuration = "0.22s";
 export declare const transitionDurationMs = 220;
-export declare const transitionTimingFunction = "cubic-bezier(0.2, 0, 0, 1)";
+export declare const transitionTimingFunction: import("@atlaskit/motion/curves").AnimationCurve;
 export declare const widths: DrawerWidth[];
+export declare const animationTimingFunction: () => import("@atlaskit/motion/curves").AnimationCurve;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.1.7",
+  "version": "7.1.10",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,21 +27,21 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/blanket": "^12.1.0",
     "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/motion": "^1.0.3",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "exenv": "^1.2.2",
     "react-focus-lock": "^2.5.2",
-    "react-transition-group": "^4.4.1",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/checkbox": "^12.3.9",
     "@atlaskit/code": "^14.3.3",
     "@atlaskit/docs": "*",
@@ -53,11 +53,13 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
-    "typescript": "3.9.10",
+    "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/dist/cjs/components/transitions.js

@@ -1,185 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Slide = exports.Fade = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _constants2 = require("../constants");
-
-var _excluded = ["component", "in", "onExited", "onEntered", "defaultStyles", "transitionStyles", "transitionProps"],
-    _excluded2 = ["shouldUnmountOnExit"];
-
-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; }
-
-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; }
-
-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; } }
-
-var defaultTransitionProps = {
-  appear: true,
-  mountOnEnter: true,
-  unmountOnExit: true
-};
-
-var TransitionHandler = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TransitionHandler, _Component);
-
-  var _super = _createSuper(TransitionHandler);
-
-  function TransitionHandler() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, TransitionHandler);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function (node, isAppearing) {
-      var onEntered = _this.props.onEntered;
-
-      if (onEntered) {
-        // Delay onEntered callback to fix DS-6969
-        // Can remove this hack with DS-7078
-        _this.enterTimeout = setTimeout(function () {
-          return onEntered(node, isAppearing);
-        }, _constants2.transitionDurationMs);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearEnterTimeout", function () {
-      if (_this.enterTimeout) {
-        clearTimeout(_this.enterTimeout);
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(TransitionHandler, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearEnterTimeout();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$component = _this$props.component,
-          component = _this$props$component === void 0 ? 'div' : _this$props$component,
-          inProp = _this$props.in,
-          onExited = _this$props.onExited,
-          onEntered = _this$props.onEntered,
-          defaultStyles = _this$props.defaultStyles,
-          transitionStyles = _this$props.transitionStyles,
-          transitionProps = _this$props.transitionProps,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var timeout = {
-        enter: 0,
-        exit: _constants2.transitionDurationMs
-      };
-      return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, (0, _extends2.default)({
-        in: inProp,
-        onExited: onExited,
-        onExiting: this.clearEnterTimeout,
-        onEntered: this.onEntered,
-        timeout: timeout
-      }, transitionProps), function (state) {
-        var style = _objectSpread(_objectSpread({}, defaultStyles), transitionStyles[state]);
-
-        var Tag = component;
-        return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({
-          style: style
-        }, props));
-      });
-    }
-  }]);
-  return TransitionHandler;
-}(_react.Component);
-
-(0, _defineProperty2.default)(TransitionHandler, "defaultProps", {
-  component: 'div',
-  transitionProps: defaultTransitionProps
-});
-
-var Fade = function Fade(_ref) {
-  var props = (0, _extends2.default)({}, _ref);
-  return /*#__PURE__*/_react.default.createElement(TransitionHandler, (0, _extends2.default)({
-    defaultStyles: {
-      transition: "opacity ".concat(_constants2.transitionDurationMs, "ms ").concat(_constants2.transitionTimingFunction),
-      opacity: 0,
-      position: 'fixed',
-      zIndex: _constants.layers.blanket()
-    },
-    transitionStyles: {
-      entering: {
-        opacity: 0
-      },
-      entered: {
-        opacity: 1
-      }
-    }
-  }, props));
-};
-
-exports.Fade = Fade;
-
-var Slide = function Slide(_ref2) {
-  var _ref2$shouldUnmountOn = _ref2.shouldUnmountOnExit,
-      shouldUnmountOnExit = _ref2$shouldUnmountOn === void 0 ? true : _ref2$shouldUnmountOn,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  return /*#__PURE__*/_react.default.createElement(TransitionHandler, (0, _extends2.default)({
-    defaultStyles: {
-      transition: "transform ".concat(_constants2.transitionDurationMs, "ms ").concat(_constants2.transitionTimingFunction, ", ") + "width ".concat(_constants2.transitionDurationMs, "ms ").concat(_constants2.transitionTimingFunction),
-      transform: 'translate3d(-100%,0,0)'
-    },
-    transitionStyles: {
-      // Unset transform so we do not create a new stacking context for fixed-position children - NAV-159
-      entered: {
-        transform: null
-      },
-      exited: {
-        transform: 'translate3d(-100%,0,0)'
-      }
-    },
-    transitionProps: _objectSpread(_objectSpread({}, defaultTransitionProps), {}, {
-      unmountOnExit: shouldUnmountOnExit
-    })
-  }, props));
-};
-
-exports.Slide = Slide;