@atlaskit/side-navigation 2.0.4 → 2.0.5

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 (29) hide show
  1. package/CHANGELOG.md +71 -65
  2. package/constellation/index/examples.mdx +19 -10
  3. package/constellation/index/props.mdx +12 -12
  4. package/constellation/index/usage.mdx +5 -5
  5. package/dist/cjs/common/constants.js +2 -4
  6. package/dist/cjs/common/styles.js +4 -7
  7. package/dist/cjs/components/Footer/index.js +1 -2
  8. package/dist/cjs/components/Header/index.js +2 -4
  9. package/dist/cjs/components/Item/button-item.js +1 -2
  10. package/dist/cjs/components/Item/custom-item.js +1 -2
  11. package/dist/cjs/components/Item/go-back-item.js +1 -2
  12. package/dist/cjs/components/Item/link-item.js +1 -2
  13. package/dist/cjs/components/Item/skeleton-item.js +1 -2
  14. package/dist/cjs/components/LoadingItems/index.js +1 -2
  15. package/dist/cjs/components/NavigationContent/index.js +1 -2
  16. package/dist/cjs/components/NavigationContent/styles.js +4 -7
  17. package/dist/cjs/components/NavigationFooter/index.js +1 -2
  18. package/dist/cjs/components/NavigationHeader/index.js +1 -2
  19. package/dist/cjs/components/NestableNavigationContent/context.js +4 -7
  20. package/dist/cjs/components/NestableNavigationContent/index.js +2 -4
  21. package/dist/cjs/components/NestableNavigationContent/nesting-motion.js +2 -3
  22. package/dist/cjs/components/NestingItem/index.js +1 -2
  23. package/dist/cjs/components/NestingItem/styles.js +3 -5
  24. package/dist/cjs/components/Section/heading-item.js +1 -2
  25. package/dist/cjs/components/Section/section.js +1 -2
  26. package/dist/cjs/components/Section/skeleton-heading-item.js +1 -2
  27. package/dist/cjs/components/SideNavigation/index.js +1 -2
  28. package/dist/cjs/components/utils/hooks.js +3 -5
  29. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,41 +1,47 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 2.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 2.0.4
4
10
 
5
11
  ### Patch Changes
6
12
 
7
- - [`879275819ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/879275819ed) - Fix for `data-testid` not being applied to Header.
13
+ - [#39812](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39812) [`879275819ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/879275819ed) - Fix for `data-testid` not being applied to Header.
8
14
 
9
15
  ## 2.0.3
10
16
 
11
17
  ### Patch Changes
12
18
 
13
- - [`e3b28897c5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3b28897c5f) - Internal code changes. There is no expected change in behaviour.
19
+ - [#39264](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39264) [`e3b28897c5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3b28897c5f) - Internal code changes. There is no expected change in behaviour.
14
20
  - Updated dependencies
15
21
 
16
22
  ## 2.0.2
17
23
 
18
24
  ### Patch Changes
19
25
 
20
- - [`bff06efcf86`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bff06efcf86) - Fix a bug where `className` was not being applied to Header.
26
+ - [#39419](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39419) [`bff06efcf86`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bff06efcf86) - Fix a bug where `className` was not being applied to Header.
21
27
 
22
28
  ## 2.0.1
23
29
 
24
30
  ### Patch Changes
25
31
 
26
- - [`cac6bbb702d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac6bbb702d) - The internal composition of this component has changed. There is no expected change in behavior.
32
+ - [#38751](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38751) [`cac6bbb702d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac6bbb702d) - The internal composition of this component has changed. There is no expected change in behavior.
27
33
 
28
34
  ## 2.0.0
29
35
 
30
36
  ### Major Changes
31
37
 
32
- - [`cf66b43d67a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf66b43d67a) - Updated spacing of Side Navigation components to ensure token values and fallbacks are matching. When used with space tokens enabled, there is no visual difference with the previous release of Side Navigation. When used without space tokens enabled there will be a slight visual difference; we recommend enabling space tokens if they are not already enabled to resolve this.
38
+ - [#38561](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38561) [`cf66b43d67a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf66b43d67a) - Updated spacing of Side Navigation components to ensure token values and fallbacks are matching. When used with space tokens enabled, there is no visual difference with the previous release of Side Navigation. When used without space tokens enabled there will be a slight visual difference; we recommend enabling space tokens if they are not already enabled to resolve this.
33
39
 
34
40
  ## 1.10.4
35
41
 
36
42
  ### Patch Changes
37
43
 
38
- - [`1ed303de3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed303de3e8) - Updated dependencies
44
+ - [#37533](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37533) [`1ed303de3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed303de3e8) - Updated dependencies
39
45
 
40
46
  ## 1.10.3
41
47
 
@@ -59,13 +65,13 @@
59
65
 
60
66
  ### Minor Changes
61
67
 
62
- - [`ee296a14a87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee296a14a87) - Adds the `showTopScrollIndicator` prop to the nestable navigation content component. This prop should be used only when needed to distinctly separate the side navigation header from the side navigation content.
68
+ - [#36118](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36118) [`ee296a14a87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee296a14a87) - Adds the `showTopScrollIndicator` prop to the nestable navigation content component. This prop should be used only when needed to distinctly separate the side navigation header from the side navigation content.
63
69
 
64
70
  ## 1.9.0
65
71
 
66
72
  ### Minor Changes
67
73
 
68
- - [`0af122e7d0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0af122e7d0f) - [ux] Prop isList in Section component allows to add `<ul>` and `<li>` elements around the items to better semantic markup if it is a list of items
74
+ - [#35164](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35164) [`0af122e7d0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0af122e7d0f) - [ux] Prop isList in Section component allows to add `<ul>` and `<li>` elements around the items to better semantic markup if it is a list of items
69
75
 
70
76
  ### Patch Changes
71
77
 
@@ -87,14 +93,14 @@
87
93
 
88
94
  ### Patch Changes
89
95
 
90
- - [`967dd926bfc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/967dd926bfc) - Updates all navigation components to use border/shape tokens. This is a no-op as these tokens are not enabled in product.
96
+ - [#35385](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35385) [`967dd926bfc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/967dd926bfc) - Updates all navigation components to use border/shape tokens. This is a no-op as these tokens are not enabled in product.
91
97
  - Updated dependencies
92
98
 
93
99
  ## 1.8.7
94
100
 
95
101
  ### Patch Changes
96
102
 
97
- - [`4757acc0f98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4757acc0f98) - Internal change to use space tokens for spacing properties. There is no visual change.
103
+ - [#35460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35460) [`4757acc0f98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4757acc0f98) - Internal change to use space tokens for spacing properties. There is no visual change.
98
104
 
99
105
  ## 1.8.6
100
106
 
@@ -118,25 +124,25 @@
118
124
 
119
125
  ### Patch Changes
120
126
 
121
- - [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
127
+ - [#34881](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34881) [`774ed69ecef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/774ed69ecef) - Internal changes to use space tokens for spacing values. There is no visual change.
122
128
 
123
129
  ## 1.8.2
124
130
 
125
131
  ### Patch Changes
126
132
 
127
- - [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
133
+ - [#33652](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33652) [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
128
134
 
129
135
  ## 1.8.1
130
136
 
131
137
  ### Patch Changes
132
138
 
133
- - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
139
+ - [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
134
140
 
135
141
  ## 1.8.0
136
142
 
137
143
  ### Minor Changes
138
144
 
139
- - [`d518f0e34b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d518f0e34b9) - [ux] We are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages behind an internal feature flag. If successful this will be released in a later minor release.
145
+ - [#33349](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33349) [`d518f0e34b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d518f0e34b9) - [ux] We are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages behind an internal feature flag. If successful this will be released in a later minor release.
140
146
 
141
147
  ### Patch Changes
142
148
 
@@ -146,13 +152,13 @@
146
152
 
147
153
  ### Patch Changes
148
154
 
149
- - [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
155
+ - [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
150
156
 
151
157
  ## 1.7.0
152
158
 
153
159
  ### Minor Changes
154
160
 
155
- - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
161
+ - [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
156
162
 
157
163
  ### Patch Changes
158
164
 
@@ -162,13 +168,13 @@
162
168
 
163
169
  ### Patch Changes
164
170
 
165
- - [`65e4baeea85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/65e4baeea85) - Internal changes.
171
+ - [#32211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32211) [`65e4baeea85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/65e4baeea85) - Internal changes.
166
172
 
167
173
  ## 1.6.7
168
174
 
169
175
  ### Patch Changes
170
176
 
171
- - [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
177
+ - [#32424](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32424) [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
172
178
 
173
179
  ## 1.6.6
174
180
 
@@ -180,7 +186,7 @@
180
186
 
181
187
  ### Patch Changes
182
188
 
183
- - [`f7f852b0a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7f852b0a4f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
189
+ - [#32173](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32173) [`f7f852b0a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7f852b0a4f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
184
190
 
185
191
  ## 1.6.4
186
192
 
@@ -204,14 +210,14 @@
204
210
 
205
211
  ### Patch Changes
206
212
 
207
- - [`3ca97be0c06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ca97be0c06) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
213
+ - [#31378](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31378) [`3ca97be0c06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ca97be0c06) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
208
214
  - Updated dependencies
209
215
 
210
216
  ## 1.6.0
211
217
 
212
218
  ### Minor Changes
213
219
 
214
- - [`62c9d42799c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62c9d42799c) - [ux] The `Footer` component will now warn a user if they are relying on a deprecated API. The `cssFn`, `onClick` and `component` are all considered deprecated APIs for `Footer`.
220
+ - [#30362](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30362) [`62c9d42799c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62c9d42799c) - [ux] The `Footer` component will now warn a user if they are relying on a deprecated API. The `cssFn`, `onClick` and `component` are all considered deprecated APIs for `Footer`.
215
221
 
216
222
  Additionally, the space between icons and content has been shifted form `16px` to `12px`. This matches `@atlaskit/menu`.
217
223
 
@@ -231,20 +237,20 @@
231
237
 
232
238
  ### Patch Changes
233
239
 
234
- - [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
240
+ - [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390) [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
235
241
 
236
242
  ## 1.5.1
237
243
 
238
244
  ### Patch Changes
239
245
 
240
- - [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
246
+ - [#27891](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27891) [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
241
247
  - Updated dependencies
242
248
 
243
249
  ## 1.5.0
244
250
 
245
251
  ### Minor Changes
246
252
 
247
- - [`caa68aad0fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/caa68aad0fd) - Internal changes around styles:
253
+ - [#28090](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28090) [`caa68aad0fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/caa68aad0fd) - Internal changes around styles:
248
254
 
249
255
  - Application of primitives for more declarative code
250
256
  - Application of spacing tokens to internal styles
@@ -276,19 +282,19 @@
276
282
 
277
283
  ### Minor Changes
278
284
 
279
- - [`5c065ba2010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c065ba2010) - Improve state management to allow detection of invalid stack state. Add prop `onUnknownNest` to allow handling of invalid stack state.
285
+ - [#26817](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26817) [`5c065ba2010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c065ba2010) - Improve state management to allow detection of invalid stack state. Add prop `onUnknownNest` to allow handling of invalid stack state.
280
286
 
281
287
  ## 1.3.1
282
288
 
283
289
  ### Patch Changes
284
290
 
285
- - [`5f36f2ce46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36f2ce46d) - Adds a defensive `css()` function wrapping to many of the style calls in the side-navigation package. This is expected to help fix an issue with certain styles in side navigation not appearing if consumed when different versions of `@emotion` are present on the page.
291
+ - [#26390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26390) [`5f36f2ce46d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36f2ce46d) - Adds a defensive `css()` function wrapping to many of the style calls in the side-navigation package. This is expected to help fix an issue with certain styles in side navigation not appearing if consumed when different versions of `@emotion` are present on the page.
286
292
 
287
293
  ## 1.3.0
288
294
 
289
295
  ### Minor Changes
290
296
 
291
- - [`02e2f7aacef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02e2f7aacef) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
297
+ - [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`02e2f7aacef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02e2f7aacef) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
292
298
 
293
299
  ### Patch Changes
294
300
 
@@ -298,19 +304,19 @@
298
304
 
299
305
  ### Patch Changes
300
306
 
301
- - [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
307
+ - [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
302
308
 
303
309
  ## 1.2.14
304
310
 
305
311
  ### Patch Changes
306
312
 
307
- - [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
313
+ - [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
308
314
 
309
315
  ## 1.2.13
310
316
 
311
317
  ### Patch Changes
312
318
 
313
- - [`b2767947029`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2767947029) - Internal code change turning on new linting rules.
319
+ - [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`b2767947029`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2767947029) - Internal code change turning on new linting rules.
314
320
  - Updated dependencies
315
321
 
316
322
  ## 1.2.12
@@ -323,7 +329,7 @@
323
329
 
324
330
  ### Patch Changes
325
331
 
326
- - [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
332
+ - [#21545](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21545) [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
327
333
 
328
334
  ## 1.2.10
329
335
 
@@ -335,13 +341,13 @@
335
341
 
336
342
  ### Patch Changes
337
343
 
338
- - [`85ca75319b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85ca75319b1) - Move side-navigation docs to Constellation (atlassian.design)
344
+ - [#21309](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21309) [`85ca75319b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85ca75319b1) - Move side-navigation docs to Constellation (atlassian.design)
339
345
 
340
346
  ## 1.2.8
341
347
 
342
348
  ### Patch Changes
343
349
 
344
- - [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
350
+ - [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
345
351
 
346
352
  ## 1.2.7
347
353
 
@@ -353,7 +359,7 @@
353
359
 
354
360
  ### Patch Changes
355
361
 
356
- - [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
362
+ - [#19618](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19618) [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
357
363
  - Updated dependencies
358
364
 
359
365
  ## 1.2.5
@@ -366,14 +372,14 @@
366
372
 
367
373
  ### Patch Changes
368
374
 
369
- - [`0f8fe0b80aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f8fe0b80aa) - Adds deprecated status to `cssFn` prop. Please avoid using this prop as we intend to remove the prop completely in a future release.
375
+ - [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`0f8fe0b80aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f8fe0b80aa) - Adds deprecated status to `cssFn` prop. Please avoid using this prop as we intend to remove the prop completely in a future release.
370
376
  - Updated dependencies
371
377
 
372
378
  ## 1.2.3
373
379
 
374
380
  ### Patch Changes
375
381
 
376
- - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
382
+ - [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
377
383
  - Updated dependencies
378
384
 
379
385
  ## 1.2.2
@@ -386,14 +392,14 @@
386
392
 
387
393
  ### Patch Changes
388
394
 
389
- - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
395
+ - [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
390
396
  - Updated dependencies
391
397
 
392
398
  ## 1.2.0
393
399
 
394
400
  ### Minor Changes
395
401
 
396
- - [`213bfd77e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/213bfd77e61) - The DOM structure of menu item components has been flattened.
402
+ - [#14777](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14777) [`213bfd77e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/213bfd77e61) - The DOM structure of menu item components has been flattened.
397
403
  If you used CSS hacks (via className or cssFn) that targetted specific DOM nodes you may be broken.
398
404
 
399
405
  Previously the structure looked like:
@@ -440,7 +446,7 @@
440
446
 
441
447
  ### Minor Changes
442
448
 
443
- - [`0e1894c8eb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e1894c8eb0) - Instrumented side navigation with the new theming package, `@atlaskit/tokens`.
449
+ - [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864) [`0e1894c8eb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e1894c8eb0) - Instrumented side navigation with the new theming package, `@atlaskit/tokens`.
444
450
 
445
451
  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
446
452
  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
@@ -453,13 +459,13 @@
453
459
 
454
460
  ### Patch Changes
455
461
 
456
- - [`7c843858398`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c843858398) - [ux] LinkItem and CustomItem now have correct blue text color when selected and the href has visited
462
+ - [#11491](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11491) [`7c843858398`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c843858398) - [ux] LinkItem and CustomItem now have correct blue text color when selected and the href has visited
457
463
 
458
464
  ## 1.0.0
459
465
 
460
466
  ### Major Changes
461
467
 
462
- - [`7727f723965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7727f723965) - Internal change to the release model from continous to scheduled release. There are **NO API CHANGES** in this release.
468
+ - [#10609](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10609) [`7727f723965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7727f723965) - Internal change to the release model from continous to scheduled release. There are **NO API CHANGES** in this release.
463
469
 
464
470
  ### Patch Changes
465
471
 
@@ -469,7 +475,7 @@
469
475
 
470
476
  ### Patch Changes
471
477
 
472
- - [`4e72825fa89`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e72825fa89) - JET-1156:
478
+ - [#10255](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10255) [`4e72825fa89`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e72825fa89) - JET-1156:
473
479
 
474
480
  - Export `VAR_SEPARATOR_COLOR` to override separator color when using custom backrounds in side navigation.
475
481
  - Export `VAR_SCROLL_INDICATOR_COLOR` to override menu scroll indicator color when using custom backrounds in side navigation.
@@ -478,32 +484,32 @@
478
484
 
479
485
  ### Patch Changes
480
486
 
481
- - [`240c4120435`](https://bitbucket.org/atlassian/atlassian-frontend/commits/240c4120435) - Side navigation now uses the new common utility to calculate scrollbar width for offsetting keylines.
487
+ - [#9756](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9756) [`240c4120435`](https://bitbucket.org/atlassian/atlassian-frontend/commits/240c4120435) - Side navigation now uses the new common utility to calculate scrollbar width for offsetting keylines.
482
488
  - Updated dependencies
483
489
 
484
490
  ## 0.8.3
485
491
 
486
492
  ### Patch Changes
487
493
 
488
- - [`e6f96e8d782`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6f96e8d782) - Fix styling for hover and active states for disabled items
494
+ - [#8875](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8875) [`e6f96e8d782`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6f96e8d782) - Fix styling for hover and active states for disabled items
489
495
 
490
496
  ## 0.8.2
491
497
 
492
498
  ### Patch Changes
493
499
 
494
- - [`101b102ed33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/101b102ed33) - Fix disabled state; menu items with icons after the text should have height of 40px
500
+ - [#8637](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8637) [`101b102ed33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/101b102ed33) - Fix disabled state; menu items with icons after the text should have height of 40px
495
501
 
496
502
  ## 0.8.1
497
503
 
498
504
  ### Patch Changes
499
505
 
500
- - [`0b2f7e76803`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b2f7e76803) - Codemods will only format a file if it is mutated.
506
+ - [#8404](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8404) [`0b2f7e76803`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b2f7e76803) - Codemods will only format a file if it is mutated.
501
507
 
502
508
  ## 0.8.0
503
509
 
504
510
  ### Minor Changes
505
511
 
506
- - [`79a40dec30`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79a40dec30) - **Breaking** Adjusts the API of the cssFn prop used in both menu and side-navigation. The prop now no longer exposes the currentStyles to the user in the callback and instead only provides the current state. Users no longer need to spread the currentStyles into their components when overriding. This change also resolves a bug where cssFn overrides did not always take precedence correctly over the default component styles.
512
+ - [#6194](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6194) [`79a40dec30`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79a40dec30) - **Breaking** Adjusts the API of the cssFn prop used in both menu and side-navigation. The prop now no longer exposes the currentStyles to the user in the callback and instead only provides the current state. Users no longer need to spread the currentStyles into their components when overriding. This change also resolves a bug where cssFn overrides did not always take precedence correctly over the default component styles.
507
513
 
508
514
  ### Patch Changes
509
515
 
@@ -513,13 +519,13 @@
513
519
 
514
520
  ### Patch Changes
515
521
 
516
- - [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
522
+ - [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
517
523
 
518
524
  ## 0.7.9
519
525
 
520
526
  ### Patch Changes
521
527
 
522
- - [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
528
+ - [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
523
529
  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
524
530
  Also add `typescript` to `devDependencies` to denote version that the package was built with.
525
531
 
@@ -527,7 +533,7 @@
527
533
 
528
534
  ### Patch Changes
529
535
 
530
- - [`e55c4eb5a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e55c4eb5a8) - [ux] Earlier left sidebar was getting focus while clicking on it. We have removed focus ring to fix this issue.
536
+ - [#5419](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5419) [`e55c4eb5a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e55c4eb5a8) - [ux] Earlier left sidebar was getting focus while clicking on it. We have removed focus ring to fix this issue.
531
537
 
532
538
  ## 0.7.7
533
539
 
@@ -539,7 +545,7 @@
539
545
 
540
546
  ### Patch Changes
541
547
 
542
- - [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
548
+ - [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
543
549
 
544
550
  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
545
551
  to prevent duplicates of tslib being bundled.
@@ -548,13 +554,13 @@
548
554
 
549
555
  ### Patch Changes
550
556
 
551
- - [`a3c91f82f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3c91f82f6) - Add tabindex=0 to nested container which makes it focusable when interacting with keyboard.
557
+ - [#4272](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4272) [`a3c91f82f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3c91f82f6) - Add tabindex=0 to nested container which makes it focusable when interacting with keyboard.
552
558
 
553
559
  ## 0.7.4
554
560
 
555
561
  ### Patch Changes
556
562
 
557
- - [`308ad47024`](https://bitbucket.org/atlassian/atlassian-frontend/commits/308ad47024) - Passes `cssFn` throught to NestingItem so that its styles can be customised
563
+ - [#4198](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4198) [`308ad47024`](https://bitbucket.org/atlassian/atlassian-frontend/commits/308ad47024) - Passes `cssFn` throught to NestingItem so that its styles can be customised
558
564
 
559
565
  ## 0.7.3
560
566
 
@@ -566,32 +572,32 @@
566
572
 
567
573
  ### Patch Changes
568
574
 
569
- - [`159e0808a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/159e0808a5) - Updates the background color of NestingItem, ButtonItem and LinkItem so that it can work with the Onboarding component.
575
+ - [#3980](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3980) [`159e0808a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/159e0808a5) - Updates the background color of NestingItem, ButtonItem and LinkItem so that it can work with the Onboarding component.
570
576
  Hover and selected states will appear darker and they provide better contrast against normal items.
571
577
 
572
578
  ## 0.7.1
573
579
 
574
580
  ### Patch Changes
575
581
 
576
- - [`5b3383fe67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b3383fe67) - Nesting transitions will no longer occur if a modifier key such as Shift or Control is detected while clicking on a nesting item in the side-navigation.
582
+ - [#3532](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3532) [`5b3383fe67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b3383fe67) - Nesting transitions will no longer occur if a modifier key such as Shift or Control is detected while clicking on a nesting item in the side-navigation.
577
583
 
578
584
  ## 0.7.0
579
585
 
580
586
  ### Minor Changes
581
587
 
582
- - [`c7e637753f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7e637753f) - Removed unused export of SIDEBAR_DEFAULT_WIDTH. It was added when page-layout wasn’t complete. Now page-layout is fairly mature, that’s why this export isn’t required anymore.
588
+ - [#3569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3569) [`c7e637753f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7e637753f) - Removed unused export of SIDEBAR_DEFAULT_WIDTH. It was added when page-layout wasn’t complete. Now page-layout is fairly mature, that’s why this export isn’t required anymore.
583
589
 
584
590
  ## 0.6.1
585
591
 
586
592
  ### Patch Changes
587
593
 
588
- - [`01e279bdcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01e279bdcd) - Restyled footer - align with new design
594
+ - [#3469](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3469) [`01e279bdcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01e279bdcd) - Restyled footer - align with new design
589
595
 
590
596
  ## 0.6.0
591
597
 
592
598
  ### Minor Changes
593
599
 
594
- - [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
600
+ - [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
595
601
  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
596
602
 
597
603
  ### Patch Changes
@@ -608,19 +614,19 @@
608
614
 
609
615
  ### Patch Changes
610
616
 
611
- - [`cc14956821`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc14956821) - Update all the theme imports to a path thats tree shakable
617
+ - [#2889](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2889) [`cc14956821`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc14956821) - Update all the theme imports to a path thats tree shakable
612
618
 
613
619
  ## 0.5.5
614
620
 
615
621
  ### Patch Changes
616
622
 
617
- - [`5217dcfa4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5217dcfa4d) - Remove opacity from side-navigation seperators that appear when the container scrolls. The color is the same, just without the alpha channel.
623
+ - [#2775](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2775) [`5217dcfa4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5217dcfa4d) - Remove opacity from side-navigation seperators that appear when the container scrolls. The color is the same, just without the alpha channel.
618
624
 
619
625
  ## 0.5.4
620
626
 
621
627
  ### Patch Changes
622
628
 
623
- - [`d674e203b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d674e203b3) - Previously Menu items controlled their own margin spacing which caused issues when trying to use them outside of Menu.
629
+ - [#2537](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2537) [`d674e203b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d674e203b3) - Previously Menu items controlled their own margin spacing which caused issues when trying to use them outside of Menu.
624
630
  Now we have moved Menu item margin styles into the Section component so now the Section dictates the spacing around child items.
625
631
  We had to update Side Navigation to control its child item margins as well.
626
632
 
@@ -628,25 +634,25 @@
628
634
 
629
635
  ### Patch Changes
630
636
 
631
- - [`649f69b6d7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/649f69b6d7) - Patch all packages that are used by confluence that have a broken es2019 dist
637
+ - [#2430](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2430) [`649f69b6d7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/649f69b6d7) - Patch all packages that are used by confluence that have a broken es2019 dist
632
638
 
633
639
  ## 0.5.2
634
640
 
635
641
  ### Patch Changes
636
642
 
637
- - [`131cee6d7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/131cee6d7a) - Add missing tslib dependency
643
+ - [#2099](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2099) [`131cee6d7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/131cee6d7a) - Add missing tslib dependency
638
644
 
639
645
  ## 0.5.1
640
646
 
641
647
  ### Patch Changes
642
648
 
643
- - [`6ef13297b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ef13297b2) - Fixes scroll indicator not being the correct width when lazy loading large amounts of nav items.
649
+ - [#2098](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2098) [`6ef13297b2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ef13297b2) - Fixes scroll indicator not being the correct width when lazy loading large amounts of nav items.
644
650
 
645
651
  ## 0.5.0
646
652
 
647
653
  ### Minor Changes
648
654
 
649
- - [`07b2d8c491`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07b2d8c491) - FIX: NestedItem `iconAfter` will now display always and right arrow will show up and replace it on hover
655
+ - [#2008](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2008) [`07b2d8c491`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07b2d8c491) - FIX: NestedItem `iconAfter` will now display always and right arrow will show up and replace it on hover
650
656
 
651
657
  ## 0.4.0
652
658
 
@@ -27,31 +27,34 @@ A side navigation example showing all [components](#side-navigation-components)
27
27
  Uses 100% of its parent's height and width, so make sure to place it into an element with explicit values set.<br />
28
28
  **Minimum width of 240px.**
29
29
 
30
- <Example Component={ContainerExample} packageName="@atlaskit/side-navigation"/>
30
+ <Example Component={ContainerExample} packageName="@atlaskit/side-navigation" />
31
31
 
32
32
  ### Header and footer
33
33
 
34
34
  You can customise header and footer using `NavigationHeader` and `NavigationFooter`.
35
35
 
36
- <Example Component={HeaderAndFooterExample} packageName="@atlaskit/side-navigation"/>
36
+ <Example
37
+ Component={HeaderAndFooterExample}
38
+ packageName="@atlaskit/side-navigation"
39
+ />
37
40
 
38
41
  ### Content
39
42
 
40
43
  Used as the container for [navigation items](#side-navigation-items). For nested views see the following example.
41
44
 
42
- <Example Component={ContentExample} packageName="@atlaskit/side-navigation"/>
45
+ <Example Component={ContentExample} packageName="@atlaskit/side-navigation" />
43
46
 
44
47
  ### Section
45
48
 
46
49
  Used to separate items into sections. Using the `title` prop makes a section implicitly group the items for screen readers with no additional work required.
47
50
 
48
- <Example Component={SectionExample} packageName="@atlaskit/side-navigation"/>
51
+ <Example Component={SectionExample} packageName="@atlaskit/side-navigation" />
49
52
 
50
53
  ### Nested navigation
51
54
 
52
55
  The container for navigation items with nested views is `NestableNavigationContent`.
53
56
 
54
- <Example Component={NestedExample} packageName="@atlaskit/side-navigation"/>
57
+ <Example Component={NestedExample} packageName="@atlaskit/side-navigation" />
55
58
 
56
59
  ## Side navigation items
57
60
 
@@ -62,7 +65,7 @@ The `Section` component **must** be used to ensure consistent spacing around blo
62
65
 
63
66
  This item is used to provide a customized "go back" button in nested navigations.
64
67
 
65
- <Example Component={GoBackExample} packageName="@atlaskit/side-navigation"/>
68
+ <Example Component={GoBackExample} packageName="@atlaskit/side-navigation" />
66
69
 
67
70
  ### Link item
68
71
 
@@ -70,7 +73,7 @@ Renders an item wrapped in an anchor tag, useful when you have an item that shou
70
73
 
71
74
  For custom SPA transitions use a custom item with the respective router logic, following the next example.
72
75
 
73
- <Example Component={LinkItemExample} packageName="@atlaskit/side-navigation"/>
76
+ <Example Component={LinkItemExample} packageName="@atlaskit/side-navigation" />
74
77
 
75
78
  ### Custom item
76
79
 
@@ -78,13 +81,19 @@ Handles use cases where a custom router link component is needed.
78
81
 
79
82
  The custom component receives all overflow props passed to the custom item component, as well as when using TypeScript will add the custom component props to the root component props type for type safety.
80
83
 
81
- <Example Component={CustomItemExample} packageName="@atlaskit/side-navigation"/>
84
+ <Example
85
+ Component={CustomItemExample}
86
+ packageName="@atlaskit/side-navigation"
87
+ />
82
88
 
83
89
  ### Button item
84
90
 
85
91
  Renders an item wrapped in a button tag, used primarily when an action does something other than changing routes.
86
92
 
87
- <Example Component={ButtonItemExample} packageName="@atlaskit/side-navigation"/>
93
+ <Example
94
+ Component={ButtonItemExample}
95
+ packageName="@atlaskit/side-navigation"
96
+ />
88
97
 
89
98
  ### Heading item
90
99
 
@@ -94,4 +103,4 @@ Available for advanced use cases, for most situations providing a `title` to `Se
94
103
 
95
104
  Use loading skeletons to reduce the perceived loading time.
96
105
 
97
- <Example Component={LoadingExample} packageName="@atlaskit/side-navigation"/>
106
+ <Example Component={LoadingExample} packageName="@atlaskit/side-navigation" />
@@ -1,30 +1,30 @@
1
- import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation'
2
- import HeaderProps from '!!extract-react-types-loader!../../src/components/Header'
3
- import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer'
4
- import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent'
5
- import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent'
6
- import SectionProps from '!!extract-react-types-loader!../../src/components/Section'
1
+ import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation';
2
+ import HeaderProps from '!!extract-react-types-loader!../../src/components/Header';
3
+ import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer';
4
+ import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent';
5
+ import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent';
6
+ import SectionProps from '!!extract-react-types-loader!../../src/components/Section';
7
7
 
8
8
  ### Navigation props
9
9
 
10
- <PropsTable heading="" props={SideNavigationProps}/>
10
+ <PropsTable heading="" props={SideNavigationProps} />
11
11
 
12
12
  ### Header props
13
13
 
14
- <PropsTable heading="" props={HeaderProps}/>
14
+ <PropsTable heading="" props={HeaderProps} />
15
15
 
16
16
  ### Footer props
17
17
 
18
- <PropsTable heading="" props={FooterProps}/>
18
+ <PropsTable heading="" props={FooterProps} />
19
19
 
20
20
  ### Content props
21
21
 
22
- <PropsTable heading="" props={NavigationContentProps}/>
22
+ <PropsTable heading="" props={NavigationContentProps} />
23
23
 
24
24
  ### Nestable content props
25
25
 
26
- <PropsTable heading="" props={NestableNavigationContentProps}/>
26
+ <PropsTable heading="" props={NestableNavigationContentProps} />
27
27
 
28
28
  ### Section props
29
29
 
30
- <PropsTable heading="" props={SectionProps}/>
30
+ <PropsTable heading="" props={SectionProps} />
@@ -8,9 +8,9 @@ order: 2
8
8
 
9
9
  Occasionally it's necessary to load some of the side navigation content asynchronously. There are a few things to take care of
10
10
 
11
- * Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
12
- * When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels __stable__, which means it doesn't jump around when content loads.
13
- * Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
14
- * When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
11
+ - Only use skeletons when you're quite certain of what the loaded state will look like. Most items that would appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
12
+ - When transitioning from loading skeleton to loaded items, try to ensure the jump does not look janky - use the equivalent skeleton item that is appropriate and be careful of things jumping around by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads.
13
+ - Ensure loading does not take too long - try to anticipate if a user will look at your menu via hover events and the like, and pre-load the data as soon as possible.
14
+ - When content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it would appear slower to most users.
15
15
 
16
- For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)) (content restricted to Atlassian staff).
16
+ For a more in-depth look at how to approach loading states, please check out the _work in progress_ [skeleton exploration](<https://hello.atlassian.net/wiki/spaces/ADG/pages/598816601/Loading+experiences+-+3.4+-+Guideline+exploration+-+Skeleton#Exploration-(spec)>) (content restricted to Atlassian staff).
@@ -4,7 +4,5 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.VAR_SEPARATOR_COLOR = exports.VAR_SCROLL_INDICATOR_COLOR = void 0;
7
- var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
8
- exports.VAR_SEPARATOR_COLOR = VAR_SEPARATOR_COLOR;
9
- var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';
10
- exports.VAR_SCROLL_INDICATOR_COLOR = VAR_SCROLL_INDICATOR_COLOR;
7
+ var VAR_SEPARATOR_COLOR = exports.VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
8
+ var VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';
@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
16
16
  *
17
17
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
18
18
  */
19
- var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
19
+ var overrideStyleFunction = exports.overrideStyleFunction = function overrideStyleFunction(baseStyle) {
20
20
  var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
21
21
  return {};
22
22
  };
@@ -24,7 +24,6 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
24
24
  return [baseStyle(state), newStyle(state)];
25
25
  };
26
26
  };
27
- exports.overrideStyleFunction = overrideStyleFunction;
28
27
  var defaultStyles = {
29
28
  '&:hover': {
30
29
  color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
@@ -50,7 +49,7 @@ var selectedStyles = {
50
49
  color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
51
50
  }
52
51
  };
53
- var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
52
+ var baseSideNavItemStyle = exports.baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
54
53
  var isSelected = _ref.isSelected,
55
54
  isDisabled = _ref.isDisabled;
56
55
  return _objectSpread(_objectSpread(_objectSpread({
@@ -68,10 +67,8 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
68
67
  width: "var(--ds-space-300, 24px)"
69
68
  }));
70
69
  };
71
- exports.baseSideNavItemStyle = baseSideNavItemStyle;
72
- var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
70
+ var sectionHeaderSpacingStyles = exports.sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
73
71
  return {
74
72
  paddingInline: "var(--ds-space-100, 8px)"
75
73
  };
76
- };
77
- exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;
74
+ };
@@ -156,5 +156,4 @@ var FooterFacade = function FooterFacade(_ref3) {
156
156
  testId: testId
157
157
  }, children);
158
158
  };
159
- var _default = FooterFacade;
160
- exports.default = _default;
159
+ var _default = exports.default = FooterFacade;
@@ -27,7 +27,7 @@ var containerStyles = (0, _react2.css)({
27
27
  *
28
28
  * A container for Header and Footer that safely handles props to the child component
29
29
  */
30
- var Container = function Container(_ref) {
30
+ var Container = exports.Container = function Container(_ref) {
31
31
  var children = _ref.children,
32
32
  testId = _ref['data-testid'],
33
33
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -57,7 +57,6 @@ var Container = function Container(_ref) {
57
57
  css: containerStyles
58
58
  }, safeProps), children);
59
59
  };
60
- exports.Container = Container;
61
60
  /**
62
61
  * __Header__
63
62
  *
@@ -101,5 +100,4 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
101
100
  }
102
101
  }));
103
102
  });
104
- var _default = Header;
105
- exports.default = _default;
103
+ var _default = exports.default = Header;
@@ -41,5 +41,4 @@ function (_ref, ref) {
41
41
  cssFn: cssOverride
42
42
  }, rest));
43
43
  });
44
- var _default = ButtonItem;
45
- exports.default = _default;
44
+ var _default = exports.default = ButtonItem;
@@ -41,5 +41,4 @@ function (_ref, ref) {
41
41
  }
42
42
  // Dirty hack to get generics working with forward ref [2/2]
43
43
  );
44
- var _default = CustomItem;
45
- exports.default = _default;
44
+ var _default = exports.default = CustomItem;
@@ -56,5 +56,4 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
56
56
  ref: ref
57
57
  }, rest));
58
58
  });
59
- var _default = GoBackItem;
60
- exports.default = _default;
59
+ var _default = exports.default = GoBackItem;
@@ -43,5 +43,4 @@ function (_ref, ref) {
43
43
  cssFn: cssOverride
44
44
  }, rest));
45
45
  });
46
- var _default = LinkItem;
47
- exports.default = _default;
46
+ var _default = exports.default = LinkItem;
@@ -43,5 +43,4 @@ var SkeletonItem = function SkeletonItem(props) {
43
43
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
44
44
  }, props));
45
45
  };
46
- var _default = SkeletonItem;
47
- exports.default = _default;
46
+ var _default = exports.default = SkeletonItem;
@@ -51,5 +51,4 @@ var LoadingItems = function LoadingItems(_ref) {
51
51
  }), isLoading ? fallback : children);
52
52
  }));
53
53
  };
54
- var _default = LoadingItems;
55
- exports.default = _default;
54
+ var _default = exports.default = LoadingItems;
@@ -49,5 +49,4 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
49
49
  })
50
50
  }, children)));
51
51
  });
52
- var _default = NavigationContent;
53
- exports.default = _default;
52
+ var _default = exports.default = NavigationContent;
@@ -31,7 +31,7 @@ var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMargi
31
31
  * They are "conditionally" shown from the users perspective using the inner container CSS
32
32
  * which has other pseudo elements which "mask" the "real" scroll indicators.
33
33
  */
34
- var outerContainerCSS = function outerContainerCSS(opts) {
34
+ var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(opts) {
35
35
  return {
36
36
  // Flex is needed to ensure the overflow indicators are positioned correctly.
37
37
  display: 'flex',
@@ -70,8 +70,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
70
70
  * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
71
71
  * to the top or bottom of the container.
72
72
  */
73
- exports.outerContainerCSS = outerContainerCSS;
74
- var innerContainerCSS = function innerContainerCSS(opts) {
73
+ var innerContainerCSS = exports.innerContainerCSS = function innerContainerCSS(opts) {
75
74
  return _objectSpread(_objectSpread({
76
75
  display: 'flex',
77
76
  overflow: 'auto',
@@ -108,8 +107,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
108
107
  }
109
108
  });
110
109
  };
111
- exports.innerContainerCSS = innerContainerCSS;
112
- var containerCSS = function containerCSS(opts) {
110
+ var containerCSS = exports.containerCSS = function containerCSS(opts) {
113
111
  return {
114
112
  // When the scroll indicator is always shown we need to add some padding
115
113
  // so the spacing between matches what it would be if the indicator was a "block" element.
@@ -128,5 +126,4 @@ var containerCSS = function containerCSS(opts) {
128
126
  marginBottom: skeletonHeadingBottomMargin
129
127
  }
130
128
  };
131
- };
132
- exports.containerCSS = containerCSS;
129
+ };
@@ -27,5 +27,4 @@ var NavigationFooter = function NavigationFooter(_ref) {
27
27
  xcss: navigationFooterStyles
28
28
  }, children);
29
29
  };
30
- var _default = NavigationFooter;
31
- exports.default = _default;
30
+ var _default = exports.default = NavigationFooter;
@@ -28,5 +28,4 @@ var NavigationHeader = function NavigationHeader(props) {
28
28
  "data-navheader": true
29
29
  }, children);
30
30
  };
31
- var _default = NavigationHeader;
32
- exports.default = _default;
31
+ var _default = exports.default = NavigationHeader;
@@ -12,9 +12,8 @@ var _react = require("react");
12
12
  /**
13
13
  * @internal
14
14
  */
15
- var NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
16
- exports.NestedContext = NestedContext;
17
- var useNestedContext = function useNestedContext() {
15
+ var NestedContext = exports.NestedContext = /*#__PURE__*/(0, _react.createContext)(undefined);
16
+ var useNestedContext = exports.useNestedContext = function useNestedContext() {
18
17
  var context = (0, _react.useContext)(NestedContext);
19
18
  if (!context) {
20
19
  var error = '';
@@ -31,8 +30,7 @@ var useNestedContext = function useNestedContext() {
31
30
  * If `shouldRender` returns `true` - return your nodes.
32
31
  * If it returns `false` - either return `null` or `children` if you have children.
33
32
  */
34
- exports.useNestedContext = useNestedContext;
35
- var useShouldNestedElementRender = function useShouldNestedElementRender() {
33
+ var useShouldNestedElementRender = exports.useShouldNestedElementRender = function useShouldNestedElementRender() {
36
34
  var context = (0, _react.useContext)(NestedContext);
37
35
  if (!context) {
38
36
  return {
@@ -42,5 +40,4 @@ var useShouldNestedElementRender = function useShouldNestedElementRender() {
42
40
  return {
43
41
  shouldRender: context.currentStackId === context.parentId
44
42
  };
45
- };
46
- exports.useShouldNestedElementRender = useShouldNestedElementRender;
43
+ };
@@ -19,8 +19,7 @@ var _nestingMotion = require("./nesting-motion");
19
19
 
20
20
  // Named so ERT doesn't pick up the override name as a type.
21
21
 
22
- var ROOT_ID = 'ATLASKIT_NESTED_ROOT';
23
- exports.ROOT_ID = ROOT_ID;
22
+ var ROOT_ID = exports.ROOT_ID = 'ATLASKIT_NESTED_ROOT';
24
23
  var nestableNavigationContentStyles = (0, _react2.css)({
25
24
  height: '100%',
26
25
  position: 'relative',
@@ -175,5 +174,4 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
175
174
  }, children)));
176
175
  }))));
177
176
  };
178
- var _default = NestableNavigationContent;
179
- exports.default = _default;
177
+ var _default = exports.default = NestableNavigationContent;
@@ -13,7 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
13
13
  /**
14
14
  * @internal
15
15
  */
16
- var NestingMotion = function NestingMotion(props) {
16
+ var NestingMotion = exports.NestingMotion = function NestingMotion(props) {
17
17
  var children = props.children,
18
18
  enterFrom = props.enterFrom,
19
19
  exitTo = props.exitTo,
@@ -31,5 +31,4 @@ var NestingMotion = function NestingMotion(props) {
31
31
  'data-testid': testId && "".concat(testId, "-").concat(direction)
32
32
  }, innerProps));
33
33
  });
34
- };
35
- exports.NestingMotion = NestingMotion;
34
+ };
@@ -145,5 +145,4 @@ var NestingItem = function NestingItem(props) {
145
145
  }
146
146
  return (0, _react2.jsx)(_index.ButtonItem, componentProps);
147
147
  };
148
- var _default = NestingItem;
149
- exports.default = _default;
148
+ var _default = exports.default = NestingItem;
@@ -10,7 +10,7 @@ var _enabledCSS, _disabledCSS;
10
10
  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; }
11
11
  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) { (0, _defineProperty2.default)(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; }
12
12
  // exposed for testing purposes
13
- var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
13
+ var enabledCSS = exports.enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
14
14
  display: 'none'
15
15
  }), (0, _defineProperty2.default)(_enabledCSS, '&:active [data-custom-icon]', {
16
16
  display: 'none'
@@ -27,13 +27,11 @@ var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '
27
27
  }), (0, _defineProperty2.default)(_enabledCSS, '& [data-right-arrow]', {
28
28
  display: 'none'
29
29
  }), _enabledCSS);
30
- exports.enabledCSS = enabledCSS;
31
30
  var disabledCSS = (_disabledCSS = {}, (0, _defineProperty2.default)(_disabledCSS, '[data-item-elem-after]', {
32
31
  opacity: 0
33
32
  }), (0, _defineProperty2.default)(_disabledCSS, '& [data-right-arrow]', {
34
33
  display: 'none'
35
34
  }), _disabledCSS);
36
- var nestingItemStyle = function nestingItemStyle(state) {
35
+ var nestingItemStyle = exports.nestingItemStyle = function nestingItemStyle(state) {
37
36
  return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
38
- };
39
- exports.nestingItemStyle = nestingItemStyle;
37
+ };
@@ -29,5 +29,4 @@ var HeadingItem = function HeadingItem(props) {
29
29
  cssFn: cssFn
30
30
  }));
31
31
  };
32
- var _default = HeadingItem;
33
- exports.default = _default;
32
+ var _default = exports.default = HeadingItem;
@@ -40,5 +40,4 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
40
40
  }
41
41
  }));
42
42
  });
43
- var _default = Section;
44
- exports.default = _default;
43
+ var _default = exports.default = Section;
@@ -35,5 +35,4 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
35
35
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
36
36
  }, props));
37
37
  };
38
- var _default = SkeletonHeadingItem;
39
- exports.default = _default;
38
+ var _default = exports.default = SkeletonHeadingItem;
@@ -45,5 +45,4 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
45
  value: "notch"
46
46
  }, children));
47
47
  });
48
- var _default = SideNavigation;
49
- exports.default = _default;
48
+ var _default = exports.default = SideNavigation;
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useChildIdsEffect = exports.useChildIds = void 0;
7
7
  var _react = require("react");
8
8
  var _NestableNavigationContent = require("../NestableNavigationContent");
9
- var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
9
+ var useChildIds = exports.useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
10
10
  var childIdsRef = (0, _react.useRef)(new Set());
11
11
  (0, _react.useEffect)(function () {
12
12
  // we are holding navigation item IDs in childIdsRef
@@ -20,8 +20,7 @@ var useChildIds = function useChildIds(currentStackId, committedStack, onUnknown
20
20
  childIdsRef: childIdsRef
21
21
  };
22
22
  };
23
- exports.useChildIds = useChildIds;
24
- var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
23
+ var useChildIdsEffect = exports.useChildIdsEffect = function useChildIdsEffect(childIds, id) {
25
24
  (0, _react.useEffect)(function () {
26
25
  if (!childIds || !childIds.current) {
27
26
  return;
@@ -36,5 +35,4 @@ var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
36
35
  // childIds shouldn't change as it's a ref
37
36
  // eslint-disable-next-line react-hooks/exhaustive-deps
38
37
  }, [id]);
39
- };
40
- exports.useChildIdsEffect = useChildIdsEffect;
38
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
32
32
  }
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/ds-explorations": "^2.2.0",
35
+ "@atlaskit/ds-explorations": "^3.0.0",
36
36
  "@atlaskit/ds-lib": "^2.2.0",
37
37
  "@atlaskit/icon": "^21.12.0",
38
- "@atlaskit/menu": "^1.10.0",
39
- "@atlaskit/motion": "^1.4.0",
40
- "@atlaskit/primitives": "^1.4.0",
38
+ "@atlaskit/menu": "^1.11.0",
39
+ "@atlaskit/motion": "^1.5.0",
40
+ "@atlaskit/primitives": "^1.6.0",
41
41
  "@atlaskit/theme": "^12.6.0",
42
- "@atlaskit/tokens": "^1.21.0",
42
+ "@atlaskit/tokens": "^1.25.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },