@atlaskit/page-layout 1.7.7 → 1.7.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 1.7.9
+
+### Patch Changes
+
+- [`55c42f7ce9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55c42f7ce9d) - [ux] Add proper orientation to grab area.
+
+## 1.7.8
+
+### Patch Changes
+
+- [`6a33c4fd6b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a33c4fd6b6) - Removes unnecessary aria attribute from grab area in left sidebar.
+
 ## 1.7.7
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -48,7 +48,7 @@ const Wrapper = ({
 
 const sidebarWrapperStyles = css({
   height: '100%',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   nav: {
     minWidth: 20,
     overflowX: 'hidden',

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -31,10 +31,13 @@ const ExampleFooter = () => {
       component={Container}
       description={
         <Fragment>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkStyles}>Give feedback</a> {' ∙ '}
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkStyles}>Learn more</a>
+          <a href="https://www.atlassian.com/company/contact" css={linkStyles}>
+            Give feedback
+          </a>
+          {' ∙ '}
+          <a href="http://www.atlassian.com" css={linkStyles}>
+            Learn more
+          </a>
         </Fragment>
       }
     >

package/__perf__/utils/product-integration/side-navigation.tsx

@@ -51,7 +51,10 @@ const PerfExample = () => {
       <NestableNavigationContent initialStack={[]}>
         <Section>
           <ButtonItem iconBefore={<WorkIcon label="" />}>Your work</ButtonItem>
-          <LinkItem href="#" iconBefore={<CustomerIcon label="" />}>
+          <LinkItem
+            href="https://www.atlassian.com/customers"
+            iconBefore={<CustomerIcon label="" />}
+          >
             Your customers
           </LinkItem>
           <NestingItem

package/dist/cjs/components/resize-control/grab-area.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
-var _excluded = ["testId", "isLeftSidebarCollapsed"];
+var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /** @jsx jsx */
 /**
  * Determines the color of the grab line.
@@ -52,15 +52,37 @@ var lineStyles = (0, _react.css)({
 });
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true);
-// TODO: Consider allowing this to be controlled using arrow keys
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
+    label = _ref.label,
+    leftSidebarPercentageExpanded = _ref.leftSidebarPercentageExpanded,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
+    "aria-label": label,
     "data-testid": testId,
-    type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    disabled: isDisabled,
+    type: "button"
+    // The separator role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize separator. While a
+    // range input would be more semantically accurate, it does not affect
+    // usability.
+    ,
+    role: "separator",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
+    "aria-valuenow": leftSidebarPercentageExpanded,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onFocus: onFocus,
+    onBlur: onBlur
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
     css: lineStyles

package/dist/cjs/components/resize-control/index.js

@@ -37,7 +37,7 @@ var showResizeButtonStyles = (0, _react2.css)({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = (0, _react2.css)({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -50,7 +50,7 @@ var globalResizingStyles = (0, _react2.css)({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -325,26 +325,20 @@ var ResizeControl = function ResizeControl(_ref) {
     return Math.round(innerWidth / 2) - (0, _utils.getLeftPanelWidth)();
   }, []);
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && (0, _react2.jsx)(_grabArea.default, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && "".concat(testId, "-grab-area"),
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(_resizeButton.default, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -353,7 +347,6 @@ var ResizeControl = function ResizeControl(_ref) {
   })), leftSidebarState.isResizing ? (0, _react2.jsx)(_react2.Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/slots/internal/slot-focus-ring.js

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'
@@ -26,7 +26,7 @@ var focusStyles = (0, _react.css)({
 var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
       outline: 'none'

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.9",
 	"sideEffects": false
 }

package/dist/es2019/components/resize-control/grab-area.js

@@ -51,15 +51,37 @@ const grabAreaLineSelector = {
 const grabAreaSelector = {
   [GRAB_AREA_SELECTOR]: true
 };
-// TODO: Consider allowing this to be controlled using arrow keys
 const GrabArea = ({
   testId,
+  isDisabled,
   isLeftSidebarCollapsed,
+  label,
+  leftSidebarPercentageExpanded,
+  onKeyDown,
+  onMouseDown,
+  onBlur,
+  onFocus,
   ...rest
 }) => jsx("button", _extends({}, grabAreaSelector, {
+  "aria-label": label,
   "data-testid": testId,
-  type: "button",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+  disabled: isDisabled,
+  type: "button"
+  // The separator role is applied to a button to utilize the native
+  // interactive and disabled functionality on the resize separator. While a
+  // range input would be more semantically accurate, it does not affect
+  // usability.
+  ,
+  role: "separator",
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  "aria-orientation": "vertical",
+  "aria-valuenow": leftSidebarPercentageExpanded,
+  "aria-valuemin": 0,
+  "aria-valuemax": 100,
+  onKeyDown: onKeyDown,
+  onMouseDown: onMouseDown,
+  onFocus: onFocus,
+  onBlur: onBlur
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest), jsx("span", _extends({
   css: lineStyles

package/dist/es2019/components/resize-control/index.js

@@ -31,7 +31,7 @@ const showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 const globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -44,7 +44,7 @@ const globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -326,26 +326,20 @@ const ResizeControl = ({
     return Math.round(innerWidth / 2) - getLeftPanelWidth();
   }, []);
   const leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && `${testId}-grab-area`,
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && `${testId}-grab-area`
   }), resizeButton.render(ResizeButton, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -354,7 +348,6 @@ const ResizeControl = ({
   })), leftSidebarState.isResizing ? jsx(Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/resize-control/resize-button.js

@@ -19,7 +19,7 @@ const increaseHitAreaStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     opacity: 1
   }

package/dist/es2019/components/slots/internal/left-sidebar-inner.js

@@ -11,7 +11,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: `${MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH}px`,
     position: 'fixed',
@@ -26,7 +26,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileInnerFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: `min(90vw, ${MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH}px)`,
     maxWidth: MAX_MOBILE_SIDEBAR_FLYOUT_WIDTH,

package/dist/es2019/components/slots/internal/left-sidebar-outer.js

@@ -15,7 +15,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     width: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH,
     cursor: 'pointer',
@@ -31,7 +31,7 @@ const mobileStyles = getBooleanFF('platform.design-system-team.responsive-page-l
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const mobileFlyoutStyles = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     cursor: 'revert'
   }

package/dist/es2019/components/slots/internal/slot-focus-ring.js

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 const focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'
@@ -20,7 +20,7 @@ const focusStyles = css({
 const sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: `0px 0px 0px 2px inset ${`var(--ds-border-focused, ${B100})`}`,
       outline: 'none'

package/dist/es2019/components/slots/page-layout.js

@@ -31,7 +31,7 @@ const gridStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- With a feature flag, this does not apply
 const gridStylesMobile = getBooleanFF('platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g') ? css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   [UNSAFE_media.below.md]: {
     gridTemplateAreas: gridTemplateAreasMobile,
     gridTemplateColumns: `${LEFT_PANEL_WIDTH} minmax(0, 1fr)`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.9",
 	"sideEffects": false
 }

package/dist/esm/components/resize-control/grab-area.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["testId", "isLeftSidebarCollapsed"];
+var _excluded = ["testId", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -46,15 +46,37 @@ var lineStyles = css({
 });
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true);
-// TODO: Consider allowing this to be controlled using arrow keys
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
+    isDisabled = _ref.isDisabled,
     isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
+    label = _ref.label,
+    leftSidebarPercentageExpanded = _ref.leftSidebarPercentageExpanded,
+    onKeyDown = _ref.onKeyDown,
+    onMouseDown = _ref.onMouseDown,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("button", _extends({}, grabAreaSelector, {
+    "aria-label": label,
     "data-testid": testId,
-    type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    disabled: isDisabled,
+    type: "button"
+    // The separator role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize separator. While a
+    // range input would be more semantically accurate, it does not affect
+    // usability.
+    ,
+    role: "separator",
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    "aria-orientation": "vertical",
+    "aria-valuenow": leftSidebarPercentageExpanded,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onFocus: onFocus,
+    onBlur: onBlur
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest), jsx("span", _extends({
     css: lineStyles

package/dist/esm/components/resize-control/index.js

@@ -33,7 +33,7 @@ var showResizeButtonStyles = css({
 
 // @ts-expect-error adding `!important` to style rules is currently a type error
 var globalResizingStyles = css({
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '*': {
     // Setting the cursor to be `ew-resize` on all elements so that even if the user
     // pointer slips off the resize handle, the cursor will still be the resize cursor
@@ -46,7 +46,7 @@ var globalResizingStyles = css({
     //   - The current selection will resume after resizing
     userSelect: 'none !important'
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   iframe: {
     // Disabling pointer events on iframes when resizing
     // as iframes will swallower user events when the user is over them
@@ -321,26 +321,20 @@ var ResizeControl = function ResizeControl(_ref) {
     return Math.round(innerWidth / 2) - getLeftPanelWidth();
   }, []);
   var leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return jsx(Fragment, null, jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && "".concat(testId, "-shadow")
   }), !(mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches) && jsx(GrabArea, {
-    role: "separator",
-    "aria-label": resizeGrabAreaLabel,
-    "aria-valuenow": leftSidebarPercentageExpanded,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-expanded": !isLeftSidebarCollapsed,
+    isDisabled: isLeftSidebarCollapsed,
+    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
+    label: resizeGrabAreaLabel,
+    leftSidebarPercentageExpanded: leftSidebarPercentageExpanded,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    testId: testId && "".concat(testId, "-grab-area"),
-    isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    disabled: isLeftSidebarCollapsed
+    testId: testId && "".concat(testId, "-grab-area")
   }), resizeButton.render(ResizeButton, {
     isLeftSidebarCollapsed: mobileMediaQuery !== null && mobileMediaQuery !== void 0 && mobileMediaQuery.matches ? !leftSidebarState.isFlyoutOpen : isLeftSidebarCollapsed,
     label: resizeButtonLabel,
@@ -349,7 +343,6 @@ var ResizeControl = function ResizeControl(_ref) {
   })), leftSidebarState.isResizing ? jsx(Global, {
     styles: globalResizingStyles
   }) : null);
-  /* eslint-enable jsx-a11y/role-supports-aria-props */
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/slots/internal/slot-focus-ring.js

@@ -5,7 +5,7 @@ import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'
@@ -20,7 +20,7 @@ var focusStyles = css({
 var sidebarFocusStyles = css({
   ':focus': {
     outline: 'none',
-    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '> div > div': {
       boxShadow: "0px 0px 0px 2px inset ".concat("var(--ds-border-focused, ".concat(B100, ")")),
       outline: 'none'

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.7.7",
+	"version": "1.7.9",
 	"sideEffects": false
 }

package/dist/types/components/resize-control/grab-area.d.ts

@@ -1,9 +1,16 @@
 /** @jsx jsx */
-import { ComponentProps } from 'react';
+import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
 export type GrabAreaProps = {
-    testId?: string;
+    isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
+    label: string;
+    leftSidebarPercentageExpanded: number;
+    onBlur: (event: FocusEvent) => void;
+    onFocus: (event: FocusEvent) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+    testId?: string;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
 export default GrabArea;

package/dist/types-ts4.5/components/resize-control/grab-area.d.ts

@@ -1,9 +1,16 @@
 /** @jsx jsx */
-import { ComponentProps } from 'react';
+import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import { jsx } from '@emotion/react';
 export type GrabAreaProps = {
-    testId?: string;
+    isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
+    label: string;
+    leftSidebarPercentageExpanded: number;
+    onBlur: (event: FocusEvent) => void;
+    onFocus: (event: FocusEvent) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
+    testId?: string;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
+declare const GrabArea: ({ testId, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ...rest }: GrabAreaProps) => jsx.JSX.Element;
 export default GrabArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.0.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -59,7 +59,6 @@
     "@atlaskit/notification-indicator": "^9.1.0",
     "@atlaskit/notification-log-client": "^6.1.0",
     "@atlaskit/popup": "^1.8.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/side-navigation": "^1.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
@@ -113,4 +112,4 @@
       "type": "boolean"
     }
   }
-}
+}