@atlaskit/navigation-system 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlassian/navigation-system
 
+## 2.1.1
+
+### Patch Changes
+
+- [`23bcc5bbc9cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/23bcc5bbc9cee) -
+  Internal changes to how border radius is applied.
+- Updated dependencies
+
+## 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

package/dist/cjs/ui/menu-item/container-avatar.compiled.css

@@ -1,4 +1,4 @@
 
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._1bsbgktf{width:20px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._1bsbgktf{width:20px}
 ._4t3igktf{height:20px}
 ._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/menu-item/container-avatar.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 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 styles = {
-  root: "_2rkoiti9 _vchhusvi _4t3igktf _1bsbgktf"
+  root: "_2rko12b0 _vchhusvi _4t3igktf _1bsbgktf"
 };
 /**
  * __Container avatar__

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/cjs/ui/top-nav-items/nav-logo/custom-logo.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}
 ._1e0c1txw{display:flex}

package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.js

@@ -17,8 +17,8 @@ var _logoRenderer = require("./logo-renderer");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var anchorStyles = {
-  root: "_2rkosqtm _1e0c1txw _4cvr1h6o _4t3izwfg",
-  customLogoBorderRadius: "_2rkosqtm",
+  root: "_2rkofajl _1e0c1txw _4cvr1h6o _4t3izwfg",
+  customLogoBorderRadius: "_2rkofajl",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"

package/dist/cjs/ui/top-nav-items/search.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
 ._1ii7kb7n{grid-row:1}
 ._1rjcze3t{padding-block:var(--ds-space-0,0)}
 ._yyhy11wp{grid-column:3}

package/dist/cjs/ui/top-nav-items/search.js

@@ -15,7 +15,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _migration = require("./themed/migration");
 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 styles = {
-  root: "_2rkoiti9 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
+  root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
   elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"

package/dist/cjs/ui/top-nav-items/themed/button.compiled.css

@@ -4,7 +4,7 @@
 ._11q7esko{background:var(--ds-top-bar-button-primary-background)}
 ._11q7pkxg{background:var(--ds-top-bar-button-background)}
 ._14mj1kw7:after{border-radius:inherit}
-._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
 ._v5649dqc{transition:background .1s ease-out}
 ._zulp12x7{gap:var(--ds-space-075,6px)}

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -85,7 +85,7 @@ var themedButtonSelectedBorder = exports.themedButtonSelectedBorder = '--ds-top-
 var themedButtonDisabledText = exports.themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
 var themedButtonDisabledBackground = exports.themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
 var styles = {
-  root: "_zulp12x7 _11c82smr _2rkosqtm _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
+  root: "_zulp12x7 _11c82smr _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"

package/dist/es2019/ui/menu-item/container-avatar.compiled.css

@@ -1,4 +1,4 @@
 
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._1bsbgktf{width:20px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._1bsbgktf{width:20px}
 ._4t3igktf{height:20px}
 ._vchhusvi{box-sizing:border-box}

package/dist/es2019/ui/menu-item/container-avatar.js

@@ -3,7 +3,7 @@ import "./container-avatar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 const styles = {
-  root: "_2rkoiti9 _vchhusvi _4t3igktf _1bsbgktf"
+  root: "_2rko12b0 _vchhusvi _4t3igktf _1bsbgktf"
 };
 /**
  * __Container avatar__

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;
+}