@atlaskit/navigation-system 1.2.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @atlassian/navigation-system
 
+## 2.1.0
+
+### Minor Changes
+
+- [`8f30ac4ceb737`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f30ac4ceb737) -
+  Adds extra guards for resizable slots to avoid invalid widths being set. This change is behind the
+  `platform_dst_nav4_panel_splitter_guards` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.0
+
+### Major Changes
+
+- [`ca468a8bbccd9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca468a8bbccd9) -
+  The elemBefore chevron icon button in the link (selectable) variants of
+  `ExpandableMenuItemTrigger` is now labelled by the menu item (specifically, its anchor element)
+  through the aria-labelledby attribute. This is to provide context on what will be expanded or
+  collapsed to screen readers. Assistive technology users will still have the `aria-expanded`
+  attribute to determine the expanded state.
+
+  This change was previously behind a feature flag, which has now been removed.
+
+  **More details:**
+
+  Previously, the chevron icon button would be labelled by the hardcoded strings "Expand" or
+  "Collapse" - which is not helpful for screen readers.
+
+  Now, the chevron icon button is labelled by the menu item trigger content (children).
+
+  For example, for the below expandable menu item trigger:
+
+  ```tsx
+  <ExpandableMenuItemTrigger href="#">Recent</ExpandableMenuItemTrigger>
+  ```
+
+  Previously, the chevron icon button would be a `button` element with the name "Expand" or
+  "Collapse", based on the expanded state.
+
+  Now, the chevron icon button will be a `button` element with the name "Recent".
+
+  You will likely need to update your tests to account for this change, by using a different
+  selector.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -14,7 +14,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItem = require("../menu-item");
 var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
 var _expandableMenuItemContext = require("./expandable-menu-item-context");
@@ -108,11 +107,11 @@ var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*
     // `aria-expanded` attribute to indicate the expanded state of the menu item.
     // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
     ,
-    "aria-labelledby": (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    "aria-labelledby": id
     // IconButton requires a label prop, however it will not be used by screen readers as we are setting
     // `aria-labelledby`, which will be used instead.
     ,
-    label: (0, _platformFeatureFlags.fg)('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

package/dist/cjs/ui/page-layout/aside.js

@@ -22,6 +22,7 @@ var _hoistUtils = require("./hoist-utils");
 var _idUtils = require("./id-utils");
 var _provider = require("./panel-splitter/provider");
 var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
+var _useSafeDefaultWidth = require("./use-safe-default-width");
 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); }
 var panelSplitterResizingVar = '--n_asdRsz';
 /**
@@ -54,6 +55,7 @@ var styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
   inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
+var fallbackDefaultWidth = 330;
 
 /**
  * The Aside is rendered to the right (inline end) of the Main area.
@@ -64,7 +66,7 @@ function Aside(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 330 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Aside' : _ref$label,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
@@ -75,6 +77,11 @@ function Aside(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
+  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Aside'
+  });
 
   /**
    * Don't show the skip link if the slot has 0 width.

package/dist/cjs/ui/page-layout/panel-splitter/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PanelSplitterContext = void 0;
+exports.PanelSplitterContext = exports.OnDoubleClickContext = void 0;
 var _react = require("react");
 // Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
@@ -11,4 +11,13 @@ var _react = require("react");
 /**
  * Context for the panel splitter. Only internally exported.
  */
-var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);
+var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+var OnDoubleClickContext = exports.OnDoubleClickContext = /*#__PURE__*/(0, _react.createContext)(undefined);

package/dist/cjs/ui/page-layout/panel-splitter/get-width.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWidthFromDragLocation = exports.getPixelWidth = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
@@ -25,6 +26,10 @@ var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWi
  * Returns the computed width of an element in pixels.
  */
 var getPixelWidth = exports.getPixelWidth = function getPixelWidth(element) {
+  if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_panel_splitter_guards')) {
+    // Always returns an integer. Returns 0 if element is hidden / removed.
+    return element.offsetWidth;
+  }
   var _window$getComputedSt = window.getComputedStyle(element),
     width = _window$getComputedSt.width;
   return parseInt(width);

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -92,6 +92,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     rangeInputBounds = _useState4[0],
     setRangeInputBounds = _useState4[1];
   var openLayerObserver = (0, _openLayerObserver.useOpenLayerObserver)();
+
+  /**
+   * This is a temporary workaround to enable the `SideNavPanelSplitter` component
+   * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+   * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
+   */
+  var onDoubleClick = (0, _react.useContext)(_context.OnDoubleClickContext);
   (0, _react.useEffect)(function () {
     var splitter = splitterRef.current;
     (0, _tinyInvariant.default)(splitter, 'Splitter ref must be set');
@@ -164,7 +171,6 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         var source = _ref5.source;
         (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         _preventUnhandled.preventUnhandled.stop();
-        (0, _tinyInvariant.default)(isPanelSplitterDragData(source.data));
         var finalWidth = (0, _getWidth.getPixelWidth)(panel);
         onCompleteResize(finalWidth);
         onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
@@ -276,6 +282,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
+    onDoubleClick: onDoubleClick,
     className: (0, _runtime.ax)([grabAreaStyles.root])
   }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
     type: "range",

package/dist/cjs/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideNavPanelSplitter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _constants = require("../constants");
+var _useToggleSideNav = require("../side-nav/use-toggle-side-nav");
+var _context = require("./context");
+var _panelSplitter = require("./panel-splitter");
+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); }
+/**
+ * _SideNavPanelSplitter_
+ *
+ * A component that allows the user to resize or collapse the side nav.
+ * It must be used within the `SideNav` layout area.
+ *
+ * Example usage:
+ * ```tsx
+ * <SideNav>
+ *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ * </SideNav>
+ * ```
+ */
+var SideNavPanelSplitter = exports.SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
+  var label = _ref.label,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    testId = _ref.testId,
+    _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
+    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn;
+  var context = (0, _react.useContext)(_context.PanelSplitterContext);
+  (0, _tinyInvariant.default)((context === null || context === void 0 ? void 0 : context.panelId) === _constants.sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
+  var toggleSideNav = (0, _useToggleSideNav.useToggleSideNav)();
+  return /*#__PURE__*/_react.default.createElement(_context.OnDoubleClickContext.Provider, {
+    value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
+  }, /*#__PURE__*/_react.default.createElement(_panelSplitter.PanelSplitter, {
+    label: label,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    testId: testId
+  }));
+};

package/dist/cjs/ui/page-layout/panel.js

@@ -23,6 +23,7 @@ var _idUtils = require("./id-utils");
 var _provider = require("./panel-splitter/provider");
 var _elementContext = require("./side-nav/element-context");
 var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
+var _useSafeDefaultWidth = require("./use-safe-default-width");
 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); }
 var panelSplitterResizingVar = '--n_pnlRsz';
 
@@ -41,6 +42,7 @@ var styles = {
   oldMobileWidth: "_1bsb1adv",
   newMobileWidth: "_1bsb1dxx"
 };
+var fallbackDefaultWidth = 365;
 
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -52,7 +54,7 @@ var styles = {
 function Panel(_ref) {
   var children = _ref.children,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 365 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Panel' : _ref$label,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
@@ -66,6 +68,12 @@ function Panel(_ref) {
   var id = (0, _idUtils.useLayoutId)({
     providedId: providedId
   });
+  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
+
   /**
    * Don't show the skip link if the slot has 0 width.
    *

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -29,6 +29,7 @@ var _hoistUtils = require("../hoist-utils");
 var _idUtils = require("../id-utils");
 var _provider = require("../panel-splitter/provider");
 var _useResizingWidthCssVarOnRootElement = require("../use-resizing-width-css-var-on-root-element");
+var _useSafeDefaultWidth = require("../use-safe-default-width");
 var _elementContext = require("./element-context");
 var _flyoutCloseDelayMs = require("./flyout-close-delay-ms");
 var _toggleButtonContext = require("./toggle-button-context");
@@ -59,6 +60,8 @@ var styles = {
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw"
 };
+var fallbackDefaultWidth = 320;
+
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
  * context value.
@@ -67,7 +70,7 @@ function SideNavInternal(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 320 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     testId = _ref.testId,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
@@ -113,6 +116,11 @@ function SideNavInternal(_ref) {
   var _useState = (0, _react.useState)(defaultCollapsed),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     initialDefaultCollapsed = _useState2[0];
+  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'SideNav'
+  });
   var _useState3 = (0, _react.useState)(defaultWidth),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     width = _useState4[0],

package/dist/cjs/ui/page-layout/use-safe-default-width.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSafeDefaultWidth = useSafeDefaultWidth;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * When `platform_dst_nav4_panel_splitter_guards` is disabled,
+ * `useSafeDefaultWidth` returns the provided `defaultWidthProp`.
+ *
+ * When `platform_dst_nav4_panel_splitter_guards` is enabled,
+ * `useSafeDefaultWidth` returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
+ */
+function useSafeDefaultWidth(_ref) {
+  var defaultWidthProp = _ref.defaultWidthProp,
+    fallbackDefaultWidth = _ref.fallbackDefaultWidth,
+    slotName = _ref.slotName;
+  if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_panel_splitter_guards')) {
+    // If the provided `defaultWidth` is invalid then we use our fallback.
+    // We are using a runtime check because some invalid numbers like `NaN` are not caught by types,
+    // and we saw some issues in products where our experience broke due to this.
+    if (!Number.isInteger(defaultWidthProp)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error("The defaultWidth value must be an integer, but '".concat(defaultWidthProp, "' was provided to ").concat(slotName, ". Falling back to ").concat(fallbackDefaultWidth, "px instead."));
+      }
+      return fallbackDefaultWidth;
+    }
+  }
+  return defaultWidthProp;
+}

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -6,7 +6,6 @@ import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -99,11 +98,11 @@ export const ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(({
     // `aria-expanded` attribute to indicate the expanded state of the menu item.
     // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
     ,
-    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    "aria-labelledby": id
     // IconButton requires a label prop, however it will not be used by screen readers as we are setting
     // `aria-labelledby`, which will be used instead.
     ,
-    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

package/dist/es2019/ui/page-layout/aside.js

@@ -12,6 +12,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
 import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from './use-safe-default-width';
 const panelSplitterResizingVar = '--n_asdRsz';
 /**
  * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
@@ -43,6 +44,7 @@ const styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
   inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
+const fallbackDefaultWidth = 330;
 
 /**
  * The Aside is rendered to the right (inline end) of the Main area.
@@ -52,7 +54,7 @@ const styles = {
 export function Aside({
   children,
   xcss,
-  defaultWidth = 330,
+  defaultWidth: defaultWidthProp = fallbackDefaultWidth,
   label = 'Aside',
   skipLinkLabel = label,
   testId,
@@ -62,6 +64,11 @@ export function Aside({
   const id = useLayoutId({
     providedId
   });
+  const defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp,
+    fallbackDefaultWidth,
+    slotName: 'Aside'
+  });
 
   /**
    * Don't show the skip link if the slot has 0 width.

package/dist/es2019/ui/page-layout/panel-splitter/context.js

@@ -6,4 +6,13 @@ import { createContext } from 'react';
 /**
  * Context for the panel splitter. Only internally exported.
  */
-export const PanelSplitterContext = /*#__PURE__*/createContext(null);
+export const PanelSplitterContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+export const OnDoubleClickContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/ui/page-layout/panel-splitter/get-width.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export const getWidthFromDragLocation = ({
   initialWidth,
   location,
@@ -20,6 +21,10 @@ export const getWidthFromDragLocation = ({
  * Returns the computed width of an element in pixels.
  */
 export const getPixelWidth = element => {
+  if (fg('platform_dst_nav4_panel_splitter_guards')) {
+    // Always returns an integer. Returns 0 if element is hidden / removed.
+    return element.offsetWidth;
+  }
   const {
     width
   } = window.getComputedStyle(element);

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -15,7 +15,7 @@ import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { PanelSplitterContext } from './context';
+import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
 import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
 import { getPixelWidth, getWidthFromDragLocation } from './get-width';
@@ -77,6 +77,13 @@ const PortaledPanelSplitter = ({
     max: 500
   });
   const openLayerObserver = useOpenLayerObserver();
+
+  /**
+   * This is a temporary workaround to enable the `SideNavPanelSplitter` component
+   * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+   * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
+   */
+  const onDoubleClick = useContext(OnDoubleClickContext);
   useEffect(() => {
     const splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
@@ -154,7 +161,6 @@ const PortaledPanelSplitter = ({
       }) {
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
-        invariant(isPanelSplitterDragData(source.data));
         const finalWidth = getPixelWidth(panel);
         onCompleteResize(finalWidth);
         onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
@@ -254,6 +260,7 @@ const PortaledPanelSplitter = ({
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
+    onDoubleClick: onDoubleClick,
     className: ax([grabAreaStyles.root])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",

package/dist/es2019/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { sideNavPanelSplitterId } from '../constants';
+import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
+import { OnDoubleClickContext, PanelSplitterContext } from './context';
+import { PanelSplitter } from './panel-splitter';
+/**
+ * _SideNavPanelSplitter_
+ *
+ * A component that allows the user to resize or collapse the side nav.
+ * It must be used within the `SideNav` layout area.
+ *
+ * Example usage:
+ * ```tsx
+ * <SideNav>
+ *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ * </SideNav>
+ * ```
+ */
+export const SideNavPanelSplitter = ({
+  label,
+  onResizeStart,
+  onResizeEnd,
+  testId,
+  shouldCollapseOnDoubleClick = true
+}) => {
+  const context = useContext(PanelSplitterContext);
+  invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
+  const toggleSideNav = useToggleSideNav();
+  return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {
+    value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
+  }, /*#__PURE__*/React.createElement(PanelSplitter, {
+    label: label,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    testId: testId
+  }));
+};

package/dist/es2019/ui/page-layout/panel.js

@@ -13,6 +13,7 @@ import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { useSideNavRef } from './side-nav/element-context';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from './use-safe-default-width';
 const panelSplitterResizingVar = '--n_pnlRsz';
 
 /**
@@ -30,6 +31,7 @@ const styles = {
   oldMobileWidth: "_1bsb1adv",
   newMobileWidth: "_1bsb1dxx"
 };
+const fallbackDefaultWidth = 365;
 
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -40,7 +42,7 @@ const styles = {
  */
 export function Panel({
   children,
-  defaultWidth = 365,
+  defaultWidth: defaultWidthProp = fallbackDefaultWidth,
   label = 'Panel',
   skipLinkLabel = label,
   testId,
@@ -52,6 +54,12 @@ export function Panel({
   const id = useLayoutId({
     providedId
   });
+  const defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp,
+    fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
+
   /**
    * Don't show the skip link if the slot has 0 width.
    *

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -19,6 +19,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from '../use-safe-default-width';
 import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SideNavToggleButtonElement } from './toggle-button-context';
@@ -48,6 +49,8 @@ const styles = {
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw"
 };
+const fallbackDefaultWidth = 320;
+
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
  * context value.
@@ -55,7 +58,7 @@ const styles = {
 function SideNavInternal({
   children,
   defaultCollapsed,
-  defaultWidth = 320,
+  defaultWidth: defaultWidthProp = fallbackDefaultWidth,
   testId,
   label = 'Sidebar',
   skipLinkLabel = label,
@@ -99,6 +102,11 @@ function SideNavInternal({
   // This is so we can use it in an effect _that only runs once_, after the initial render on the client,
   // to sync the side nav context (provided in `<Root>`) with the `defaultCollapsed` prop provided to `<SideNav>`.
   const [initialDefaultCollapsed] = useState(defaultCollapsed);
+  const defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp,
+    fallbackDefaultWidth,
+    slotName: 'SideNav'
+  });
   const [width, setWidth] = useState(defaultWidth);
   const clampedWidth = `clamp(${widthResizeBounds.min}, ${width}px, ${widthResizeBounds.max})`;
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);

package/dist/es2019/ui/page-layout/use-safe-default-width.js

@@ -0,0 +1,28 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * When `platform_dst_nav4_panel_splitter_guards` is disabled,
+ * `useSafeDefaultWidth` returns the provided `defaultWidthProp`.
+ *
+ * When `platform_dst_nav4_panel_splitter_guards` is enabled,
+ * `useSafeDefaultWidth` returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
+ */
+export function useSafeDefaultWidth({
+  defaultWidthProp,
+  fallbackDefaultWidth,
+  slotName
+}) {
+  if (fg('platform_dst_nav4_panel_splitter_guards')) {
+    // If the provided `defaultWidth` is invalid then we use our fallback.
+    // We are using a runtime check because some invalid numbers like `NaN` are not caught by types,
+    // and we saw some issues in products where our experience broke due to this.
+    if (!Number.isInteger(defaultWidthProp)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(`The defaultWidth value must be an integer, but '${defaultWidthProp}' was provided to ${slotName}. Falling back to ${fallbackDefaultWidth}px instead.`);
+      }
+      return fallbackDefaultWidth;
+    }
+  }
+  return defaultWidthProp;
+}

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -6,7 +6,6 @@ import React, { forwardRef, useCallback, useId, useRef } from 'react';
 import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { MenuItemBase, nestedOpenPopupCSSSelector } from '../menu-item';
 import { useScrollMenuItemIntoView } from '../use-scroll-menu-item-into-view';
 import { useIsExpanded, useOnExpansionToggle, useSetIsExpanded } from './expandable-menu-item-context';
@@ -99,11 +98,11 @@ export var ExpandableMenuItemTrigger = /*#__PURE__*/forwardRef(function (_ref2,
     // `aria-expanded` attribute to indicate the expanded state of the menu item.
     // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
     ,
-    "aria-labelledby": fg('platform_dst_expandable_menu_item_elembefore_label') ? id : undefined
+    "aria-labelledby": id
     // IconButton requires a label prop, however it will not be used by screen readers as we are setting
     // `aria-labelledby`, which will be used instead.
     ,
-    label: fg('platform_dst_expandable_menu_item_elembefore_label') ? '' : isExpanded ? 'Collapse' : 'Expand',
+    label: "",
     appearance: "subtle",
     spacing: "compact",
     onClick: handleIconClick,

package/dist/esm/ui/page-layout/aside.js

@@ -14,6 +14,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
 import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from './use-safe-default-width';
 var panelSplitterResizingVar = '--n_asdRsz';
 /**
  * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
@@ -45,6 +46,7 @@ var styles = {
   root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
   inner: "_1reo1wug _18m91wug _152timx3 _4t3i1osq _165teqxy _13wn1if8"
 };
+var fallbackDefaultWidth = 330;
 
 /**
  * The Aside is rendered to the right (inline end) of the Main area.
@@ -55,7 +57,7 @@ export function Aside(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 330 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Aside' : _ref$label,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
@@ -66,6 +68,11 @@ export function Aside(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
+  var defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Aside'
+  });
 
   /**
    * Don't show the skip link if the slot has 0 width.

package/dist/esm/ui/page-layout/panel-splitter/context.js

@@ -6,4 +6,13 @@ import { createContext } from 'react';
 /**
  * Context for the panel splitter. Only internally exported.
  */
-export var PanelSplitterContext = /*#__PURE__*/createContext(null);
+export var PanelSplitterContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+export var OnDoubleClickContext = /*#__PURE__*/createContext(undefined);

package/dist/esm/ui/page-layout/panel-splitter/get-width.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
   var initialWidth = _ref.initialWidth,
     location = _ref.location,
@@ -19,6 +20,10 @@ export var getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
  * Returns the computed width of an element in pixels.
  */
 export var getPixelWidth = function getPixelWidth(element) {
+  if (fg('platform_dst_nav4_panel_splitter_guards')) {
+    // Always returns an integer. Returns 0 if element is hidden / removed.
+    return element.offsetWidth;
+  }
   var _window$getComputedSt = window.getComputedStyle(element),
     width = _window$getComputedSt.width;
   return parseInt(width);

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -19,7 +19,7 @@ import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { PanelSplitterContext } from './context';
+import { OnDoubleClickContext, PanelSplitterContext } from './context';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
 import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
 import { getPixelWidth, getWidthFromDragLocation } from './get-width';
@@ -82,6 +82,13 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
     rangeInputBounds = _useState4[0],
     setRangeInputBounds = _useState4[1];
   var openLayerObserver = useOpenLayerObserver();
+
+  /**
+   * This is a temporary workaround to enable the `SideNavPanelSplitter` component
+   * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+   * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context can be removed.
+   */
+  var onDoubleClick = useContext(OnDoubleClickContext);
   useEffect(function () {
     var splitter = splitterRef.current;
     invariant(splitter, 'Splitter ref must be set');
@@ -154,7 +161,6 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
         var source = _ref5.source;
         invariant(isPanelSplitterDragData(source.data));
         preventUnhandled.stop();
-        invariant(isPanelSplitterDragData(source.data));
         var finalWidth = getPixelWidth(panel);
         onCompleteResize(finalWidth);
         onResizeEnd === null || onResizeEnd === void 0 || onResizeEnd({
@@ -266,6 +272,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     ref: splitterRef,
     "data-testid": testId,
+    onDoubleClick: onDoubleClick,
     className: ax([grabAreaStyles.root])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",

package/dist/esm/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { sideNavPanelSplitterId } from '../constants';
+import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
+import { OnDoubleClickContext, PanelSplitterContext } from './context';
+import { PanelSplitter } from './panel-splitter';
+/**
+ * _SideNavPanelSplitter_
+ *
+ * A component that allows the user to resize or collapse the side nav.
+ * It must be used within the `SideNav` layout area.
+ *
+ * Example usage:
+ * ```tsx
+ * <SideNav>
+ *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ * </SideNav>
+ * ```
+ */
+export var SideNavPanelSplitter = function SideNavPanelSplitter(_ref) {
+  var label = _ref.label,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    testId = _ref.testId,
+    _ref$shouldCollapseOn = _ref.shouldCollapseOnDoubleClick,
+    shouldCollapseOnDoubleClick = _ref$shouldCollapseOn === void 0 ? true : _ref$shouldCollapseOn;
+  var context = useContext(PanelSplitterContext);
+  invariant((context === null || context === void 0 ? void 0 : context.panelId) === sideNavPanelSplitterId, 'SideNavPanelSplitter must be rendered as a child of <SideNav />.');
+  var toggleSideNav = useToggleSideNav();
+  return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {
+    value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
+  }, /*#__PURE__*/React.createElement(PanelSplitter, {
+    label: label,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    testId: testId
+  }));
+};

package/dist/esm/ui/page-layout/panel.js

@@ -15,6 +15,7 @@ import { useLayoutId } from './id-utils';
 import { PanelSplitterProvider } from './panel-splitter/provider';
 import { useSideNavRef } from './side-nav/element-context';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from './use-safe-default-width';
 var panelSplitterResizingVar = '--n_pnlRsz';
 
 /**
@@ -32,6 +33,7 @@ var styles = {
   oldMobileWidth: "_1bsb1adv",
   newMobileWidth: "_1bsb1dxx"
 };
+var fallbackDefaultWidth = 365;
 
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -43,7 +45,7 @@ var styles = {
 export function Panel(_ref) {
   var children = _ref.children,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 365 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Panel' : _ref$label,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
@@ -57,6 +59,12 @@ export function Panel(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
+  var defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
+
   /**
    * Don't show the skip link if the slot has 0 width.
    *

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -21,6 +21,7 @@ import { DangerouslyHoistCssVarToDocumentRoot } from '../hoist-utils';
 import { useLayoutId } from '../id-utils';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
 import { useResizingWidthCssVarOnRootElement } from '../use-resizing-width-css-var-on-root-element';
+import { useSafeDefaultWidth } from '../use-safe-default-width';
 import { useSideNavRef } from './element-context';
 import { sideNavFlyoutCloseDelayMs } from './flyout-close-delay-ms';
 import { SideNavToggleButtonElement } from './toggle-button-context';
@@ -50,6 +51,8 @@ var styles = {
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw"
 };
+var fallbackDefaultWidth = 320;
+
 /**
  * We need an additional component layer so we can wrap the side nav in a `OpenLayerObserver` and have access to the
  * context value.
@@ -58,7 +61,7 @@ function SideNavInternal(_ref) {
   var children = _ref.children,
     defaultCollapsed = _ref.defaultCollapsed,
     _ref$defaultWidth = _ref.defaultWidth,
-    defaultWidth = _ref$defaultWidth === void 0 ? 320 : _ref$defaultWidth,
+    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
     testId = _ref.testId,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Sidebar' : _ref$label,
@@ -104,6 +107,11 @@ function SideNavInternal(_ref) {
   var _useState = useState(defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 1),
     initialDefaultCollapsed = _useState2[0];
+  var defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'SideNav'
+  });
   var _useState3 = useState(defaultWidth),
     _useState4 = _slicedToArray(_useState3, 2),
     width = _useState4[0],

package/dist/esm/ui/page-layout/use-safe-default-width.js

@@ -0,0 +1,27 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * When `platform_dst_nav4_panel_splitter_guards` is disabled,
+ * `useSafeDefaultWidth` returns the provided `defaultWidthProp`.
+ *
+ * When `platform_dst_nav4_panel_splitter_guards` is enabled,
+ * `useSafeDefaultWidth` returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
+ */
+export function useSafeDefaultWidth(_ref) {
+  var defaultWidthProp = _ref.defaultWidthProp,
+    fallbackDefaultWidth = _ref.fallbackDefaultWidth,
+    slotName = _ref.slotName;
+  if (fg('platform_dst_nav4_panel_splitter_guards')) {
+    // If the provided `defaultWidth` is invalid then we use our fallback.
+    // We are using a runtime check because some invalid numbers like `NaN` are not caught by types,
+    // and we saw some issues in products where our experience broke due to this.
+    if (!Number.isInteger(defaultWidthProp)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error("The defaultWidth value must be an integer, but '".concat(defaultWidthProp, "' was provided to ").concat(slotName, ". Falling back to ").concat(fallbackDefaultWidth, "px instead."));
+      }
+      return fallbackDefaultWidth;
+    }
+  }
+  return defaultWidthProp;
+}

package/dist/types/ui/page-layout/aside.d.ts

@@ -5,7 +5,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  */
-export declare function Aside({ children, xcss, defaultWidth, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+export declare function Aside({ children, xcss, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -21,7 +21,7 @@ export declare function Aside({ children, xcss, defaultWidth, label, skipLinkLab
     /**
      * The default width of the layout area.
      *
-     * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
+     * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      */
     defaultWidth?: number;
 }): JSX.Element;

package/dist/types/ui/page-layout/panel-splitter/context.d.ts

@@ -52,3 +52,11 @@ export type PanelSplitterContextType = {
  * Context for the panel splitter. Only internally exported.
  */
 export declare const PanelSplitterContext: import("react").Context<PanelSplitterContextType | null>;
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+export declare const OnDoubleClickContext: import("react").Context<(() => void) | undefined>;

package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -4,7 +4,7 @@
  */
 import { type ReactNode } from 'react';
 import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
-type PanelSplitterProps = {
+export type PanelSplitterProps = {
     /**
      * The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
      */

package/dist/types/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type PanelSplitterProps } from './panel-splitter';
+type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
+    shouldCollapseOnDoubleClick?: boolean;
+};
+/**
+ * _SideNavPanelSplitter_
+ *
+ * A component that allows the user to resize or collapse the side nav.
+ * It must be used within the `SideNav` layout area.
+ *
+ * Example usage:
+ * ```tsx
+ * <SideNav>
+ *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ * </SideNav>
+ * ```
+ */
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, }: SideNavPanelSplitterProps) => ReactNode;
+export {};

package/dist/types/ui/page-layout/panel.d.ts

@@ -7,7 +7,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
  */
-export declare function Panel({ children, defaultWidth, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
+export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -19,7 +19,7 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
     /**
      * The default width of the layout area.
      *
-     * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
+     * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      *
      * This value is also used as the minimum resizing width, except when the `defaultWidth` is greater then `400px`,
      * in which case `400px` will be used as the minimum resizing width instead.

package/dist/types/ui/page-layout/side-nav/side-nav.d.ts

@@ -26,7 +26,8 @@ type SideNavProps = CommonSlotProps & {
     defaultCollapsed?: boolean;
     /**
      * The default width of the side nav layout area.
-     * It should be between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
+     *
+     * It should be an integer between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
      *
      * It is only used when the side nav is first mounted, but you should continuously update your
      * persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date

package/dist/types/ui/page-layout/use-safe-default-width.d.ts

@@ -0,0 +1,21 @@
+/**
+ * When `platform_dst_nav4_panel_splitter_guards` is disabled,
+ * `useSafeDefaultWidth` returns the provided `defaultWidthProp`.
+ *
+ * When `platform_dst_nav4_panel_splitter_guards` is enabled,
+ * `useSafeDefaultWidth` returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
+ */
+export declare function useSafeDefaultWidth({ defaultWidthProp, fallbackDefaultWidth, slotName, }: {
+    /**
+     * The `defaultWidth` passed in by the app.
+     */
+    defaultWidthProp: number;
+    /**
+     * The fallback value for `defaultWidth` if `defaultWidthProp` is invalid.
+     */
+    fallbackDefaultWidth: number;
+    /**
+     * The name of the slot, used for the dev-time console error.
+     */
+    slotName: string;
+}): number;

package/dist/types-ts4.5/ui/page-layout/aside.d.ts

@@ -5,7 +5,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
  */
-export declare function Aside({ children, xcss, defaultWidth, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
+export declare function Aside({ children, xcss, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -21,7 +21,7 @@ export declare function Aside({ children, xcss, defaultWidth, label, skipLinkLab
     /**
      * The default width of the layout area.
      *
-     * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
+     * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      */
     defaultWidth?: number;
 }): JSX.Element;

package/dist/types-ts4.5/ui/page-layout/panel-splitter/context.d.ts

@@ -52,3 +52,11 @@ export type PanelSplitterContextType = {
  * Context for the panel splitter. Only internally exported.
  */
 export declare const PanelSplitterContext: import("react").Context<PanelSplitterContextType | null>;
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+export declare const OnDoubleClickContext: import("react").Context<(() => void) | undefined>;

package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -4,7 +4,7 @@
  */
 import { type ReactNode } from 'react';
 import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
-type PanelSplitterProps = {
+export type PanelSplitterProps = {
     /**
      * The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
      */

package/dist/types-ts4.5/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type PanelSplitterProps } from './panel-splitter';
+type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick'> & {
+    shouldCollapseOnDoubleClick?: boolean;
+};
+/**
+ * _SideNavPanelSplitter_
+ *
+ * A component that allows the user to resize or collapse the side nav.
+ * It must be used within the `SideNav` layout area.
+ *
+ * Example usage:
+ * ```tsx
+ * <SideNav>
+ *   <SideNavPanelSplitter label="Resize or collapse Side Nav"  />
+ * </SideNav>
+ * ```
+ */
+export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, }: SideNavPanelSplitterProps) => ReactNode;
+export {};

package/dist/types-ts4.5/ui/page-layout/panel.d.ts

@@ -7,7 +7,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
  */
-export declare function Panel({ children, defaultWidth, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
+export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -19,7 +19,7 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
     /**
      * The default width of the layout area.
      *
-     * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
+     * It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      *
      * This value is also used as the minimum resizing width, except when the `defaultWidth` is greater then `400px`,
      * in which case `400px` will be used as the minimum resizing width instead.

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts

@@ -26,7 +26,8 @@ type SideNavProps = CommonSlotProps & {
     defaultCollapsed?: boolean;
     /**
      * The default width of the side nav layout area.
-     * It should be between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
+     *
+     * It should be an integer between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
      *
      * It is only used when the side nav is first mounted, but you should continuously update your
      * persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date

package/dist/types-ts4.5/ui/page-layout/use-safe-default-width.d.ts

@@ -0,0 +1,21 @@
+/**
+ * When `platform_dst_nav4_panel_splitter_guards` is disabled,
+ * `useSafeDefaultWidth` returns the provided `defaultWidthProp`.
+ *
+ * When `platform_dst_nav4_panel_splitter_guards` is enabled,
+ * `useSafeDefaultWidth` returns the `fallbackWidth` if the provided `defaultWidthProp` is not an integer value.
+ */
+export declare function useSafeDefaultWidth({ defaultWidthProp, fallbackDefaultWidth, slotName, }: {
+    /**
+     * The `defaultWidth` passed in by the app.
+     */
+    defaultWidthProp: number;
+    /**
+     * The fallback value for `defaultWidth` if `defaultWidthProp` is invalid.
+     */
+    fallbackDefaultWidth: number;
+    /**
+     * The name of the slot, used for the dev-time console error.
+     */
+    slotName: string;
+}): number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "1.2.0",
+	"version": "2.1.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -120,8 +120,8 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -142,7 +142,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^12.2.0",
+		"@atlaskit/form": "^12.4.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
@@ -214,9 +214,6 @@
 		"platform_dst_nav4_flyout_use_capture_outside": {
 			"type": "boolean"
 		},
-		"platform_dst_expandable_menu_item_elembefore_label": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_skip_links_hydration_fix": {
 			"type": "boolean"
 		},
@@ -225,6 +222,9 @@
 		},
 		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_panel_splitter_guards": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"