@atlaskit/navigation-system 0.167.3 → 0.168.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlassian/navigation-system
 
+## 0.168.0
+
+### Minor Changes
+
+- [#178562](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/178562)
+  [`ea3a94fc3c6b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea3a94fc3c6b0) -
+  Adds new AppNavLogo component for use with @atlaskit/logo that displays UI text next to the icon
+  at wider screen widths, rather than rendering a unique logo component.
+
 ## 0.167.3
 
 ### Patch Changes

package/afm-volt/tsconfig.json

@@ -0,0 +1,75 @@
+{
+	"extends": "../../../../tsconfig.entry-points.volt.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../volt/tsDist/@atlaskit__navigation-system/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-next/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../avatar/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../button/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../css/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../ds-lib/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../icon/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../layering/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../logo/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../popup/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/hitbox/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/react-drop-indicator/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../primitives/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../../navigation/temp-nav-app-icons/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../tokens/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../tooltip/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../visually-hidden/afm-volt/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/entry-points/top-nav-items/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AppLogo", {
+  enumerable: true,
+  get: function get() {
+    return _appLogo.AppLogo;
+  }
+});
 Object.defineProperty(exports, "AppSwitcher", {
   enumerable: true,
   get: function get() {
@@ -82,7 +88,8 @@ Object.defineProperty(exports, "Settings", {
   }
 });
 var _appSwitcher = require("../../ui/top-nav-items/app-switcher");
-var _navLogo = require("../../ui/top-nav-items/nav-logo");
+var _navLogo = require("../../ui/top-nav-items/nav-logo/nav-logo");
+var _appLogo = require("../../ui/top-nav-items/nav-logo/app-logo");
 var _search = require("../../ui/top-nav-items/search");
 var _chatButton = require("../../ui/top-nav-items/chat-button");
 var _endItem = require("../../ui/top-nav-items/end-item");

package/dist/cjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AppLogo", {
+  enumerable: true,
+  get: function get() {
+    return _appLogo.AppLogo;
+  }
+});
 Object.defineProperty(exports, "AppSwitcher", {
   enumerable: true,
   get: function get() {
@@ -313,7 +319,8 @@ var _panelSplitter = require("./ui/page-layout/panel-splitter/panel-splitter");
 var _provider = require("./ui/page-layout/panel-splitter/provider");
 var _topNavStart = require("./ui/page-layout/top-nav/top-nav-start");
 var _appSwitcher = require("./ui/top-nav-items/app-switcher");
-var _navLogo = require("./ui/top-nav-items/nav-logo");
+var _navLogo = require("./ui/top-nav-items/nav-logo/nav-logo");
+var _appLogo = require("./ui/top-nav-items/nav-logo/app-logo");
 var _topNavMiddle = require("./ui/page-layout/top-nav/top-nav-middle");
 var _search = require("./ui/top-nav-items/search");
 var _chatButton = require("./ui/top-nav-items/chat-button");

package/dist/cjs/ui/top-nav-items/nav-logo/app-logo.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko19bv{border-radius:10px}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bsb1ris{width:max-content}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1toh1r31._1toh1r31{text-decoration-color:currentColor}
+._1w901kw7._1w901kw7{color:inherit}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._5jyqglyw._5jyqglyw{text-decoration-line:none}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1tcg{max-width:24px}
+._p12fnklw{max-width:20pc}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
+._1di61wwy:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)!important}
+._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
+@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}

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

@@ -0,0 +1,104 @@
+/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppLogo = void 0;
+require("./app-logo.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
+var _logoRenderer = require("./logo-renderer");
+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 anchorStyles = {
+  root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
+  newMargin: "_ahbq1b66",
+  newInteractionStates: "_irr3166n _1di61wwy",
+  newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
+};
+var logoWrapperStyles = {
+  root: "_18zr1b66"
+};
+var iconContainerStyles = {
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+};
+var logoTextStyles = {
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+};
+function isTextClamped(element) {
+  // Checking for vertical height rather than horizontal height.
+  // When text is "clamped", it's technically being clamped vertically! 🤯
+  return element.scrollHeight > element.clientHeight;
+}
+
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+var AppLogo = exports.AppLogo = function AppLogo(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    href = _ref.href,
+    icon = _ref.icon,
+    onClick = _ref.onClick;
+  var ref = (0, _react.useRef)(null);
+  var nameRef = (0, _react.useRef)(null);
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+
+  /**
+      * Show the tooltip if the name is truncated
+   */
+  var canTooltipAppear = (0, _react.useCallback)(function () {
+    var text = nameRef.current;
+    return Boolean(text && isTextClamped(text));
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+    ref: ref,
+    "aria-label": label,
+    href: href
+    // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: (0, _react2.cx)(anchorStyles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.075",
+    alignBlock: "center",
+    xcss: logoWrapperStyles.root,
+    "aria-label": label
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([iconContainerStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
+    logoOrIcon: icon
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([logoTextStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: name,
+    position: "bottom",
+    ignoreTooltipPointerEvents: true,
+    hideTooltipOnMouseDown: true
+    // We don't need a duplicate hidden element containing tooltip content
+    // as the content of the tooltip matches what is rendered in the nav item.
+    ,
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: canTooltipAppear
+  }, function (tooltipProps) {
+    return /*#__PURE__*/_react.default.createElement("span", tooltipProps, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      "aria-hidden": true,
+      color: "inherit",
+      weight: "semibold",
+      maxLines: 1,
+      ref: nameRef
+    }, name));
+  }))));
+};

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

@@ -0,0 +1,42 @@
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogoRenderer = LogoRenderer;
+exports.themedLogoText = exports.themedLogoIcon = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _hasCustomThemeContext = require("../themed/has-custom-theme-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 themedLogoIcon = exports.themedLogoIcon = '--ds-top-bar-logo-icon';
+var themedLogoText = exports.themedLogoText = '--ds-top-bar-logo-text';
+function LogoRenderer(_ref) {
+  var logoOrIcon = _ref.logoOrIcon;
+  return (0, _platformFeatureFlags.fg)('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/_react.default.createElement(LogoRendererMemo, {
+    logoOrIcon: logoOrIcon
+  }) : /*#__PURE__*/_react.default.createElement(LogoRendererNoMemo, {
+    logoOrIcon: logoOrIcon
+  });
+}
+var LogoRendererMemo = /*#__PURE__*/(0, _react.memo)(LogoRendererNoMemo);
+function LogoRendererNoMemo(_ref2) {
+  var LogoOrIcon = _ref2.logoOrIcon;
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  if (hasCustomTheme) {
+    return /*#__PURE__*/_react.default.createElement(LogoOrIcon, {
+      size: "small",
+      label: "",
+      iconColor: "var(".concat(themedLogoIcon, ")"),
+      textColor: "var(".concat(themedLogoText, ")")
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(LogoOrIcon, {
+    size: "small",
+    label: "",
+    appearance: "brand"
+  });
+}

package/dist/cjs/ui/top-nav-items/{nav-logo.compiled.css → nav-logo/nav-logo.compiled.css}

@@ -1,5 +1,5 @@
 
-._2rkoftgi{border-radius:8px}
+._2rko1l7b{border-radius:3px}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}

package/dist/cjs/ui/top-nav-items/{nav-logo.js → nav-logo/nav-logo.js}

@@ -12,13 +12,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _hasCustomThemeContext = require("./themed/has-custom-theme-context");
+var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
+var _logoRenderer = require("./logo-renderer");
 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 themedLogoIcon = exports.themedLogoIcon = '--ds-top-bar-logo-icon';
 var themedLogoText = exports.themedLogoText = '--ds-top-bar-logo-text';
 var anchorStyles = {
   root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  newBorderRadius: "_2rkoftgi",
+  customLogoBorderRadius: "_2rko1l7b",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
@@ -37,7 +38,7 @@ var logoContainerStyles = {
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.
@@ -87,41 +88,15 @@ var NavLogo = exports.NavLogo = function NavLogo(_ref) {
     // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
     // eslint-disable-next-line @compiled/no-suppress-xcss
     ,
-    xcss: (0, _react2.cx)(anchorStyles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && anchorStyles.newBorderRadius, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    xcss: (0, _react2.cx)(anchorStyles.root, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && anchorStyles.customLogoBorderRadius, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, (0, _platformFeatureFlags.fg)('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/_react.default.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
     logoOrIcon: icon
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
-  }, /*#__PURE__*/_react.default.createElement(NavLogoRenderer, {
+  }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
     logoOrIcon: logo
   })));
-};
-function NavLogoRenderer(_ref2) {
-  var logoOrIcon = _ref2.logoOrIcon;
-  return (0, _platformFeatureFlags.fg)('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/_react.default.createElement(NavLogoRendererMemo, {
-    logoOrIcon: logoOrIcon
-  }) : /*#__PURE__*/_react.default.createElement(NavLogoRendererNoMemo, {
-    logoOrIcon: logoOrIcon
-  });
-}
-var NavLogoRendererMemo = /*#__PURE__*/(0, _react.memo)(NavLogoRendererNoMemo);
-function NavLogoRendererNoMemo(_ref3) {
-  var LogoOrIcon = _ref3.logoOrIcon;
-  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
-  if (hasCustomTheme) {
-    return /*#__PURE__*/_react.default.createElement(LogoOrIcon, {
-      size: "small",
-      label: "",
-      iconColor: "var(".concat(themedLogoIcon, ")"),
-      textColor: "var(".concat(themedLogoText, ")")
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(LogoOrIcon, {
-    size: "small",
-    label: "",
-    appearance: "brand"
-  });
-}
+};

package/dist/cjs/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCustomThemeStyles = getCustomThemeStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _navLogo = require("../nav-logo");
+var _navLogo = require("../nav-logo/nav-logo");
 var _button = require("./button");
 var _colorUtils = require("./color-utils");
 var _hex = require("./color-utils/formats/hex");

package/dist/es2019/entry-points/top-nav-items/index.js

@@ -1,5 +1,6 @@
 export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
 export { Search } from '../../ui/top-nav-items/search';
 export { ChatButton } from '../../ui/top-nav-items/chat-button';
 export { EndItem } from '../../ui/top-nav-items/end-item';

package/dist/es2019/index.js

@@ -32,7 +32,8 @@ export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
 export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';
 export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
 export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { NavLogo } from './ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
 export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
 export { Search } from './ui/top-nav-items/search';
 export { ChatButton } from './ui/top-nav-items/chat-button';

package/dist/es2019/ui/top-nav-items/nav-logo/app-logo.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko19bv{border-radius:10px}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bsb1ris{width:max-content}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1toh1r31._1toh1r31{text-decoration-color:currentColor}
+._1w901kw7._1w901kw7{color:inherit}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._5jyqglyw._5jyqglyw{text-decoration-line:none}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._mrqmnqa1._mrqmnqa1{text-decoration-style:solid}
+._p12f1tcg{max-width:24px}
+._p12fnklw{max-width:20pc}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
+._1di61wwy:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)!important}
+._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
+@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}

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

@@ -0,0 +1,94 @@
+/* app-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./app-logo.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Inline, Text } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+import { LogoRenderer } from './logo-renderer';
+const anchorStyles = {
+  root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
+  newMargin: "_ahbq1b66",
+  newInteractionStates: "_irr3166n _1di61wwy",
+  newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
+};
+const logoWrapperStyles = {
+  root: "_18zr1b66"
+};
+const iconContainerStyles = {
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg"
+};
+const logoTextStyles = {
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+};
+function isTextClamped(element) {
+  // Checking for vertical height rather than horizontal height.
+  // When text is "clamped", it's technically being clamped vertically! 🤯
+  return element.scrollHeight > element.clientHeight;
+}
+
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+export const AppLogo = ({
+  name,
+  label,
+  href,
+  icon,
+  onClick
+}) => {
+  const ref = useRef(null);
+  const nameRef = useRef(null);
+  const hasCustomTheme = useHasCustomTheme();
+
+  /**
+      * Show the tooltip if the name is truncated
+   */
+  const canTooltipAppear = useCallback(() => {
+    const text = nameRef.current;
+    return Boolean(text && isTextClamped(text));
+  }, []);
+  return /*#__PURE__*/React.createElement(Anchor, {
+    ref: ref,
+    "aria-label": label,
+    href: href
+    // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.075",
+    alignBlock: "center",
+    xcss: logoWrapperStyles.root,
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([iconContainerStyles.root])
+  }, /*#__PURE__*/React.createElement(LogoRenderer, {
+    logoOrIcon: icon
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([logoTextStyles.root])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: name,
+    position: "bottom",
+    ignoreTooltipPointerEvents: true,
+    hideTooltipOnMouseDown: true
+    // We don't need a duplicate hidden element containing tooltip content
+    // as the content of the tooltip matches what is rendered in the nav item.
+    ,
+    isScreenReaderAnnouncementDisabled: true,
+    canAppear: canTooltipAppear
+  }, tooltipProps => /*#__PURE__*/React.createElement("span", tooltipProps, /*#__PURE__*/React.createElement(Text, {
+    "aria-hidden": true,
+    color: "inherit",
+    weight: "semibold",
+    maxLines: 1,
+    ref: nameRef
+  }, name))))));
+};

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

@@ -0,0 +1,35 @@
+/* logo-renderer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React, { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+export const themedLogoIcon = '--ds-top-bar-logo-icon';
+export const themedLogoText = '--ds-top-bar-logo-text';
+export function LogoRenderer({
+  logoOrIcon
+}) {
+  return fg('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/React.createElement(LogoRendererMemo, {
+    logoOrIcon: logoOrIcon
+  }) : /*#__PURE__*/React.createElement(LogoRendererNoMemo, {
+    logoOrIcon: logoOrIcon
+  });
+}
+const LogoRendererMemo = /*#__PURE__*/memo(LogoRendererNoMemo);
+function LogoRendererNoMemo({
+  logoOrIcon: LogoOrIcon
+}) {
+  const hasCustomTheme = useHasCustomTheme();
+  if (hasCustomTheme) {
+    return /*#__PURE__*/React.createElement(LogoOrIcon, {
+      size: "small",
+      label: "",
+      iconColor: `var(${themedLogoIcon})`,
+      textColor: `var(${themedLogoText})`
+    });
+  }
+  return /*#__PURE__*/React.createElement(LogoOrIcon, {
+    size: "small",
+    label: "",
+    appearance: "brand"
+  });
+}

package/dist/{esm/ui/top-nav-items → es2019/ui/top-nav-items/nav-logo}/nav-logo.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoftgi{border-radius:8px}
+._2rko1l7b{border-radius:3px}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}