@atlaskit/drawer 7.7.2 → 7.9.0

package/dist/cjs/components/index.js

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.7.2";
+var packageVersion = "7.9.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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"));
@@ -29,8 +30,29 @@ var FocusLock = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(FocusLock, _Component);
   var _super = _createSuper(FocusLock);
   function FocusLock() {
+    var _this;
     (0, _classCallCheck2.default)(this, FocusLock);
-    return _super.apply(this, arguments);
+    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), "getFocusTarget", function () {
+      var shouldReturnFocus = _this.props.shouldReturnFocus;
+      if (typeof shouldReturnFocus === 'boolean') {
+        return shouldReturnFocus;
+      }
+      return false;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
   }
   (0, _createClass2.default)(FocusLock, [{
     key: "componentDidMount",
@@ -54,12 +76,12 @@ var FocusLock = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         isFocusLockEnabled = _this$props2.isFocusLockEnabled,
         autoFocusFirstElem = _this$props2.autoFocusFirstElem,
-        shouldReturnFocus = _this$props2.shouldReturnFocus,
         children = _this$props2.children;
       return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
         disabled: !isFocusLockEnabled,
         autoFocus: !!autoFocusFirstElem,
-        returnFocus: shouldReturnFocus
+        returnFocus: this.getFocusTarget(),
+        onDeactivation: this.onDeactivation
       }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null, children));
     }
   }]);

package/dist/es2019/components/index.js

@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.7.2";
+const packageVersion = "7.9.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',

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

@@ -7,6 +7,29 @@ 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
 export default class FocusLock extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "getFocusTarget", () => {
+      const {
+        shouldReturnFocus
+      } = this.props;
+      if (typeof shouldReturnFocus === 'boolean') {
+        return shouldReturnFocus;
+      }
+      return false;
+    });
+    _defineProperty(this, "onDeactivation", () => {
+      const {
+        shouldReturnFocus
+      } = this.props;
+      if (typeof shouldReturnFocus !== 'boolean') {
+        window.setTimeout(() => {
+          var _shouldReturnFocus$cu;
+          shouldReturnFocus === null || shouldReturnFocus === void 0 ? void 0 : (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
+        }, 0);
+      }
+    });
+  }
   componentDidMount() {
     const {
       isFocusLockEnabled,
@@ -26,13 +49,13 @@ export default class FocusLock extends Component {
     const {
       isFocusLockEnabled,
       autoFocusFirstElem,
-      shouldReturnFocus,
       children
     } = this.props;
     return /*#__PURE__*/React.createElement(ReactFocusLock, {
       disabled: !isFocusLockEnabled,
       autoFocus: !!autoFocusFirstElem,
-      returnFocus: shouldReturnFocus
+      returnFocus: this.getFocusTarget(),
+      onDeactivation: this.onDeactivation
     }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
   }
 }

package/dist/esm/components/index.js

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

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

@@ -1,5 +1,6 @@
 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";
@@ -19,8 +20,29 @@ var FocusLock = /*#__PURE__*/function (_Component) {
   _inherits(FocusLock, _Component);
   var _super = _createSuper(FocusLock);
   function FocusLock() {
+    var _this;
     _classCallCheck(this, FocusLock);
-    return _super.apply(this, arguments);
+    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));
+    _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",
@@ -44,12 +66,12 @@ var FocusLock = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         isFocusLockEnabled = _this$props2.isFocusLockEnabled,
         autoFocusFirstElem = _this$props2.autoFocusFirstElem,
-        shouldReturnFocus = _this$props2.shouldReturnFocus,
         children = _this$props2.children;
       return /*#__PURE__*/React.createElement(ReactFocusLock, {
         disabled: !isFocusLockEnabled,
         autoFocus: !!autoFocusFirstElem,
-        returnFocus: shouldReturnFocus
+        returnFocus: this.getFocusTarget(),
+        onDeactivation: this.onDeactivation
       }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
     }
   }]);

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

@@ -6,7 +6,7 @@ export declare class DrawerBase extends Component<DrawerProps, {
     static defaultProps: {
         autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
         isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | undefined;
+        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
         width: DrawerWidth;
     };
     state: {
@@ -25,7 +25,7 @@ export declare class DrawerBase extends Component<DrawerProps, {
 declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "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 | undefined;
+    shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     width: DrawerWidth;
 }, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,11 +1,13 @@
-import { Component } from 'react';
-import { FocusLockProps } from '../types';
+import React, { Component } from '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 | undefined;
+        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     };
     componentDidMount(): void;
+    getFocusTarget: () => boolean;
+    onDeactivation: () => void;
     render(): JSX.Element;
 }

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

@@ -1,6 +1,6 @@
-import { ComponentType, ReactElement, ReactNode, SyntheticEvent } from 'react';
-import { CSSObject } from '@emotion/react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
+import { type CSSObject } from '@emotion/react';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export type Widths = {
     extended: {
         width: string;
@@ -146,9 +146,11 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default. Changing this is not recommended as returning focus is required for accessibility.
+     * ReturnFocus controls what happens when the user exits focus lock mode.
+     * If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
+     * If ref is passed, focus returns to that specific ref element.
      */
-    shouldReturnFocus?: boolean;
+    shouldReturnFocus?: boolean | RefObject<HTMLElement>;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**

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

@@ -6,7 +6,7 @@ export declare class DrawerBase extends Component<DrawerProps, {
     static defaultProps: {
         autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
         isFocusLockEnabled?: boolean | undefined;
-        shouldReturnFocus?: boolean | undefined;
+        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
         width: DrawerWidth;
     };
     state: {
@@ -25,7 +25,7 @@ export declare class DrawerBase extends Component<DrawerProps, {
 declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "closeLabel" | "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 | undefined;
+    shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     width: DrawerWidth;
 }, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "closeLabel" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,11 +1,13 @@
-import { Component } from 'react';
-import { FocusLockProps } from '../types';
+import React, { Component } from '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 | undefined;
+        shouldReturnFocus?: boolean | React.RefObject<HTMLElement> | undefined;
     };
     componentDidMount(): void;
+    getFocusTarget: () => boolean;
+    onDeactivation: () => void;
     render(): JSX.Element;
 }

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

@@ -1,6 +1,6 @@
-import { ComponentType, ReactElement, ReactNode, SyntheticEvent } from 'react';
-import { CSSObject } from '@emotion/react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
+import { type CSSObject } from '@emotion/react';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export type Widths = {
     extended: {
         width: string;
@@ -146,9 +146,11 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default. Changing this is not recommended as returning focus is required for accessibility.
+     * ReturnFocus controls what happens when the user exits focus lock mode.
+     * If true, focus returns to the trigger element . If false, focus remains where it was when the FocusLock was deactivated.
+     * If ref is passed, focus returns to that specific ref element.
      */
-    shouldReturnFocus?: boolean;
+    shouldReturnFocus?: boolean | RefObject<HTMLElement>;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.7.2",
+  "version": "7.9.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,16 +36,17 @@
     "website": {
       "name": "Drawer",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/blanket": "^13.1.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/motion": "^1.6.0",
+    "@atlaskit/portal": "^4.5.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
@@ -56,7 +57,7 @@
     "use-callback-ref": "^1.2.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",