@atlaskit/navigation-system 5.18.0 → 5.19.0

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 (17) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/page-layout/side-nav/toggle-button.js +3 -12
  3. package/dist/cjs/ui/page-layout/top-nav/top-nav-end.compiled.css +1 -1
  4. package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js +2 -3
  5. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  6. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +3 -4
  7. package/dist/es2019/ui/page-layout/side-nav/toggle-button.js +4 -13
  8. package/dist/es2019/ui/page-layout/top-nav/top-nav-end.compiled.css +1 -1
  9. package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js +2 -3
  10. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  11. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +3 -4
  12. package/dist/esm/ui/page-layout/side-nav/toggle-button.js +4 -13
  13. package/dist/esm/ui/page-layout/top-nav/top-nav-end.compiled.css +1 -1
  14. package/dist/esm/ui/page-layout/top-nav/top-nav-end.js +2 -3
  15. package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  16. package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +3 -4
  17. package/package.json +2 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 5.19.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`819adcd884291`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/819adcd884291) -
8
+ Tidy `platform_dst_nav4_side_nav_toggle_ref_fix` feature gate. This addresses a potential issue
9
+ with refs becoming stale.
10
+
11
+ ## 5.18.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [`d5e528e62f16d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5e528e62f16d) -
16
+ clean up fg: team25-eu-jira-logo-updates-csm-jsm
17
+
3
18
  ## 5.18.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -66,11 +66,9 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
66
66
  isSideNavExpanded = _useState2[0],
67
67
  setIsSideNavExpanded = _useState2[1];
68
68
  var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
69
- var elementRef = (0, _react.useRef)(null);
70
69
 
71
70
  /**
72
- * Attempts to address HOT-121458 by ensuring that the toggle button element
73
- * in context is always up to date.
71
+ * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
74
72
  *
75
73
  * My theory is that something to do with SSR, hydration and suspense was causing the
76
74
  * underlying HTML element to change but without causing the toggle button to remount.
@@ -82,15 +80,8 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
82
80
  element = _useState4[0],
83
81
  setElement = _useState4[1];
84
82
  (0, _react.useEffect)(function () {
85
- if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
86
- ref(element);
87
- }
83
+ ref(element);
88
84
  }, [element, ref]);
89
- (0, _react.useEffect)(function () {
90
- if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
91
- ref(elementRef.current);
92
- }
93
- }, [elementRef, ref]);
94
85
  (0, _react.useEffect)(function () {
95
86
  var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
96
87
  matches = _window$matchMedia.matches;
@@ -181,7 +172,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
181
172
  testId: testId,
182
173
  isTooltipDisabled: false,
183
174
  interactionName: interactionName,
184
- ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
175
+ ref: setElement,
185
176
  tooltip: tooltipProps
186
177
  });
187
178
  };
package/dist/cjs/ui/page-layout/top-nav/top-nav-end.compiled.css CHANGED
@@ -9,4 +9,4 @@
9
9
  ._lcxv1wug{pointer-events:auto}
10
10
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
11
11
  @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
12
- @media (min-width:64rem){._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
12
+ @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -26,8 +26,7 @@ var _migration = require("../../top-nav-items/themed/migration");
26
26
  var _constants = require("../constants");
27
27
  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); }
28
28
  var containerStyles = {
29
- root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
30
- jiraProductLogoUpdate: "_15rip2n4",
29
+ root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
31
30
  fullHeightSidebar: "_y4tiutpp _lcxv1wug",
32
31
  fullHeightSidebarWithLayeringFixes: "_y4tiutpp"
33
32
  };
@@ -82,7 +81,7 @@ function TopNavEnd(_ref2) {
82
81
  }, [query]);
83
82
  return /*#__PURE__*/_react.default.createElement("nav", {
84
83
  "aria-label": label,
85
- className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
84
+ className: (0, _runtime.ax)([containerStyles.root, isFhsEnabled && !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes])
86
85
  }, isMobile ? /*#__PURE__*/_react.default.createElement(_popup.default, {
87
86
  isOpen: isOpen,
88
87
  onClose: function onClose() {
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,5 +13,5 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3l1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3l1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -40,8 +40,7 @@ var flexGap = "var(--ds-space-050, 4px)";
40
40
  * which re-enables pointer events.
41
41
  */
42
42
  var innerStyles = {
43
- root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
44
- jiraProductLogoUpdate: "_15rip2n4",
43
+ root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi",
45
44
  fullHeightSidebar: "_lcxv1wug",
46
45
  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
47
46
  };
@@ -118,7 +117,7 @@ var TopNavStartInnerOld = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
118
117
  return /*#__PURE__*/_react.default.createElement("div", {
119
118
  ref: ref,
120
119
  "data-testid": testId,
121
- className: (0, _runtime.ax)([innerStyles.root, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
120
+ className: (0, _runtime.ax)([innerStyles.root])
122
121
  }, children);
123
122
  });
124
123
  var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInnerFHS(_ref2, ref) {
@@ -153,7 +152,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
153
152
  }, /*#__PURE__*/_react.default.createElement("div", {
154
153
  ref: ref,
155
154
  "data-testid": testId,
156
- className: (0, _runtime.ax)([innerStyles.root, !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
155
+ className: (0, _runtime.ax)([innerStyles.root, !(0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
157
156
  }, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/_react.default.createElement(_openLayerObserver.OpenLayerObserverNamespaceProvider, {
158
157
  namespace: _constants.openLayerObserverTopNavStartNamespace
159
158
  }, children) : children));
package/dist/es2019/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
2
2
  import "./toggle-button.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
4
+ import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
5
5
  import { bind } from 'bind-event-listener';
6
6
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
7
7
  import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
@@ -51,11 +51,9 @@ export const SideNavToggleButton = ({
51
51
  // initialized in SSR
52
52
  const [isSideNavExpanded, setIsSideNavExpanded] = useState(sideNavState === null || !fg('platform_dst_nav4_side_nav_default_collapsed_api') ? !defaultCollapsed : isSideNavExpandedOnDesktop);
53
53
  const ref = useContext(SideNavToggleButtonAttachRef);
54
- const elementRef = useRef(null);
55
54
 
56
55
  /**
57
- * Attempts to address HOT-121458 by ensuring that the toggle button element
58
- * in context is always up to date.
56
+ * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
59
57
  *
60
58
  * My theory is that something to do with SSR, hydration and suspense was causing the
61
59
  * underlying HTML element to change but without causing the toggle button to remount.
@@ -64,15 +62,8 @@ export const SideNavToggleButton = ({
64
62
  */
65
63
  const [element, setElement] = useState(null);
66
64
  useEffect(() => {
67
- if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
68
- ref(element);
69
- }
65
+ ref(element);
70
66
  }, [element, ref]);
71
- useEffect(() => {
72
- if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
73
- ref(elementRef.current);
74
- }
75
- }, [elementRef, ref]);
76
67
  useEffect(() => {
77
68
  const {
78
69
  matches
@@ -164,7 +155,7 @@ export const SideNavToggleButton = ({
164
155
  testId: testId,
165
156
  isTooltipDisabled: false,
166
157
  interactionName: interactionName,
167
- ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
158
+ ref: setElement,
168
159
  tooltip: tooltipProps
169
160
  });
170
161
  };
package/dist/es2019/ui/page-layout/top-nav/top-nav-end.compiled.css CHANGED
@@ -9,4 +9,4 @@
9
9
  ._lcxv1wug{pointer-events:auto}
10
10
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
11
11
  @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
12
- @media (min-width:64rem){._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
12
+ @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -16,8 +16,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
16
16
  import { IconButton } from '../../top-nav-items/themed/migration';
17
17
  import { openLayerObserverTopNavEndNamespace } from '../constants';
18
18
  const containerStyles = {
19
- root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
20
- jiraProductLogoUpdate: "_15rip2n4",
19
+ root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
21
20
  fullHeightSidebar: "_y4tiutpp _lcxv1wug",
22
21
  fullHeightSidebarWithLayeringFixes: "_y4tiutpp"
23
22
  };
@@ -66,7 +65,7 @@ export function TopNavEnd({
66
65
  }, [query]);
67
66
  return /*#__PURE__*/React.createElement("nav", {
68
67
  "aria-label": label,
69
- className: ax([containerStyles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
68
+ className: ax([containerStyles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes])
70
69
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
71
70
  isOpen: isOpen,
72
71
  onClose: () => setIsOpen(false),
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,5 +13,5 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3lsjnm{animation-name:k1rswljm}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes k1rswljm{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3lsjnm{animation-name:k1rswljm}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes k1rswljm{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -31,8 +31,7 @@ const flexGap = "var(--ds-space-050, 4px)";
31
31
  * which re-enables pointer events.
32
32
  */
33
33
  const innerStyles = {
34
- root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
35
- jiraProductLogoUpdate: "_15rip2n4",
34
+ root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi",
36
35
  fullHeightSidebar: "_lcxv1wug",
37
36
  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
38
37
  };
@@ -110,7 +109,7 @@ const TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner({
110
109
  return /*#__PURE__*/React.createElement("div", {
111
110
  ref: ref,
112
111
  "data-testid": testId,
113
- className: ax([innerStyles.root, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
112
+ className: ax([innerStyles.root])
114
113
  }, children);
115
114
  });
116
115
  const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS({
@@ -147,7 +146,7 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
147
146
  }, /*#__PURE__*/React.createElement("div", {
148
147
  ref: ref,
149
148
  "data-testid": testId,
150
- className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
149
+ className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
151
150
  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
152
151
  namespace: openLayerObserverTopNavStartNamespace
153
152
  }, children) : children));
package/dist/esm/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -5,7 +5,7 @@ import "./toggle-button.compiled.css";
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  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; }
7
7
  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) { _defineProperty(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; }
8
- import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
8
+ import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
9
9
  import { bind } from 'bind-event-listener';
10
10
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
11
11
  import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
@@ -57,11 +57,9 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
57
57
  isSideNavExpanded = _useState2[0],
58
58
  setIsSideNavExpanded = _useState2[1];
59
59
  var ref = useContext(SideNavToggleButtonAttachRef);
60
- var elementRef = useRef(null);
61
60
 
62
61
  /**
63
- * Attempts to address HOT-121458 by ensuring that the toggle button element
64
- * in context is always up to date.
62
+ * Addresses HOT-121458 by ensuring that the toggle button element in context is always up to date.
65
63
  *
66
64
  * My theory is that something to do with SSR, hydration and suspense was causing the
67
65
  * underlying HTML element to change but without causing the toggle button to remount.
@@ -73,15 +71,8 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
73
71
  element = _useState4[0],
74
72
  setElement = _useState4[1];
75
73
  useEffect(function () {
76
- if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
77
- ref(element);
78
- }
74
+ ref(element);
79
75
  }, [element, ref]);
80
- useEffect(function () {
81
- if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
82
- ref(elementRef.current);
83
- }
84
- }, [elementRef, ref]);
85
76
  useEffect(function () {
86
77
  var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
87
78
  matches = _window$matchMedia.matches;
@@ -172,7 +163,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
172
163
  testId: testId,
173
164
  isTooltipDisabled: false,
174
165
  interactionName: interactionName,
175
- ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
166
+ ref: setElement,
176
167
  tooltip: tooltipProps
177
168
  });
178
169
  };
package/dist/esm/ui/page-layout/top-nav/top-nav-end.compiled.css CHANGED
@@ -9,4 +9,4 @@
9
9
  ._lcxv1wug{pointer-events:auto}
10
10
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
11
11
  @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
12
- @media (min-width:64rem){._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
12
+ @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}
package/dist/esm/ui/page-layout/top-nav/top-nav-end.js CHANGED
@@ -17,8 +17,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
17
17
  import { IconButton } from '../../top-nav-items/themed/migration';
18
18
  import { openLayerObserverTopNavEndNamespace } from '../constants';
19
19
  var containerStyles = {
20
- root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15ri1mjv _1gs5usvi _ndwch9n0",
21
- jiraProductLogoUpdate: "_15rip2n4",
20
+ root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
22
21
  fullHeightSidebar: "_y4tiutpp _lcxv1wug",
23
22
  fullHeightSidebarWithLayeringFixes: "_y4tiutpp"
24
23
  };
@@ -73,7 +72,7 @@ export function TopNavEnd(_ref2) {
73
72
  }, [query]);
74
73
  return /*#__PURE__*/React.createElement("nav", {
75
74
  "aria-label": label,
76
- className: ax([containerStyles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes, fg('team25-eu-jira-logo-updates-csm-jsm') && containerStyles.jiraProductLogoUpdate])
75
+ className: ax([containerStyles.root, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && containerStyles.fullHeightSidebarWithLayeringFixes])
77
76
  }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
78
77
  isOpen: isOpen,
79
78
  onClose: function onClose() {
package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,5 +13,5 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3l1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}@supports (scroll-timeline-axis:block){html:not(:has([data-private-side-nav-header])) ._1kilgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._1m3l1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._12g81hrf{animation-fill-mode:both}}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}@supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
package/dist/esm/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -32,8 +32,7 @@ var flexGap = "var(--ds-space-050, 4px)";
32
32
  * which re-enables pointer events.
33
33
  */
34
34
  var innerStyles = {
35
- root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
36
- jiraProductLogoUpdate: "_15rip2n4",
35
+ root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15rip2n4 _1gs5usvi",
37
36
  fullHeightSidebar: "_lcxv1wug",
38
37
  fullHeightSidebarExpanded: "_15rin7od _glte1osq"
39
38
  };
@@ -110,7 +109,7 @@ var TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner(_ref
110
109
  return /*#__PURE__*/React.createElement("div", {
111
110
  ref: ref,
112
111
  "data-testid": testId,
113
- className: ax([innerStyles.root, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
112
+ className: ax([innerStyles.root])
114
113
  }, children);
115
114
  });
116
115
  var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_ref2, ref) {
@@ -145,7 +144,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
145
144
  }, /*#__PURE__*/React.createElement("div", {
146
145
  ref: ref,
147
146
  "data-testid": testId,
148
- className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
147
+ className: ax([innerStyles.root, !fg('platform-dst-side-nav-layering-fixes') && innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
149
148
  }, fg('platform-dst-side-nav-layering-fixes') ? /*#__PURE__*/React.createElement(OpenLayerObserverNamespaceProvider, {
150
149
  namespace: openLayerObserverTopNavStartNamespace
151
150
  }, children) : children));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "5.18.0",
3
+ "version": "5.19.0",
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",
@@ -116,7 +116,7 @@
116
116
  "@atlaskit/skeleton": "^2.1.0",
117
117
  "@atlaskit/textfield": "^8.2.0",
118
118
  "@atlassian/feature-flags-test-utils": "^1.0.0",
119
- "@atlassian/gemini": "^1.27.0",
119
+ "@atlassian/gemini": "^1.28.0",
120
120
  "@atlassian/search-dialog": "^9.10.0",
121
121
  "@atlassian/ssr-tests": "workspace:^",
122
122
  "@atlassian/test-utils": "^1.0.0",
@@ -157,9 +157,6 @@
157
157
  "platform_dst_nav4_side_nav_default_collapsed_api": {
158
158
  "type": "boolean"
159
159
  },
160
- "platform_dst_nav4_side_nav_toggle_ref_fix": {
161
- "type": "boolean"
162
- },
163
160
  "platform-component-visual-refresh": {
164
161
  "type": "boolean",
165
162
  "referenceOnly": true
@@ -176,9 +173,6 @@
176
173
  "navx-full-height-sidebar": {
177
174
  "type": "boolean"
178
175
  },
179
- "team25-eu-jira-logo-updates-csm-jsm": {
180
- "type": "boolean"
181
- },
182
176
  "platform_themed_button_use_icon_renderer": {
183
177
  "type": "boolean"
184
178
  },