@atlaskit/navigation-system 5.9.4 → 5.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -0
  3. package/dist/cjs/ui/page-layout/top-nav/top-nav.compiled.css +1 -2
  4. package/dist/cjs/ui/page-layout/top-nav/top-nav.js +1 -1
  5. package/dist/cjs/ui/top-nav-items/end-item.js +7 -1
  6. package/dist/cjs/ui/top-nav-items/help.js +4 -2
  7. package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.compiled.css +2 -0
  8. package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.js +6 -3
  9. package/dist/cjs/ui/top-nav-items/notifications.js +4 -2
  10. package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -0
  11. package/dist/es2019/ui/page-layout/top-nav/top-nav.compiled.css +1 -2
  12. package/dist/es2019/ui/page-layout/top-nav/top-nav.js +1 -1
  13. package/dist/es2019/ui/top-nav-items/end-item.js +7 -1
  14. package/dist/es2019/ui/top-nav-items/help.js +4 -2
  15. package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.compiled.css +2 -0
  16. package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.js +6 -3
  17. package/dist/es2019/ui/top-nav-items/notifications.js +4 -2
  18. package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -0
  19. package/dist/esm/ui/page-layout/top-nav/top-nav.compiled.css +1 -2
  20. package/dist/esm/ui/page-layout/top-nav/top-nav.js +1 -1
  21. package/dist/esm/ui/top-nav-items/end-item.js +7 -1
  22. package/dist/esm/ui/top-nav-items/help.js +4 -2
  23. package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.compiled.css +2 -0
  24. package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.js +6 -3
  25. package/dist/esm/ui/top-nav-items/notifications.js +4 -2
  26. package/dist/types/ui/top-nav-items/end-item.d.ts +7 -0
  27. package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts +7 -0
  28. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 5.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`93424152b59ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/93424152b59ea) -
8
+ Fixes custom logo resizing when full height sidebar is enabled.
9
+ - [`4ee53513e11a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ee53513e11a1) -
10
+ Open layers (excluding modals) will now be closed when using the side nav toggle keyboard
11
+ shortcut. This change only affects when the full height sidebar is enabled.
12
+
13
+ ## 5.10.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`f089cdf7f6a28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f089cdf7f6a28) -
18
+ The following top nav items now support displaying a shortcut in their tooltips, through the new
19
+ `shortcut` prop:
20
+ - EndItem
21
+ - Notifications
22
+ - Help
23
+ - Profile
24
+ - Settings
25
+
3
26
  ## 5.9.4
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js CHANGED
@@ -50,6 +50,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
50
50
  // Return early if there are any open modals
51
51
  return;
52
52
  }
53
+ openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
53
54
  toggleVisibilityByShortcut();
54
55
  }
55
56
  }
package/dist/cjs/ui/page-layout/top-nav/top-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l8cbt{grid-area:top-bar}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
4
4
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
5
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
5
6
  ._179rglyw{border-block-end:none}
6
7
  ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
7
8
  ._1bsb1osq{width:100%}
@@ -12,12 +13,10 @@
12
13
  ._4t3i1osq{height:100%}
13
14
  ._bfhkglyw{background-color:none}
14
15
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
15
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
16
16
  ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
17
17
  ._kqsw1if8{position:sticky}
18
18
  ._lcxvglyw{pointer-events:none}
19
19
  ._vchhusvi{box-sizing:border-box}
20
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
21
20
  ._yv0e1mfv{grid-template-columns:auto 1fr auto}
22
21
  @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
23
22
  @media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
package/dist/cjs/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -33,7 +33,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
33
33
  */
34
34
  var styles = {
35
35
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
36
- fullHeightSidebar: "_179rglyw _bozgze3t _y4tize3t _bfhkglyw _lcxvglyw _pdlmutpp",
36
+ fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
37
37
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
38
38
  };
39
39
 
package/dist/cjs/ui/top-nav-items/end-item.js CHANGED
@@ -28,7 +28,8 @@ var EndItem = exports.EndItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
28
28
  ariaExpanded = _ref['aria-expanded'],
29
29
  ariaHasPopup = _ref['aria-haspopup'],
30
30
  _ref$isListItem = _ref.isListItem,
31
- isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem;
31
+ isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem,
32
+ shortcut = _ref.shortcut;
32
33
  var Wrapper = isListItem ? _listItem.ListItem : _react.Fragment;
33
34
  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
34
35
  ref: forwardedRef,
@@ -44,5 +45,10 @@ var EndItem = exports.EndItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
44
45
  "aria-controls": ariaControls,
45
46
  "aria-expanded": ariaExpanded,
46
47
  "aria-haspopup": ariaHasPopup
48
+ // Only creating object when shortcut is provided
49
+ ,
50
+ tooltip: shortcut ? {
51
+ shortcut: shortcut
52
+ } : undefined
47
53
  }));
48
54
  });
package/dist/cjs/ui/top-nav-items/help.js CHANGED
@@ -30,7 +30,8 @@ var Help = exports.Help = /*#__PURE__*/(0, _react.forwardRef)(function Help(_ref
30
30
  testId = _ref.testId,
31
31
  interactionName = _ref.interactionName,
32
32
  isListItem = _ref.isListItem,
33
- badge = _ref.badge;
33
+ badge = _ref.badge,
34
+ shortcut = _ref.shortcut;
34
35
  var sharedProps = {
35
36
  icon: _questionCircle.default,
36
37
  label: label,
@@ -39,7 +40,8 @@ var Help = exports.Help = /*#__PURE__*/(0, _react.forwardRef)(function Help(_ref
39
40
  isSelected: isSelected,
40
41
  testId: testId,
41
42
  interactionName: interactionName,
42
- ref: ref
43
+ ref: ref,
44
+ shortcut: shortcut
43
45
  };
44
46
  if (!badge) {
45
47
  return /*#__PURE__*/_react.default.createElement(_endItem.EndItem, (0, _extends2.default)({}, sharedProps, {
package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.compiled.css CHANGED
@@ -6,10 +6,12 @@
6
6
  ._1e0cglyw{display:none}
7
7
  ._1jpx1f51 img{object-fit:contain}
8
8
  ._1reo15vq{overflow-x:hidden}
9
+ ._1ul91tcg{min-width:24px}
9
10
  ._4cvr1h6o{align-items:center}
10
11
  ._4t3izwfg{height:2pc}
11
12
  ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
12
13
  ._bna71tcg img{height:24px}
14
+ ._p12f1osq{max-width:100%}
13
15
  ._p12f1tcg{max-width:24px}
14
16
  ._p12fnklw{max-width:20pc}
15
17
  ._rtys1kw7 img{max-width:inherit}
package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.js CHANGED
@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _react2 = require("@compiled/react");
13
13
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
14
  var _primitives = require("@atlaskit/primitives");
15
+ var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
15
16
  var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
16
17
  var _logoRenderer = require("./logo-renderer");
17
18
  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); }
@@ -25,7 +26,8 @@ var anchorStyles = {
25
26
  };
26
27
  var sharedIconOrLogoContainerStyles = {
27
28
  root: "_1reo15vq _18m915vq _bna71tcg _rtys1kw7 _1jpx1f51",
28
- appIconTilePaddingFlagged: "_18zr1b66"
29
+ appIconTilePaddingFlagged: "_18zr1b66",
30
+ withFullHeightSidebar: "_p12f1osq _1ul91tcg"
29
31
  };
30
32
  var iconContainerStyles = {
31
33
  root: "_18zr1b66 _1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
@@ -80,6 +82,7 @@ var CustomLogo = exports.CustomLogo = function CustomLogo(_ref) {
80
82
  }
81
83
  }, []);
82
84
  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
85
+ var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
83
86
  return /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
84
87
  ref: ref,
85
88
  "aria-label": label,
@@ -90,11 +93,11 @@ var CustomLogo = exports.CustomLogo = function CustomLogo(_ref) {
90
93
  xcss: (0, _react2.cx)(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
91
94
  onClick: onClick
92
95
  }, /*#__PURE__*/_react.default.createElement("div", {
93
- className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
96
+ className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
94
97
  }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
95
98
  logoOrIcon: icon
96
99
  })), /*#__PURE__*/_react.default.createElement("div", {
97
- className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
100
+ className: (0, _runtime.ax)([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, (0, _platformFeatureFlags.fg)('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
98
101
  }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer, {
99
102
  logoOrIcon: logo
100
103
  })));
package/dist/cjs/ui/top-nav-items/notifications.js CHANGED
@@ -28,7 +28,8 @@ var Notifications = exports.Notifications = /*#__PURE__*/(0, _react.forwardRef)(
28
28
  ariaExpanded = _ref['aria-expanded'],
29
29
  ariaHasPopup = _ref['aria-haspopup'],
30
30
  isListItem = _ref.isListItem,
31
- badge = _ref.badge;
31
+ badge = _ref.badge,
32
+ shortcut = _ref.shortcut;
32
33
  return /*#__PURE__*/_react.default.createElement(_badgeContainer.BadgeContainer, {
33
34
  id: NOTIFICATIONS_BADGE_ID,
34
35
  badge: badge
@@ -50,6 +51,7 @@ var Notifications = exports.Notifications = /*#__PURE__*/(0, _react.forwardRef)(
50
51
  // We explicitly set the EndItem to not be a list item,
51
52
  // because the BadgeContainer already has a list item role (if `isListItem` is true)
52
53
  ,
53
- isListItem: false
54
+ isListItem: false,
55
+ shortcut: shortcut
54
56
  }));
55
57
  });
package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js CHANGED
@@ -45,6 +45,7 @@ export function useSideNavToggleKeyboardShortcut({
45
45
  // Return early if there are any open modals
46
46
  return;
47
47
  }
48
+ openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
48
49
  toggleVisibilityByShortcut();
49
50
  }
50
51
  }
package/dist/es2019/ui/page-layout/top-nav/top-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l8cbt{grid-area:top-bar}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
4
4
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
5
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
5
6
  ._179rglyw{border-block-end:none}
6
7
  ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
7
8
  ._1bsb1osq{width:100%}
@@ -12,12 +13,10 @@
12
13
  ._4t3i1osq{height:100%}
13
14
  ._bfhkglyw{background-color:none}
14
15
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
15
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
16
16
  ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
17
17
  ._kqsw1if8{position:sticky}
18
18
  ._lcxvglyw{pointer-events:none}
19
19
  ._vchhusvi{box-sizing:border-box}
20
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
21
20
  ._yv0e1mfv{grid-template-columns:auto 1fr auto}
22
21
  @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
23
22
  @media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
package/dist/es2019/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -22,7 +22,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
22
22
  */
23
23
  const styles = {
24
24
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
25
- fullHeightSidebar: "_179rglyw _bozgze3t _y4tize3t _bfhkglyw _lcxvglyw _pdlmutpp",
25
+ fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
26
26
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
27
27
  };
28
28
 
package/dist/es2019/ui/top-nav-items/end-item.js CHANGED
@@ -19,7 +19,8 @@ export const EndItem = /*#__PURE__*/forwardRef(({
19
19
  'aria-controls': ariaControls,
20
20
  'aria-expanded': ariaExpanded,
21
21
  'aria-haspopup': ariaHasPopup,
22
- isListItem = true
22
+ isListItem = true,
23
+ shortcut
23
24
  }, forwardedRef) => {
24
25
  const Wrapper = isListItem ? ListItem : Fragment;
25
26
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconButton, {
@@ -36,5 +37,10 @@ export const EndItem = /*#__PURE__*/forwardRef(({
36
37
  "aria-controls": ariaControls,
37
38
  "aria-expanded": ariaExpanded,
38
39
  "aria-haspopup": ariaHasPopup
40
+ // Only creating object when shortcut is provided
41
+ ,
42
+ tooltip: shortcut ? {
43
+ shortcut
44
+ } : undefined
39
45
  }));
40
46
  });
package/dist/es2019/ui/top-nav-items/help.js CHANGED
@@ -20,7 +20,8 @@ export const Help = /*#__PURE__*/forwardRef(function Help({
20
20
  testId,
21
21
  interactionName,
22
22
  isListItem,
23
- badge
23
+ badge,
24
+ shortcut
24
25
  }, ref) {
25
26
  const sharedProps = {
26
27
  icon: HelpIcon,
@@ -30,7 +31,8 @@ export const Help = /*#__PURE__*/forwardRef(function Help({
30
31
  isSelected,
31
32
  testId,
32
33
  interactionName,
33
- ref
34
+ ref,
35
+ shortcut
34
36
  };
35
37
  if (!badge) {
36
38
  return /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.compiled.css CHANGED
@@ -6,10 +6,12 @@
6
6
  ._1e0cglyw{display:none}
7
7
  ._1jpx1f51 img{object-fit:contain}
8
8
  ._1reo15vq{overflow-x:hidden}
9
+ ._1ul91tcg{min-width:24px}
9
10
  ._4cvr1h6o{align-items:center}
10
11
  ._4t3izwfg{height:2pc}
11
12
  ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
12
13
  ._bna71tcg img{height:24px}
14
+ ._p12f1osq{max-width:100%}
13
15
  ._p12f1tcg{max-width:24px}
14
16
  ._p12fnklw{max-width:20pc}
15
17
  ._rtys1kw7 img{max-width:inherit}
package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.js CHANGED
@@ -6,6 +6,7 @@ import { cx } from '@compiled/react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
8
8
  import { Anchor } from '@atlaskit/primitives';
9
+ import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
9
10
  import { useHasCustomTheme } from '../themed/has-custom-theme-context';
10
11
  import { LogoRenderer } from './logo-renderer';
11
12
  const anchorStyles = {
@@ -17,7 +18,8 @@ const anchorStyles = {
17
18
  };
18
19
  const sharedIconOrLogoContainerStyles = {
19
20
  root: "_1reo15vq _18m915vq _bna71tcg _rtys1kw7 _1jpx1f51",
20
- appIconTilePaddingFlagged: "_18zr1b66"
21
+ appIconTilePaddingFlagged: "_18zr1b66",
22
+ withFullHeightSidebar: "_p12f1osq _1ul91tcg"
21
23
  };
22
24
  const iconContainerStyles = {
23
25
  root: "_18zr1b66 _1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
@@ -73,6 +75,7 @@ export const CustomLogo = ({
73
75
  }
74
76
  }, []);
75
77
  const hasCustomTheme = useHasCustomTheme();
78
+ const isFhsEnabled = useIsFhsEnabled();
76
79
  return /*#__PURE__*/React.createElement(Anchor, {
77
80
  ref: ref,
78
81
  "aria-label": label,
@@ -83,11 +86,11 @@ export const CustomLogo = ({
83
86
  xcss: cx(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
84
87
  onClick: onClick
85
88
  }, /*#__PURE__*/React.createElement("div", {
86
- className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
89
+ className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
87
90
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
88
91
  logoOrIcon: icon
89
92
  })), /*#__PURE__*/React.createElement("div", {
90
- className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
93
+ className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
91
94
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
92
95
  logoOrIcon: logo
93
96
  })));
package/dist/es2019/ui/top-nav-items/notifications.js CHANGED
@@ -19,7 +19,8 @@ export const Notifications = /*#__PURE__*/forwardRef(function Notifications({
19
19
  'aria-expanded': ariaExpanded,
20
20
  'aria-haspopup': ariaHasPopup,
21
21
  isListItem,
22
- badge
22
+ badge,
23
+ shortcut
23
24
  }, ref) {
24
25
  return /*#__PURE__*/React.createElement(BadgeContainer, {
25
26
  id: NOTIFICATIONS_BADGE_ID,
@@ -42,6 +43,7 @@ export const Notifications = /*#__PURE__*/forwardRef(function Notifications({
42
43
  // We explicitly set the EndItem to not be a list item,
43
44
  // because the BadgeContainer already has a list item role (if `isListItem` is true)
44
45
  ,
45
- isListItem: false
46
+ isListItem: false,
47
+ shortcut: shortcut
46
48
  }));
47
49
  });
package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js CHANGED
@@ -44,6 +44,7 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
44
44
  // Return early if there are any open modals
45
45
  return;
46
46
  }
47
+ openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
47
48
  toggleVisibilityByShortcut();
48
49
  }
49
50
  }
package/dist/esm/ui/page-layout/top-nav/top-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l8cbt{grid-area:top-bar}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
4
4
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
5
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
5
6
  ._179rglyw{border-block-end:none}
6
7
  ._179ria51{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
7
8
  ._1bsb1osq{width:100%}
@@ -12,12 +13,10 @@
12
13
  ._4t3i1osq{height:100%}
13
14
  ._bfhkglyw{background-color:none}
14
15
  ._bfhkvuon{background-color:var(--ds-surface,#fff)}
15
- ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
16
16
  ._d6vu1bgi >span[data-ep-placeholder-id=top_navigation_skeleton]{display:contents}
17
17
  ._kqsw1if8{position:sticky}
18
18
  ._lcxvglyw{pointer-events:none}
19
19
  ._vchhusvi{box-sizing:border-box}
20
- ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
21
20
  ._yv0e1mfv{grid-template-columns:auto 1fr auto}
22
21
  @media (min-width:48rem){._1j8b18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}
23
22
  @media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
package/dist/esm/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -24,7 +24,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
24
24
  */
25
25
  var styles = {
26
26
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
27
- fullHeightSidebar: "_179rglyw _bozgze3t _y4tize3t _bfhkglyw _lcxvglyw _pdlmutpp",
27
+ fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
28
28
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
29
29
  };
30
30
 
package/dist/esm/ui/top-nav-items/end-item.js CHANGED
@@ -20,7 +20,8 @@ export var EndItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
20
20
  ariaExpanded = _ref['aria-expanded'],
21
21
  ariaHasPopup = _ref['aria-haspopup'],
22
22
  _ref$isListItem = _ref.isListItem,
23
- isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem;
23
+ isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem,
24
+ shortcut = _ref.shortcut;
24
25
  var Wrapper = isListItem ? ListItem : Fragment;
25
26
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconButton, {
26
27
  ref: forwardedRef,
@@ -36,5 +37,10 @@ export var EndItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
36
37
  "aria-controls": ariaControls,
37
38
  "aria-expanded": ariaExpanded,
38
39
  "aria-haspopup": ariaHasPopup
40
+ // Only creating object when shortcut is provided
41
+ ,
42
+ tooltip: shortcut ? {
43
+ shortcut: shortcut
44
+ } : undefined
39
45
  }));
40
46
  });
package/dist/esm/ui/top-nav-items/help.js CHANGED
@@ -20,7 +20,8 @@ export var Help = /*#__PURE__*/forwardRef(function Help(_ref, ref) {
20
20
  testId = _ref.testId,
21
21
  interactionName = _ref.interactionName,
22
22
  isListItem = _ref.isListItem,
23
- badge = _ref.badge;
23
+ badge = _ref.badge,
24
+ shortcut = _ref.shortcut;
24
25
  var sharedProps = {
25
26
  icon: HelpIcon,
26
27
  label: label,
@@ -29,7 +30,8 @@ export var Help = /*#__PURE__*/forwardRef(function Help(_ref, ref) {
29
30
  isSelected: isSelected,
30
31
  testId: testId,
31
32
  interactionName: interactionName,
32
- ref: ref
33
+ ref: ref,
34
+ shortcut: shortcut
33
35
  };
34
36
  if (!badge) {
35
37
  return /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.compiled.css CHANGED
@@ -6,10 +6,12 @@
6
6
  ._1e0cglyw{display:none}
7
7
  ._1jpx1f51 img{object-fit:contain}
8
8
  ._1reo15vq{overflow-x:hidden}
9
+ ._1ul91tcg{min-width:24px}
9
10
  ._4cvr1h6o{align-items:center}
10
11
  ._4t3izwfg{height:2pc}
11
12
  ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
12
13
  ._bna71tcg img{height:24px}
14
+ ._p12f1osq{max-width:100%}
13
15
  ._p12f1tcg{max-width:24px}
14
16
  ._p12fnklw{max-width:20pc}
15
17
  ._rtys1kw7 img{max-width:inherit}
package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.js CHANGED
@@ -6,6 +6,7 @@ import { cx } from '@compiled/react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
8
8
  import { Anchor } from '@atlaskit/primitives';
9
+ import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
9
10
  import { useHasCustomTheme } from '../themed/has-custom-theme-context';
10
11
  import { LogoRenderer } from './logo-renderer';
11
12
  var anchorStyles = {
@@ -17,7 +18,8 @@ var anchorStyles = {
17
18
  };
18
19
  var sharedIconOrLogoContainerStyles = {
19
20
  root: "_1reo15vq _18m915vq _bna71tcg _rtys1kw7 _1jpx1f51",
20
- appIconTilePaddingFlagged: "_18zr1b66"
21
+ appIconTilePaddingFlagged: "_18zr1b66",
22
+ withFullHeightSidebar: "_p12f1osq _1ul91tcg"
21
23
  };
22
24
  var iconContainerStyles = {
23
25
  root: "_18zr1b66 _1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
@@ -72,6 +74,7 @@ export var CustomLogo = function CustomLogo(_ref) {
72
74
  }
73
75
  }, []);
74
76
  var hasCustomTheme = useHasCustomTheme();
77
+ var isFhsEnabled = useIsFhsEnabled();
75
78
  return /*#__PURE__*/React.createElement(Anchor, {
76
79
  ref: ref,
77
80
  "aria-label": label,
@@ -82,11 +85,11 @@ export var CustomLogo = function CustomLogo(_ref) {
82
85
  xcss: cx(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
83
86
  onClick: onClick
84
87
  }, /*#__PURE__*/React.createElement("div", {
85
- className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
88
+ className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
86
89
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
87
90
  logoOrIcon: icon
88
91
  })), /*#__PURE__*/React.createElement("div", {
89
- className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
92
+ className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged, isFhsEnabled && sharedIconOrLogoContainerStyles.withFullHeightSidebar])
90
93
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
91
94
  logoOrIcon: logo
92
95
  })));
package/dist/esm/ui/top-nav-items/notifications.js CHANGED
@@ -19,7 +19,8 @@ export var Notifications = /*#__PURE__*/forwardRef(function Notifications(_ref,
19
19
  ariaExpanded = _ref['aria-expanded'],
20
20
  ariaHasPopup = _ref['aria-haspopup'],
21
21
  isListItem = _ref.isListItem,
22
- badge = _ref.badge;
22
+ badge = _ref.badge,
23
+ shortcut = _ref.shortcut;
23
24
  return /*#__PURE__*/React.createElement(BadgeContainer, {
24
25
  id: NOTIFICATIONS_BADGE_ID,
25
26
  badge: badge
@@ -41,6 +42,7 @@ export var Notifications = /*#__PURE__*/forwardRef(function Notifications(_ref,
41
42
  // We explicitly set the EndItem to not be a list item,
42
43
  // because the BadgeContainer already has a list item role (if `isListItem` is true)
43
44
  ,
44
- isListItem: false
45
+ isListItem: false,
46
+ shortcut: shortcut
45
47
  }));
46
48
  });
package/dist/types/ui/top-nav-items/end-item.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconButtonProps } from '@atlaskit/button/new';
4
4
  import type { TriggerProps } from '@atlaskit/popup/types';
5
+ import type { TooltipProps } from '@atlaskit/tooltip';
5
6
  export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
6
7
  /**
7
8
  * Provide an accessible label, often used by screen readers.
@@ -62,6 +63,12 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
62
63
  * ```
63
64
  */
64
65
  isListItem?: boolean;
66
+ /**
67
+ * Display a keyboard shortcut in the tooltip.
68
+ *
69
+ * Keys will be displayed as individual keyboard key segments after the tooltip content.
70
+ */
71
+ shortcut?: TooltipProps['shortcut'];
65
72
  }
66
73
  /**
67
74
  * __EndItem__
package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconButtonProps } from '@atlaskit/button/new';
4
4
  import type { TriggerProps } from '@atlaskit/popup/types';
5
+ import type { TooltipProps } from '@atlaskit/tooltip';
5
6
  export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
6
7
  /**
7
8
  * Provide an accessible label, often used by screen readers.
@@ -62,6 +63,12 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
62
63
  * ```
63
64
  */
64
65
  isListItem?: boolean;
66
+ /**
67
+ * Display a keyboard shortcut in the tooltip.
68
+ *
69
+ * Keys will be displayed as individual keyboard key segments after the tooltip content.
70
+ */
71
+ shortcut?: TooltipProps['shortcut'];
65
72
  }
66
73
  /**
67
74
  * __EndItem__
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "5.9.4",
3
+ "version": "5.10.1",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -80,8 +80,8 @@
80
80
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
81
81
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
82
82
  "@atlaskit/primitives": "^16.4.0",
83
- "@atlaskit/tokens": "^8.3.0",
84
- "@atlaskit/tooltip": "^20.10.0",
83
+ "@atlaskit/tokens": "^8.4.0",
84
+ "@atlaskit/tooltip": "^20.11.0",
85
85
  "@atlaskit/visually-hidden": "^3.0.0",
86
86
  "@babel/runtime": "^7.0.0",
87
87
  "@compiled/react": "^0.18.6",
@@ -116,7 +116,7 @@
116
116
  "@atlaskit/skeleton": "^2.1.0",
117
117
  "@atlaskit/textfield": "^8.1.0",
118
118
  "@atlassian/feature-flags-test-utils": "^1.0.0",
119
- "@atlassian/gemini": "^1.22.0",
119
+ "@atlassian/gemini": "^1.23.0",
120
120
  "@atlassian/search-dialog": "^9.9.0",
121
121
  "@atlassian/ssr-tests": "workspace:^",
122
122
  "@atlassian/test-utils": "^1.0.0",