@atlaskit/drawer 7.2.1 → 7.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/drawer
 
+## 7.3.1
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
+## 7.3.0
+
+### Minor Changes
+
+- [`b975291711b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b975291711b) - Add zindex as prop to drawer
+
+### Patch Changes
+
+- [`a0653d05aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a0653d05aa0) - Add `testId` prop to internal blanket component, passthrough `testId` from Drawer to Blanket for testing purposes. No behaviour change.
+- Updated dependencies
+
 ## 7.2.1
 
 ### Patch Changes

package/dist/cjs/components/blanket.js

@@ -47,7 +47,7 @@ var Blanket = function Blanket(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,
-      testId: testId
+      testId: 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.2.1";
+var packageVersion = "7.3.1";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -159,9 +159,11 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
           autoFocusFirstElem = _this$props3.autoFocusFirstElem,
           isFocusLockEnabled = _this$props3.isFocusLockEnabled,
           shouldReturnFocus = _this$props3.shouldReturnFocus,
-          overrides = _this$props3.overrides;
+          overrides = _this$props3.overrides,
+          _this$props3$zIndex = _this$props3.zIndex,
+          zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
       return /*#__PURE__*/_react.default.createElement(_portal.default, {
-        zIndex: "unset"
+        zIndex: zIndex
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
         isOpen: isOpen,
         onBlanketClicked: this.handleBlanketClick,

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

@@ -17,8 +17,10 @@ var iconButtonStyles = (0, _react.css)({
   display: 'flex',
   width: 5 * gridSize,
   height: 5 * gridSize,
-  marginBottom: 2 * gridSize,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
+  marginBottom: "var(--ds-scale-200, 16px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   justifyContent: 'center',
   background: 0,

package/dist/cjs/version.json

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

package/dist/es2019/components/blanket.js

@@ -36,7 +36,7 @@ const Blanket = ({
   }, /*#__PURE__*/React.createElement(AkBlanket, {
     isTinted: true,
     onBlanketClicked: onBlanketClicked,
-    testId: testId
+    testId: 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.2.1";
+const packageVersion = "7.3.1";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
@@ -114,10 +114,11 @@ export class DrawerBase extends Component {
       autoFocusFirstElem,
       isFocusLockEnabled,
       shouldReturnFocus,
-      overrides
+      overrides,
+      zIndex = 'unset'
     } = this.props;
     return /*#__PURE__*/React.createElement(Portal, {
-      zIndex: "unset"
+      zIndex: zIndex
     }, /*#__PURE__*/React.createElement(Blanket, {
       isOpen: isOpen,
       onBlanketClicked: this.handleBlanketClick,

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

@@ -7,8 +7,10 @@ const iconButtonStyles = css({
   display: 'flex',
   width: 5 * gridSize,
   height: 5 * gridSize,
-  marginBottom: 2 * gridSize,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
+  marginBottom: "var(--ds-scale-200, 16px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   justifyContent: 'center',
   background: 0,

package/dist/es2019/version.json

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

package/dist/esm/components/blanket.js

@@ -35,7 +35,7 @@ var Blanket = function Blanket(_ref) {
     }, /*#__PURE__*/React.createElement(AkBlanket, {
       isTinted: true,
       onBlanketClicked: onBlanketClicked,
-      testId: testId
+      testId: 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.2.1";
+var packageVersion = "7.3.1";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -139,9 +139,11 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
           autoFocusFirstElem = _this$props3.autoFocusFirstElem,
           isFocusLockEnabled = _this$props3.isFocusLockEnabled,
           shouldReturnFocus = _this$props3.shouldReturnFocus,
-          overrides = _this$props3.overrides;
+          overrides = _this$props3.overrides,
+          _this$props3$zIndex = _this$props3.zIndex,
+          zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
       return /*#__PURE__*/React.createElement(Portal, {
-        zIndex: "unset"
+        zIndex: zIndex
       }, /*#__PURE__*/React.createElement(Blanket, {
         isOpen: isOpen,
         onBlanketClicked: this.handleBlanketClick,

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

@@ -7,8 +7,10 @@ var iconButtonStyles = css({
   display: 'flex',
   width: 5 * gridSize,
   height: 5 * gridSize,
-  marginBottom: 2 * gridSize,
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `2 * gridSize`
+  marginBottom: "var(--ds-scale-200, 16px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
   alignItems: 'center',
   justifyContent: 'center',
   background: 0,

package/dist/esm/version.json

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

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

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

@@ -103,6 +103,12 @@ export declare type DrawerProps = BaseProps & FocusLockProps & WithAnalyticsEven
      * Controls if the drawer is open or closed.
      */
     isOpen: boolean;
+    /**
+     * Z-index that the popup should be displayed in.
+     * This is passed to the portal component.
+     * Defaults to `unset`.
+     */
+    zIndex?: number;
 };
 export interface FocusLockProps {
     /**

package/dist/types-ts4.0/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" | "isOpen" | "testId" | "icon" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "isOpen" | "testId" | "zIndex" | "icon" | "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" | "onClose" | "isOpen" | "testId" | "analyticsContext" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "icon" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "isOpen" | "testId" | "analyticsContext" | "isFocusLockEnabled" | "autoFocusFirstElem" | "shouldReturnFocus" | "zIndex" | "icon" | "onCloseComplete" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.0/components/types.d.ts

@@ -103,6 +103,12 @@ export declare type DrawerProps = BaseProps & FocusLockProps & WithAnalyticsEven
      * Controls if the drawer is open or closed.
      */
     isOpen: boolean;
+    /**
+     * Z-index that the popup should be displayed in.
+     * This is passed to the portal component.
+     * Defaults to `unset`.
+     */
+    zIndex?: number;
 };
 export interface FocusLockProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.2.1",
+  "version": "7.3.1",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -23,6 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/drawer",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -33,8 +35,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/blanket": "^12.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/blanket": "^12.3.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
@@ -50,15 +52,16 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/checkbox": "^12.3.9",
-    "@atlaskit/code": "^14.3.3",
+    "@atlaskit/checkbox": "^12.4.0",
+    "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.3.1",
+    "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -79,6 +82,7 @@
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",

package/report.api.md

@@ -1,10 +1,12 @@
-## API Report File for "@atlaskit/drawer"
+## 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 by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 import { ComponentType } from 'react';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { SyntheticEvent } from 'react';
@@ -12,28 +14,44 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { WithContextProps } from '@atlaskit/analytics-next';
 
 export declare interface BaseProps {
-  /** A unique hook to be used for testing. */
+  /**
+   * A unique hook to be used for testing.
+   */
   testId?: string;
-  /** The content of the drawer. */
+  /**
+   * The content of the drawer.
+   */
   children?: ReactNode;
-  /** Icon to be rendered in your drawer as a component, if available. */
+  /**
+   * Icon to be rendered in your drawer as a component, if available.
+   */
   icon?: ComponentType<any>;
-  /** Available drawer sizes. */
+  /**
+   * Available drawer sizes.
+   */
   width?: DrawerWidth;
-  /** A callback function that will be called when the drawer has finished its opening transition. */
+  /**
+   * 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. */
+  /**
+   * 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.
+   * @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. */
+  /**
+   * Override drawer components.
+   */
   overrides?: OverridesType;
 }
 
-/** Type of keyboard event that triggers which key will should close the drawer. */
+/**
+ * Type of keyboard event that triggers which key will should close the drawer.
+ */
 export declare type CloseTrigger = 'backButton' | 'blanket' | 'escKey';
 
 export declare type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
@@ -53,6 +71,7 @@ declare const _default: React_2.ForwardRefExoticComponent<
       | 'onKeyDown'
       | 'isOpen'
       | 'testId'
+      | 'zIndex'
       | 'icon'
       | 'onClose'
       | 'onCloseComplete'
@@ -87,11 +106,12 @@ declare const _default: React_2.ForwardRefExoticComponent<
     | 'onKeyDown'
     | 'key'
     | 'isOpen'
-    | 'analyticsContext'
     | 'testId'
+    | 'analyticsContext'
     | 'isFocusLockEnabled'
     | 'autoFocusFirstElem'
     | 'shouldReturnFocus'
+    | 'zIndex'
     | 'icon'
     | 'onClose'
     | 'onCloseComplete'
@@ -132,12 +152,24 @@ export declare interface DrawerPrimitiveProps extends BaseProps {
 export declare type DrawerProps = BaseProps &
   FocusLockProps &
   WithAnalyticsEventsProps & {
-    /** Callback function called while the drawer is displayed and `keydown` event is triggered. */
+    /**
+     * Callback function called while the drawer is displayed and `keydown` event is triggered.
+     */
     onKeyDown?: (event: SyntheticEvent) => void;
-    /** Callback function called when the drawer is closed. */
+    /**
+     * Callback function called when the drawer is closed.
+     */
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
-    /** Controls if the drawer is open or closed. */
+    /**
+     * Controls if the drawer is open or closed.
+     */
     isOpen: boolean;
+    /**
+     * Z-index that the popup should be displayed in.
+     * This is passed to the portal component.
+     * Defaults to `unset`.
+     */
+    zIndex?: number;
   };
 
 export declare type DrawerWidth =
@@ -148,13 +180,21 @@ export declare type DrawerWidth =
   | 'wide';
 
 export declare interface FocusLockProps {
-  /** Controls whether to focus the first tabbable element inside the focus lock. */
+  /**
+   * Controls whether to focus the first tabbable element inside the focus lock.
+   */
   autoFocusFirstElem?: boolean | (() => HTMLElement | null);
-  /** Content inside the focus lock. */
+  /**
+   * Content inside the focus lock.
+   */
   children?: ReactNode;
-  /**  Whether the focus lock is active or not. */
+  /**
+   *  Whether the focus lock is active or not.
+   */
   isFocusLockEnabled?: boolean;
-  /** Whether to return the focus to the previous active element on closing the drawer. */
+  /**
+   * Whether to return the focus to the previous active element on closing the drawer.
+   */
   shouldReturnFocus?: boolean;
 }