@atlaskit/drawer 7.3.2 → 7.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/drawer
 
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.4.0
+
+### Minor Changes
+
+- [`3d5675d420e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d5675d420e) - [ux] Prevents the background from being scrollable while a drawer is open.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.3.2
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -31,9 +31,9 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
-var _blanket = _interopRequireDefault(require("./blanket"));
+var _constants = require("../constants");
 
-var _focusLock = _interopRequireDefault(require("./focus-lock"));
+var _blanket = _interopRequireDefault(require("./blanket"));
 
 var _primitives = _interopRequireDefault(require("./primitives"));
 
@@ -41,12 +41,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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() { 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.3.2";
+var packageVersion = "7.4.1";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
@@ -168,11 +172,7 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         isOpen: isOpen,
         onBlanketClicked: this.handleBlanketClick,
         testId: testId && "".concat(testId, "--blanket")
-      }), /*#__PURE__*/_react.default.createElement(_focusLock.default, {
-        autoFocusFirstElem: autoFocusFirstElem,
-        isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus
-      }, /*#__PURE__*/_react.default.createElement(_primitives.default, {
+      }), /*#__PURE__*/_react.default.createElement(_primitives.default, {
         testId: testId,
         icon: icon,
         in: isOpen,
@@ -182,20 +182,20 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         width: width,
         shouldUnmountOnExit: shouldUnmountOnExit // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
         ,
-        overrides: overrides
-      }, children)));
+        overrides: overrides,
+        autoFocusFirstElem: autoFocusFirstElem,
+        isFocusLockEnabled: isFocusLockEnabled,
+        shouldReturnFocus: shouldReturnFocus
+      }, children));
     }
   }]);
   return DrawerBase;
 }(_react.Component);
 
 exports.DrawerBase = DrawerBase;
-(0, _defineProperty2.default)(DrawerBase, "defaultProps", {
-  width: 'narrow',
-  isFocusLockEnabled: true,
-  shouldReturnFocus: true,
-  autoFocusFirstElem: false
-});
+(0, _defineProperty2.default)(DrawerBase, "defaultProps", _objectSpread({
+  width: 'narrow'
+}, _constants.defaultFocusLockSettings));
 
 var _default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'drawer',

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _useCallbackRef = require("use-callback-ref");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
+
+/** @jsx jsx */
+var widths = {
+  full: '100vw',
+  extended: '95vw',
+  narrow: 45 * (0, _constants.gridSize)(),
+  medium: 60 * (0, _constants.gridSize)(),
+  wide: 75 * (0, _constants.gridSize)()
+};
+var wrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: _constants.layers.blanket() + 1,
+  top: 0,
+  left: 0,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  overflow: 'hidden'
+});
+
+/**
+ * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
+ */
+var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRef) {
+  var children = _ref.children,
+      className = _ref.className,
+      width = _ref.width,
+      testId = _ref.testId,
+      drawerRef = _ref.drawerRef;
+
+  /**
+   * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
+   * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
+   *
+   * This is because we do not control the `<Content />` component in order to forward a ref to it (given it can be overriden via `DrawerPrimitiveProps['overrides']['Content']['component']`).
+   * Additionally, we target the last child because with `props.overrides.Sidebar.component = () => null` you only have one child.
+   * If both `Sidebar.component` and `Content.component` return null you will have no children and this will throw an error, but that doesn't seem valid.
+   */
+  var assignSecondChildRef = (0, _react.useCallback)(function (node) {
+    var _node$children;
+
+    if (node !== null && node !== void 0 && (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length && typeof scrollRef === 'function') {
+      scrollRef(node.children[node.children.length - 1]);
+    }
+  }, [scrollRef]);
+  var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
+  (0, _usePreventProgrammaticScroll.default)();
+  return (0, _react2.jsx)("div", {
+    className: className,
+    css: wrapperStyles,
+    style: {
+      width: widths[width !== null && width !== void 0 ? width : 'narrow']
+    },
+    "data-testid": testId,
+    ref: ref
+  }, children);
+});
+var _default = DrawerWrapper;
+exports.default = _default;

package/dist/cjs/components/{focus-lock.js → primitives/focus-lock.js}

@@ -19,16 +19,26 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 
+var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
+
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 
+var _constants = require("../../constants");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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() { 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; } }
@@ -53,7 +63,7 @@ var FocusLock = /*#__PURE__*/function (_Component) {
           autoFocusFirstElem = _this$props.autoFocusFirstElem;
 
       if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
-        (0, _tinyInvariant.default)(typeof autoFocusFirstElem === 'boolean', '@atlaskit/modal-dialog: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
+        (0, _tinyInvariant.default)(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) {
@@ -70,15 +80,17 @@ var FocusLock = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           isFocusLockEnabled = _this$props2.isFocusLockEnabled,
           autoFocusFirstElem = _this$props2.autoFocusFirstElem,
-          shouldReturnFocus = _this$props2.shouldReturnFocus;
+          shouldReturnFocus = _this$props2.shouldReturnFocus,
+          children = _this$props2.children;
       return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
         disabled: !isFocusLockEnabled,
         autoFocus: !!autoFocusFirstElem,
         returnFocus: shouldReturnFocus
-      }, this.props.children);
+      }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null, children));
     }
   }]);
   return FocusLock;
 }(_react.Component);
 
-exports.default = FocusLock;
+exports.default = FocusLock;
+(0, _defineProperty2.default)(FocusLock, "defaultProps", _objectSpread({}, _constants.defaultFocusLockSettings));

package/dist/cjs/components/primitives/hooks/use-prevent-programmatic-scroll.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePreventProgrammaticScroll;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _bindEventListener = require("bind-event-listener");
+
+/**
+ * Returns how far the body is scrolled from the top of the viewport.
+ *
+ * ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
+ *
+ *   ____
+ * ||____|| <-- overflow
+ *  |    |  <-- viewport
+ *  |____|
+ *
+ * Scroll distance is the height of overflow outside the viewport.
+ */
+function getScrollDistance() {
+  var _document$documentEle, _document$body;
+
+  return window.pageYOffset || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollTop) || ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.scrollTop) || 0;
+}
+/**
+ * Prevents programmatic scrolling of the viewport with `scrollIntoView`.
+ * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
+ *
+ * ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
+ *
+ * @returns scroll top offset of the viewport
+ */
+
+
+function usePreventProgrammaticScroll() {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      scrollTopOffset = _useState2[0],
+      setScrollTopOffset = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    setScrollTopOffset(getScrollDistance());
+  }, []);
+  var onWindowScroll = (0, _react.useCallback)(function () {
+    if (getScrollDistance() !== scrollTopOffset) {
+      window.scrollTo(window.pageXOffset, scrollTopOffset);
+    }
+  }, [scrollTopOffset]);
+  (0, _react.useEffect)(function () {
+    return (0, _bindEventListener.bind)(window, {
+      type: 'scroll',
+      listener: onWindowScroll
+    });
+  }, [onWindowScroll]);
+  return scrollTopOffset;
+}

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

@@ -17,42 +17,24 @@ var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left
 
 var _motion = require("@atlaskit/motion");
 
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 
 var _utils = require("../utils");
 
 var _content = _interopRequireDefault(require("./content"));
 
+var _drawerWrapper = _interopRequireDefault(require("./drawer-wrapper"));
+
+var _focusLock = _interopRequireDefault(require("./focus-lock"));
+
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
-var _excluded = ["children", "icon", "onClose", "onCloseComplete", "onOpenComplete", "overrides", "testId", "in"],
-    _excluded2 = ["component"],
-    _excluded3 = ["component"];
+var _excluded = ["component"],
+    _excluded2 = ["component"];
 // Misc.
 // ------------------------------
-var widths = {
-  full: '100vw',
-  extended: '95vw',
-  narrow: 45 * (0, _constants.gridSize)(),
-  medium: 60 * (0, _constants.gridSize)(),
-  wide: 75 * (0, _constants.gridSize)()
-};
-var wrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  height: '100vh',
-  position: 'fixed',
-  zIndex: _constants.layers.blanket() + 1,
-  top: 0,
-  left: 0,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  overflow: 'hidden'
-});
 var defaults = {
   Sidebar: _sidebar.default,
   Content: _content.default
@@ -74,9 +56,9 @@ var CustomSlideIn = function CustomSlideIn(_ref) {
    */
 
 
-  var duration = isExiting ? _constants2.transitionDurationMs * 2 : _constants2.transitionDurationMs;
+  var duration = isExiting ? _constants.transitionDurationMs * 2 : _constants.transitionDurationMs;
   return (0, _react2.jsx)(_motion.SlideIn, {
-    animationTimingFunction: _constants2.animationTimingFunction,
+    animationTimingFunction: _constants.animationTimingFunction,
     duration: duration,
     enterFrom: "left",
     exitTo: "left",
@@ -94,23 +76,30 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       overrides = _ref2.overrides,
       testId = _ref2.testId,
       isOpen = _ref2.in,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      shouldReturnFocus = _ref2.shouldReturnFocus,
+      autoFocusFirstElem = _ref2.autoFocusFirstElem,
+      isFocusLockEnabled = _ref2.isFocusLockEnabled,
+      width = _ref2.width;
   var getOverrides = (0, _utils.createExtender)(defaults, overrides);
 
   var _getOverrides = getOverrides('Sidebar'),
       Sidebar = _getOverrides.component,
-      sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded2);
+      sideBarOverrides = (0, _objectWithoutProperties2.default)(_getOverrides, _excluded);
 
   var _getOverrides2 = getOverrides('Content'),
       Content = _getOverrides2.component,
-      contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded3);
+      contentOverrides = (0, _objectWithoutProperties2.default)(_getOverrides2, _excluded2);
+  /**
+   * A ref to point to our wrapper, passed to `onCloseComplete` and `onOpenComplete` callbacks.
+   */
 
-  var ref = (0, _react.useRef)(null);
+
+  var drawerRef = (0, _react.useRef)(null);
   var onFinish = (0, _react.useCallback)(function (state) {
     if (state === 'entering') {
-      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(ref.current);
+      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
     } else if (state === 'exiting') {
-      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(ref.current);
+      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
     }
   }, [onCloseComplete, onOpenComplete]);
   return (0, _react2.jsx)(_motion.ExitingPersistence, {
@@ -118,17 +107,16 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   }, isOpen && (0, _react2.jsx)(CustomSlideIn, {
     onFinish: onFinish
   }, function (_ref3) {
-    var _props$width;
-
     var className = _ref3.className;
-    return (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)(_focusLock.default, {
+      autoFocusFirstElem: autoFocusFirstElem,
+      isFocusLockEnabled: isFocusLockEnabled,
+      shouldReturnFocus: shouldReturnFocus
+    }, (0, _react2.jsx)(_drawerWrapper.default, {
       className: className,
-      css: wrapperStyles,
-      style: {
-        width: widths[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'narrow']
-      },
-      "data-testid": testId,
-      ref: ref
+      width: width,
+      testId: testId,
+      drawerRef: drawerRef
     }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'
@@ -136,7 +124,7 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       size: "large"
     }) : (0, _react2.jsx)(_arrowLeft.default, {
       label: "Close drawer"
-    }))), (0, _react2.jsx)(Content, contentOverrides, children));
+    }))), (0, _react2.jsx)(Content, contentOverrides, children)));
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.animationTimingFunction = void 0;
+exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 
 var _curves = require("@atlaskit/motion/curves");
 
@@ -20,4 +20,10 @@ var animationTimingFunction = function animationTimingFunction() {
   return _curves.easeOut;
 };
 
-exports.animationTimingFunction = animationTimingFunction;
+exports.animationTimingFunction = animationTimingFunction;
+var defaultFocusLockSettings = {
+  isFocusLockEnabled: true,
+  shouldReturnFocus: true,
+  autoFocusFirstElem: false
+};
+exports.defaultFocusLockSettings = defaultFocusLockSettings;

package/dist/cjs/version.json

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

package/dist/es2019/components/index.js

@@ -5,11 +5,11 @@ import React, { Component } from 'react';
 import { canUseDOM } from 'exenv';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Portal from '@atlaskit/portal';
+import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
-import FocusLock from './focus-lock';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.3.2";
+const packageVersion = "7.4.1";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
@@ -123,11 +123,7 @@ export class DrawerBase extends Component {
       isOpen: isOpen,
       onBlanketClicked: this.handleBlanketClick,
       testId: testId && `${testId}--blanket`
-    }), /*#__PURE__*/React.createElement(FocusLock, {
-      autoFocusFirstElem: autoFocusFirstElem,
-      isFocusLockEnabled: isFocusLockEnabled,
-      shouldReturnFocus: shouldReturnFocus
-    }, /*#__PURE__*/React.createElement(DrawerPrimitive, {
+    }), /*#__PURE__*/React.createElement(DrawerPrimitive, {
       testId: testId,
       icon: icon,
       in: isOpen,
@@ -137,17 +133,18 @@ export class DrawerBase extends Component {
       width: width,
       shouldUnmountOnExit: shouldUnmountOnExit // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,
-      overrides: overrides
-    }, children)));
+      overrides: overrides,
+      autoFocusFirstElem: autoFocusFirstElem,
+      isFocusLockEnabled: isFocusLockEnabled,
+      shouldReturnFocus: shouldReturnFocus
+    }, children));
   }
 
 }
 
 _defineProperty(DrawerBase, "defaultProps", {
   width: 'narrow',
-  isFocusLockEnabled: true,
-  shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  ...defaultFocusLockSettings
 });
 
 export default withAnalyticsContext({

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

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { forwardRef, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+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 = {
+  full: '100vw',
+  extended: '95vw',
+  narrow: 45 * gridSize(),
+  medium: 60 * gridSize(),
+  wide: 75 * gridSize()
+};
+const wrapperStyles = css({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: layers.blanket() + 1,
+  top: 0,
+  left: 0,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  overflow: 'hidden'
+});
+
+/**
+ * A wrapper that controls the styling of the drawer with a few hacks with refs to get our Touch±Scroll locks working.
+ */
+const DrawerWrapper = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  width,
+  testId,
+  drawerRef
+}, scrollRef) => {
+  /**
+   * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
+   * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
+   *
+   * This is because we do not control the `<Content />` component in order to forward a ref to it (given it can be overriden via `DrawerPrimitiveProps['overrides']['Content']['component']`).
+   * Additionally, we target the last child because with `props.overrides.Sidebar.component = () => null` you only have one child.
+   * If both `Sidebar.component` and `Content.component` return null you will have no children and this will throw an error, but that doesn't seem valid.
+   */
+  const assignSecondChildRef = useCallback(node => {
+    var _node$children;
+
+    if (node !== null && node !== void 0 && (_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length && typeof scrollRef === 'function') {
+      scrollRef(node.children[node.children.length - 1]);
+    }
+  }, [scrollRef]);
+  const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
+  usePreventProgrammaticScroll();
+  return jsx("div", {
+    className: className,
+    css: wrapperStyles,
+    style: {
+      width: widths[width !== null && width !== void 0 ? width : 'narrow']
+    },
+    "data-testid": testId,
+    ref: ref
+  }, children);
+});
+export default DrawerWrapper;

package/dist/es2019/components/{focus-lock.js → primitives/focus-lock.js}

@@ -1,6 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } 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
 export default class FocusLock extends Component {
@@ -11,7 +14,7 @@ export default class FocusLock extends Component {
     } = this.props;
 
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
-      invariant(typeof autoFocusFirstElem === 'boolean', '@atlaskit/modal-dialog: Passing a function as autoFocus is deprecated. Instead call focus on the element ref or use the autofocus property.');
+      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) {
@@ -27,13 +30,17 @@ export default class FocusLock extends Component {
     const {
       isFocusLockEnabled,
       autoFocusFirstElem,
-      shouldReturnFocus
+      shouldReturnFocus,
+      children
     } = this.props;
     return /*#__PURE__*/React.createElement(ReactFocusLock, {
       disabled: !isFocusLockEnabled,
       autoFocus: !!autoFocusFirstElem,
       returnFocus: shouldReturnFocus
-    }, this.props.children);
+    }, /*#__PURE__*/React.createElement(ScrollLock, null, children));
   }
 
-}
+}
+
+_defineProperty(FocusLock, "defaultProps", { ...defaultFocusLockSettings
+});

package/dist/es2019/components/primitives/hooks/use-prevent-programmatic-scroll.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+/**
+ * Returns how far the body is scrolled from the top of the viewport.
+ *
+ * ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
+ *
+ *   ____
+ * ||____|| <-- overflow
+ *  |    |  <-- viewport
+ *  |____|
+ *
+ * Scroll distance is the height of overflow outside the viewport.
+ */
+
+function getScrollDistance() {
+  var _document$documentEle, _document$body;
+
+  return window.pageYOffset || ((_document$documentEle = document.documentElement) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.scrollTop) || ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.scrollTop) || 0;
+}
+/**
+ * Prevents programmatic scrolling of the viewport with `scrollIntoView`.
+ * Should be used in conjunction with a scroll lock to prevent a user from scrolling.
+ *
+ * ⚠️ This is copied from `packages/design-system/modal-dialog/src/internal/hooks/use-prevent-programmatic-scroll.tsx`
+ *
+ * @returns scroll top offset of the viewport
+ */
+
+
+export default function usePreventProgrammaticScroll() {
+  const [scrollTopOffset, setScrollTopOffset] = useState(0);
+  useLayoutEffect(() => {
+    setScrollTopOffset(getScrollDistance());
+  }, []);
+  const onWindowScroll = useCallback(() => {
+    if (getScrollDistance() !== scrollTopOffset) {
+      window.scrollTo(window.pageXOffset, scrollTopOffset);
+    }
+  }, [scrollTopOffset]);
+  useEffect(() => {
+    return bind(window, {
+      type: 'scroll',
+      listener: onWindowScroll
+    });
+  }, [onWindowScroll]);
+  return scrollTopOffset;
+}