@atlaskit/drawer 7.10.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.10.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

@@ -58,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,
@@ -99,7 +100,9 @@ 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,
@@ -117,7 +120,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       label: closeLabel,
       shape: "circle",
       appearance: "subtle"
-    })), (0, _react2.jsx)(Content, contentOverrides, children)));
+    })), (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.10.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

@@ -51,6 +51,7 @@ const DrawerPrimitive = ({
   children,
   icon: Icon,
   closeLabel = 'Close drawer',
+  scrollContentLabel,
   onClose,
   onCloseComplete,
   onOpenComplete,
@@ -95,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,
@@ -111,7 +114,9 @@ const DrawerPrimitive = ({
     label: closeLabel,
     shape: "circle",
     appearance: "subtle"
-  })), jsx(Content, contentOverrides, children)))));
+  })), 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.10.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

@@ -53,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,
@@ -94,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,
@@ -112,7 +115,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       label: closeLabel,
       shape: "circle",
       appearance: "subtle"
-    })), jsx(Content, contentOverrides, children)));
+    })), jsx(Content, _extends({
+      scrollContentLabel: scrollContentLabel
+    }, contentOverrides), children)));
   }));
 };
 

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

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "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

@@ -2,7 +2,7 @@
 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/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type 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;
+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;

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

@@ -36,6 +36,10 @@ export interface BaseProps {
      * This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
      */
     closeLabel?: string;
+    /**
+     * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
+     */
+    scrollContentLabel?: ContentProps['scrollContentLabel'];
     /**
      * Sets the width of the drawer.
      */
@@ -110,6 +114,10 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
      * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
      */
     cssFn: (defaultStyles: CSSObject) => CSSObject;
+    /**
+     * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
+     */
+    scrollContentLabel?: string;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
 export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {

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

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "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-ts4.5/components/primitives/content.d.ts

@@ -2,7 +2,7 @@
 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-ts4.5/components/primitives/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { type 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;
+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;

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

@@ -36,6 +36,10 @@ export interface BaseProps {
      * This is the accessible name for the close/back control of the drawer. The default is "Close drawer".
      */
     closeLabel?: string;
+    /**
+     * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
+     */
+    scrollContentLabel?: ContentProps['scrollContentLabel'];
     /**
      * Sets the width of the drawer.
      */
@@ -110,6 +114,10 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
      * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2673 for more information.
      */
     cssFn: (defaultStyles: CSSObject) => CSSObject;
+    /**
+     * When the content is scrollable, this is the accessible name for the the drawer region. The default is "Scrollable content".
+     */
+    scrollContentLabel?: string;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
 export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.10.0",
+  "version": "7.11.0",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -67,7 +67,6 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/exenv": "^1.2.0",
@@ -98,6 +97,5 @@
         "primitives"
       ]
     }
-  },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  }
 }