@atlaskit/navigation-system 11.2.0 → 11.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlassian/navigation-system
 
+## 11.2.2
+
+### Patch Changes
+
+- [`13952a4f4a1a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13952a4f4a1a0) -
+  Cleanup `feature_gate` `platform-dst-motion-uplift-button`. The motion uplift for buttons and
+  other interactive surfaces (button, lozenge dropdown trigger, inline edit read view, page layout
+  resize control grab area, and top nav themed anchors/pressables) is now always on.
+- Updated dependencies
+
+## 11.2.1
+
+### Patch Changes
+
+- [`6af127aa0b583`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6af127aa0b583) -
+  Consolidate the open-layer observer providers in `TopNavEnd`.
+
 ## 11.2.0
 
 ### Minor Changes

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

@@ -18,7 +18,7 @@ var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/sh
 var _openLayerObserverNamespaceProvider = require("@atlaskit/layering/open-layer-observer-namespace-provider");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _popup = require("@atlaskit/popup/popup");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _index = require("@atlaskit/primitives/compiled/responsive/index");
 var _list = require("../../../components/list");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
@@ -63,7 +63,7 @@ function TopNavEnd(_ref) {
     isMobile = _useState4[0],
     setIsMobile = _useState4[1];
   // Note: `query` is a stable value between renders
-  var query = (0, _compiled.UNSAFE_useMediaQuery)('below.sm', function onChange(event) {
+  var query = (0, _index.UNSAFE_useMediaQuery)('below.sm', function onChange(event) {
     setIsMobile(event.matches);
     // Any time we shift between mobile and desktop
     // We always close the popup
@@ -75,14 +75,24 @@ function TopNavEnd(_ref) {
     // Mobile will flip from `false` to `true`.
     setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
   }, [query]);
-  return /*#__PURE__*/_react.default.createElement("nav", {
+
+  // The shared provider also covers the mobile overflow popup itself. Keep the
+  // previous content-only namespace coverage when the layout gate is disabled.
+  var actions = (0, _fg.fg)('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+    namespace: _constants.openLayerObserverTopNavEndNamespace
+  }, children);
+  var content = /*#__PURE__*/_react.default.createElement("nav", {
     "aria-label": label,
     className: (0, _runtime.ax)([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.Popup, {
     isOpen: isOpen,
     onClose: function onClose() {
       return setIsOpen(false);
-    },
+    }
+    // Top-layer popups need a role to register as a popup with the layer observer.
+    ,
+    role: (0, _fg.fg)('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
+    label: (0, _fg.fg)('platform-dst-chat-panel-layout') ? label : undefined,
     placement: "bottom-start",
     shouldRenderToParent: true,
     content: function content() {
@@ -90,9 +100,7 @@ function TopNavEnd(_ref) {
         value: false
       }, /*#__PURE__*/_react.default.createElement(_list.List, {
         xcss: (0, _react2.cx)(listStyles.root, listStyles.popupContainer)
-      }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
-        namespace: _constants.openLayerObserverTopNavEndNamespace
-      }, children)));
+      }, actions));
     },
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, (0, _extends2.default)({}, triggerProps, {
@@ -107,9 +115,8 @@ function TopNavEnd(_ref) {
     }
   }) : /*#__PURE__*/_react.default.createElement(_list.List, {
     xcss: (0, _react2.cx)(listStyles.root, listStyles.hideOnSmallViewport)
-  }, /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
-    namespace: _constants.openLayerObserverTopNavEndNamespace
-  }, children)), hasPersistentItems && /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
+  }, actions), hasPersistentItems && persistentItems);
+  return (0, _fg.fg)('platform-dst-chat-panel-layout') ? /*#__PURE__*/_react.default.createElement(_openLayerObserverNamespaceProvider.OpenLayerObserverNamespaceProvider, {
     namespace: _constants.openLayerObserverTopNavEndNamespace
-  }, persistentItems));
+  }, content) : content;
 }

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

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -13,13 +13,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@compiled/react");
 var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _getPrimitivesSpreadProps = require("./get-primitives-spread-props");
 var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
 var styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -60,7 +58,7 @@ function ThemedAnchorFn(_ref, ref) {
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, (0, _fg.fg)('platform-dst-motion-uplift-button') && styles.interactiveMotion)
+    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
 }
 

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

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -13,14 +13,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _getPrimitivesSpreadProps = require("./get-primitives-spread-props");
 var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -58,7 +56,7 @@ var ThemedPressable = exports.ThemedPressable = /*#__PURE__*/(0, _react.forwardR
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, (0, _fg.fg)('platform-dst-motion-uplift-button') && styles.interactiveMotion),
+    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
     isDisabled: isDisabled
   }));
 });

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

@@ -9,7 +9,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
 import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
@@ -58,21 +58,29 @@ export function TopNavEnd({
     // Mobile will flip from `false` to `true`.
     setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
   }, [query]);
-  return /*#__PURE__*/React.createElement("nav", {
+
+  // The shared provider also covers the mobile overflow popup itself. Keep the
+  // previous content-only namespace coverage when the layout gate is disabled.
+  const actions = fg('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, children);
+  const content = /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
     className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
-    onClose: () => setIsOpen(false),
+    onClose: () => setIsOpen(false)
+    // Top-layer popups need a role to register as a popup with the layer observer.
+    ,
+    role: fg('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
+    label: fg('platform-dst-chat-panel-layout') ? label : undefined,
     placement: "bottom-start",
     shouldRenderToParent: true,
     content: () => /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
       value: false
     }, /*#__PURE__*/React.createElement(List, {
       xcss: cx(listStyles.root, listStyles.popupContainer)
-    }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-      namespace: openLayerObserverTopNavEndNamespace
-    }, children))),
+    }, actions)),
     trigger: triggerProps => /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
       label: showMoreButtonLabel,
       isSelected: isOpen,
@@ -82,9 +90,8 @@ export function TopNavEnd({
     }))
   }) : /*#__PURE__*/React.createElement(List, {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavEndNamespace
-  }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  }, actions), hasPersistentItems && persistentItems);
+  return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
-  }, persistentItems));
+  }, content) : content;
 }

package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -5,12 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@compiled/react';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 const styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -50,7 +48,7 @@ function ThemedAnchorFn({
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion)
+    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
 }
 

package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -4,12 +4,10 @@ import "./themed-pressable.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 const styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -46,7 +44,7 @@ export const ThemedPressable = /*#__PURE__*/forwardRef(({
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion),
+    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
     isDisabled: isDisabled
   }));
 });

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

@@ -10,7 +10,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/open-layer-observer-namespace-provider';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
-import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
+import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/responsive/index';
 import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
@@ -66,14 +66,24 @@ export function TopNavEnd(_ref) {
     // Mobile will flip from `false` to `true`.
     setIsMobile((_query$matches = query === null || query === void 0 ? void 0 : query.matches) !== null && _query$matches !== void 0 ? _query$matches : false);
   }, [query]);
-  return /*#__PURE__*/React.createElement("nav", {
+
+  // The shared provider also covers the mobile overflow popup itself. Keep the
+  // previous content-only namespace coverage when the layout gate is disabled.
+  var actions = fg('platform-dst-chat-panel-layout') ? children : /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+    namespace: openLayerObserverTopNavEndNamespace
+  }, children);
+  var content = /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
     className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: function onClose() {
       return setIsOpen(false);
-    },
+    }
+    // Top-layer popups need a role to register as a popup with the layer observer.
+    ,
+    role: fg('platform-dst-chat-panel-layout') ? 'dialog' : undefined,
+    label: fg('platform-dst-chat-panel-layout') ? label : undefined,
     placement: "bottom-start",
     shouldRenderToParent: true,
     content: function content() {
@@ -81,9 +91,7 @@ export function TopNavEnd(_ref) {
         value: false
       }, /*#__PURE__*/React.createElement(List, {
         xcss: cx(listStyles.root, listStyles.popupContainer)
-      }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-        namespace: openLayerObserverTopNavEndNamespace
-      }, children)));
+      }, actions));
     },
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
@@ -98,9 +106,8 @@ export function TopNavEnd(_ref) {
     }
   }) : /*#__PURE__*/React.createElement(List, {
     xcss: cx(listStyles.root, listStyles.hideOnSmallViewport)
-  }, /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
-    namespace: openLayerObserverTopNavEndNamespace
-  }, children)), hasPersistentItems && /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
+  }, actions), hasPersistentItems && persistentItems);
+  return fg('platform-dst-chat-panel-layout') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
     namespace: openLayerObserverTopNavEndNamespace
-  }, persistentItems));
+  }, content) : content;
 }

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

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -7,12 +7,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@compiled/react';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Anchor } from '@atlaskit/primitives/compiled';
 import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 var styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -53,7 +51,7 @@ function ThemedAnchorFn(_ref, ref) {
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion)
+    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
   }));
 }
 

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

@@ -6,7 +6,6 @@
 ._14mj1kw7:after{border-radius:inherit}
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._9v7aze3t:after{inset:var(--ds-space-0,0)}
-._v5649dqc{transition:background .1s ease-out}
 ._v564k6bl{transition:var(--ds-button-hovered,background-color border-color .15s cubic-bezier(.4,1,.6,1))}
 ._zulp12x7{gap:var(--ds-space-075,6px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}

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

@@ -6,12 +6,10 @@ import "./themed-pressable.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
 var styles = {
-  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  interactiveMotion: "_v564k6bl _1ggl5xtf",
+  root: "_zulp12x7 _11c8fhey _2rko1qi0 _v564k6bl _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1ggl5xtf",
   border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
   selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
   disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -49,7 +47,7 @@ export var ThemedPressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // @ts-expect-error
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion),
+    xcss: cx(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
     isDisabled: isDisabled
   }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "11.2.0",
+	"version": "11.2.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"license": "Apache-2.0",
@@ -57,8 +57,8 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.5.0",
-		"@atlaskit/app-provider": "^8.0.0",
+		"@atlaskit/analytics-next": "^12.6.0",
+		"@atlaskit/app-provider": "^8.1.0",
 		"@atlaskit/avatar": "^30.0.0",
 		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/css": "^1.1.0",
@@ -74,7 +74,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.5.0",
-		"@atlaskit/tokens": "^20.3.0",
+		"@atlaskit/tokens": "^20.4.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -96,7 +96,7 @@
 		"@atlaskit/breadcrumbs": "^17.8.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
 		"@atlaskit/flag": "^19.0.0",
-		"@atlaskit/form": "^18.1.0",
+		"@atlaskit/form": "^18.2.0",
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/image": "^5.2.0",
 		"@atlaskit/inline-dialog": "^20.3.0",
@@ -164,10 +164,6 @@
 		"platform-dst-motion-uplift-sidenav": {
 			"type": "boolean"
 		},
-		"platform-dst-motion-uplift-button": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform-dst-motion-uplift-panel": {
 			"type": "boolean",
 			"referenceOnly": true