@atlaskit/navigation-system 2.12.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 2.13.0
+
+### Minor Changes
+
+- [`9d65ef412f30c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d65ef412f30c) -
+  Cleans up the `platform_design_system_nav4_sidenav_border` feature gate. The side nav border is
+  now only applied when it does not have a shadow.
+
+### Patch Changes
+
+- [`437668dfbdec9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/437668dfbdec9) -
+  Add explicit types to a number of DST components
+- Updated dependencies
+
 ## 2.12.0
 
 ### Minor Changes

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,7 +1,6 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._t51zglyw{border-inline-end:none}._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)}
 ._1bah1yb4{justify-content:space-between}
@@ -16,5 +15,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -51,11 +51,8 @@ function getResizeBounds() {
 }
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
-  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51z7r9e",
-  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
-  newBorderFlyoutOpen: "_p5clglyw",
-  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
@@ -583,7 +580,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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

@@ -132,16 +132,7 @@ var ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressab
     isDisabled: isDisabled
   }));
 });
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-var ThemedAnchor = (0, _forwardRefWithGeneric.default)(function ThemedAnchor(_ref3, ref) {
+function ThemedAnchorFn(_ref3, ref) {
   var _ref3$appearance = _ref3.appearance,
     appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
     _ref3$shape = _ref3.shape,
@@ -161,7 +152,17 @@ var ThemedAnchor = (0, _forwardRefWithGeneric.default)(function ThemedAnchor(_re
     ,
     xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
-});
+}
+/**
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
+ *
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
+ *
+ * Polymorphism had many typing issues and required sacrificing type safety.
+ *
+ * Render props had problems passing down styles through `xcss` to the `children` function.
+ */
+var ThemedAnchor = (0, _forwardRefWithGeneric.default)(ThemedAnchorFn);
 var textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -191,12 +192,7 @@ var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     className: (0, _runtime.ax)([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkButton(_ref5, ref) {
+function ThemedLinkButtonFn(_ref5, ref) {
   var IconBefore = _ref5.iconBefore,
     children = _ref5.children,
     props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
@@ -210,7 +206,13 @@ var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.def
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -283,12 +285,7 @@ var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwar
     );
   });
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkIconButton(_ref7, ref) {
+function ThemedLinkIconButtonFn(_ref7, ref) {
   var _tooltip$content2;
   var Icon = _ref7.icon,
     label = _ref7.label,
@@ -349,4 +346,11 @@ var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGen
       }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
     );
   });
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(ThemedLinkIconButtonFn);

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,7 +1,6 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._t51zglyw{border-inline-end:none}._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)}
 ._1bah1yb4{justify-content:space-between}
@@ -16,5 +15,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -38,11 +38,8 @@ function getResizeBounds() {
 }
 const openLayerObserverSideNavNamespace = 'side-nav';
 const styles = {
-  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51z7r9e",
-  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
-  newBorderFlyoutOpen: "_p5clglyw",
-  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
@@ -575,7 +572,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -116,16 +116,7 @@ const ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable({
     isDisabled: isDisabled
   }));
 });
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-const ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor({
+function ThemedAnchorFn({
   appearance = 'default',
   shape = 'default',
   isSelected,
@@ -144,7 +135,17 @@ const ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor({
     ,
     xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
-});
+}
+/**
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
+ *
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
+ *
+ * Polymorphism had many typing issues and required sacrificing type safety.
+ *
+ * Render props had problems passing down styles through `xcss` to the `children` function.
+ */
+const ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
 const textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -175,12 +176,7 @@ export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
     className: ax([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export const ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton({
+function ThemedLinkButtonFn({
   iconBefore: IconBefore,
   children,
   ...props
@@ -195,7 +191,13 @@ export const ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+export const ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -266,12 +268,7 @@ export const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButto
     color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export const ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconButton({
+function ThemedLinkIconButtonFn({
   icon: Icon,
   label,
   tooltip,
@@ -330,4 +327,11 @@ export const ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIco
     label: "",
     color: "currentColor"
   }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,7 +1,6 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._t51zglyw{border-inline-end:none}._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)}
 ._1bah1yb4{justify-content:space-between}
@@ -16,5 +15,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -42,11 +42,8 @@ function getResizeBounds() {
 }
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
-  root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51z7r9e",
-  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
-  newBorderFlyoutOpen: "_p5clglyw",
-  flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
+  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
+  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
@@ -574,7 +571,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, fg('platform_design_system_nav4_sidenav_border') ? styles.newBorder : styles.oldBorder, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('platform_design_system_nav4_sidenav_border') && styles.newBorderFlyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -124,16 +124,7 @@ var ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(_ref2, re
     isDisabled: isDisabled
   }));
 });
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-var ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor(_ref3, ref) {
+function ThemedAnchorFn(_ref3, ref) {
   var _ref3$appearance = _ref3.appearance,
     appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
     _ref3$shape = _ref3.shape,
@@ -153,7 +144,17 @@ var ThemedAnchor = forwardRefWithGeneric(function ThemedAnchor(_ref3, ref) {
     ,
     xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
-});
+}
+/**
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
+ *
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
+ *
+ * Polymorphism had many typing issues and required sacrificing type safety.
+ *
+ * Render props had problems passing down styles through `xcss` to the `children` function.
+ */
+var ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
 var textButtonStyles = {
   iconBefore: "_vwz4idpf",
   text: "_k48p1wq8"
@@ -183,12 +184,7 @@ export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref4, r
     className: ax([textButtonStyles.text])
   }, children));
 });
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export var ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(_ref5, ref) {
+function ThemedLinkButtonFn(_ref5, ref) {
   var IconBefore = _ref5.iconBefore,
     children = _ref5.children,
     props = _objectWithoutProperties(_ref5, _excluded5);
@@ -202,7 +198,13 @@ export var ThemedLinkButton = forwardRefWithGeneric(function ThemedLinkButton(_r
   })), /*#__PURE__*/React.createElement("span", {
     className: ax([textButtonStyles.text])
   }, children));
-});
+}
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+export var ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
 
 /**
  * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
@@ -275,12 +277,7 @@ export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(
     );
   });
 });
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export var ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconButton(_ref7, ref) {
+function ThemedLinkIconButtonFn(_ref7, ref) {
   var _tooltip$content2;
   var Icon = _ref7.icon,
     label = _ref7.label,
@@ -341,4 +338,11 @@ export var ThemedLinkIconButton = forwardRefWithGeneric(function ThemedLinkIconB
       }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))
     );
   });
-});
+}
+
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+export var ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

package/dist/types/ui/menu-item/link-menu-item.d.ts

@@ -19,20 +19,4 @@ export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = nev
  *
  * A menu item link. It should be used within a `ul`.
  */
-export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & RouterLinkComponentProps<RouterLinkConfig> & {
-    /**
-     * The native `target` attribute for the anchor element.
-     */
-    target?: HTMLAnchorElement["target"];
-    /**
-     * Whether the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLAnchorElement>;
-} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: LinkMenuItemProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/dist/types/ui/menu-item/menu-item.d.ts

@@ -4,7 +4,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import type { MenuItemOnClick } from './types';
+import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
 /**
  * This is being _internally_ exported so it can be used in other menu item wrapper components, like
  * ExpandableMenuItemTrigger.
@@ -20,28 +20,33 @@ import type { MenuItemOnClick } from './types';
  */
 export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
 /**
- * __MenuItemBase__
- *
- * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
  *
- * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
- * This can be inferred from the type of the `onClick` prop.
+ * We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
+ * expanded content for ExpandableMenuItem.
  */
-export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & {
+type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuItemLinkOrButtonCommonProps & {
     /**
      * ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
      * used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
      */
     id?: string;
     href?: string | Record<string, any>;
-    target?: HTMLAnchorElement["target"];
+    target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
     isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
-    ariaHasPopup?: boolean | "dialog";
-    onClick?: MenuItemOnClick<T> | undefined;
-} & React.RefAttributes<T>) => React.ReactElement | null;
+    ariaHasPopup?: boolean | 'dialog';
+    onClick?: MenuItemOnClick<T>;
+};
+/**
+ * __MenuItemBase__
+ *
+ * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: MenuItemBaseProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+export {};

package/dist/types/ui/menu-item/menu-list-item.d.ts

@@ -1,10 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ListItem } from '../../components/list-item';
 /**
  * __Menu list item__
  *
  * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
  */
-export declare const MenuListItem: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-    testId?: string;
-    xcss?: import("@atlaskit/css").StrictXCSSProp<"display" | "scrollMarginInline", never>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuListItem: typeof ListItem;

package/dist/types-ts4.5/ui/menu-item/link-menu-item.d.ts

@@ -19,20 +19,4 @@ export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = nev
  *
  * A menu item link. It should be used within a `ul`.
  */
-export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & RouterLinkComponentProps<RouterLinkConfig> & {
-    /**
-     * The native `target` attribute for the anchor element.
-     */
-    target?: HTMLAnchorElement["target"];
-    /**
-     * Whether the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLAnchorElement>;
-} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: LinkMenuItemProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/dist/types-ts4.5/ui/menu-item/menu-item.d.ts

@@ -4,7 +4,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import type { MenuItemOnClick } from './types';
+import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
 /**
  * This is being _internally_ exported so it can be used in other menu item wrapper components, like
  * ExpandableMenuItemTrigger.
@@ -20,28 +20,33 @@ import type { MenuItemOnClick } from './types';
  */
 export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
 /**
- * __MenuItemBase__
- *
- * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
  *
- * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
- * This can be inferred from the type of the `onClick` prop.
+ * We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
+ * expanded content for ExpandableMenuItem.
  */
-export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & {
+type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuItemLinkOrButtonCommonProps & {
     /**
      * ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
      * used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
      */
     id?: string;
     href?: string | Record<string, any>;
-    target?: HTMLAnchorElement["target"];
+    target?: HTMLAnchorElement['target'];
     isDisabled?: boolean;
     isSelected?: boolean;
     ariaControls?: string;
     ariaExpanded?: boolean;
-    ariaHasPopup?: boolean | "dialog";
-    onClick?: MenuItemOnClick<T> | undefined;
-} & React.RefAttributes<T>) => React.ReactElement | null;
+    ariaHasPopup?: boolean | 'dialog';
+    onClick?: MenuItemOnClick<T>;
+};
+/**
+ * __MenuItemBase__
+ *
+ * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
+ *
+ * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
+ * This can be inferred from the type of the `onClick` prop.
+ */
+export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: MenuItemBaseProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+export {};

package/dist/types-ts4.5/ui/menu-item/menu-list-item.d.ts

@@ -1,10 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { ListItem } from '../../components/list-item';
 /**
  * __Menu list item__
  *
  * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
  */
-export declare const MenuListItem: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-    testId?: string;
-    xcss?: import("@atlaskit/css").StrictXCSSProp<"display" | "scrollMarginInline", never>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuListItem: typeof ListItem;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.12.0",
+	"version": "2.13.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -73,7 +73,7 @@
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/layering": "^3.0.0",
-		"@atlaskit/logo": "^19.7.0",
+		"@atlaskit/logo": "^19.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -98,7 +98,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^3.2.0",
-		"@atlaskit/badge": "^18.1.0",
+		"@atlaskit/badge": "^18.2.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
@@ -113,7 +113,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/temp-nav-app-icons": "^0.10.0",
+		"@atlaskit/temp-nav-app-icons": "^0.12.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/gemini": "^1.20.0",
@@ -150,9 +150,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_design_system_nav4_sidenav_border": {
-			"type": "boolean"
-		},
 		"platform-team25-app-icon-tiles": {
 			"type": "boolean"
 		},