@atlaskit/page-layout 4.2.17 → 4.2.19

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/page-layout
 
+## 4.2.19
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.18
+
+### Patch Changes
+
+- [`325389664a406`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/325389664a406) -
+  Refactor to make props explicit. Remove spread props behind a feature flag. If successful, they
+  will be removed in a future major.
+
 ## 4.2.17
 
 ### Patch Changes

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,22 +9,25 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
-var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
+var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Determines the color of the grab line.
  *
  * Used on internal leaf node, so naming collisions won't matter.
  */
 var varLineColor = '--ds-line';
-var grabAreaStyles = (0, _react.css)({
+var grabAreaStyles = (0, _react2.css)({
   width: "var(--ds-space-200, 16px)",
   height: '100%',
   padding: 0,
@@ -39,7 +43,7 @@ var grabAreaStyles = (0, _react.css)({
   },
   '&:enabled:hover, &:enabled:focus, &:enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
 });
-var grabAreaCollapsedStyles = (0, _react.css)({
+var grabAreaCollapsedStyles = (0, _react2.css)({
   height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
   padding: 0,
   position: 'absolute',
@@ -48,7 +52,7 @@ var grabAreaCollapsedStyles = (0, _react.css)({
   cursor: 'default',
   insetBlockEnd: 0
 });
-var lineStyles = (0, _react.css)({
+var lineStyles = (0, _react2.css)({
   display: 'block',
   width: '2px',
   height: '100%',
@@ -57,7 +61,7 @@ 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);
-var GrabArea = function GrabArea(_ref) {
+var GrabArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var testId = _ref.testId,
     _ref$valueTextLabel = _ref.valueTextLabel,
     valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
@@ -69,9 +73,10 @@ var GrabArea = function GrabArea(_ref) {
     onMouseDown = _ref.onMouseDown,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    ref = _ref.ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
+  return (0, _react2.jsx)("button", (0, _extends2.default)({
+    ref: ref
+  }, grabAreaSelector, {
     "aria-label": label,
     "data-testid": testId,
     disabled: isDisabled,
@@ -83,7 +88,7 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    css: isLeftSidebarCollapsed ? [grabAreaStyles, grabAreaCollapsedStyles] : grabAreaStyles,
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
@@ -93,11 +98,10 @@ var GrabArea = function GrabArea(_ref) {
     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)({
+  }, (0, _platformFeatureFlags.fg)('platform_dst_spread-props-page-layout') ? {} : rest), (0, _react2.jsx)("span", (0, _extends2.default)({
     css: lineStyles
   }, grabAreaLineSelector)));
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = GrabArea;

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

@@ -275,6 +275,7 @@ var ResizeControl = function ResizeControl(_ref) {
     if (isSpaceOrEnter) {
       toggleSideBar(event);
       event.preventDefault();
+      return true; // Added return value
     }
     if (isLeftOrTopArrow || isRightOrBottomArrow) {
       event.preventDefault(); // prevent content scroll
@@ -306,7 +307,9 @@ var ResizeControl = function ResizeControl(_ref) {
           onResizeEnd && onResizeEnd(updatedLeftSidebarState);
         }, 50);
       });
+      return true; // Added return value
     }
+    return false; // Added default return value for all other cases
   };
   var onFocus = (0, _react.useCallback)(function () {
     setIsGrabAreaFocused(true);
@@ -319,7 +322,6 @@ var ResizeControl = function ResizeControl(_ref) {
       return (0, _react2.jsx)(Component, props);
     }
   }, overrides && overrides.ResizeButton);
-
   // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
   // however this comes with a substantial performance gain and so is considered acceptable.

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

@@ -12,10 +12,12 @@ var _react = require("@emotion/react");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-right"));
 var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
-var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+var _excluded = ["isLeftSidebarCollapsed", "label", "onClick", "testId"],
+  _excluded2 = ["css"];
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /**
@@ -23,7 +25,7 @@ var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var increaseHitAreaStyles = (0, _react.css)({
+var hitAreaSpanStyles = (0, _react.css)({
   position: 'absolute',
   insetBlockEnd: "var(--ds-space-negative-300, -24px)",
   insetBlockStart: "var(--ds-space-negative-300, -24px)",
@@ -78,27 +80,30 @@ var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_BUTTON_SEL
 var ResizeButton = function ResizeButton(_ref) {
   var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
     label = _ref.label,
+    onClick = _ref.onClick,
     testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Extract css from props if it exists to avoid conflicts
+  var _ref2 = props,
+    _ignoredCss = _ref2.css,
+    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return (0, _react.jsx)("button", (0, _extends2.default)({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
-    type: "button"
-    // The error goes away when we remove the spread ...props
-    ,
+    type: "button",
     css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed
     ,
-    onMouseDown: preventDefault
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props), (0, _react.jsx)(_chevronRight.default, {
+    onMouseDown: preventDefault,
+    onClick: onClick
+  }, (0, _platformFeatureFlags.fg)('platform_dst_spread-props-page-layout') ? {} : restProps), (0, _react.jsx)(_chevronRight.default, {
     label: "",
     color: "currentColor",
     size: "small"
   }), (0, _react.jsx)("span", {
-    css: increaseHitAreaStyles
+    css: hitAreaSpanStyles
   }));
 };
 

package/dist/cjs/components/skip-links/skip-link-components.js

@@ -85,7 +85,7 @@ var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     });
     var regularLinksWithIdx = arr.filter(function (link) {
       return link.listIndex === undefined;
-    }).map(function (link, idx, currArr) {
+    }).map(function (link, idx) {
       var listIndex = _assignIndex(idx, usedIndexes);
       usedIndexes.push(listIndex);
       return _objectSpread(_objectSpread({}, link), {}, {
@@ -112,27 +112,24 @@ var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   };
   var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
   var label = skipLinksLabel || _constants.DEFAULT_I18N_PROPS_SKIP_LINKS;
-  return (
-    // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
-    (0, _react.jsx)("div", {
-      onFocus: attachEscHandler,
-      onBlur: removeEscHandler,
-      css: [skipLinkStyles, prefersReducedMotionStyles],
-      "data-skip-link-wrapper": true
-    }, emptyLabelOverride ? null : (0, _react.jsx)("p", {
-      css: skipLinkHeadingStyles
-    }, label), (0, _react.jsx)("ol", {
-      css: skipLinkListStyles
-    }, sortSkipLinks(skipLinksData).map(function (_ref2) {
-      var id = _ref2.id,
-        skipLinkTitle = _ref2.skipLinkTitle;
-      return (0, _react.jsx)(SkipLink, {
-        key: id,
-        href: "#".concat(id),
-        isFocusable: true
-      }, skipLinkTitle);
-    })))
-  );
+  return (0, _react.jsx)("div", {
+    onFocus: attachEscHandler,
+    onBlur: removeEscHandler,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
+    "data-skip-link-wrapper": true
+  }, emptyLabelOverride ? null : (0, _react.jsx)("p", {
+    css: skipLinkHeadingStyles
+  }, label), (0, _react.jsx)("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
+    var id = _ref2.id,
+      skipLinkTitle = _ref2.skipLinkTitle;
+    return (0, _react.jsx)(SkipLink, {
+      key: id,
+      href: "#".concat(id),
+      isFocusable: true
+    }, skipLinkTitle);
+  })));
 };
 var _handleBlur = function handleBlur(event) {
   // @ts-ignore

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -143,7 +143,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
     };
     transition.current = value;
   }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
-  var collapseLeftSidebar = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
+  var collapseLeftSidebar = (0, _react.useCallback)(function (_event, collapseWithoutTransition) {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
       return;

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

@@ -3,9 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import * as React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
@@ -54,7 +55,7 @@ const grabAreaLineSelector = {
 const grabAreaSelector = {
   [GRAB_AREA_SELECTOR]: true
 };
-const GrabArea = ({
+const GrabArea = /*#__PURE__*/React.forwardRef(({
   testId,
   valueTextLabel = 'Width',
   isDisabled,
@@ -65,34 +66,36 @@ const GrabArea = ({
   onMouseDown,
   onBlur,
   onFocus,
-  ref,
   ...rest
-}) => jsx("button", _extends({}, grabAreaSelector, {
-  "aria-label": label,
-  "data-testid": testId,
-  disabled: isDisabled,
-  "aria-hidden": isLeftSidebarCollapsed,
-  type: "button"
-  // The slider role is applied to a button to utilize the native
-  // interactive and disabled functionality on the resize slider. While a
-  // range input would be more semantically accurate, it does not affect
-  // usability.
-  ,
-  role: "slider",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
-  "aria-orientation": "vertical",
-  "aria-valuenow": leftSidebarPercentageExpanded,
-  "aria-valuemin": 0,
-  "aria-valuemax": 100,
-  "aria-valuetext": `${valueTextLabel} ${leftSidebarPercentageExpanded}%`,
-  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
-}, grabAreaLineSelector)));
+}, ref) => {
+  return jsx("button", _extends({
+    ref: ref
+  }, grabAreaSelector, {
+    "aria-label": label,
+    "data-testid": testId,
+    disabled: isDisabled,
+    "aria-hidden": isLeftSidebarCollapsed,
+    type: "button"
+    // The slider role is applied to a button to utilize the native
+    // interactive and disabled functionality on the resize slider. While a
+    // range input would be more semantically accurate, it does not affect
+    // usability.
+    ,
+    role: "slider",
+    css: isLeftSidebarCollapsed ? [grabAreaStyles, grabAreaCollapsedStyles] : grabAreaStyles,
+    "aria-orientation": "vertical",
+    "aria-valuenow": leftSidebarPercentageExpanded,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuetext": `${valueTextLabel} ${leftSidebarPercentageExpanded}%`,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, fg('platform_dst_spread-props-page-layout') ? {} : rest), jsx("span", _extends({
+    css: lineStyles
+  }, grabAreaLineSelector)));
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default GrabArea;

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

@@ -275,6 +275,7 @@ const ResizeControl = ({
     if (isSpaceOrEnter) {
       toggleSideBar(event);
       event.preventDefault();
+      return true; // Added return value
     }
     if (isLeftOrTopArrow || isRightOrBottomArrow) {
       event.preventDefault(); // prevent content scroll
@@ -312,7 +313,9 @@ const ResizeControl = ({
           onResizeEnd && onResizeEnd(updatedLeftSidebarState);
         }, 50);
       });
+      return true; // Added return value
     }
+    return false; // Added default return value for all other cases
   };
   const onFocus = useCallback(() => {
     setIsGrabAreaFocused(true);
@@ -324,7 +327,6 @@ const ResizeControl = ({
     render: (Component, props) => jsx(Component, props),
     ...(overrides && overrides.ResizeButton)
   };
-
   // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
   // however this comes with a substantial performance gain and so is considered acceptable.

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

@@ -11,10 +11,11 @@ import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/core/migration/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-const increaseHitAreaStyles = css({
+const hitAreaSpanStyles = css({
   position: 'absolute',
   insetBlockEnd: `${"var(--ds-space-negative-300, -24px)"}`,
   insetBlockStart: `${"var(--ds-space-negative-300, -24px)"}`,
@@ -76,28 +77,34 @@ const cssSelector = {
 const ResizeButton = ({
   isLeftSidebarCollapsed,
   label,
+  onClick,
   testId,
   ...props
-}) => jsx("button", _extends({}, cssSelector, {
-  // DO NOT remove. used as a CSS selector.
-  "aria-expanded": !isLeftSidebarCollapsed,
-  "aria-label": label,
-  type: "button"
-  // The error goes away when we remove the spread ...props
-  ,
-  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
-  "data-testid": testId
-  // Prevents focus staying attached to the button when pressed
-  ,
-  onMouseDown: preventDefault
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, props), jsx(ChevronRight, {
-  label: "",
-  color: "currentColor",
-  size: "small"
-}), jsx("span", {
-  css: increaseHitAreaStyles
-}));
+}) => {
+  // Extract css from props if it exists to avoid conflicts
+  const {
+    css: _ignoredCss,
+    ...restProps
+  } = props;
+  return jsx("button", _extends({}, cssSelector, {
+    // DO NOT remove. used as a CSS selector.
+    "aria-expanded": !isLeftSidebarCollapsed,
+    "aria-label": label,
+    type: "button",
+    css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
+    "data-testid": testId
+    // Prevents focus staying attached to the button when pressed
+    ,
+    onMouseDown: preventDefault,
+    onClick: onClick
+  }, fg('platform_dst_spread-props-page-layout') ? {} : restProps), jsx(ChevronRight, {
+    label: "",
+    color: "currentColor",
+    size: "small"
+  }), jsx("span", {
+    css: hitAreaSpanStyles
+  }));
+};
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ResizeButton;

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -74,7 +74,7 @@ export const SkipLinkWrapper = ({
       return arr;
     }
     const usedIndexes = customLinks.map(a => a.listIndex);
-    const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx, currArr) => {
+    const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx) => {
       const listIndex = assignIndex(idx, usedIndexes);
       usedIndexes.push(listIndex);
       return {
@@ -96,26 +96,23 @@ export const SkipLinkWrapper = ({
   const removeEscHandler = () => window.removeEventListener('keydown', escapeHandler, false);
   const emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
   const label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
-  return (
-    // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
-    jsx("div", {
-      onFocus: attachEscHandler,
-      onBlur: removeEscHandler,
-      css: [skipLinkStyles, prefersReducedMotionStyles],
-      "data-skip-link-wrapper": true
-    }, emptyLabelOverride ? null : jsx("p", {
-      css: skipLinkHeadingStyles
-    }, label), jsx("ol", {
-      css: skipLinkListStyles
-    }, sortSkipLinks(skipLinksData).map(({
-      id,
-      skipLinkTitle
-    }) => jsx(SkipLink, {
-      key: id,
-      href: `#${id}`,
-      isFocusable: true
-    }, skipLinkTitle))))
-  );
+  return jsx("div", {
+    onFocus: attachEscHandler,
+    onBlur: removeEscHandler,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
+    "data-skip-link-wrapper": true
+  }, emptyLabelOverride ? null : jsx("p", {
+    css: skipLinkHeadingStyles
+  }, label), jsx("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(({
+    id,
+    skipLinkTitle
+  }) => jsx(SkipLink, {
+    key: id,
+    href: `#${id}`,
+    isFocusable: true
+  }, skipLinkTitle))));
 };
 const handleBlur = event => {
   // @ts-ignore

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -131,7 +131,7 @@ export const SidebarResizeController = ({
     };
     transition.current = value;
   }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
-  const collapseLeftSidebar = useCallback((event, collapseWithoutTransition) => {
+  const collapseLeftSidebar = useCallback((_event, collapseWithoutTransition) => {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
       return;

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

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
+var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import * as React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
@@ -51,7 +52,7 @@ var lineStyles = css({
 });
 var grabAreaLineSelector = _defineProperty({}, GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = _defineProperty({}, GRAB_AREA_SELECTOR, true);
-var GrabArea = function GrabArea(_ref) {
+var GrabArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var testId = _ref.testId,
     _ref$valueTextLabel = _ref.valueTextLabel,
     valueTextLabel = _ref$valueTextLabel === void 0 ? 'Width' : _ref$valueTextLabel,
@@ -63,9 +64,10 @@ var GrabArea = function GrabArea(_ref) {
     onMouseDown = _ref.onMouseDown,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return jsx("button", _extends({}, grabAreaSelector, {
+  return jsx("button", _extends({
+    ref: ref
+  }, grabAreaSelector, {
     "aria-label": label,
     "data-testid": testId,
     disabled: isDisabled,
@@ -77,7 +79,7 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    css: isLeftSidebarCollapsed ? [grabAreaStyles, grabAreaCollapsedStyles] : grabAreaStyles,
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,
@@ -87,11 +89,10 @@ var GrabArea = function GrabArea(_ref) {
     onMouseDown: onMouseDown,
     onFocus: onFocus,
     onBlur: onBlur
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, rest), jsx("span", _extends({
+  }, fg('platform_dst_spread-props-page-layout') ? {} : rest), jsx("span", _extends({
     css: lineStyles
   }, grabAreaLineSelector)));
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default GrabArea;

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

@@ -272,6 +272,7 @@ var ResizeControl = function ResizeControl(_ref) {
     if (isSpaceOrEnter) {
       toggleSideBar(event);
       event.preventDefault();
+      return true; // Added return value
     }
     if (isLeftOrTopArrow || isRightOrBottomArrow) {
       event.preventDefault(); // prevent content scroll
@@ -303,7 +304,9 @@ var ResizeControl = function ResizeControl(_ref) {
           onResizeEnd && onResizeEnd(updatedLeftSidebarState);
         }, 50);
       });
+      return true; // Added return value
     }
+    return false; // Added default return value for all other cases
   };
   var onFocus = useCallback(function () {
     setIsGrabAreaFocused(true);
@@ -316,7 +319,6 @@ var ResizeControl = function ResizeControl(_ref) {
       return jsx(Component, props);
     }
   }, overrides && overrides.ResizeButton);
-
   // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
   // however this comes with a substantial performance gain and so is considered acceptable.

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
+var _excluded = ["isLeftSidebarCollapsed", "label", "onClick", "testId"],
+  _excluded2 = ["css"];
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /**
@@ -14,10 +15,11 @@ import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/core/migration/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { durations } from '@atlaskit/motion/durations';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_media } from '@atlaskit/primitives/responsive';
 import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-var increaseHitAreaStyles = css({
+var hitAreaSpanStyles = css({
   position: 'absolute',
   insetBlockEnd: "var(--ds-space-negative-300, -24px)",
   insetBlockStart: "var(--ds-space-negative-300, -24px)",
@@ -72,27 +74,30 @@ var cssSelector = _defineProperty({}, RESIZE_BUTTON_SELECTOR, true);
 var ResizeButton = function ResizeButton(_ref) {
   var isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
     label = _ref.label,
+    onClick = _ref.onClick,
     testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
+  // Extract css from props if it exists to avoid conflicts
+  var _ref2 = props,
+    _ignoredCss = _ref2.css,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
   return jsx("button", _extends({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
-    type: "button"
-    // The error goes away when we remove the spread ...props
-    ,
+    type: "button",
     css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
     "data-testid": testId
     // Prevents focus staying attached to the button when pressed
     ,
-    onMouseDown: preventDefault
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props), jsx(ChevronRight, {
+    onMouseDown: preventDefault,
+    onClick: onClick
+  }, fg('platform_dst_spread-props-page-layout') ? {} : restProps), jsx(ChevronRight, {
     label: "",
     color: "currentColor",
     size: "small"
   }), jsx("span", {
-    css: increaseHitAreaStyles
+    css: hitAreaSpanStyles
   }));
 };
 

package/dist/esm/components/skip-links/skip-link-components.js

@@ -82,7 +82,7 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     });
     var regularLinksWithIdx = arr.filter(function (link) {
       return link.listIndex === undefined;
-    }).map(function (link, idx, currArr) {
+    }).map(function (link, idx) {
       var listIndex = _assignIndex(idx, usedIndexes);
       usedIndexes.push(listIndex);
       return _objectSpread(_objectSpread({}, link), {}, {
@@ -109,27 +109,24 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   };
   var emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
   var label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
-  return (
-    // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
-    jsx("div", {
-      onFocus: attachEscHandler,
-      onBlur: removeEscHandler,
-      css: [skipLinkStyles, prefersReducedMotionStyles],
-      "data-skip-link-wrapper": true
-    }, emptyLabelOverride ? null : jsx("p", {
-      css: skipLinkHeadingStyles
-    }, label), jsx("ol", {
-      css: skipLinkListStyles
-    }, sortSkipLinks(skipLinksData).map(function (_ref2) {
-      var id = _ref2.id,
-        skipLinkTitle = _ref2.skipLinkTitle;
-      return jsx(SkipLink, {
-        key: id,
-        href: "#".concat(id),
-        isFocusable: true
-      }, skipLinkTitle);
-    })))
-  );
+  return jsx("div", {
+    onFocus: attachEscHandler,
+    onBlur: removeEscHandler,
+    css: [skipLinkStyles, prefersReducedMotionStyles],
+    "data-skip-link-wrapper": true
+  }, emptyLabelOverride ? null : jsx("p", {
+    css: skipLinkHeadingStyles
+  }, label), jsx("ol", {
+    css: skipLinkListStyles
+  }, sortSkipLinks(skipLinksData).map(function (_ref2) {
+    var id = _ref2.id,
+      skipLinkTitle = _ref2.skipLinkTitle;
+    return jsx(SkipLink, {
+      key: id,
+      href: "#".concat(id),
+      isFocusable: true
+    }, skipLinkTitle);
+  })));
 };
 var _handleBlur = function handleBlur(event) {
   // @ts-ignore

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -134,7 +134,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     };
     transition.current = value;
   }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
-  var collapseLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
+  var collapseLeftSidebar = useCallback(function (_event, collapseWithoutTransition) {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
       return;

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

@@ -2,10 +2,10 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
-import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { type LeftSidebarProps } from '../../common/types';
-type GrabAreaProps = {
+declare const GrabArea: React.ForwardRefExoticComponent<{
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
     label: string;
@@ -15,7 +15,6 @@ type GrabAreaProps = {
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
     onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
     testId?: string;
-    ref?: React.Ref<HTMLButtonElement>;
-} & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, valueTextLabel, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ref, ...rest }: GrabAreaProps & Partial<LeftSidebarProps>) => jsx.JSX.Element;
+    valueTextLabel?: string;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Partial<LeftSidebarProps> & React.RefAttributes<HTMLButtonElement>>;
 export default GrabArea;

package/dist/types/components/resize-control/resize-button.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type ResizeButtonProps } from './types';
-declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
+declare const ResizeButton: ({ isLeftSidebarCollapsed, label, onClick, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
 export default ResizeButton;

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

@@ -2,10 +2,10 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
-import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { type FocusEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import { type LeftSidebarProps } from '../../common/types';
-type GrabAreaProps = {
+declare const GrabArea: React.ForwardRefExoticComponent<{
     isDisabled: boolean;
     isLeftSidebarCollapsed: boolean;
     label: string;
@@ -15,7 +15,6 @@ type GrabAreaProps = {
     onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
     onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
     testId?: string;
-    ref?: React.Ref<HTMLButtonElement>;
-} & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, valueTextLabel, isDisabled, isLeftSidebarCollapsed, label, leftSidebarPercentageExpanded, onKeyDown, onMouseDown, onBlur, onFocus, ref, ...rest }: GrabAreaProps & Partial<LeftSidebarProps>) => jsx.JSX.Element;
+    valueTextLabel?: string;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Partial<LeftSidebarProps> & React.RefAttributes<HTMLButtonElement>>;
 export default GrabArea;

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type ResizeButtonProps } from './types';
-declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
+declare const ResizeButton: ({ isLeftSidebarCollapsed, label, onClick, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
 export default ResizeButton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "4.2.17",
+	"version": "4.2.19",
 	"description": "A collection of components which let you compose an application's page layout.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,14 +37,14 @@
 	},
 	"homepage": "https://atlassian.design/components/page-layout/",
 	"dependencies": {
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tokens": "^8.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -57,16 +57,16 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
-		"@atlaskit/atlassian-navigation": "^5.3.0",
-		"@atlaskit/button": "^23.5.0",
+		"@atlaskit/atlassian-navigation": "^5.4.0",
+		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/popup": "^4.4.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/popup": "^4.6.0",
+		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/side-navigation": "^11.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
-		"@atlassian/ssr-tests": "^0.3.0",
+		"@atlaskit/tooltip": "^20.8.0",
+		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/raf-schd": "^4.0.1",
@@ -76,6 +76,9 @@
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean",
 			"referenceOnly": "true"
+		},
+		"platform_dst_spread-props-page-layout": {
+			"type": "boolean"
 		}
 	},
 	"keywords": [