@atlaskit/navigation-system 2.0.0 → 2.1.1

package/dist/es2019/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/es2019/ui/top-nav-items/nav-logo/custom-logo.js

@@ -9,8 +9,8 @@ import { Anchor } from '@atlaskit/primitives';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 const 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/es2019/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/es2019/ui/top-nav-items/search.js

@@ -6,7 +6,7 @@ import SearchIcon from '@atlaskit/icon/core/search';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { IconButton } from './themed/migration';
 const 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/es2019/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/es2019/ui/top-nav-items/themed/button.js

@@ -70,7 +70,7 @@ export const themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
 export const themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
 export const themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
 const 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/esm/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/esm/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";
 var styles = {
-  root: "_2rkoiti9 _vchhusvi _4t3igktf _1bsbgktf"
+  root: "_2rko12b0 _vchhusvi _4t3igktf _1bsbgktf"
 };
 /**
  * __Container avatar__

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/esm/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/esm/ui/top-nav-items/nav-logo/custom-logo.js

@@ -9,8 +9,8 @@ import { Anchor } from '@atlaskit/primitives';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 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/esm/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/esm/ui/top-nav-items/search.js

@@ -6,7 +6,7 @@ import SearchIcon from '@atlaskit/icon/core/search';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { IconButton } from './themed/migration';
 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/esm/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/esm/ui/top-nav-items/themed/button.js

@@ -77,7 +77,7 @@ export var themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
 export var themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
 export var 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/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;