@atlaskit/drawer 7.4.1 → 7.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/drawer
 
+## 7.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.4.2
+
+### Patch Changes
+
+- [`5bd499c254f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bd499c254f) - Fix zIndex stacking of internal Blanket component during css transition
+
 ## 7.4.1
 
 ### Patch Changes

package/dist/cjs/components/blanket.js

@@ -9,22 +9,36 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
 
 var _motion = require("@atlaskit/motion");
 
-var _constants = require("../constants");
+var _constants = require("@atlaskit/theme/constants");
+
+var _constants2 = require("../constants");
+
+/** @jsx jsx */
 
+/**
+ * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
+ */
+var stackingStyles = (0, _react2.css)({
+  position: 'relative',
+  zIndex: _constants.layers.blanket()
+});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
+
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
       onBlanketClicked = _ref.onBlanketClicked,
       testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
+  return (0, _react2.jsx)(_motion.ExitingPersistence, {
     appear: true
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_motion.FadeIn
+  }, isOpen && (0, _react2.jsx)(_motion.FadeIn
   /**
    * We double the duration because the fade in keyframes have
    * `opacity: 1` at `50%`.
@@ -32,19 +46,20 @@ var Blanket = function Blanket(_ref) {
    * The fade out animation uses half the passed duration so it evens out.
    */
   , {
-    duration: _constants.transitionDurationMs * 2
+    duration: _constants2.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
+    animationTimingFunction: _constants2.animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+    return (0, _react2.jsx)("div", {
+      className: className,
+      css: stackingStyles
+    }, (0, _react2.jsx)(_blanket.default, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,
       testId: testId && testId

package/dist/cjs/components/index.js

@@ -50,7 +50,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.4.1";
+var packageVersion = "7.4.3";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {

package/dist/cjs/components/primitives/drawer-wrapper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.widths = exports.default = void 0;
 
 var _react = require("react");
 
@@ -27,6 +27,7 @@ var widths = {
   medium: 60 * (0, _constants.gridSize)(),
   wide: 75 * (0, _constants.gridSize)()
 };
+exports.widths = widths;
 var wrapperStyles = (0, _react2.css)({
   display: 'flex',
   height: '100vh',

package/dist/cjs/version.json

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

package/dist/es2019/components/blanket.js

@@ -1,19 +1,30 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { layers } from '@atlaskit/theme/constants';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
 
+/**
+ * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
+ */
+const stackingStyles = css({
+  position: 'relative',
+  zIndex: layers.blanket()
+});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
+
 const Blanket = ({
   isOpen,
   onBlanketClicked,
   testId
 }) => {
-  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+  return jsx(ExitingPersistence, {
     appear: true
-  }, isOpen && /*#__PURE__*/React.createElement(FadeIn
+  }, isOpen && jsx(FadeIn
   /**
    * We double the duration because the fade in keyframes have
    * `opacity: 1` at `50%`.
@@ -31,9 +42,10 @@ const Blanket = ({
     animationTimingFunction: animationTimingFunction
   }, ({
     className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(AkBlanket, {
+  }) => jsx("div", {
+    className: className,
+    css: stackingStyles
+  }, jsx(AkBlanket, {
     isTinted: true,
     onBlanketClicked: onBlanketClicked,
     testId: testId && testId

package/dist/es2019/components/index.js

@@ -9,7 +9,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.4.1";
+const packageVersion = "7.4.3";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({

package/dist/es2019/components/primitives/drawer-wrapper.js

@@ -5,7 +5,7 @@ import { useMergeRefs } from 'use-callback-ref';
 import { N0 } from '@atlaskit/theme/colors';
 import { gridSize, layers } from '@atlaskit/theme/constants';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
-const widths = {
+export const widths = {
   full: '100vw',
   extended: '95vw',
   narrow: 45 * gridSize(),

package/dist/es2019/version.json

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

package/dist/esm/components/blanket.js

@@ -1,18 +1,29 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import AkBlanket from '@atlaskit/blanket';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { layers } from '@atlaskit/theme/constants';
 import { animationTimingFunction, transitionDurationMs } from '../constants';
 
+/**
+ * The FadeIn opacity transition creates a new stacking context so we need ensure layering is the same as @atlaskit/blanket
+ */
+var stackingStyles = css({
+  position: 'relative',
+  zIndex: layers.blanket()
+});
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
+
 var Blanket = function Blanket(_ref) {
   var isOpen = _ref.isOpen,
       onBlanketClicked = _ref.onBlanketClicked,
       testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+  return jsx(ExitingPersistence, {
     appear: true
-  }, isOpen && /*#__PURE__*/React.createElement(FadeIn
+  }, isOpen && jsx(FadeIn
   /**
    * We double the duration because the fade in keyframes have
    * `opacity: 1` at `50%`.
@@ -30,9 +41,10 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement(AkBlanket, {
+    return jsx("div", {
+      className: className,
+      css: stackingStyles
+    }, jsx(AkBlanket, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,
       testId: testId && testId

package/dist/esm/components/index.js

@@ -23,7 +23,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.4.1";
+var packageVersion = "7.4.3";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {

package/dist/esm/components/primitives/drawer-wrapper.js

@@ -5,7 +5,7 @@ import { useMergeRefs } from 'use-callback-ref';
 import { N0 } from '@atlaskit/theme/colors';
 import { gridSize, layers } from '@atlaskit/theme/constants';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
-var widths = {
+export var widths = {
   full: '100vw',
   extended: '95vw',
   narrow: 45 * gridSize(),

package/dist/esm/version.json

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

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

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 declare type BlanketProps = {
     isOpen: boolean;
     onBlanketClicked: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -7,5 +9,5 @@ declare type BlanketProps = {
 /**
  * A wrapper around `@atlaskit/blanket` that adds a fade in/out transition.
  */
-declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => JSX.Element;
+declare const Blanket: ({ isOpen, onBlanketClicked, testId }: BlanketProps) => jsx.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<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "isOpen" | "analyticsContext" | "zIndex" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/primitives/drawer-wrapper.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ReactElement, Ref } from 'react';
-import { DrawerPrimitiveProps } from '../types';
+import { DrawerPrimitiveProps, Widths } from '../types';
+export declare const widths: Widths;
 interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.4.1",
+  "version": "7.4.3",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.11.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -46,7 +46,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
@@ -60,9 +60,7 @@
     "@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": "^8.17.1",
     "@testing-library/react": "^12.1.5",
-    "enzyme": "^3.10.0",
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
@@ -87,4 +85,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/report.api.md

@@ -1,17 +1,23 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/drawer"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { ComponentType } from 'react';
 import { CSSObject } from '@emotion/react';
 import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { SyntheticEvent } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
@@ -48,56 +54,54 @@ const _default: React_2.ForwardRefExoticComponent<
     Pick<
       Omit<DrawerProps, keyof WithAnalyticsEventsProps>,
       | 'children'
-      | 'onKeyDown'
-      | 'isOpen'
-      | 'testId'
-      | 'zIndex'
       | 'icon'
+      | 'isOpen'
       | 'onClose'
       | 'onCloseComplete'
+      | 'onKeyDown'
       | 'onOpenComplete'
       | 'overrides'
       | 'shouldUnmountOnExit'
+      | 'testId'
+      | 'zIndex'
     > &
       Partial<
         Pick<
           Omit<DrawerProps, keyof WithAnalyticsEventsProps>,
-          | 'width'
-          | 'isFocusLockEnabled'
-          | 'autoFocusFirstElem'
-          | 'shouldReturnFocus'
+          'width' | keyof FocusLockSettings
         >
       > &
       Partial<
         Pick<
           {
+            autoFocusFirstElem?:
+              | (() => HTMLElement | null)
+              | boolean
+              | undefined;
+            isFocusLockEnabled?: boolean | undefined;
+            shouldReturnFocus?: boolean | undefined;
             width: DrawerWidth;
-            isFocusLockEnabled: boolean;
-            shouldReturnFocus: boolean;
-            autoFocusFirstElem: boolean;
           },
           never
         >
       > &
       React_2.RefAttributes<any> &
       WithContextProps,
-    | 'width'
-    | 'children'
-    | 'onKeyDown'
-    | 'key'
-    | 'isOpen'
-    | 'testId'
     | 'analyticsContext'
-    | 'isFocusLockEnabled'
-    | 'autoFocusFirstElem'
-    | 'shouldReturnFocus'
-    | 'zIndex'
+    | 'children'
     | 'icon'
+    | 'isOpen'
+    | 'key'
     | 'onClose'
     | 'onCloseComplete'
+    | 'onKeyDown'
     | 'onOpenComplete'
     | 'overrides'
     | 'shouldUnmountOnExit'
+    | 'testId'
+    | 'width'
+    | 'zIndex'
+    | keyof FocusLockSettings
   > &
     React_2.RefAttributes<any>
 >;
@@ -116,16 +120,16 @@ export type DefaultsType = {
 };
 
 // @public (undocumented)
-export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Sidebar' | 'Content'>;
+export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
 
 // @public (undocumented)
 export type DrawerPrimitiveOverrides = Pick<
   OverridesType,
-  'Sidebar' | 'Content'
+  'Content' | 'Sidebar'
 >;
 
 // @public (undocumented)
-export interface DrawerPrimitiveProps extends BaseProps {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
   // (undocumented)
   in: boolean;
   // (undocumented)
@@ -134,7 +138,7 @@ export interface DrawerPrimitiveProps extends BaseProps {
 
 // @public (undocumented)
 export type DrawerProps = BaseProps &
-  FocusLockProps &
+  FocusLockSettings &
   WithAnalyticsEventsProps & {
     onKeyDown?: (event: SyntheticEvent) => void;
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
@@ -146,9 +150,13 @@ export type DrawerProps = BaseProps &
 export type DrawerWidth = 'extended' | 'full' | 'medium' | 'narrow' | 'wide';
 
 // @public (undocumented)
-export interface FocusLockProps {
-  autoFocusFirstElem?: boolean | (() => HTMLElement | null);
-  children?: ReactNode;
+export interface FocusLockProps extends FocusLockSettings {
+  children?: ReactElement;
+}
+
+// @public (undocumented)
+interface FocusLockSettings {
+  autoFocusFirstElem?: (() => HTMLElement | null) | boolean;
   isFocusLockEnabled?: boolean;
   shouldReturnFocus?: boolean;
 }
@@ -185,3 +193,5 @@ export type Widths = {
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->