@atlaskit/navigation-system 2.8.0 → 2.10.0

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -1,4 +1,4 @@
-._12xsglyw:has(:focus-visible){--expandable-provided-elembefore-display:none}
+._12xsglyw:has(:focus-visible), ._p8btglyw:hover{--expandable-provided-elembefore-display:none}
 ._165n1bgi{--expandable-provided-elembefore-display:contents}
 ._165nglyw{--expandable-provided-elembefore-display:none}
 ._1e0c1xb2{display:var(--expandable-provided-elembefore-display)}
@@ -6,9 +6,7 @@
 ._1hl9glyw:has([aria-expanded=true][aria-haspopup=true]){--expandable-provided-elembefore-display:none}
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
-._b31z1txw:has(:focus-visible){--expandable-chevron-display:flex}
+._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
 ._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
-[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}
-._1vnl1txw:hover{--expandable-chevron-display:flex}
-._p8btglyw:hover{--expandable-provided-elembefore-display:none}
+[dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

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

@@ -1,4 +1,4 @@
-/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./expandable-menu-item-trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./expandable-menu-item.compiled.css";
 import * as React from 'react';

package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js

@@ -1,4 +1,4 @@
-/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./flyout-menu-item-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./flyout-menu-item-trigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/menu-item/link-menu-item.js

@@ -1,4 +1,4 @@
-/* link-menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* link-menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./link-menu-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/menu-item/menu-item.compiled.css

@@ -1,4 +1,3 @@
-
 ._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._1r04ze3t{inset:var(--ds-space-0,0)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
@@ -93,23 +92,19 @@
 ._yv0e7dup{grid-template-columns:minmax(0,auto) 1fr minmax(0,auto) minmax(0,auto)}
 ._yv0enbh3{grid-template-columns:subgrid}
 ._12s918uv:focus-within{overflow-y:initial}
-._1brr1txw:focus-within{--actions-on-hover-display:flex}
+._1brr1txw:focus-within, ._109x1txw:hover{--actions-on-hover-display:flex}
 ._1guo18uv:focus-within{overflow-x:initial}
-._1mfcglyw:focus-within{--elem-after-display:none}
-._91nl1wug:focus-within{--actions-on-hover-width:auto}
-._iy5o1b66:focus-within{--actions-on-hover-padding:var(--ds-space-050,4px)}
-._t7p8kb7n:focus-within{--actions-on-hover-opacity:1}._109x1txw:hover{--actions-on-hover-display:flex}
+._1mfcglyw:focus-within, ._1sjuglyw:hover{--elem-after-display:none}
+._91nl1wug:focus-within, ._ynyi1wug:hover{--actions-on-hover-width:auto}
+._iy5o1b66:focus-within, ._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
+._t7p8kb7n:focus-within, ._g4kikb7n:hover{--actions-on-hover-opacity:1}
 ._11om6b4r:hover{animation-name:k1xyysw3}
-._1sjuglyw:hover{--elem-after-display:none}
 ._1uy01amc:hover{animation-delay:.8s}
 ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._7psyru3m:hover{animation-duration:0s}
 ._bir2q7pw:hover{animation-fill-mode:forwards}
-._g4kikb7n:hover{--actions-on-hover-opacity:1}
 ._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
 ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
 ._irr3n7od:hover{background-color:unset}
-._v4o21b66:hover{--actions-on-hover-padding:var(--ds-space-050,4px)}
 ._x0kw1txw:hover{--drag-handle-display:flex}
-._ynyi1wug:hover{--actions-on-hover-width:auto}
 @keyframes k1xyysw3{to{cursor:grab}}

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

@@ -1,4 +1,4 @@
-/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

package/dist/esm/ui/menu-item/top-level-spacer.js

@@ -1,4 +1,4 @@
-/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./top-level-spacer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2zgxb{border-block-start:1px solid var(--ds-border,#091e4224)}
+._mqm2pp12{border-block-start:var(--_18x9sjc)}
 ._1bsb1osq{width:100%}

package/dist/esm/ui/menu-section/divider.js

@@ -1,4 +1,4 @@
-/* divider.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* divider.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./divider.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -19,6 +19,9 @@ export var Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: ax(["_h7alglyw _179rglyw _mqm2zgxb _1bsb1osq"])
+    className: ax(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    style: {
+      "--_18x9sjc": ix("1px solid ".concat("var(--ds-border, #091E4224)"))
+    }
   });
 };

package/dist/esm/ui/menu-section/menu-section-heading.js

@@ -1,4 +1,4 @@
-/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./menu-section-heading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* aside.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* aside.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./aside.compiled.css";

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

@@ -1,4 +1,4 @@
-/* banner.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* banner.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/page-layout/main/main-sticky-header.js

@@ -1,4 +1,4 @@
-/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./main-sticky-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* main.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./main.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -24,15 +24,12 @@
 ._syaz1kw7{color:inherit}
 ._u7coidpf{inset-block-end:0}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1cg4fnf5:focus-within{transition-duration:.2s}
-._1dr21ylx:focus-within{transition-property:color}
-._vp7gaqb7:focus-within{color:var(--ds-text-selected,#0c66e4)}
+._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
+._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
+._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._1gavfnf5:hover{transition-delay:.2s}
-._1s5z1ylx:hover{transition-property:color}
-._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
 ._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
-._le1bfnf5:hover{transition-duration:.2s}
 ._1gglglyw:active{transition:none}
 ._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
 @media (min-width:48rem){._181n1ule{display:block}}

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

@@ -1,4 +1,4 @@
-/* panel-splitter.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./panel-splitter.compiled.css";

package/dist/esm/ui/page-layout/panel.compiled.css

@@ -4,7 +4,6 @@
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18m91wug{overflow-y:auto}
-._1bsb1adv{width:min(90%,365px)}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
 ._1pbykb7n{z-index:1}

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

@@ -1,11 +1,10 @@
-/* panel.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* panel.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
 import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
@@ -17,6 +16,7 @@ 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';
+var fallbackDefaultWidth = 365;
 
 /**
  * We typically use the `defaultWidth` as the minimum resizing width,
@@ -26,14 +26,11 @@ var panelSplitterResizingVar = '--n_pnlRsz';
  */
 var fallbackResizeMinWidth = 400;
 var styles = {
-  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
+  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
   border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
-  hidden: "_1e0cglyw",
-  oldMobileWidth: "_1bsb1adv",
-  newMobileWidth: "_1bsb1dxx"
+  hidden: "_1e0cglyw"
 };
-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.
@@ -143,8 +140,8 @@ export function Panel(_ref) {
     id: id,
     "data-layout-slot": true,
     "aria-label": label,
-    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, fg('platform_design_system_nav4_panel_mobile_width_fix') ? styles.newMobileWidth : styles.oldMobileWidth, xcss]),
-    style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', fg('platform_design_system_nav4_panel_mobile_width_fix') ? "".concat(minWidth, "px") : undefined),
+    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
+    style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: ref
   }, dangerouslyHoistSlotSizes &&

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

@@ -1,4 +1,4 @@
-/* root.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* root.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./root.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
@@ -27,7 +27,9 @@ export function Root(_ref) {
     UNSAFE_dangerouslyHoistSlotSizes = _ref$UNSAFE_dangerous === void 0 ? false : _ref$UNSAFE_dangerous,
     _ref$skipLinksLabel = _ref.skipLinksLabel,
     skipLinksLabel = _ref$skipLinksLabel === void 0 ? 'Skip to:' : _ref$skipLinksLabel,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    _ref$defaultSideNavCo = _ref.defaultSideNavCollapsed,
+    defaultSideNavCollapsed = _ref$defaultSideNavCo === void 0 ? false : _ref$defaultSideNavCo;
   var ref = useRef(null);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production') {
@@ -42,7 +44,9 @@ export function Root(_ref) {
       }
     }
   }, []);
-  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, null, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
+  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
+    defaultCollapsed: defaultSideNavCollapsed
+  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
     value: UNSAFE_dangerouslyHoistSlotSizes
   }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
     label: skipLinksLabel,

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

@@ -1,4 +1,4 @@
-/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-content.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./side-nav-content.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./side-nav-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./side-nav-header.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* side-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* side-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -238,6 +238,11 @@ function SideNavInternal(_ref) {
     trigger: 'click-outside-on-mobile'
   });
   useEffect(function () {
+    if (fg('platform_dst_nav4_full_height_sidebar_api_changes')) {
+      // We are passing initial state to the Root now, so no initial sync is required
+      return;
+    }
+
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
     setSideNavState({

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

@@ -1,4 +1,4 @@
-/* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* toggle-button.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./toggle-button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -44,7 +44,10 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var _useState = useState(!defaultCollapsed),
+
+  // When `platform_dst_nav4_full_height_sidebar_api_changes` is enabled,
+  // we default to the desktop state for SSR
+  var _useState = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed),
     _useState2 = _slicedToArray(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];

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

@@ -1,14 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
 
 /**
  * Manages the side nav visibility state and provides the context.
  */
 export var SideNavVisibilityProvider = function SideNavVisibilityProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    defaultCollapsed = _ref.defaultCollapsed;
+  var initialState = fg('platform_dst_nav4_full_height_sidebar_api_changes') ? {
+    desktop: defaultCollapsed ? 'collapsed' : 'expanded',
+    mobile: 'collapsed',
+    flyout: 'closed',
+    lastTrigger: null
+  } : null;
+
   // Defaults to null so we can determine if the value has been set yet (for SSR)
-  var _useState = useState(null),
+  var _useState = useState(initialState),
     _useState2 = _slicedToArray(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -1,4 +1,4 @@
-/* top-nav-end.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-end.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-end.compiled.css";

package/dist/esm/ui/page-layout/top-nav/top-nav-middle.js

@@ -1,4 +1,4 @@
-/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-middle.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./top-nav-middle.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -1,4 +1,4 @@
-/* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav-start.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* top-nav.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["backgroundColor"];
 import "./top-nav.compiled.css";

package/dist/esm/ui/top-nav-items/custom-title.js

@@ -1,4 +1,4 @@
-/* custom-title.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-title.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./custom-title.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.js

@@ -1,4 +1,4 @@
-/* app-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./app-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';

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

@@ -1,4 +1,4 @@
-/* custom-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./custom-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';

package/dist/esm/ui/top-nav-items/nav-logo/logo-renderer.js

@@ -1,4 +1,4 @@
-/* logo-renderer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';

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

@@ -1,4 +1,4 @@
-/* search.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* search.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./search.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';

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

@@ -1,4 +1,3 @@
-
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11q71c9b{background:var(--ds-top-bar-button-disabled-background)}
 ._11q71qds{background:var(--ds-top-bar-button-selected-background)}
@@ -33,36 +32,27 @@
 ._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}
 ._syaz1r31{color:currentColor}
 ._syazw5ct{color:var(--ds-top-bar-button-selected-text)}
-._vwz4idpf{line-height:0}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
-._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
-._10531r31:visited{color:currentColor}
-._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
-._1a3b1r31:focus{text-decoration-color:currentColor}
-._4fprglyw:focus{text-decoration-line:none}
-._5goinqa1:focus{text-decoration-style:solid}
-._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
-._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
-._f8pj1r31:focus{color:currentColor}
-._f8pjw5ct:focus{color:var(--ds-top-bar-button-selected-text)}
+._vwz4idpf{line-height:0}
+._f8pj15o7:focus, ._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus, ._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus, ._10531r31:visited{color:currentColor}
+._f8pjw5ct:focus, ._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
 ._19lc1c9b:hover{background:var(--ds-top-bar-button-disabled-background)}
 ._19lc1rps:hover{background:var(--ds-top-bar-button-background-hovered)}
 ._19lcjrv1:hover{background:var(--ds-top-bar-button-selected-background-hovered)}
 ._19lcp6hf:hover{background:var(--ds-top-bar-button-primary-background-hovered)}
-._1bnxglyw:hover{text-decoration-line:none}
 ._30l315o7:hover{color:var(--ds-top-bar-button-primary-text)}
 ._30l31i3i:hover{color:var(--ds-top-bar-button-disabled-text)}
 ._30l31r31:hover{color:currentColor}
 ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
-._9oik1r31:hover{text-decoration-color:currentColor}
-._jf4cnqa1:hover{text-decoration-style:solid}
 ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
 ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
 ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
 ._j6xtqtgh:active{background:var(--ds-top-bar-button-background-pressed)}
-._1iohnqa1:active{text-decoration-style:solid}
-._1nrm1r31:active{text-decoration-color:currentColor}
+._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
+._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
 ._9h8h15o7:active{color:var(--ds-top-bar-button-primary-text)}
 ._9h8h1i3i:active{color:var(--ds-top-bar-button-disabled-text)}
 ._9h8h1r31:active{color:currentColor}
 ._9h8hw5ct:active{color:var(--ds-top-bar-button-selected-text)}
-._c2waglyw:active{text-decoration-line:none}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}

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

@@ -1,4 +1,4 @@
-/* button.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* button.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
+     * when the app is reloaded.
+     *
+     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -2,6 +2,7 @@ import React from 'react';
 /**
  * Manages the side nav visibility state and provides the context.
  */
-export declare const SideNavVisibilityProvider: ({ children }: {
+export declare const SideNavVisibilityProvider: ({ children, defaultCollapsed, }: {
     children: React.ReactNode;
+    defaultCollapsed: boolean;
 }) => React.JSX.Element;

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

@@ -9,7 +9,7 @@ export declare const gridRootId = "unsafe-design-system-page-layout-root";
  * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
  * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
  */
-export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, }: {
+export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, testId, defaultSideNavCollapsed, }: {
     /**
      * For rendering the layout areas, e.g. TopNav, SideNav, Main.
      * They should be rendered as immediate children.
@@ -35,4 +35,16 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether the side nav should be collapsed by default __on desktop screens__.
+     *
+     * It is always collapsed by default for mobile screens.
+     *
+     * This value is used when the side nav is first mounted, but you should continuously update your
+     * persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
+     * when the app is reloaded.
+     *
+     * __Note:__ This prop will only work when the `platform_dst_nav4_full_height_sidebar_api_changes` gate is enabled.
+     */
+    defaultSideNavCollapsed?: boolean;
 }): JSX.Element;

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

@@ -12,6 +12,13 @@ type SideNavProps = CommonSlotProps & {
      */
     label?: string;
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.

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

@@ -14,6 +14,13 @@ export type SideNavVisibilityChangeAnalyticsAttributes = {
  */
 export declare const SideNavToggleButton: ({ defaultCollapsed, expandLabel, collapseLabel, testId, interactionName, onClick, }: {
     /**
+     * @deprecated
+     *
+     * This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
+     * and will be removed after `platform_dst_nav4_full_height_sidebar_api_changes` is cleaned up.
+     *
+     * ---
+     *
      * Whether the side nav should be collapsed by default __on desktop screens__.
      *
      * It is always collapsed by default for mobile screens.