@atlaskit/drawer 7.14.1 → 7.14.3

package/dist/esm/components/primitives/focus-lock.js

@@ -1,81 +1,51 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component } from 'react';
+import React, { useEffect } from 'react';
 import ReactFocusLock from 'react-focus-lock';
 import ScrollLock from 'react-scrolllock';
 import invariant from 'tiny-invariant';
-import { defaultFocusLockSettings } from '../../constants';
-// Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
-// This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
-var FocusLock = /*#__PURE__*/function (_Component) {
-  _inherits(FocusLock, _Component);
-  var _super = _createSuper(FocusLock);
-  function FocusLock() {
-    var _this;
-    _classCallCheck(this, FocusLock);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
+ * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
+ */
+var FocusLock = function FocusLock(_ref) {
+  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+    isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    _ref$autoFocusFirstEl = _ref.autoFocusFirstElem,
+    autoFocusFirstElem = _ref$autoFocusFirstEl === void 0 ? true : _ref$autoFocusFirstEl,
+    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
+    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
+    children = _ref.children;
+  useEffect(function () {
+    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
+      invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "getFocusTarget", function () {
-      var shouldReturnFocus = _this.props.shouldReturnFocus;
-      if (typeof shouldReturnFocus === 'boolean') {
-        return shouldReturnFocus;
-      }
-      return false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "onDeactivation", function () {
-      var shouldReturnFocus = _this.props.shouldReturnFocus;
-      if (typeof shouldReturnFocus !== 'boolean') {
-        window.setTimeout(function () {
-          var _shouldReturnFocus$cu;
-          shouldReturnFocus === null || shouldReturnFocus === void 0 || (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 || _shouldReturnFocus$cu.focus();
-        }, 0);
-      }
-    });
-    return _this;
-  }
-  _createClass(FocusLock, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        isFocusLockEnabled = _this$props.isFocusLockEnabled,
-        autoFocusFirstElem = _this$props.autoFocusFirstElem;
-      if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-        invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/drawer: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
-      }
-      if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
-        var elem = autoFocusFirstElem();
-        if (elem && elem.focus) {
-          elem.focus();
-        }
+    if (typeof autoFocusFirstElem === 'function' && isFocusLockEnabled) {
+      var elem = autoFocusFirstElem();
+      if (elem && elem.focus) {
+        elem.focus();
       }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isFocusLockEnabled = _this$props2.isFocusLockEnabled,
-        autoFocusFirstElem = _this$props2.autoFocusFirstElem,
-        children = _this$props2.children;
-      return /*#__PURE__*/React.createElement(ReactFocusLock, {
-        disabled: !isFocusLockEnabled,
-        autoFocus: !!autoFocusFirstElem,
-        returnFocus: this.getFocusTarget(),
-        onDeactivation: this.onDeactivation
-      }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
+  }, [autoFocusFirstElem, isFocusLockEnabled]);
+  var getFocusTarget = function getFocusTarget() {
+    if (typeof shouldReturnFocus === 'boolean') {
+      return shouldReturnFocus;
+    }
+    return false;
+  };
+  var onDeactivation = function onDeactivation() {
+    if (typeof shouldReturnFocus !== 'boolean') {
+      window.setTimeout(function () {
+        var _shouldReturnFocus$cu;
+        shouldReturnFocus === null || shouldReturnFocus === void 0 || (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 || _shouldReturnFocus$cu.focus();
+      }, 0);
     }
-  }]);
-  return FocusLock;
-}(Component);
-_defineProperty(FocusLock, "defaultProps", _objectSpread({}, defaultFocusLockSettings));
-export { FocusLock as default };
+  };
+  return /*#__PURE__*/React.createElement(ReactFocusLock, {
+    disabled: !isFocusLockEnabled,
+    autoFocus: !!autoFocusFirstElem,
+    returnFocus: getFocusTarget(),
+    onDeactivation: onDeactivation
+  }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
+};
+export default FocusLock;

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

@@ -1,27 +1,15 @@
-import React, { Component } from 'react';
-import { type DrawerProps, type DrawerWidth } from './types';
-export declare class DrawerBase extends Component<DrawerProps, {
-    renderPortal: boolean;
-}> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-        width: DrawerWidth;
-    };
-    state: {
-        renderPortal: boolean;
-    };
-    body: HTMLBodyElement | null | undefined;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DrawerProps): void;
-    private handleBlanketClick;
-    private handleBackButtonClick;
-    private handleClose;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    render(): JSX.Element | null;
-}
+import React from 'react';
+import { type DrawerProps } from './types';
+/**
+ * __Drawer base__
+ *
+ * A drawer is a panel that slides in from the left side of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/drawer/examples)
+ * - [Code](https://atlassian.design/components/drawer/code)
+ * - [Usage](https://atlassian.design/components/drawer/usage)
+ */
+export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 /**
  * __Drawer__
  *
@@ -31,10 +19,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & 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 | React.RefObject<HTMLElement> | undefined;
-    width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
+    onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
+    isOpen: boolean;
+    zIndex?: number | "unset" | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default Drawer;

package/dist/types/components/primitives/focus-lock.d.ts

@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
+/// <reference types="react" />
 import { type FocusLockProps } from '../types';
-export default class FocusLock extends Component<FocusLockProps> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    };
-    componentDidMount(): void;
-    getFocusTarget: () => boolean;
-    onDeactivation: () => void;
-    render(): JSX.Element;
-}
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
+ * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
+ */
+declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => JSX.Element;
+export default FocusLock;

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

@@ -147,7 +147,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
      * This is passed to the portal component.
      * Defaults to `unset`.
      */
-    zIndex?: number;
+    zIndex?: number | 'unset';
 };
 export interface FocusLockSettings {
     /**

package/dist/types-ts4.5/components/index.d.ts

@@ -1,27 +1,15 @@
-import React, { Component } from 'react';
-import { type DrawerProps, type DrawerWidth } from './types';
-export declare class DrawerBase extends Component<DrawerProps, {
-    renderPortal: boolean;
-}> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-        width: DrawerWidth;
-    };
-    state: {
-        renderPortal: boolean;
-    };
-    body: HTMLBodyElement | null | undefined;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: DrawerProps): void;
-    private handleBlanketClick;
-    private handleBackButtonClick;
-    private handleClose;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    render(): JSX.Element | null;
-}
+import React from 'react';
+import { type DrawerProps } from './types';
+/**
+ * __Drawer base__
+ *
+ * A drawer is a panel that slides in from the left side of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/drawer/examples)
+ * - [Code](https://atlassian.design/components/drawer/code)
+ * - [Usage](https://atlassian.design/components/drawer/usage)
+ */
+export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
 /**
  * __Drawer__
  *
@@ -31,10 +19,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
  * - [Code](https://atlassian.design/components/drawer/code)
  * - [Usage](https://atlassian.design/components/drawer/usage)
  */
-declare const Drawer: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & 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 | React.RefObject<HTMLElement> | undefined;
-    width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "enterFrom" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
+declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
+    onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
+    isOpen: boolean;
+    zIndex?: number | "unset" | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default Drawer;

package/dist/types-ts4.5/components/primitives/focus-lock.d.ts

@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
+/// <reference types="react" />
 import { type FocusLockProps } from '../types';
-export default class FocusLock extends Component<FocusLockProps> {
-    static defaultProps: {
-        autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
-        isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
-    };
-    componentDidMount(): void;
-    getFocusTarget: () => boolean;
-    onDeactivation: () => void;
-    render(): JSX.Element;
-}
+/**
+ * __Focus lock__
+ *
+ * Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
+ * This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
+ */
+declare const FocusLock: ({ isFocusLockEnabled, autoFocusFirstElem, shouldReturnFocus, children, }: FocusLockProps) => JSX.Element;
+export default FocusLock;

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

@@ -147,7 +147,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
      * This is passed to the portal component.
      * Defaults to `unset`.
      */
-    zIndex?: number;
+    zIndex?: number | 'unset';
 };
 export interface FocusLockSettings {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "7.14.1",
+	"version": "7.14.3",
 	"description": "A drawer is a panel that slides in from the left side of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,10 +29,6 @@
 	"homepage": "https://atlassian.design/components/drawer",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Drawer",
 			"category": "Components"
@@ -42,14 +38,14 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/blanket": "^13.3.0",
-		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/button": "^20.1.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/portal": "^4.9.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -66,7 +62,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",