@atlaskit/navigation-system 7.2.1 → 8.0.0

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

@@ -18,13 +18,13 @@ var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sideb
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
-var _migration = require("../../top-nav-items/themed/migration");
-var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _iconButton = require("../../top-nav-items/themed/icon-button");
+var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
 var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
-var _toggleButtonContext = require("./toggle-button-context");
+var _sideNavVisibilityState = require("./side-nav-visibility-state");
+var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useSideNavVisibility2 = require("./use-side-nav-visibility");
 var _useToggleSideNav = require("./use-toggle-side-nav");
-var _visibilityContext = require("./visibility-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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -56,7 +56,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }),
     isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
     isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
-  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
 
   // When default state is provided to `Root` the state in context will already be
   // initialized in SSR
@@ -64,7 +64,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSideNavExpanded = _useState2[0],
     setIsSideNavExpanded = _useState2[1];
-  var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
+  var ref = (0, _react.useContext)(_sideNavToggleButtonAttachRef.SideNavToggleButtonAttachRef);
 
   /**
    * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
@@ -149,7 +149,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       className: (0, _runtime.ax)(["_1e0c1bgi _lcxvglyw"])
     }, isSideNavExpanded ? /*#__PURE__*/_react.default.createElement(_sidebarCollapse.default, props) : /*#__PURE__*/_react.default.createElement(_sidebarExpand.default, props));
   };
-  var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
+  var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
     if (isFhsEnabled) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
@@ -158,7 +158,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
     }
     return toggleButtonTooltipOptions;
   }, [isFhsEnabled, isShortcutEnabled]);
-  return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     appearance: "subtle",
     label: isSideNavExpanded ? collapseLabel : expandLabel,
     icon: icon,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useExpandSideNav = useExpandSideNav;
 var _react = require("react");
-var _visibilityContext = require("./visibility-context");
+var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
 /**
  * __useExpandSideNav__
  *
@@ -19,7 +19,7 @@ function useExpandSideNav() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
-  var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
+  var setSideNavState = (0, _react.useContext)(_setSideNavVisibilityState.SetSideNavVisibilityState);
   var expandSideNav = (0, _react.useCallback)(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
       matches = _window$matchMedia.matches;

package/dist/cjs/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsSideNavShortcutEnabled = useIsSideNavShortcutEnabled;
+var _react = require("react");
+var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+function useIsSideNavShortcutEnabled() {
+  return (0, _react.useContext)(_isSideNavShortcutEnabledContext.IsSideNavShortcutEnabledContext);
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSideNavRef = useSideNavRef;
+var _react = require("react");
+var _sideNavRefContext = require("./side-nav-ref-context");
+/**
+ * Returns a ref for the side navigation that is accessible to other Page Layout slots.
+ *
+ * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
+ */
+function useSideNavRef() {
+  return (0, _react.useContext)(_sideNavRefContext.SideNavRefContext);
+}

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -10,7 +10,7 @@ var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
-var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
+var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
 /**
  * Binds the keyboard shortcut to toggle the side nav.
@@ -23,7 +23,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
     trigger: 'keyboard'
   });
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
-  var isSideNavShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
+  var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
     if (!isFhsEnabled) {
       return;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSideNavVisibility = void 0;
 var _react = require("react");
-var _visibilityContext = require("./visibility-context");
+var _sideNavVisibilityState = require("./side-nav-visibility-state");
 /**
  * This hook is intended to be used internally within the `@atlaskit/navigation-system` package.
  *
@@ -17,7 +17,7 @@ var useSideNavVisibility = exports.useSideNavVisibility = function useSideNavVis
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$defaultCollapsed = _ref.defaultCollapsed,
     defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed;
-  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
 
   // If the context value is `null`, it means we are still in SSR, and should use the default values.
   // For desktop, it comes from the `defaultCollapsed` prop, and for mobile, it is always `false`.

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useToggleSideNav = useToggleSideNav;
 var _react = require("react");
-var _visibilityContext = require("./visibility-context");
+var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
 /**
  * __useToggleSideNav__
  *
@@ -19,7 +19,7 @@ function useToggleSideNav() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? 'programmatic' : _ref$trigger;
-  var setSideNavState = (0, _react.useContext)(_visibilityContext.SetSideNavVisibilityState);
+  var setSideNavState = (0, _react.useContext)(_setSideNavVisibilityState.SetSideNavVisibilityState);
   var toggleSideNav = (0, _react.useCallback)(function () {
     var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
       matches = _window$matchMedia.matches;

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

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideNavVisibilityProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _visibilityContext = require("./visibility-context");
+var _setSideNavVisibilityState = require("./set-side-nav-visibility-state");
+var _sideNavVisibilityState = require("./side-nav-visibility-state");
 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); }
 /**
  * Manages the side nav visibility state and provides the context.
@@ -28,9 +29,9 @@ var SideNavVisibilityProvider = exports.SideNavVisibilityProvider = function Sid
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     sideNavState = _useState2[0],
     setSideNavState = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_visibilityContext.SideNavVisibilityState.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_sideNavVisibilityState.SideNavVisibilityState.Provider, {
     value: sideNavState
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContext.SetSideNavVisibilityState.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_setSideNavVisibilityState.SetSideNavVisibilityState.Provider, {
     value: setSideNavState
   }, children));
 };

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

@@ -21,7 +21,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 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");
-var _migration = require("../../top-nav-items/themed/migration");
+var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _constants = require("../constants");
 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 containerStyles = {
@@ -91,7 +91,7 @@ function TopNavEnd(_ref) {
       }, children)));
     },
     trigger: function trigger(triggerProps) {
-      return /*#__PURE__*/_react.default.createElement(_migration.IconButton, (0, _extends2.default)({}, triggerProps, {
+      return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, (0, _extends2.default)({}, triggerProps, {
         label: showMoreButtonLabel,
         isSelected: isOpen,
         onClick: function onClick() {

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

@@ -15,13 +15,13 @@ var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
+var _topNavStartAttachRef = require("../../../context/top-nav-start/top-nav-start-attach-ref");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
 var _constants = require("../constants");
+var _sideNavVisibilityState = require("../side-nav/side-nav-visibility-state");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
-var _visibilityContext = require("../side-nav/visibility-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); }
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.
@@ -124,7 +124,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
       defaultCollapsed: true
     }),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
-  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
   var isFirstRenderRef = (0, _react.useRef)(true);
   (0, _react.useEffect)(function () {
     // Ignore renders until the side nav state is initialized
@@ -160,7 +160,7 @@ function TopNavStart(_ref3) {
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
+  var ref = (0, _react.useContext)(_topNavStartAttachRef.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);
 
   // FIXME: unsafe pattern with Suspense, should use callback ref / store in state
@@ -204,7 +204,7 @@ function TopNavStart(_ref3) {
 
   // Used to prevent the reorder animations from running on the initial render.
   var isFirstRenderRef = (0, _react.useRef)(true);
-  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);
+  var sideNavState = (0, _react.useContext)(_sideNavVisibilityState.SideNavVisibilityState);
   (0, _react.useEffect)(function () {
     if (!isFhsEnabled) {
       return;

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

@@ -12,16 +12,18 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _skipLinksContext = require("../../../context/skip-links/skip-links-context");
+var _useSkipLink = require("../../../context/skip-links/use-skip-link");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _hasCustomThemeContext = require("../../top-nav-items/themed/has-custom-theme-context");
 var _hasDefaultBackgroundColorContext = require("../../top-nav-items/themed/has-default-background-color-context");
 var _useCustomTheme = require("../../top-nav-items/themed/use-custom-theme");
+var _useCustomThemeNew = require("../../top-nav-items/themed/use-custom-theme-new");
 var _constants = require("../constants");
+var _dangerouslyHoistCssVarToDocumentRoot = require("../dangerously-hoist-css-var-to-document-root");
+var _hoistCssVarToLocalGrid = require("../hoist-css-var-to-local-grid");
 var _hoistSlotSizesContext = require("../hoist-slot-sizes-context");
-var _hoistUtils = require("../hoist-utils");
-var _idUtils = require("../id-utils");
 var _useSideNavVisibility3 = require("../side-nav/use-side-nav-visibility");
+var _useLayoutId = require("../use-layout-id");
 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); }
 /**
  * Styles for the container for the top nav items.
@@ -48,16 +50,16 @@ function TopNavOld(_ref) {
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id,
-    UNSAFE_theme = _ref.UNSAFE_theme;
+    customThemeConfig = _ref.customTheme;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  var customTheme = (0, _useCustomTheme.useCustomTheme)(UNSAFE_theme);
+  var customTheme = (0, _useCustomTheme.useCustomTheme)(customThemeConfig);
   var _useSideNavVisibility = (0, _useSideNavVisibility3.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(_hasCustomThemeContext.HasCustomThemeContext.Provider, {
@@ -70,7 +72,7 @@ function TopNavOld(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: customTheme.isEnabled ? customTheme.style : undefined
-  }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
+  }, /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.HoistCssVarToLocalGrid, {
     variableName: _constants.topNavMountedVar,
     value: height
   }), dangerouslyHoistSlotSizes &&
@@ -78,7 +80,7 @@ function TopNavOld(_ref) {
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
   // When they aren't needed anymore we can delete them wholesale.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_topNavVar,
     value: height
   })
@@ -97,16 +99,16 @@ function TopNavNew(_ref2) {
     skipLinkLabel = _ref2$skipLinkLabel === void 0 ? 'Top Bar' : _ref2$skipLinkLabel,
     testId = _ref2.testId,
     providedId = _ref2.id,
-    UNSAFE_theme = _ref2.UNSAFE_theme;
+    customThemeConfig = _ref2.customTheme;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
-  var id = (0, _idUtils.useLayoutId)({
+  var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
+  (0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
   var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  var customTheme = (0, _useCustomTheme.useCustomThemeNew)(UNSAFE_theme);
+  var customTheme = (0, _useCustomThemeNew.useCustomThemeNew)(customThemeConfig);
   var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)(),
     isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
@@ -122,7 +124,7 @@ function TopNavNew(_ref2) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: customTheme.isEnabled ? customTheme.style : undefined
-  }, /*#__PURE__*/React.createElement(_hoistUtils.HoistCssVarToLocalGrid, {
+  }, /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.HoistCssVarToLocalGrid, {
     variableName: _constants.topNavMountedVar,
     value: height
   }), dangerouslyHoistSlotSizes &&
@@ -130,7 +132,7 @@ function TopNavNew(_ref2) {
   // ------ START UNSAFE STYLES ------
   // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
   // When they aren't needed anymore we can delete them wholesale.
-  React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
+  React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.UNSAFE_topNavVar,
     value: height
   })

package/dist/cjs/ui/page-layout/{id-utils.js → use-layout-id.js}

@@ -4,19 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLayoutId = useLayoutId;
-exports.useSkipLinkId = useSkipLinkId;
-var _useId = require("@atlaskit/ds-lib/use-id");
-// Exposing a hook as a convenience for consumers, so they don't need to import
-// from ds-lib themselves.
-/**
- * Returns a unique ID for use by layout elements and skip links.
- * You can use this for custom skip links.
- */
-function useSkipLinkId() {
-  var uniqueId = (0, _useId.useId)();
-  return uniqueId;
-}
-
+var _useSkipLinkId = require("./use-skip-link-id");
 /**
  * Returns an ID for use by the layout element and skip links.
  *
@@ -26,7 +14,7 @@ function useSkipLinkId() {
 function useLayoutId() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     providedId = _ref.providedId;
-  var uniqueId = useSkipLinkId();
+  var uniqueId = (0, _useSkipLinkId.useSkipLinkId)();
   var id = providedId ? providedId : uniqueId;
   return id;
 }

package/dist/cjs/ui/page-layout/use-resizing-width-css-var-on-root-element.js

@@ -7,7 +7,7 @@ exports.useResizingWidthCssVarOnRootElement = useResizingWidthCssVarOnRootElemen
 var _react = require("react");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var _panelSplitter = require("./panel-splitter/panel-splitter");
+var _isPanelSplitterDragData = require("./panel-splitter/is-panel-splitter-drag-data");
 /**
  * Monitors resizing on the panel splitter with the provided `panelId`
  * and writes the resizing width to the `cssVar` on the root element (`<html>`).
@@ -28,7 +28,7 @@ function useResizingWidthCssVarOnRootElement(_ref) {
       },
       onDrag: function onDrag(_ref3) {
         var source = _ref3.source;
-        if (!(0, _panelSplitter.isPanelSplitterDragData)(source.data)) {
+        if (!(0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data)) {
           return;
         }
 

package/dist/cjs/ui/page-layout/use-skip-link-id.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkipLinkId = useSkipLinkId;
+var _useId = require("@atlaskit/ds-lib/use-id");
+// Exposing a hook as a convenience for consumers, so they don't need to import
+// from ds-lib themselves.
+/**
+ * Returns a unique ID for use by layout elements and skip links.
+ * You can use this for custom skip links.
+ */
+function useSkipLinkId() {
+  var uniqueId = (0, _useId.useId)();
+  return uniqueId;
+}

package/dist/cjs/ui/top-nav-items/app-switcher.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AppSwitcher = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _appSwitcher = _interopRequireDefault(require("@atlaskit/icon/core/app-switcher"));
-var _migration = require("./themed/migration");
+var _iconButton = require("./themed/icon-button");
 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 toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
@@ -30,7 +30,7 @@ var AppSwitcher = exports.AppSwitcher = /*#__PURE__*/(0, _react.forwardRef)(func
     ariaControls = _ref['aria-controls'],
     ariaExpanded = _ref['aria-expanded'],
     ariaHasPopup = _ref['aria-haspopup'];
-  return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  return /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     ref: ref,
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,

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

@@ -8,7 +8,7 @@ exports.ChatButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _aiChat = _interopRequireDefault(require("@atlaskit/icon/core/ai-chat"));
 var _listItem = require("../../components/list-item");
-var _migration = require("./themed/migration");
+var _button = require("./themed/button");
 /**
  * __Chat button__
  *
@@ -20,7 +20,7 @@ var ChatButton = exports.ChatButton = function ChatButton(_ref) {
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
     interactionName = _ref.interactionName;
-  return /*#__PURE__*/_react.default.createElement(_listItem.ListItem, null, /*#__PURE__*/_react.default.createElement(_migration.Button, {
+  return /*#__PURE__*/_react.default.createElement(_listItem.ListItem, null, /*#__PURE__*/_react.default.createElement(_button.Button, {
     appearance: "default",
     iconBefore: _aiChat.default,
     onClick: onClick,

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CreateButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
-var _migration = require("./themed/migration");
+var _button = require("./themed/button");
 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); }
 /**
  * __Create button__
@@ -20,7 +20,7 @@ var CreateButton = exports.CreateButton = /*#__PURE__*/(0, _react.forwardRef)(fu
     onClick = _ref.onClick,
     testId = _ref.testId,
     interactionName = _ref.interactionName;
-  return /*#__PURE__*/_react.default.createElement(_migration.Button, {
+  return /*#__PURE__*/_react.default.createElement(_button.Button, {
     ref: ref,
     appearance: "primary",
     iconBefore: _add.default,

package/dist/cjs/ui/top-nav-items/end-item.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EndItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _listItem = require("../../components/list-item");
-var _migration = require("./themed/migration");
+var _iconButton = require("./themed/icon-button");
 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); }
 /**
  * __EndItem__
@@ -31,7 +31,7 @@ var EndItem = exports.EndItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem,
     shortcut = _ref.shortcut;
   var Wrapper = isListItem ? _listItem.ListItem : _react.Fragment;
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     ref: forwardedRef,
     icon: icon,
     label: label,

package/dist/cjs/ui/top-nav-items/log-in.js

@@ -9,7 +9,7 @@ exports.LogIn = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _logIn = _interopRequireDefault(require("@atlaskit/icon/core/log-in"));
 var _listItem = require("../../components/list-item");
-var _migration = require("./themed/migration");
+var _linkIconButton = require("./themed/link-icon-button");
 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); }
 /**
  * __Log in__
@@ -32,7 +32,7 @@ var LogIn = exports.LogIn = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
      * We could make another abstraction, but this is the only top navigation item
      * that renders a link.
      */
-    _react.default.createElement(_listItem.ListItem, null, /*#__PURE__*/_react.default.createElement(_migration.LinkIconButton, {
+    _react.default.createElement(_listItem.ListItem, null, /*#__PURE__*/_react.default.createElement(_linkIconButton.LinkIconButton, {
       ref: ref,
       label: label,
       href: href,

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

@@ -15,7 +15,7 @@ var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
-var _migration = require("./themed/migration");
+var _iconButton = require("./themed/icon-button");
 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: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
@@ -65,7 +65,7 @@ var Search = exports.Search = function Search(_ref) {
     className: (0, _runtime.ax)([styles.elemAfter])
   }, elemAfter)), /*#__PURE__*/_react.default.createElement(_compiled.Show, {
     below: "xs"
-  }, /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_iconButton.IconButton, {
     label: label,
     appearance: "subtle",
     icon: _search.default,