@atlaskit/navigation-system 7.1.0 → 7.1.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.
- package/CHANGELOG.md +7 -0
- package/constellation/layout/examples.mdx +56 -57
- package/constellation/layout/usage.mdx +18 -18
- package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +0 -4
- package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +0 -4
- package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +0 -4
- package/package.json +9 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 7.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`3088f1c2a117a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3088f1c2a117a) -
|
|
8
|
+
Cleanup platform_editor_topnavstart_delay_browser_check flag
|
|
9
|
+
|
|
3
10
|
## 7.1.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -27,17 +27,16 @@ When composing your page layout ensure that:
|
|
|
27
27
|
These are the distinct areas in the layout. These components are designed to contain other
|
|
28
28
|
components and content.
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
[ready-made navigation experiences (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
|
|
30
|
+
[View ready-made navigation experiences](https://hello.atlassian.net/wiki/x/rBE7MAE)
|
|
32
31
|
|
|
33
32
|
### Banner
|
|
34
33
|
|
|
35
|
-
Use the
|
|
34
|
+
Use the banner area to render a [banner](/components/banner) component. It will always display at
|
|
36
35
|
the top of the screen.
|
|
37
36
|
|
|
38
37
|
### Top nav
|
|
39
38
|
|
|
40
|
-
Use the
|
|
39
|
+
Use the top nav area to render [top nav items](/components/navigation-system/top-nav-items).
|
|
41
40
|
|
|
42
41
|
- It will display at the top of the screen, below the banner if one is present. It has a fixed
|
|
43
42
|
height of 48px.
|
|
@@ -47,12 +46,12 @@ Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav
|
|
|
47
46
|
|
|
48
47
|
#### Top nav slots
|
|
49
48
|
|
|
50
|
-
The
|
|
49
|
+
The top nav has three layout components that you must use to position
|
|
51
50
|
[top nav items](/components/navigation-system/top-nav-items) within the top nav flexbox.
|
|
52
51
|
|
|
53
|
-
- `TopNavStart
|
|
54
|
-
- `TopNavMiddle
|
|
55
|
-
- `TopNavEnd
|
|
52
|
+
- `TopNavStart`: Area for left-aligned items.
|
|
53
|
+
- `TopNavMiddle`: Area for centre-aligned items.
|
|
54
|
+
- `TopNavEnd`: Area for right-aligned items.
|
|
56
55
|
|
|
57
56
|
#### Top nav custom theming
|
|
58
57
|
|
|
@@ -60,7 +59,7 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
|
|
|
60
59
|
|
|
61
60
|
### Side nav
|
|
62
61
|
|
|
63
|
-
- Use the
|
|
62
|
+
- Use the side nav area to
|
|
64
63
|
render [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). It
|
|
65
64
|
will show on the left of the screen. The default width of the side nav is 320px.
|
|
66
65
|
- Use the [side nav slots](#side-nav-slots) to position content within the side nav.
|
|
@@ -68,13 +67,13 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
|
|
|
68
67
|
|
|
69
68
|
#### Side nav slots
|
|
70
69
|
|
|
71
|
-
The
|
|
72
|
-
|
|
70
|
+
The side nav has three layout components that you can use to position components within the side nav
|
|
71
|
+
flexbox.
|
|
73
72
|
|
|
74
|
-
- `SideNavHeader
|
|
75
|
-
- `SideNavBody
|
|
73
|
+
- `SideNavHeader`: The top part of the side nav.
|
|
74
|
+
- `SideNavBody`: The middle part of the side nav. It acts as a scroll container. It will grow to
|
|
76
75
|
take up the available space — this is used to push the footer to the bottom of the side nav.
|
|
77
|
-
- `SideNavFooter
|
|
76
|
+
- `SideNavFooter`: The bottom part of the side nav.
|
|
78
77
|
|
|
79
78
|
Note: make sure to render `SideNavBody` to ensure that the footer is positioned at the bottom of the
|
|
80
79
|
side nav, simulating a sticky footer.
|
|
@@ -116,13 +115,13 @@ This is useful for toggling the side nav based on a keyboard shortcut.
|
|
|
116
115
|
- In the collapsed state, hovering over the `SideNavToggleButton` from
|
|
117
116
|
[top nav items](/components/navigation-system/top-nav-items/examples#start-items) will trigger the
|
|
118
117
|
side nav to open as an overlay. Moving the curser away will close it. If there are any open
|
|
119
|
-
supported ADS layering components (e.g.
|
|
118
|
+
supported ADS layering components (e.g. popups, dropdown menus) within the side nav, the flyout
|
|
120
119
|
will stay locked open, until the layering components are closed.
|
|
121
120
|
|
|
122
121
|
- The expansion and collapse of the side nav flyout is animated on **supported browsers**.
|
|
123
122
|
Currently, Firefox does not support the animation. Instead, it will instantly expand and collapse.
|
|
124
123
|
|
|
125
|
-
|
|
124
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
126
125
|
|
|
127
126
|
#### Side nav resizing
|
|
128
127
|
|
|
@@ -135,7 +134,7 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
|
|
|
135
134
|
tooltips) will be closed.
|
|
136
135
|
- The side nav panel splitter can be also double clicked to collapse the side nav.
|
|
137
136
|
|
|
138
|
-
|
|
137
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
139
138
|
|
|
140
139
|
#### Side nav responsive
|
|
141
140
|
|
|
@@ -146,14 +145,14 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
|
|
|
146
145
|
- At `xs` and `xxs` breakpoints (i.e. viewports smaller than 768px), the max width of the overlay
|
|
147
146
|
side nav is either 320px or 90% of the screen width - whichever value is smaller.
|
|
148
147
|
|
|
149
|
-
|
|
148
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
150
149
|
|
|
151
150
|
### Main
|
|
152
151
|
|
|
153
|
-
Use
|
|
154
|
-
fill available space.
|
|
152
|
+
Use the main area for the [page header](/components/page-header) and main page content. It will
|
|
153
|
+
expand to fill available space.
|
|
155
154
|
|
|
156
|
-
- On large viewports
|
|
155
|
+
- On large viewports main can be fixed, meaning it will have its own scroll container and not use
|
|
157
156
|
the body scroll.
|
|
158
157
|
- On small viewports, the element will always use body scroll, to make it easier to scroll the page
|
|
159
158
|
when the content is tall.
|
|
@@ -161,43 +160,43 @@ fill available space.
|
|
|
161
160
|
### Aside
|
|
162
161
|
|
|
163
162
|
<SectionMessage appearance="warning" title="Caution">
|
|
164
|
-
We are planning on deprecating the
|
|
163
|
+
We are planning on deprecating the aside component. Please use panel instead.
|
|
165
164
|
</SectionMessage>
|
|
166
165
|
|
|
167
|
-
|
|
166
|
+
The aside area is rendered to the right of the main area.
|
|
168
167
|
|
|
169
|
-
- The default width of the
|
|
168
|
+
- The default width of the aside is 330px, and it is
|
|
170
169
|
[resizable](/components/navigation-system/layout/examples#aside-resizing) and
|
|
171
170
|
[responsive](/components/navigation-system/layout/examples#aside-responsive).
|
|
172
|
-
- On large viewports the
|
|
171
|
+
- On large viewports the aside can be fixed, meaning it will have its own scroll container and not
|
|
173
172
|
use the body scroll.
|
|
174
173
|
- On small viewports, the element will always use body scroll, to make it easier to scroll the page
|
|
175
174
|
when the content is tall.
|
|
176
175
|
|
|
177
|
-
|
|
176
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
178
177
|
|
|
179
178
|
#### Aside resizing
|
|
180
179
|
|
|
181
|
-
You can optionally render a [panel splitter](#resizable-areas) as a child to make the
|
|
180
|
+
You can optionally render a [panel splitter](#resizable-areas) as a child to make the aside
|
|
182
181
|
resizable.
|
|
183
182
|
|
|
184
183
|
- It is resized using the drag handle. When hovering on the drag handle the mouse pointer changes to
|
|
185
184
|
a resize pointer.
|
|
186
|
-
- The
|
|
185
|
+
- The aside can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
|
|
187
186
|
total viewport width. It retains this resized width even after refreshing the page.
|
|
188
187
|
|
|
189
|
-
|
|
188
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
190
189
|
|
|
191
190
|
#### Aside responsive
|
|
192
191
|
|
|
193
|
-
At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the
|
|
194
|
-
|
|
192
|
+
At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the
|
|
193
|
+
main area, and conforms to main width and behaviour.
|
|
195
194
|
|
|
196
|
-
|
|
195
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
197
196
|
|
|
198
197
|
### Panel
|
|
199
198
|
|
|
200
|
-
The
|
|
199
|
+
The panel area is rendered to the right of the main and aside areas.
|
|
201
200
|
|
|
202
201
|
- The default width of the panel is 365px, which can be modified using the `defaultWidth` prop.
|
|
203
202
|
- The panel is
|
|
@@ -206,13 +205,13 @@ The `Panel` is rendered to the right of the `Main` and `Aside` areas.
|
|
|
206
205
|
[responsive](/components/navigation-system/layout/examples#panel-responsive).
|
|
207
206
|
|
|
208
207
|
Common usage is to house
|
|
209
|
-
[Preview panel
|
|
208
|
+
[Preview panel](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
|
|
210
209
|
|
|
211
210
|
#### Panel collapse/expand
|
|
212
211
|
|
|
213
212
|
The panel can be collapsed and expanded using a trigger of your choosing.
|
|
214
213
|
|
|
215
|
-
|
|
214
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
216
215
|
|
|
217
216
|
#### Panel resizing
|
|
218
217
|
|
|
@@ -221,18 +220,18 @@ resizable. It can be resized using the drag handle. When hovering on the drag ha
|
|
|
221
220
|
pointer changes to a resize pointer.
|
|
222
221
|
|
|
223
222
|
- The panel can be resized larger than the `defaultWidth` to a maximum of 50% of content area
|
|
224
|
-
(viewport minus
|
|
223
|
+
(viewport minus the side nav area).
|
|
225
224
|
- It retains this resized width even after collapsing, reopening, or refreshing the page.
|
|
226
225
|
- It has no ability to resize smaller than `defaultWidth`.
|
|
227
226
|
|
|
228
|
-
|
|
227
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
229
228
|
|
|
230
229
|
#### Panel responsive
|
|
231
230
|
|
|
232
|
-
At `m` breakpoints (between 1024-1440px), the
|
|
233
|
-
below (less than 1024px) it will start to overlay the
|
|
231
|
+
At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints
|
|
232
|
+
and below (less than 1024px) it will start to overlay the main area.
|
|
234
233
|
|
|
235
|
-
|
|
234
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
236
235
|
|
|
237
236
|
## Resizable areas
|
|
238
237
|
|
|
@@ -240,31 +239,31 @@ Render a `PanelSplitter` in a layout area to make it resizable.
|
|
|
240
239
|
|
|
241
240
|
Resizing is supported for the following areas:
|
|
242
241
|
|
|
243
|
-
- [
|
|
242
|
+
- [Side nav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
|
|
244
243
|
- [Aside](/components/navigation-system/layout/examples#aside) - use `PanelSplitter`
|
|
245
244
|
- [Panel](/components/navigation-system/layout/examples#panel) - use `PanelSplitter`
|
|
246
245
|
|
|
247
|
-
|
|
246
|
+
[View interactive example](https://go.atlassian.com/nav4-interactive-example)
|
|
248
247
|
|
|
249
|
-
| Area | Default width | Min width | Max width
|
|
250
|
-
| --------- | ------------------ | --------------------- |
|
|
251
|
-
| `SideNav` | 320px | 240px | 50% of viewport width
|
|
252
|
-
| `Aside` | 330px (modifiable) | 120px | 50% of viewport width
|
|
253
|
-
| `Panel` | 365px (modifiable) | Same as default width | 50% of content area (viewport minus
|
|
248
|
+
| Area | Default width | Min width | Max width |
|
|
249
|
+
| --------- | ------------------ | --------------------- | ------------------------------------------------------ |
|
|
250
|
+
| `SideNav` | 320px | 240px | 50% of viewport width |
|
|
251
|
+
| `Aside` | 330px (modifiable) | 120px | 50% of viewport width |
|
|
252
|
+
| `Panel` | 365px (modifiable) | Same as default width | 50% of content area (viewport minus the side nav area) |
|
|
254
253
|
|
|
255
254
|
## Responsive
|
|
256
255
|
|
|
257
256
|
Layout areas respond to the viewport size. See default behaviour below, or the
|
|
258
|
-
[interactive example
|
|
259
|
-
|
|
260
|
-
| Breakpoint | Viewport | Side nav | Aside | Panel
|
|
261
|
-
| ---------- | ------------- | --------------------------- | ------------ |
|
|
262
|
-
| `xxs` | 320 - 479px | Collapsed; opens as overlay | Below
|
|
263
|
-
| `xs` | 480 - 767px | Collapsed; opens as overlay | Below
|
|
264
|
-
| `s` | 768 - 1023px | Collapsed; opens as overlay | Below
|
|
265
|
-
| `m` | 1024 - 1439px | Expanded (inline) | Next to
|
|
266
|
-
| `l` | 1440 - 1767px | Expanded (inline) | Next to
|
|
267
|
-
| `xl` | 1768+px | Expanded (inline) | Next to
|
|
257
|
+
[interactive example](https://go.atlassian.com/nav4-interactive-example).
|
|
258
|
+
|
|
259
|
+
| Breakpoint | Viewport | Side nav | Aside | Panel |
|
|
260
|
+
| ---------- | ------------- | --------------------------- | ------------ | -------------------------------------------------------------------- |
|
|
261
|
+
| `xxs` | 320 - 479px | Collapsed; opens as overlay | Below main | Collapsed; opens as overlay (over the main area) |
|
|
262
|
+
| `xs` | 480 - 767px | Collapsed; opens as overlay | Below main | Collapsed; opens as overlay (over the main area) |
|
|
263
|
+
| `s` | 768 - 1023px | Collapsed; opens as overlay | Below main | Collapsed; opens as overlay (over the main area) |
|
|
264
|
+
| `m` | 1024 - 1439px | Expanded (inline) | Next to main | Collapsed; opens inline (or as overlay if the aside area is present) |
|
|
265
|
+
| `l` | 1440 - 1767px | Expanded (inline) | Next to main | Collapsed; Opens inline |
|
|
266
|
+
| `xl` | 1768+px | Expanded (inline) | Next to main | Collapsed; Opens inline |
|
|
268
267
|
|
|
269
268
|
## Custom skip links
|
|
270
269
|
|
|
@@ -39,9 +39,9 @@ When applying components to the navigational areas,
|
|
|
39
39
|
</ol>
|
|
40
40
|
</li>
|
|
41
41
|
<li>
|
|
42
|
-
<strong>Side nav:</strong> Use to display
|
|
43
|
-
|
|
44
|
-
collapsible.
|
|
42
|
+
<strong>Side nav:</strong> Use to display{' '}
|
|
43
|
+
<a href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items">side nav items</a>.
|
|
44
|
+
Is resizable and collapsible.
|
|
45
45
|
<ol type="a" start="4">
|
|
46
46
|
<li>
|
|
47
47
|
<strong>Side nav header:</strong> Optional. Top part of the side nav (fixed).
|
|
@@ -60,7 +60,7 @@ When applying components to the navigational areas,
|
|
|
60
60
|
</li>
|
|
61
61
|
<li>
|
|
62
62
|
<strong>Aside:</strong> Optional. Use to display supporting or supplementary content. Is
|
|
63
|
-
resizable. <em>We plan to deprecate this component, please use
|
|
63
|
+
resizable. <em>We plan to deprecate this component, please use panel instead.</em>
|
|
64
64
|
</li>
|
|
65
65
|
<li>
|
|
66
66
|
<strong>Panel:</strong> Optional. Use to display supporting or supplementary content. Is
|
|
@@ -68,33 +68,33 @@ When applying components to the navigational areas,
|
|
|
68
68
|
</li>
|
|
69
69
|
</ol>
|
|
70
70
|
|
|
71
|
-
### The difference between
|
|
71
|
+
### The difference between aside, panel and modal dialog
|
|
72
72
|
|
|
73
73
|
<SectionMessage appearance="warning" title="Caution">
|
|
74
|
-
We are planning on deprecating the
|
|
74
|
+
We are planning on deprecating the aside component. Please use panel instead.
|
|
75
75
|
</SectionMessage>
|
|
76
76
|
|
|
77
|
-
The main difference between
|
|
77
|
+
The main difference between aside, panel and modal dialog is their behaviours:
|
|
78
78
|
|
|
79
|
-
- **Aside** is not collapsible, while **
|
|
80
|
-
- **Panel** and **
|
|
79
|
+
- **Aside** is not collapsible, while **panel** can be collapsible.
|
|
80
|
+
- **Panel** and **aside** present content alongside the **main** area, while **modal dialog** exists
|
|
81
81
|
in a layer above the page.
|
|
82
|
-
- On small viewports (1024px and below), the **
|
|
83
|
-
below **
|
|
82
|
+
- On small viewports (1024px and below), the **panel** becomes an overlay, while the **aside** moves
|
|
83
|
+
below **main**.
|
|
84
84
|
|
|
85
85
|
#### Usage guidance:
|
|
86
86
|
|
|
87
|
-
- Use **
|
|
87
|
+
- Use **aside** for content that needs to be constantly visible and accessible without requiring the
|
|
88
88
|
user to open it, or have the ability to close it.
|
|
89
|
-
- Use **
|
|
89
|
+
- Use **panel** for contextual information or tertiary actions that complement the user's workflow.
|
|
90
90
|
Panels enable greater multitasking by functioning as an additional work space, while keeping users
|
|
91
91
|
connected to their primary task.
|
|
92
|
-
- Use **
|
|
92
|
+
- Use **modal dialog** when you need your user to focus their attention on a single or specific
|
|
93
93
|
task, like requiring a decision or action before they can return to their primary task.
|
|
94
94
|
|
|
95
95
|
## Best practices
|
|
96
96
|
|
|
97
|
-
### Design using grid in the
|
|
97
|
+
### Design using grid in the main area
|
|
98
98
|
|
|
99
99
|
<DoDontGrid>
|
|
100
100
|
<DoDont
|
|
@@ -105,8 +105,8 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
|
|
|
105
105
|
}}
|
|
106
106
|
isFullWidth
|
|
107
107
|
>
|
|
108
|
-
When designing, use <a href="/foundations/grid-beta">
|
|
109
|
-
|
|
108
|
+
When designing, use <a href="/foundations/grid-beta">grid</a> to position content within the
|
|
109
|
+
main area only.
|
|
110
110
|
</DoDont>
|
|
111
111
|
<DoDont
|
|
112
112
|
type="dont"
|
|
@@ -116,7 +116,7 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
|
|
|
116
116
|
}}
|
|
117
117
|
isFullWidth
|
|
118
118
|
>
|
|
119
|
-
Don't include
|
|
119
|
+
Don't include side nav, aside or panel areas as part of your grid.
|
|
120
120
|
</DoDont>
|
|
121
121
|
</DoDontGrid>
|
|
122
122
|
|
|
@@ -13,7 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
|
|
15
15
|
var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
18
17
|
var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
|
|
19
18
|
var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
|
|
@@ -154,9 +153,6 @@ function TopNavStart(_ref3) {
|
|
|
154
153
|
var children = _ref3.children,
|
|
155
154
|
testId = _ref3.testId,
|
|
156
155
|
sideNavToggleButton = _ref3.sideNavToggleButton;
|
|
157
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_topnavstart_delay_browser_check')) {
|
|
158
|
-
isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
159
|
-
}
|
|
160
156
|
var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
|
|
161
157
|
var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
|
|
162
158
|
var elementRef = (0, _react.useRef)(null);
|
|
@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
4
4
|
import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
5
5
|
import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
|
|
6
6
|
import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
9
8
|
import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
|
|
10
9
|
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
@@ -149,9 +148,6 @@ export function TopNavStart({
|
|
|
149
148
|
testId,
|
|
150
149
|
sideNavToggleButton
|
|
151
150
|
}) {
|
|
152
|
-
if (fg('platform_editor_topnavstart_delay_browser_check')) {
|
|
153
|
-
isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
154
|
-
}
|
|
155
151
|
const isFhsEnabled = useIsFhsEnabled();
|
|
156
152
|
const ref = useContext(TopNavStartAttachRef);
|
|
157
153
|
const elementRef = useRef(null);
|
|
@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
6
6
|
import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
|
|
7
7
|
import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
10
9
|
import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
|
|
11
10
|
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
|
|
@@ -146,9 +145,6 @@ export function TopNavStart(_ref3) {
|
|
|
146
145
|
var children = _ref3.children,
|
|
147
146
|
testId = _ref3.testId,
|
|
148
147
|
sideNavToggleButton = _ref3.sideNavToggleButton;
|
|
149
|
-
if (fg('platform_editor_topnavstart_delay_browser_check')) {
|
|
150
|
-
isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
151
|
-
}
|
|
152
148
|
var isFhsEnabled = useIsFhsEnabled();
|
|
153
149
|
var ref = useContext(TopNavStartAttachRef);
|
|
154
150
|
var elementRef = useRef(null);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.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",
|
|
@@ -64,19 +64,19 @@
|
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@atlaskit/analytics-next": "^11.2.0",
|
|
67
|
-
"@atlaskit/avatar": "^25.
|
|
67
|
+
"@atlaskit/avatar": "^25.11.0",
|
|
68
68
|
"@atlaskit/button": "^23.10.0",
|
|
69
69
|
"@atlaskit/css": "^0.19.0",
|
|
70
70
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
71
|
-
"@atlaskit/icon": "^33.
|
|
71
|
+
"@atlaskit/icon": "^33.1.0",
|
|
72
72
|
"@atlaskit/layering": "^3.6.0",
|
|
73
73
|
"@atlaskit/logo": "^19.10.0",
|
|
74
74
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
75
75
|
"@atlaskit/popup": "^4.14.0",
|
|
76
76
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
77
|
-
"@atlaskit/primitives": "^18.
|
|
77
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
78
78
|
"@atlaskit/side-nav-items": "^1.12.0",
|
|
79
|
-
"@atlaskit/tokens": "^11.
|
|
79
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
80
80
|
"@atlaskit/tooltip": "^21.0.0",
|
|
81
81
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
82
82
|
"@babel/runtime": "^7.0.0",
|
|
@@ -96,14 +96,14 @@
|
|
|
96
96
|
"@atlaskit/app-provider": "^4.1.0",
|
|
97
97
|
"@atlaskit/badge": "^18.4.0",
|
|
98
98
|
"@atlaskit/banner": "^14.0.0",
|
|
99
|
-
"@atlaskit/breadcrumbs": "^
|
|
99
|
+
"@atlaskit/breadcrumbs": "^16.0.0",
|
|
100
100
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
101
101
|
"@atlaskit/form": "^15.5.0",
|
|
102
102
|
"@atlaskit/heading": "^5.3.0",
|
|
103
103
|
"@atlaskit/link": "^3.3.0",
|
|
104
104
|
"@atlaskit/lozenge": "^13.5.0",
|
|
105
105
|
"@atlaskit/menu": "^8.4.0",
|
|
106
|
-
"@atlaskit/modal-dialog": "^14.
|
|
106
|
+
"@atlaskit/modal-dialog": "^14.13.0",
|
|
107
107
|
"@atlaskit/onboarding": "^14.5.0",
|
|
108
108
|
"@atlaskit/page-header": "^12.1.0",
|
|
109
109
|
"@atlaskit/page-layout": "^4.2.0",
|
|
@@ -114,11 +114,11 @@
|
|
|
114
114
|
"@atlaskit/textfield": "^8.2.0",
|
|
115
115
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
116
116
|
"@atlassian/gemini": "^1.38.0",
|
|
117
|
-
"@atlassian/search-dialog": "^9.
|
|
117
|
+
"@atlassian/search-dialog": "^9.18.0",
|
|
118
118
|
"@atlassian/ssr-tests": "workspace:^",
|
|
119
119
|
"@atlassian/test-utils": "^1.0.0",
|
|
120
120
|
"@atlassian/testing-library": "^0.4.0",
|
|
121
|
-
"@axe-core/playwright": "^4.
|
|
121
|
+
"@axe-core/playwright": "^4.11.1",
|
|
122
122
|
"@testing-library/react": "^16.3.0",
|
|
123
123
|
"@testing-library/user-event": "^14.4.3",
|
|
124
124
|
"raf-stub": "^2.0.1",
|
|
@@ -174,9 +174,6 @@
|
|
|
174
174
|
},
|
|
175
175
|
"platform_dst_nav4_flyout_menu_slots_close_button": {
|
|
176
176
|
"type": "boolean"
|
|
177
|
-
},
|
|
178
|
-
"platform_editor_topnavstart_delay_browser_check": {
|
|
179
|
-
"type": "boolean"
|
|
180
177
|
}
|
|
181
178
|
},
|
|
182
179
|
"homepage": "https://atlassian.design/components/navigation-system"
|