@atlaskit/drawer 7.1.12 → 7.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/drawer
 
+## 7.2.0
+
+### Minor Changes
+
+- [`cc4fe7bdf0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc4fe7bdf0c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- [`11da403db81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11da403db81) - Internal change to add optional `testId` prop pass-through to blanket component. There should be no change in behaviour.
+- Updated dependencies
+
 ## 7.1.12
 
 ### Patch Changes

package/dist/cjs/components/blanket.js

@@ -20,7 +20,8 @@ var _constants = require("../constants");
  */
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
-      onBlanketClicked = _ref.onBlanketClicked;
+      onBlanketClicked = _ref.onBlanketClicked,
+      testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
     appear: true
   }, isOpen && /*#__PURE__*/_react.default.createElement(_motion.FadeIn
@@ -45,7 +46,8 @@ var Blanket = function Blanket(_ref) {
       className: className
     }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
       isTinted: true,
-      onBlanketClicked: onBlanketClicked
+      onBlanketClicked: onBlanketClicked,
+      testId: testId
     }));
   }));
 };

package/dist/cjs/components/index.js

@@ -46,7 +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.12";
+var packageVersion = "7.2.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -164,7 +164,8 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         zIndex: "unset"
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
         isOpen: isOpen,
-        onBlanketClicked: this.handleBlanketClick
+        onBlanketClicked: this.handleBlanketClick,
+        testId: testId && "".concat(testId, "--blanket")
       }), /*#__PURE__*/_react.default.createElement(_focusLock.default, {
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -37,8 +37,8 @@ var Content = function Content(_ref) {
      * a complete override with no chance of partially changing styles.
      */
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)("div", (0, _extends2.default)({
-      css: cssFn(defaultStyles)
+    (0, _react.jsx)("div", (0, _extends2.default)({
+      css: (0, _react.css)(cssFn(defaultStyles))
     }, props))
   );
 };

package/dist/cjs/components/primitives/icon-button.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -13,7 +13,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var iconButtonStyles = (0, _core.css)({
+var iconButtonStyles = (0, _react.css)({
   display: 'flex',
   width: 5 * gridSize,
   height: 5 * gridSize,
@@ -41,7 +41,7 @@ var IconButton = function IconButton(_ref) {
   var children = _ref.children,
       onClick = _ref.onClick,
       testId = _ref.testId;
-  return (0, _core.jsx)("button", {
+  return (0, _react.jsx)("button", {
     type: "button",
     css: iconButtonStyles,
     onClick: onClick,

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

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 
@@ -43,7 +43,7 @@ var widths = {
   medium: 60 * (0, _constants.gridSize)(),
   wide: 75 * (0, _constants.gridSize)()
 };
-var wrapperStyles = (0, _core.css)({
+var wrapperStyles = (0, _react2.css)({
   display: 'flex',
   height: '100vh',
   position: 'fixed',
@@ -75,7 +75,7 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
 
 
   var duration = isExiting ? _constants2.transitionDurationMs * 2 : _constants2.transitionDurationMs;
-  return (0, _core.jsx)(_motion.SlideIn, {
+  return (0, _react2.jsx)(_motion.SlideIn, {
     animationTimingFunction: _constants2.animationTimingFunction,
     duration: duration,
     enterFrom: "left",
@@ -113,15 +113,15 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(ref.current);
     }
   }, [onCloseComplete, onOpenComplete]);
-  return (0, _core.jsx)(_motion.ExitingPersistence, {
+  return (0, _react2.jsx)(_motion.ExitingPersistence, {
     appear: true
-  }, isOpen && (0, _core.jsx)(CustomSlideIn, {
+  }, isOpen && (0, _react2.jsx)(CustomSlideIn, {
     onFinish: onFinish
   }, function (_ref3) {
     var _props$width;
 
     var className = _ref3.className;
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       className: className,
       css: wrapperStyles,
       style: {
@@ -129,14 +129,14 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       },
       "data-testid": testId,
       ref: ref
-    }, (0, _core.jsx)(Sidebar, sideBarOverrides, (0, _core.jsx)(_iconButton.default, {
+    }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-    }, Icon ? (0, _core.jsx)(Icon, {
+    }, Icon ? (0, _react2.jsx)(Icon, {
       size: "large"
-    }) : (0, _core.jsx)(_arrowLeft.default, {
+    }) : (0, _react2.jsx)(_arrowLeft.default, {
       label: "Close drawer"
-    }))), (0, _core.jsx)(Content, contentOverrides, children));
+    }))), (0, _react2.jsx)(Content, contentOverrides, children));
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -39,8 +39,8 @@ var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: cssFn(defaultStyle)
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _react.css)(cssFn(defaultStyle))
   }, props));
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/components/blanket.js

@@ -8,7 +8,8 @@ import { animationTimingFunction, transitionDurationMs } from '../constants';
  */
 const Blanket = ({
   isOpen,
-  onBlanketClicked
+  onBlanketClicked,
+  testId
 }) => {
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
@@ -34,7 +35,8 @@ const Blanket = ({
     className: className
   }, /*#__PURE__*/React.createElement(AkBlanket, {
     isTinted: true,
-    onBlanketClicked: onBlanketClicked
+    onBlanketClicked: onBlanketClicked,
+    testId: testId
   }))));
 };
 

package/dist/es2019/components/index.js

@@ -9,7 +9,7 @@ import Blanket from './blanket';
 import FocusLock from './focus-lock';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.1.12";
+const packageVersion = "7.2.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
@@ -120,7 +120,8 @@ export class DrawerBase extends Component {
       zIndex: "unset"
     }, /*#__PURE__*/React.createElement(Blanket, {
       isOpen: isOpen,
-      onBlanketClicked: this.handleBlanketClick
+      onBlanketClicked: this.handleBlanketClick,
+      testId: testId && `${testId}--blanket`
     }), /*#__PURE__*/React.createElement(FocusLock, {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 const defaultStyles = {
   flex: 1,
@@ -23,7 +23,7 @@ const Content = ({
  */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
 jsx("div", _extends({
-  css: cssFn(defaultStyles)
+  css: css(cssFn(defaultStyles))
 }, props));
 
 export default {

package/dist/es2019/components/primitives/icon-button.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B50, N30A } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { N0 } from '@atlaskit/theme/colors';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 const defaultStyle = {
@@ -25,7 +25,7 @@ const Sidebar = ({
 }) => {
   // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
   return jsx("div", _extends({
-    css: cssFn(defaultStyle)
+    css: css(cssFn(defaultStyle))
   }, props));
 };
 

package/dist/es2019/version.json

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

package/dist/esm/components/blanket.js

@@ -8,7 +8,8 @@ import { animationTimingFunction, transitionDurationMs } from '../constants';
  */
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
-      onBlanketClicked = _ref.onBlanketClicked;
+      onBlanketClicked = _ref.onBlanketClicked,
+      testId = _ref.testId;
   return /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
   }, isOpen && /*#__PURE__*/React.createElement(FadeIn
@@ -33,7 +34,8 @@ var Blanket = function Blanket(_ref) {
       className: className
     }, /*#__PURE__*/React.createElement(AkBlanket, {
       isTinted: true,
-      onBlanketClicked: onBlanketClicked
+      onBlanketClicked: onBlanketClicked,
+      testId: testId
     }));
   }));
 };

package/dist/esm/components/index.js

@@ -19,7 +19,7 @@ import Blanket from './blanket';
 import FocusLock from './focus-lock';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.1.12";
+var packageVersion = "7.2.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -144,7 +144,8 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         zIndex: "unset"
       }, /*#__PURE__*/React.createElement(Blanket, {
         isOpen: isOpen,
-        onBlanketClicked: this.handleBlanketClick
+        onBlanketClicked: this.handleBlanketClick,
+        testId: testId && "".concat(testId, "--blanket")
       }), /*#__PURE__*/React.createElement(FocusLock, {
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["cssFn"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 var defaultStyles = {
   flex: 1,
@@ -28,7 +28,7 @@ var Content = function Content(_ref) {
      */
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
     jsx("div", _extends({
-      css: cssFn(defaultStyles)
+      css: css(cssFn(defaultStyles))
     }, props))
   );
 };

package/dist/esm/components/primitives/icon-button.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B50, N30A } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();

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

@@ -5,7 +5,7 @@ var _excluded = ["children", "icon", "onClose", "onCloseComplete", "onOpenComple
 
 /** @jsx jsx */
 import { useCallback, useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { N0 } from '@atlaskit/theme/colors';

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["cssFn"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 var defaultStyle = {
@@ -29,7 +29,7 @@ var Sidebar = function Sidebar(_ref) {
 
   // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
   return jsx("div", _extends({
-    css: cssFn(defaultStyle)
+    css: css(cssFn(defaultStyle))
   }, props));
 };
 

package/dist/esm/version.json

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

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

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

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

@@ -27,5 +27,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerPro
     isFocusLockEnabled: boolean;
     shouldReturnFocus: boolean;
     autoFocusFirstElem: boolean;
-}, 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>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "isOpen" | "testId" | "analyticsContext" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "icon" | "onClose" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
-/// <reference types="react" />
-import { CSSObject } from '@emotion/core';
+import { CSSObject, jsx } from '@emotion/react';
 import { ContentProps } from '../types';
 declare const _default: {
-    component: ({ cssFn, ...props }: ContentProps) => JSX.Element;
+    component: ({ cssFn, ...props }: ContentProps) => jsx.JSX.Element;
     cssFn: () => CSSObject;
 };
 export default _default;

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

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

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { SidebarProps } from '../types';
 declare const _default: {
     component: FC<SidebarProps>;

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

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode, SyntheticEvent } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Widths = {
     extended: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.1.12",
+  "version": "7.2.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "exenv": "^1.2.2",
     "react-focus-lock": "^2.5.2",
     "tiny-invariant": "^1.2.0"
@@ -46,10 +46,10 @@
     "@atlaskit/checkbox": "^12.3.9",
     "@atlaskit/code": "^14.3.3",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^11.3.0",
+    "@atlaskit/dropdown-menu": "^11.4.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.3.1",
     "@atlaskit/visual-regression": "*",