@atlaskit/navigation-system 0.169.0 → 0.170.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlassian/navigation-system
 
+## 0.170.0
+
+### Minor Changes
+
+- [#179366](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179366)
+  [`c1cd1f32a9703`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1cd1f32a9703) -
+  Adds experimental containment to the `Main` slot behind the
+  `platform_dst_nav4_layering_in_main_slot_fixes` feature gate. When enabled, popups inside of
+  `Main` will automatically stay inside of the slot. This avoids popups from escaping the slot and
+  being hidden behind other slots.
+- [#173274](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173274)
+  [`e01dc06c9f06e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e01dc06c9f06e) -
+  Cleans up `platform_design_system_nav4_preview_panel_support` feature gate. Panel max width is now
+  constrained to half of the content area.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.169.1
+
+### Patch Changes
+
+- [#182936](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182936)
+  [`e51987d54c75f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e51987d54c75f) -
+  Allow aria-haspopup to be set on Search component.
+
 ## 0.169.0
 
 ### Minor Changes

package/dist/cjs/ui/page-layout/main/main.compiled.css

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._njlp1t7j{contain:paint}
 @media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}

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

@@ -18,7 +18,8 @@ var _mainStickyContext = require("./main-sticky-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var mainElementStyles = {
   root: "_nd5l1gzg _19121cl4 _qwfh1wug",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8"
+  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  containPaint: "_njlp1t7j"
 };
 
 /**
@@ -40,7 +41,7 @@ function Main(_ref) {
   return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, xcss]),
+    className: (0, _runtime.ax)([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, (0, _platformFeatureFlags.fg)('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
     role: "main",
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(_mainStickyContext.MainStickyContext.Provider, {

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

@@ -26,33 +26,6 @@ var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var panelSplitterResizingVar = '--n_pnlRsz';
 
-/**
- * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
- *
- * Jira sets the slot's width to `0px` when there is no active content to display in it.
- *   - This means the min width needs to support `0px`.
- * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
- * implementation, which has a maximum width of `50vw`.
- *   - This means the max width needs to support `50vw`.
- *
- * This is not the final implementation and will be updated once Jira's usage has been fixed.
- * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
- *
- * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
- * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
- */
-var oldPanelWidthSlotBounds = {
-  min: '0px',
-  max: '50vw'
-};
-var oldPanelWidthResizeBounds = {
-  min: '120px',
-  max: '50vw'
-};
-function getOldResizeBounds() {
-  return oldPanelWidthResizeBounds;
-}
-
 /**
  * We typically use the `defaultWidth` as the minimum resizing width,
  * but for large default widths we fallback to a standard value.
@@ -135,7 +108,14 @@ function Panel(_ref) {
    * We only use the `defaultWidth` up to a point to avoid huge panels.
    */
   var minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);
-  var getNewResizeBounds = (0, _react.useCallback)(function () {
+
+  /**
+   * Returns the bounds for resizing, evaluated lazily when needed.
+   *
+   * Defined separately to the slot bounds because the resizing bounds need to be resolvable to a pixel value,
+   * and the panel's slot bounds use a complex CSS expression.
+   */
+  var getResizeBounds = (0, _react.useCallback)(function () {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
@@ -149,11 +129,11 @@ function Panel(_ref) {
       max: "".concat(maxWidth, "px")
     };
   }, [minWidth, sideNavRef]);
-  var panelWidthSlotBounds = (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? {
+  var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
     max: "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
-  } : oldPanelWidthSlotBounds;
+  };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
     isEnabled: dangerouslyHoistSlotSizes && (0, _platformFeatureFlags.fg)('platform_design_system_nav4_live_resizing_css_vars'),
@@ -185,7 +165,7 @@ function Panel(_ref) {
     panelRef: ref,
     panelWidth: width,
     onCompleteResize: setWidth,
-    getResizeBounds: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? getNewResizeBounds : getOldResizeBounds,
+    getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -523,7 +523,7 @@ function SideNavInternal(_ref) {
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({
-    isEnabled: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support'),
+    isEnabled: true,
     cssVar: panelSplitterResizingVar,
     panelId: _constants.sideNavPanelSplitterId
   });
@@ -533,19 +533,15 @@ function SideNavInternal(_ref) {
     "data-layout-slot": true,
     "aria-label": label,
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
-    ref: (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ? mergedRef : navRef,
+    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])
-  }), (0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') &&
-  /*#__PURE__*/
-  // This CSS var is used by the `Panel` slot to enforce its maximum width constraint.
-  // When we remove the UNSAFE legacy usage, we can change this to `HoistCssVarToLocalGrid`
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: _responsive.media.above.md,
     responsiveValue: isExpandedOnDesktop ? "var(".concat(panelSplitterResizingVar, ", ").concat(clampedWidth, ")") : 0
-  }), dangerouslyHoistSlotSizes && ((0, _platformFeatureFlags.fg)('platform_design_system_nav4_preview_panel_support') ?
+  }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
@@ -553,14 +549,9 @@ function SideNavInternal(_ref) {
   React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_sideNavLayoutVar,
     value: "var(".concat(_constants.sideNavLiveWidthVar, ")")
-  }) : /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
-    variableName: _constants.UNSAFE_sideNavLayoutVar,
-    value: "0px",
-    mediaQuery: _responsive.media.above.md,
-    responsiveValue: isExpandedOnDesktop ? clampedWidth : 0
   })
   // ------ END UNSAFE STYLES ------
-  ), /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
+  , /*#__PURE__*/React.createElement(_provider.PanelSplitterProvider, {
     panelId: _constants.sideNavPanelSplitterId,
     panelRef: navRef,
     panelWidth: width,

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

@@ -32,7 +32,8 @@ var Search = exports.Search = function Search(_ref) {
     _ref$iconBefore = _ref.iconBefore,
     IconBefore = _ref$iconBefore === void 0 ? _search.default : _ref$iconBefore,
     elemAfter = _ref.elemAfter,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaHaspopup = _ref['aria-haspopup'];
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -43,7 +44,8 @@ var Search = exports.Search = function Search(_ref) {
     },
     onClick: onClick,
     xcss: styles.root,
-    interactionName: interactionName
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)([styles.iconBefore])
   }, /*#__PURE__*/_react.default.createElement(IconBefore, {
@@ -63,6 +65,7 @@ var Search = exports.Search = function Search(_ref) {
     appearance: "subtle",
     icon: _search.default,
     onClick: onClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
   })));
 };

package/dist/es2019/ui/page-layout/main/main.compiled.css

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._njlp1t7j{contain:paint}
 @media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}

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

@@ -10,7 +10,8 @@ import { useLayoutId } from '../id-utils';
 import { MainStickyContext } from './main-sticky-context';
 const mainElementStyles = {
   root: "_nd5l1gzg _19121cl4 _qwfh1wug",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8"
+  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  containPaint: "_njlp1t7j"
 };
 
 /**
@@ -32,7 +33,7 @@ export function Main({
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, xcss]),
+    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, fg('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
     role: "main",
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(MainStickyContext.Provider, {

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

@@ -15,33 +15,6 @@ import { useSideNavRef } from './side-nav/element-context';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
 const panelSplitterResizingVar = '--n_pnlRsz';
 
-/**
- * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
- *
- * Jira sets the slot's width to `0px` when there is no active content to display in it.
- *   - This means the min width needs to support `0px`.
- * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
- * implementation, which has a maximum width of `50vw`.
- *   - This means the max width needs to support `50vw`.
- *
- * This is not the final implementation and will be updated once Jira's usage has been fixed.
- * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
- *
- * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
- * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
- */
-const oldPanelWidthSlotBounds = {
-  min: '0px',
-  max: '50vw'
-};
-const oldPanelWidthResizeBounds = {
-  min: '120px',
-  max: '50vw'
-};
-function getOldResizeBounds() {
-  return oldPanelWidthResizeBounds;
-}
-
 /**
  * We typically use the `defaultWidth` as the minimum resizing width,
  * but for large default widths we fallback to a standard value.
@@ -118,7 +91,14 @@ export function Panel({
    * We only use the `defaultWidth` up to a point to avoid huge panels.
    */
   const minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);
-  const getNewResizeBounds = useCallback(() => {
+
+  /**
+   * Returns the bounds for resizing, evaluated lazily when needed.
+   *
+   * Defined separately to the slot bounds because the resizing bounds need to be resolvable to a pixel value,
+   * and the panel's slot bounds use a complex CSS expression.
+   */
+  const getResizeBounds = useCallback(() => {
     var _sideNavRef$current$o, _sideNavRef$current;
     const sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
@@ -132,11 +112,11 @@ export function Panel({
       max: `${maxWidth}px`
     };
   }, [minWidth, sideNavRef]);
-  const panelWidthSlotBounds = fg('platform_design_system_nav4_preview_panel_support') ? {
+  const panelWidthSlotBounds = {
     min: `${minWidth}px`,
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
     max: `round(nearest, calc((100vw - var(${sideNavLiveWidthVar}, 0px)) / 2), 1px)`
-  } : oldPanelWidthSlotBounds;
+  };
   const panelVariableWidth = `clamp(${panelWidthSlotBounds.min}, ${width}px, ${panelWidthSlotBounds.max})`;
   useResizingWidthCssVarOnRootElement({
     isEnabled: dangerouslyHoistSlotSizes && fg('platform_design_system_nav4_live_resizing_css_vars'),
@@ -172,7 +152,7 @@ export function Panel({
     panelRef: ref,
     panelWidth: width,
     onCompleteResize: setWidth,
-    getResizeBounds: fg('platform_design_system_nav4_preview_panel_support') ? getNewResizeBounds : getOldResizeBounds,
+    getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -512,7 +512,7 @@ function SideNavInternal({
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
   useResizingWidthCssVarOnRootElement({
-    isEnabled: fg('platform_design_system_nav4_preview_panel_support'),
+    isEnabled: true,
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
@@ -525,19 +525,15 @@ function SideNavInternal({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop
       [sideNavVar]: clampedWidth
     },
-    ref: fg('platform_design_system_nav4_preview_panel_support') ? mergedRef : navRef,
+    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])
-  }), fg('platform_design_system_nav4_preview_panel_support') &&
-  /*#__PURE__*/
-  // This CSS var is used by the `Panel` slot to enforce its maximum width constraint.
-  // When we remove the UNSAFE legacy usage, we can change this to `HoistCssVarToLocalGrid`
-  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: media.above.md,
     responsiveValue: isExpandedOnDesktop ? `var(${panelSplitterResizingVar}, ${clampedWidth})` : 0
-  }), dangerouslyHoistSlotSizes && (fg('platform_design_system_nav4_preview_panel_support') ?
+  }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
@@ -545,14 +541,9 @@ function SideNavInternal({
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_sideNavLayoutVar,
     value: `var(${sideNavLiveWidthVar})`
-  }) : /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
-    variableName: UNSAFE_sideNavLayoutVar,
-    value: "0px",
-    mediaQuery: media.above.md,
-    responsiveValue: isExpandedOnDesktop ? clampedWidth : 0
   })
   // ------ END UNSAFE STYLES ------
-  ), /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+  , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
     panelWidth: width,

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

@@ -22,7 +22,8 @@ export const Search = ({
   onClick,
   iconBefore: IconBefore = SearchIcon,
   elemAfter,
-  interactionName
+  interactionName,
+  'aria-haspopup': ariaHaspopup
 }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
   style: {
     // To win the specificity war against Emotion we move this into inline styles
@@ -33,7 +34,8 @@ export const Search = ({
   },
   onClick: onClick,
   xcss: styles.root,
-  interactionName: interactionName
+  interactionName: interactionName,
+  "aria-haspopup": ariaHaspopup
 }, /*#__PURE__*/React.createElement("span", {
   className: ax([styles.iconBefore])
 }, /*#__PURE__*/React.createElement(IconBefore, {
@@ -53,5 +55,6 @@ export const Search = ({
   appearance: "subtle",
   icon: SearchIcon,
   onClick: onClick,
-  interactionName: interactionName
+  interactionName: interactionName,
+  "aria-haspopup": ariaHaspopup
 })));

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

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._njlp1t7j{contain:paint}
 @media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}

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

@@ -10,7 +10,8 @@ import { useLayoutId } from '../id-utils';
 import { MainStickyContext } from './main-sticky-context';
 var mainElementStyles = {
   root: "_nd5l1gzg _19121cl4 _qwfh1wug",
-  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8"
+  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  containPaint: "_njlp1t7j"
 };
 
 /**
@@ -32,7 +33,7 @@ export function Main(_ref) {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, xcss]),
+    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, fg('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint, xcss]),
     role: "main",
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(MainStickyContext.Provider, {

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

@@ -17,33 +17,6 @@ import { useSideNavRef } from './side-nav/element-context';
 import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
 var panelSplitterResizingVar = '--n_pnlRsz';
 
-/**
- * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
- *
- * Jira sets the slot's width to `0px` when there is no active content to display in it.
- *   - This means the min width needs to support `0px`.
- * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
- * implementation, which has a maximum width of `50vw`.
- *   - This means the max width needs to support `50vw`.
- *
- * This is not the final implementation and will be updated once Jira's usage has been fixed.
- * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
- *
- * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
- * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
- */
-var oldPanelWidthSlotBounds = {
-  min: '0px',
-  max: '50vw'
-};
-var oldPanelWidthResizeBounds = {
-  min: '120px',
-  max: '50vw'
-};
-function getOldResizeBounds() {
-  return oldPanelWidthResizeBounds;
-}
-
 /**
  * We typically use the `defaultWidth` as the minimum resizing width,
  * but for large default widths we fallback to a standard value.
@@ -126,7 +99,14 @@ export function Panel(_ref) {
    * We only use the `defaultWidth` up to a point to avoid huge panels.
    */
   var minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);
-  var getNewResizeBounds = useCallback(function () {
+
+  /**
+   * Returns the bounds for resizing, evaluated lazily when needed.
+   *
+   * Defined separately to the slot bounds because the resizing bounds need to be resolvable to a pixel value,
+   * and the panel's slot bounds use a complex CSS expression.
+   */
+  var getResizeBounds = useCallback(function () {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
@@ -140,11 +120,11 @@ export function Panel(_ref) {
       max: "".concat(maxWidth, "px")
     };
   }, [minWidth, sideNavRef]);
-  var panelWidthSlotBounds = fg('platform_design_system_nav4_preview_panel_support') ? {
+  var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
     max: "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
-  } : oldPanelWidthSlotBounds;
+  };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   useResizingWidthCssVarOnRootElement({
     isEnabled: dangerouslyHoistSlotSizes && fg('platform_design_system_nav4_live_resizing_css_vars'),
@@ -176,7 +156,7 @@ export function Panel(_ref) {
     panelRef: ref,
     panelWidth: width,
     onCompleteResize: setWidth,
-    getResizeBounds: fg('platform_design_system_nav4_preview_panel_support') ? getNewResizeBounds : getOldResizeBounds,
+    getResizeBounds: getResizeBounds,
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -514,7 +514,7 @@ function SideNavInternal(_ref) {
     devTimeOnlyAttributes['data-visible'] = visible.length ? visible.join(',') : 'false';
   }
   useResizingWidthCssVarOnRootElement({
-    isEnabled: fg('platform_design_system_nav4_preview_panel_support'),
+    isEnabled: true,
     cssVar: panelSplitterResizingVar,
     panelId: sideNavPanelSplitterId
   });
@@ -524,19 +524,15 @@ function SideNavInternal(_ref) {
     "data-layout-slot": true,
     "aria-label": label,
     style: _defineProperty({}, sideNavVar, clampedWidth),
-    ref: fg('platform_design_system_nav4_preview_panel_support') ? mergedRef : navRef,
+    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])
-  }), fg('platform_design_system_nav4_preview_panel_support') &&
-  /*#__PURE__*/
-  // This CSS var is used by the `Panel` slot to enforce its maximum width constraint.
-  // When we remove the UNSAFE legacy usage, we can change this to `HoistCssVarToLocalGrid`
-  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
     mediaQuery: media.above.md,
     responsiveValue: isExpandedOnDesktop ? "var(".concat(panelSplitterResizingVar, ", ").concat(clampedWidth, ")") : 0
-  }), dangerouslyHoistSlotSizes && (fg('platform_design_system_nav4_preview_panel_support') ?
+  }), dangerouslyHoistSlotSizes &&
   /*#__PURE__*/
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
@@ -544,14 +540,9 @@ function SideNavInternal(_ref) {
   React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: UNSAFE_sideNavLayoutVar,
     value: "var(".concat(sideNavLiveWidthVar, ")")
-  }) : /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
-    variableName: UNSAFE_sideNavLayoutVar,
-    value: "0px",
-    mediaQuery: media.above.md,
-    responsiveValue: isExpandedOnDesktop ? clampedWidth : 0
   })
   // ------ END UNSAFE STYLES ------
-  ), /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+  , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
     panelWidth: width,

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

@@ -23,7 +23,8 @@ export var Search = function Search(_ref) {
     _ref$iconBefore = _ref.iconBefore,
     IconBefore = _ref$iconBefore === void 0 ? SearchIcon : _ref$iconBefore,
     elemAfter = _ref.elemAfter,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaHaspopup = _ref['aria-haspopup'];
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -34,7 +35,8 @@ export var Search = function Search(_ref) {
     },
     onClick: onClick,
     xcss: styles.root,
-    interactionName: interactionName
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/React.createElement("span", {
     className: ax([styles.iconBefore])
   }, /*#__PURE__*/React.createElement(IconBefore, {
@@ -54,6 +56,7 @@ export var Search = function Search(_ref) {
     appearance: "subtle",
     icon: SearchIcon,
     onClick: onClick,
-    interactionName: interactionName
+    interactionName: interactionName,
+    "aria-haspopup": ariaHaspopup
   })));
 };

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

@@ -22,8 +22,8 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
      *
      * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      *
-     * When `platform_design_system_nav4_preview_panel_support` is enabled, it is used as the minimum resizing width.
-     * If the `defaultWidth` is greater then `400px` then `400px` will be used as the minimum resizing width instead.
+     * 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.
      */
     defaultWidth?: number;
     /**

package/dist/types/ui/top-nav-items/search.d.ts

@@ -9,7 +9,7 @@ import type { NewIconProps } from '@atlaskit/icon';
  *
  * The search element for the top navigation.
  */
-export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfter, interactionName, }: {
+export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfter, interactionName, "aria-haspopup": ariaHaspopup, }: {
     /**
      * Provide an accessible label, often used by screen readers.
      */
@@ -32,4 +32,5 @@ export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfte
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string | undefined;
+    'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
 }) => JSX.Element;

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

@@ -22,8 +22,8 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
      *
      * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
      *
-     * When `platform_design_system_nav4_preview_panel_support` is enabled, it is used as the minimum resizing width.
-     * If the `defaultWidth` is greater then `400px` then `400px` will be used as the minimum resizing width instead.
+     * 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.
      */
     defaultWidth?: number;
     /**

package/dist/types-ts4.5/ui/top-nav-items/search.d.ts

@@ -9,7 +9,7 @@ import type { NewIconProps } from '@atlaskit/icon';
  *
  * The search element for the top navigation.
  */
-export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfter, interactionName, }: {
+export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfter, interactionName, "aria-haspopup": ariaHaspopup, }: {
     /**
      * Provide an accessible label, often used by screen readers.
      */
@@ -32,4 +32,5 @@ export declare const Search: ({ label, onClick, iconBefore: IconBefore, elemAfte
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string | undefined;
+    'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
 }) => JSX.Element;