@atlaskit/navigation-system 2.14.2 → 2.15.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/page-layout/side-nav/toggle-button.js +21 -2
  3. package/dist/es2019/ui/page-layout/side-nav/toggle-button.js +18 -2
  4. package/dist/esm/ui/page-layout/side-nav/toggle-button.js +21 -2
  5. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 2.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`71f5e9dd549f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71f5e9dd549f3) -
8
+ Adds a fix for the flyout breaking due to stale element references behind the
9
+ `platform_dst_nav4_side_nav_toggle_ref_fix` feature gate.
10
+
3
11
  ## 2.14.2
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -68,8 +68,27 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
68
68
  setIsSideNavExpanded = _useState2[1];
69
69
  var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
70
70
  var elementRef = (0, _react.useRef)(null);
71
+
72
+ /**
73
+ * Attempts to address HOT-121458 by ensuring that the toggle button element
74
+ * in context is always up to date.
75
+ *
76
+ * My theory is that something to do with SSR, hydration and suspense was causing the
77
+ * underlying HTML element to change but without causing the toggle button to remount.
78
+ *
79
+ * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
80
+ */
81
+ var _useState3 = (0, _react.useState)(null),
82
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
83
+ element = _useState4[0],
84
+ setElement = _useState4[1];
85
+ (0, _react.useEffect)(function () {
86
+ if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
87
+ ref(element);
88
+ }
89
+ }, [element, ref]);
71
90
  (0, _react.useEffect)(function () {
72
- if ((0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense')) {
91
+ if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
73
92
  ref(elementRef.current);
74
93
  }
75
94
  }, [elementRef, ref]);
@@ -133,7 +152,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
133
152
  testId: testId,
134
153
  isTooltipDisabled: UNSAFE_isTooltipDisabled,
135
154
  interactionName: interactionName,
136
- ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
155
+ ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
137
156
  tooltip: tooltipProps
138
157
  });
139
158
  var isInsideSlot = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonSlotContext);
package/dist/es2019/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -52,8 +52,24 @@ export const SideNavToggleButton = ({
52
52
  const [isSideNavExpanded, setIsSideNavExpanded] = useState(fg('platform_dst_nav4_full_height_sidebar_api_changes') ? isSideNavExpandedOnDesktop : !defaultCollapsed);
53
53
  const ref = useContext(SideNavToggleButtonAttachRef);
54
54
  const elementRef = useRef(null);
55
+
56
+ /**
57
+ * Attempts to address HOT-121458 by ensuring that the toggle button element
58
+ * in context is always up to date.
59
+ *
60
+ * My theory is that something to do with SSR, hydration and suspense was causing the
61
+ * underlying HTML element to change but without causing the toggle button to remount.
62
+ *
63
+ * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
64
+ */
65
+ const [element, setElement] = useState(null);
66
+ useEffect(() => {
67
+ if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
68
+ ref(element);
69
+ }
70
+ }, [element, ref]);
55
71
  useEffect(() => {
56
- if (fg('platform_fix_component_state_update_for_suspense')) {
72
+ if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
57
73
  ref(elementRef.current);
58
74
  }
59
75
  }, [elementRef, ref]);
@@ -117,7 +133,7 @@ export const SideNavToggleButton = ({
117
133
  testId: testId,
118
134
  isTooltipDisabled: UNSAFE_isTooltipDisabled,
119
135
  interactionName: interactionName,
120
- ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
136
+ ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
121
137
  tooltip: tooltipProps
122
138
  });
123
139
  const isInsideSlot = useContext(SideNavToggleButtonSlotContext);
package/dist/esm/ui/page-layout/side-nav/toggle-button.js CHANGED
@@ -59,8 +59,27 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
59
59
  setIsSideNavExpanded = _useState2[1];
60
60
  var ref = useContext(SideNavToggleButtonAttachRef);
61
61
  var elementRef = useRef(null);
62
+
63
+ /**
64
+ * Attempts to address HOT-121458 by ensuring that the toggle button element
65
+ * in context is always up to date.
66
+ *
67
+ * My theory is that something to do with SSR, hydration and suspense was causing the
68
+ * underlying HTML element to change but without causing the toggle button to remount.
69
+ *
70
+ * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
71
+ */
72
+ var _useState3 = useState(null),
73
+ _useState4 = _slicedToArray(_useState3, 2),
74
+ element = _useState4[0],
75
+ setElement = _useState4[1];
76
+ useEffect(function () {
77
+ if (fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
78
+ ref(element);
79
+ }
80
+ }, [element, ref]);
62
81
  useEffect(function () {
63
- if (fg('platform_fix_component_state_update_for_suspense')) {
82
+ if (!fg('platform_dst_nav4_side_nav_toggle_ref_fix')) {
64
83
  ref(elementRef.current);
65
84
  }
66
85
  }, [elementRef, ref]);
@@ -124,7 +143,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
124
143
  testId: testId,
125
144
  isTooltipDisabled: UNSAFE_isTooltipDisabled,
126
145
  interactionName: interactionName,
127
- ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
146
+ ref: fg('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
128
147
  tooltip: tooltipProps
129
148
  });
130
149
  var isInsideSlot = useContext(SideNavToggleButtonSlotContext);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "2.14.2",
3
+ "version": "2.15.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",
@@ -71,9 +71,9 @@
71
71
  "@atlaskit/button": "^23.5.0",
72
72
  "@atlaskit/css": "^0.14.0",
73
73
  "@atlaskit/ds-lib": "^5.1.0",
74
- "@atlaskit/icon": "^28.3.0",
74
+ "@atlaskit/icon": "^28.4.0",
75
75
  "@atlaskit/layering": "^3.0.0",
76
- "@atlaskit/logo": "^19.8.0",
76
+ "@atlaskit/logo": "^19.9.0",
77
77
  "@atlaskit/platform-feature-flags": "^1.1.0",
78
78
  "@atlaskit/popup": "^4.4.0",
79
79
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -146,6 +146,9 @@
146
146
  }
147
147
  },
148
148
  "platform-feature-flags": {
149
+ "platform_dst_nav4_side_nav_toggle_ref_fix": {
150
+ "type": "boolean"
151
+ },
149
152
  "platform-component-visual-refresh": {
150
153
  "type": "boolean",
151
154
  "referenceOnly": true