@atlaskit/drawer 7.9.0 → 7.11.0

package/dist/cjs/components/blanket.js

@@ -42,14 +42,17 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: _constants.animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return (0, _react2.jsx)("div", {
-      css: blanketStyles,
-      className: className
-    }, (0, _react2.jsx)(_blanket.default, {
-      isTinted: true,
-      onBlanketClicked: onBlanketClicked,
-      testId: testId && testId
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
+        css: blanketStyles,
+        className: className
+      }, (0, _react2.jsx)(_blanket.default, {
+        isTinted: true,
+        onBlanketClicked: onBlanketClicked,
+        testId: testId && testId
+      }))
+    );
   }));
 };
 var _default = exports.default = Blanket;

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.9.0";
+var packageVersion = "7.11.0";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -120,6 +120,7 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         icon = _this$props3.icon,
         closeLabel = _this$props3.closeLabel,
+        scrollContentLabel = _this$props3.scrollContentLabel,
         width = _this$props3.width,
         shouldUnmountOnExit = _this$props3.shouldUnmountOnExit,
         onCloseComplete = _this$props3.onCloseComplete,
@@ -155,7 +156,8 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
         overrides: overrides,
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus
+        shouldReturnFocus: shouldReturnFocus,
+        scrollContentLabel: scrollContentLabel
       }, children));
     }
   }]);

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

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
-var _excluded = ["cssFn"];
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _excluded = ["cssFn", "scrollContentLabel"];
 /** @jsx jsx */
 var defaultStyles = {
   flex: 1,
@@ -20,20 +22,41 @@ var contentCSS = function contentCSS() {
 };
 var Content = function Content(_ref) {
   var cssFn = _ref.cssFn,
+    _ref$scrollContentLab = _ref.scrollContentLabel,
+    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (
-    /**
-     * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
-     * than the defaultStyles as the overrides guide suggests. I went with what the overrides
-     * guide suggested as it made more sense as a transformer of the current styles rather than
-     * a complete override with no chance of partially changing styles.
-     */
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showContentFocus = _useState2[0],
+    setContentFocus = _useState2[1];
+  var scrollableRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var setLazyContentFocus = function setLazyContentFocus() {
+      var target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)("div", (0, _extends2.default)({
-      css: (0, _react.css)(cssFn(defaultStyles))
-    }, props))
-  );
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: (0, _react2.css)(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // tabindex is allowed here so that keyboard users can scroll content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    "aria-label": showContentFocus ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 var _default = exports.default = {
   component: Content,

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

@@ -67,8 +67,12 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
   return (0, _react2.jsx)("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _new = require("@atlaskit/button/new");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 var _motion = require("@atlaskit/motion");
 var _constants = require("../../constants");
@@ -15,7 +17,6 @@ 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 = ["component"],
   _excluded2 = ["component"];
@@ -57,6 +58,7 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     Icon = _ref2.icon,
     _ref2$closeLabel = _ref2.closeLabel,
     closeLabel = _ref2$closeLabel === void 0 ? 'Close drawer' : _ref2$closeLabel,
+    scrollContentLabel = _ref2.scrollContentLabel,
     onClose = _ref2.onClose,
     onCloseComplete = _ref2.onCloseComplete,
     onOpenComplete = _ref2.onOpenComplete,
@@ -98,22 +100,29 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
-    }, (0, _react2.jsx)(_drawerWrapper.default, {
+    }, (0, _react2.jsx)(_drawerWrapper.default
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       width: width,
       testId: testId,
       drawerRef: drawerRef,
       label: label,
       titleId: titleId
-    }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
+    }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_new.IconButton, {
       onClick: onClose,
-      testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-    }, Icon ? (0, _react2.jsx)(Icon, {
-      size: "large",
-      label: closeLabel
-    }) : (0, _react2.jsx)(_arrowLeft.default, {
-      label: closeLabel
-    }))), (0, _react2.jsx)(Content, contentOverrides, children)));
+      testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+      icon: Icon ? function (iconProps) {
+        return (0, _react2.jsx)(Icon, (0, _extends2.default)({}, iconProps, {
+          size: "large"
+        }));
+      } : _arrowLeft.default,
+      label: closeLabel,
+      shape: "circle",
+      appearance: "subtle"
+    })), (0, _react2.jsx)(Content, (0, _extends2.default)({
+      scrollContentLabel: scrollContentLabel
+    }, contentOverrides), children)));
   }));
 };
 

package/dist/es2019/components/blanket.js

@@ -35,7 +35,9 @@ const Blanket = ({
     animationTimingFunction: animationTimingFunction
   }, ({
     className
-  }) => jsx("div", {
+  }) =>
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  jsx("div", {
     css: blanketStyles,
     className: className
   }, jsx(AkBlanket, {

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.9.0";
+const packageVersion = "7.11.0";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -89,6 +89,7 @@ export class DrawerBase extends Component {
       children,
       icon,
       closeLabel,
+      scrollContentLabel,
       width,
       shouldUnmountOnExit,
       onCloseComplete,
@@ -124,7 +125,8 @@ export class DrawerBase extends Component {
       overrides: overrides,
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
-      shouldReturnFocus: shouldReturnFocus
+      shouldReturnFocus: shouldReturnFocus,
+      scrollContentLabel: scrollContentLabel
     }, children));
   }
 }

package/dist/es2019/components/primitives/content.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
+import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 const defaultStyles = {
   flex: 1,
@@ -10,19 +11,39 @@ const defaultStyles = {
 const contentCSS = () => defaultStyles;
 const Content = ({
   cssFn,
+  scrollContentLabel = 'Scrollable content',
   ...props
-}) =>
-/**
- * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
- * than the defaultStyles as the overrides guide suggests. I went with what the overrides
- * guide suggested as it made more sense as a transformer of the current styles rather than
- * a complete override with no chance of partially changing styles.
- */
+}) => {
+  const [showContentFocus, setContentFocus] = useState(false);
+  const scrollableRef = useRef(null);
+  useEffect(() => {
+    const setLazyContentFocus = () => {
+      const target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-jsx("div", _extends({
-  css: css(cssFn(defaultStyles))
-}, props));
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: css(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // tabindex is allowed here so that keyboard users can scroll content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    "aria-label": showContentFocus ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
+};
 export default {
   component: Content,
   cssFn: contentCSS

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

@@ -62,8 +62,12 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
   return jsx("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../../constants';
@@ -9,7 +11,6 @@ import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
 import FocusLock from './focus-lock';
-import IconButton from './icon-button';
 import SidebarOverrides from './sidebar';
 
 // Misc.
@@ -50,6 +51,7 @@ const DrawerPrimitive = ({
   children,
   icon: Icon,
   closeLabel = 'Close drawer',
+  scrollContentLabel,
   onClose,
   onCloseComplete,
   onOpenComplete,
@@ -94,7 +96,9 @@ const DrawerPrimitive = ({
     autoFocusFirstElem: autoFocusFirstElem,
     isFocusLockEnabled: isFocusLockEnabled,
     shouldReturnFocus: shouldReturnFocus
-  }, jsx(DrawerWrapper, {
+  }, jsx(DrawerWrapper
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: className,
     width: width,
     testId: testId,
@@ -103,13 +107,16 @@ const DrawerPrimitive = ({
     titleId: titleId
   }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
     onClick: onClose,
-    testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-  }, Icon ? jsx(Icon, {
-    size: "large",
-    label: closeLabel
-  }) : jsx(ArrowLeft, {
-    label: closeLabel
-  }))), jsx(Content, contentOverrides, children)))));
+    testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+    icon: Icon ? iconProps => jsx(Icon, _extends({}, iconProps, {
+      size: "large"
+    })) : ArrowLeft,
+    label: closeLabel,
+    shape: "circle",
+    appearance: "subtle"
+  })), jsx(Content, _extends({
+    scrollContentLabel: scrollContentLabel
+  }, contentOverrides), children)))));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/blanket.js

@@ -34,14 +34,17 @@ var Blanket = function Blanket(_ref) {
     animationTimingFunction: animationTimingFunction
   }, function (_ref2) {
     var className = _ref2.className;
-    return jsx("div", {
-      css: blanketStyles,
-      className: className
-    }, jsx(AkBlanket, {
-      isTinted: true,
-      onBlanketClicked: onBlanketClicked,
-      testId: testId && testId
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
+        css: blanketStyles,
+        className: className
+      }, jsx(AkBlanket, {
+        isTinted: true,
+        onBlanketClicked: onBlanketClicked,
+        testId: testId && testId
+      }))
+    );
   }));
 };
 export default Blanket;

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.9.0";
+var packageVersion = "7.11.0";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -111,6 +111,7 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         icon = _this$props3.icon,
         closeLabel = _this$props3.closeLabel,
+        scrollContentLabel = _this$props3.scrollContentLabel,
         width = _this$props3.width,
         shouldUnmountOnExit = _this$props3.shouldUnmountOnExit,
         onCloseComplete = _this$props3.onCloseComplete,
@@ -146,7 +147,8 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         overrides: overrides,
         autoFocusFirstElem: autoFocusFirstElem,
         isFocusLockEnabled: isFocusLockEnabled,
-        shouldReturnFocus: shouldReturnFocus
+        shouldReturnFocus: shouldReturnFocus,
+        scrollContentLabel: scrollContentLabel
       }, children));
     }
   }]);

package/dist/esm/components/primitives/content.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cssFn"];
+var _excluded = ["cssFn", "scrollContentLabel"];
 /** @jsx jsx */
 
+import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 var defaultStyles = {
   flex: 1,
@@ -14,20 +16,41 @@ var contentCSS = function contentCSS() {
 };
 var Content = function Content(_ref) {
   var cssFn = _ref.cssFn,
+    _ref$scrollContentLab = _ref.scrollContentLabel,
+    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
     props = _objectWithoutProperties(_ref, _excluded);
-  return (
-    /**
-     * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
-     * than the defaultStyles as the overrides guide suggests. I went with what the overrides
-     * guide suggested as it made more sense as a transformer of the current styles rather than
-     * a complete override with no chance of partially changing styles.
-     */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showContentFocus = _useState2[0],
+    setContentFocus = _useState2[1];
+  var scrollableRef = useRef(null);
+  useEffect(function () {
+    var setLazyContentFocus = function setLazyContentFocus() {
+      var target = scrollableRef.current;
+      target && setContentFocus(target.scrollHeight > target.clientHeight);
+    };
+    setLazyContentFocus();
+  }, []);
 
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @repo/internal/react/no-unsafe-spread-props
-    jsx("div", _extends({
-      css: css(cssFn(defaultStyles))
-    }, props))
-  );
+  /**
+   * I noticed the implementation at @atlaskit/checkbox would send the props to cssFn rather
+   * than the defaultStyles as the overrides guide suggests. I went with what the overrides
+   * guide suggested as it made more sense as a transformer of the current styles rather than
+   * a complete override with no chance of partially changing styles.
+   */
+  return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: css(cssFn(defaultStyles)),
+    ref: scrollableRef
+    // tabindex is allowed here so that keyboard users can scroll content
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: showContentFocus ? 0 : undefined,
+    role: showContentFocus ? 'region' : undefined,
+    "aria-label": showContentFocus ? scrollContentLabel : undefined,
+    "data-testId": "drawer-contents"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props));
 };
 export default {
   component: Content,

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

@@ -60,8 +60,12 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
   return jsx("div", {
-    css: wrapperStyles,
-    style: wrapperWidth[width],
+    css: wrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: wrapperWidth[width]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-testid": testId,
     ref: ref,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["component"],
   _excluded2 = ["component"];
@@ -5,6 +6,7 @@ var _excluded = ["component"],
 
 import { useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { ExitingPersistence, SlideIn, useExitingPersistence } from '@atlaskit/motion';
 import { animationTimingFunction, transitionDurationMs } from '../../constants';
@@ -12,7 +14,6 @@ import { createExtender } from '../utils';
 import ContentOverrides from './content';
 import DrawerWrapper from './drawer-wrapper';
 import FocusLock from './focus-lock';
-import IconButton from './icon-button';
 import SidebarOverrides from './sidebar';
 
 // Misc.
@@ -52,6 +53,7 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     Icon = _ref2.icon,
     _ref2$closeLabel = _ref2.closeLabel,
     closeLabel = _ref2$closeLabel === void 0 ? 'Close drawer' : _ref2$closeLabel,
+    scrollContentLabel = _ref2.scrollContentLabel,
     onClose = _ref2.onClose,
     onCloseComplete = _ref2.onCloseComplete,
     onOpenComplete = _ref2.onOpenComplete,
@@ -93,7 +95,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       autoFocusFirstElem: autoFocusFirstElem,
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
-    }, jsx(DrawerWrapper, {
+    }, jsx(DrawerWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       width: width,
       testId: testId,
@@ -102,13 +106,18 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       titleId: titleId
     }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
       onClick: onClose,
-      testId: testId && 'DrawerPrimitiveSidebarCloseButton'
-    }, Icon ? jsx(Icon, {
-      size: "large",
-      label: closeLabel
-    }) : jsx(ArrowLeft, {
-      label: closeLabel
-    }))), jsx(Content, contentOverrides, children)));
+      testId: testId && 'DrawerPrimitiveSidebarCloseButton',
+      icon: Icon ? function (iconProps) {
+        return jsx(Icon, _extends({}, iconProps, {
+          size: "large"
+        }));
+      } : ArrowLeft,
+      label: closeLabel,
+      shape: "circle",
+      appearance: "subtle"
+    })), jsx(Content, _extends({
+      scrollContentLabel: scrollContentLabel
+    }, contentOverrides), children)));
   }));
 };
 

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DrawerProps, DrawerWidth } from './types';
+import { type DrawerProps, type DrawerWidth } from './types';
 export declare class DrawerBase extends Component<DrawerProps, {
     renderPortal: boolean;
 }> {
@@ -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" | "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<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "scrollContentLabel" | "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 | 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>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "scrollContentLabel" | "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/content.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { CSSObject, jsx } from '@emotion/react';
-import { ContentProps } from '../types';
+import { type CSSObject, jsx } from '@emotion/react';
+import { type ContentProps } from '../types';
 declare const _default: {
-    component: ({ cssFn, ...props }: ContentProps) => jsx.JSX.Element;
+    component: ({ cssFn, scrollContentLabel, ...props }: ContentProps) => jsx.JSX.Element;
     cssFn: () => CSSObject;
 };
 export default _default;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ReactElement, Ref } from 'react';
-import { DrawerPrimitiveProps, Widths } from '../types';
+import { type ReactElement, type Ref } from 'react';
+import { type DrawerPrimitiveProps, type Widths } from '../types';
 export declare const wrapperWidth: Widths;
 interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+import { type DrawerPrimitiveProps } from '../types';
+declare const DrawerPrimitive: ({ children, icon: Icon, closeLabel, scrollContentLabel, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;