@atlaskit/navigation-system 6.0.0 → 6.2.0

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

@@ -1,10 +1,8 @@
-/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor"];
+/* top-nav.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./top-nav.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLink } from '../../../context/skip-links/skip-links-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
@@ -25,19 +23,8 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
  */
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
-  fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
-  fullHeightSidebarWithLayeringFixes: "_1pby11wp _lcxv1wug _bfhkvuon _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x"
-};
-
-/**
- * Styles for the visible 'bar' of the top nav, including background and border.
- *
- * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
- */
-var backgroundStyles = {
-  root: "_nd5l8cbt _179ria51 _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
-  sideNavExpanded: "_hyzqcs5v"
+  fullHeightSidebar: "_18zrze3t _179rglyw _lcxv1wug _bfhkvuon _1pby11wp _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x _pdlmutpp",
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**
@@ -61,56 +48,18 @@ export function TopNav(_ref) {
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
   var customTheme = useCustomTheme(UNSAFE_theme);
-
-  /**
-   * Note: this is no longer the case when fg('platform-dst-side-nav-layering-fixes') is enabled.
-   *
-   * With the full height sidebar we have a foreground and background element,
-   * so we need to apply the custom theme styles to the correct element.
-   *
-   * The foreground element should not have a background color,
-   * and the background element doesn't need any of the other styles.
-   */
-  var _useMemo = useMemo(function () {
-      if (!customTheme.isEnabled) {
-        return {
-          backgroundStyle: undefined,
-          foregroundStyle: undefined
-        };
-      }
-      var _customTheme$style = customTheme.style,
-        backgroundColor = _customTheme$style.backgroundColor,
-        foregroundStyle = _objectWithoutProperties(_customTheme$style, _excluded);
-      return {
-        backgroundStyle: {
-          backgroundColor: backgroundColor
-        },
-        foregroundStyle: foregroundStyle
-      };
-    }, [customTheme]),
-    backgroundStyle = _useMemo.backgroundStyle,
-    foregroundStyle = _useMemo.foregroundStyle;
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
     value: customTheme.isEnabled
-  }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
-    "data-layout-slot": true,
-    "aria-hidden": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: isFhsEnabled ? backgroundStyle : undefined,
-    className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
-  }), /*#__PURE__*/React.createElement("header", {
+  }, /*#__PURE__*/React.createElement("header", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
+    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
-    style:
-    // When the layering fixes are enabled, we no longer have separate elements for the foreground and background.
-    isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
+    style: customTheme.isEnabled ? customTheme.style : undefined
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: topNavMountedVar,
     value: height

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

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

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

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

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

@@ -1,11 +1,11 @@
-/* custom-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-logo.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./custom-logo.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Anchor } from '@atlaskit/primitives';
+import { Anchor } from '@atlaskit/primitives/compiled';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';

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

@@ -1,4 +1,4 @@
-/* logo-renderer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';

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

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

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

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

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

@@ -26,9 +26,9 @@ export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
 export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
 export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
 export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
-export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))";
-export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))";
-export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))";
+export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))';
+export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))';
+export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY: 'calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))';
 /**
  * We define the z-indexes here so each page slot can be locally layered against each other.
  * For globally defined values such as flag, modal, etc, we can continue to

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

@@ -25,8 +25,6 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
-     * `platform-dst-side-nav-layering-fixes` is enabled).
      * If not provided, it will be internally set by the PanelSplitterProvider.
      *
      * This prop is useful for:

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

@@ -12,8 +12,6 @@ export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalR
     position?: 'start' | 'end';
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
-     * `platform-dst-side-nav-layering-fixes` is enabled).
      * If not provided, it will be internally set by the PanelSplitterProvider.
      *
      * This prop is useful for:

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

@@ -7,5 +7,5 @@ type RibbonProps = CommonSlotProps & {
     width: string | number;
     children: React.ReactNode;
 };
-export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width }: RibbonProps): JSX.Element | null;
+export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width, }: RibbonProps): JSX.Element | null;
 export {};

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

@@ -19,12 +19,9 @@ type TopNavStartProps = {
      *
      * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
      *
-     * After `platform_dst_nav4_side_nav_toggle_button_slot` rolls out,
-     * this prop will become required.
-     *
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
-    sideNavToggleButton?: React.ReactNode;
+    sideNavToggleButton: React.ReactNode;
 };
 /**
  * __TopNavStart__

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

@@ -19,8 +19,8 @@ declare const legacySearchTheme: {
          * When expanded the input ignores the custom theme,
          * except for its border which is derived from the highlight color.
          */
-        color: "var(--ds-text)";
-        backgroundColor: "var(--ds-background-input-pressed)";
+        color: 'var(--ds-text)';
+        backgroundColor: 'var(--ds-background-input-pressed)';
         borderColor: string;
         boxShadow: string;
     };

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

@@ -26,9 +26,9 @@ export declare const UNSAFE_sideNavLayoutVar = "--leftSidebarWidth";
 export declare const UNSAFE_ribbonVar = "--leftPanelWidth";
 export declare const UNSAFE_asideLayoutVar = "--rightSidebarWidth";
 export declare const UNSAFE_panelLayoutVar = "--rightPanelWidth";
-export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))";
-export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = "calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))";
-export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = "calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))";
+export declare const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--bannerHeight, 0px) + var(--topNavigationHeight, 0px))';
+export declare const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY: 'calc(var(--leftPanelWidth, 0px) + var(--leftSidebarWidth, 0px))';
+export declare const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY: 'calc(var(--rightSidebarWidth, 0px) + var(--rightPanelWidth, 0px))';
 /**
  * We define the z-indexes here so each page slot can be locally layered against each other.
  * For globally defined values such as flag, modal, etc, we can continue to

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

@@ -25,8 +25,6 @@ export type PanelSplitterContextType = {
     getResizeBounds: () => ResizeBounds;
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
-     * `platform-dst-side-nav-layering-fixes` is enabled).
      * If not provided, it will be internally set by the PanelSplitterProvider.
      *
      * This prop is useful for:

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

@@ -12,8 +12,6 @@ export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalR
     position?: 'start' | 'end';
     /**
      * A ref to the portal element where the panel splitter will be rendered.
-     * It can optionally be provided by consumers of <PanelSplitterProvider> (when the feature gate
-     * `platform-dst-side-nav-layering-fixes` is enabled).
      * If not provided, it will be internally set by the PanelSplitterProvider.
      *
      * This prop is useful for:

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

@@ -7,5 +7,5 @@ type RibbonProps = CommonSlotProps & {
     width: string | number;
     children: React.ReactNode;
 };
-export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width }: RibbonProps): JSX.Element | null;
+export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width, }: RibbonProps): JSX.Element | null;
 export {};

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

@@ -19,12 +19,9 @@ type TopNavStartProps = {
      *
      * You should only render `<SideNavToggleButton>` inside this slot, not as a child.
      *
-     * After `platform_dst_nav4_side_nav_toggle_button_slot` rolls out,
-     * this prop will become required.
-     *
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
-    sideNavToggleButton?: React.ReactNode;
+    sideNavToggleButton: React.ReactNode;
 };
 /**
  * __TopNavStart__

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

@@ -19,8 +19,8 @@ declare const legacySearchTheme: {
          * When expanded the input ignores the custom theme,
          * except for its border which is derived from the highlight color.
          */
-        color: "var(--ds-text)";
-        backgroundColor: "var(--ds-background-input-pressed)";
+        color: 'var(--ds-text)';
+        backgroundColor: 'var(--ds-background-input-pressed)';
         borderColor: string;
         boxShadow: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "6.0.0",
+	"version": "6.2.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -65,9 +65,9 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.8.0",
-		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.10.0",
@@ -75,12 +75,12 @@
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/side-nav-items": "^1.8.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/side-nav-items": "^1.10.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6",
+		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
 		"raf-schd": "^4.0.3",
 		"tiny-invariant": "^1.2.0"
@@ -97,11 +97,11 @@
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/dropdown-menu": "^16.5.0",
-		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/dropdown-menu": "^16.6.0",
+		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/lozenge": "^13.4.0",
+		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/onboarding": "^14.5.0",
@@ -109,11 +109,11 @@
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/select": "^21.7.0",
+		"@atlaskit/select": "^21.8.0",
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.35.0",
+		"@atlassian/gemini": "^1.37.0",
 		"@atlassian/search-dialog": "^9.15.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
@@ -175,9 +175,6 @@
 		"platform-dst-nav-app-icon-height-fix": {
 			"type": "boolean"
 		},
-		"platform-dst-side-nav-layering-fixes": {
-			"type": "boolean"
-		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},