@atlaskit/navigation-system 10.10.2 → 10.11.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 +24 -0
- package/constellation/top-nav-items/code.mdx +5 -2
- package/constellation/top-nav-items/examples.mdx +19 -0
- package/dist/cjs/ui/page-layout/main/main.compiled.css +1 -1
- package/dist/cjs/ui/page-layout/main/main.js +2 -3
- package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +0 -1
- package/dist/cjs/ui/page-layout/side-nav/side-nav.js +2 -33
- package/dist/es2019/ui/page-layout/main/main.compiled.css +1 -1
- package/dist/es2019/ui/page-layout/main/main.js +2 -3
- package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +0 -1
- package/dist/es2019/ui/page-layout/side-nav/side-nav.js +2 -33
- package/dist/esm/ui/page-layout/main/main.compiled.css +1 -1
- package/dist/esm/ui/page-layout/main/main.js +2 -3
- package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +0 -1
- package/dist/esm/ui/page-layout/side-nav/side-nav.js +2 -33
- package/package.json +12 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 10.11.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`a4d2562b27fc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4d2562b27fc6) -
|
|
8
|
+
Cleanup feature gate `platform_dst_nav4_side_nav_grid_area_fix`. The side nav's mobile `grid-area`
|
|
9
|
+
is now always scoped to `@media not (min-width: 64rem)`, the exact inverse of its desktop rule, so
|
|
10
|
+
the two can never both match at a given viewport and the side nav can no longer render in the
|
|
11
|
+
wrong grid area when Compiled's atomic rule ordering is non-deterministic (local development /
|
|
12
|
+
streaming SSR).
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 10.11.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- [`1960192b10121`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1960192b10121) -
|
|
20
|
+
Cleanup feature gate `platform-ads-nav-fixed-height`. The `Main` component in `navigation-system`
|
|
21
|
+
now always applies a fixed height at smaller viewports (the gate-on behaviour is now permanent).
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 10.10.2
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -6,6 +6,7 @@ props:
|
|
|
6
6
|
packageName: '@atlaskit/navigation-system/top-nav-items'
|
|
7
7
|
exports:
|
|
8
8
|
- AppSwitcher
|
|
9
|
+
- AppLogo
|
|
9
10
|
- CustomLogo
|
|
10
11
|
- Notifications
|
|
11
12
|
- Profile
|
|
@@ -22,13 +23,15 @@ props:
|
|
|
22
23
|
|
|
23
24
|
### AppSwitcher
|
|
24
25
|
|
|
25
|
-
The trigger button for the app switcher.
|
|
26
|
+
The trigger button for the app switcher. Use the optional `icon` prop to replace the default app
|
|
27
|
+
switcher icon with a custom visual, such as a product logo.
|
|
26
28
|
|
|
27
29
|
<TSMorphProps exportName="AppSwitcher" packageName="@atlaskit/navigation-system/top-nav-items" />
|
|
28
30
|
|
|
29
31
|
### AppLogo
|
|
30
32
|
|
|
31
|
-
The app logo for the top navigation, when an app logo from `@atlaskit/logo` is used.
|
|
33
|
+
The app logo for the top navigation, when an app logo from `@atlaskit/logo` is used. Use the
|
|
34
|
+
optional `secondaryName` prop to display supporting context below the app name in wider viewports.
|
|
32
35
|
|
|
33
36
|
<TSMorphProps exportName="AppLogo" packageName="@atlaskit/navigation-system/top-nav-items" />
|
|
34
37
|
|
|
@@ -11,6 +11,8 @@ import { TopNavStartToggleExample } from '../../examples/constellation/top-nav-i
|
|
|
11
11
|
import { TopNavMiddleLayoutExample } from '../../examples/constellation/top-nav-items/top-nav-middle';
|
|
12
12
|
import { TopNavEndLayoutExample } from '../../examples/constellation/top-nav-items/top-nav-end';
|
|
13
13
|
import { AppLogoExample } from '../../examples/constellation/top-nav-items/app-logo';
|
|
14
|
+
import { AppLogoSecondaryNameExample } from '../../examples/constellation/top-nav-items/app-logo-secondary-name';
|
|
15
|
+
import { CustomAppSwitcherExample } from '../../examples/constellation/top-nav-items/custom-app-switcher';
|
|
14
16
|
import { CustomLogoExample } from '../../examples/constellation/top-nav-items/custom-logo';
|
|
15
17
|
import { CustomThemingLogoExample } from '../../examples/constellation/top-nav-items/custom-theming--logo';
|
|
16
18
|
import { CustomThemingSearchExample } from '../../examples/constellation/top-nav-items/custom-theming--search';
|
|
@@ -45,6 +47,15 @@ landing page:
|
|
|
45
47
|
|
|
46
48
|
<Example Component={TopNavStartLayoutExample} />
|
|
47
49
|
|
|
50
|
+
### App switcher
|
|
51
|
+
|
|
52
|
+
App switcher opens the app switcher menu. By default, it uses the Atlassian app switcher icon.
|
|
53
|
+
|
|
54
|
+
Use the optional `icon` prop to replace the default icon with a custom visual, such as a product
|
|
55
|
+
logo. Continue to provide a meaningful `label` so the custom visual has an accessible name.
|
|
56
|
+
|
|
57
|
+
<Example Component={CustomAppSwitcherExample} />
|
|
58
|
+
|
|
48
59
|
### Side nav toggle button
|
|
49
60
|
|
|
50
61
|
The side nav toggle button must be passed to `TopNavStart` through the `sideNavToggleButton` prop,
|
|
@@ -69,6 +80,14 @@ See the [responsive section](#responsive) for more information.
|
|
|
69
80
|
|
|
70
81
|
<Example Component={AppLogoExample} />
|
|
71
82
|
|
|
83
|
+
#### Secondary name
|
|
84
|
+
|
|
85
|
+
Use the optional `secondaryName` prop to add supporting context below the app name, such as the
|
|
86
|
+
current experience or workspace. The supporting context is displayed in wider viewports and is
|
|
87
|
+
hidden with the app name at `s` breakpoints and below (less than 1024px).
|
|
88
|
+
|
|
89
|
+
<Example Component={AppLogoSecondaryNameExample} />
|
|
90
|
+
|
|
72
91
|
### Custom logo
|
|
73
92
|
|
|
74
93
|
Custom logo provides a container for custom logo images with the following constraints:
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
._19121cl4{isolation:isolate}
|
|
4
4
|
._1reo1wug{overflow-x:auto}
|
|
5
5
|
._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
|
|
6
|
-
@media (min-width:64rem){._qwfh1wug{isolation:auto}.
|
|
6
|
+
@media (min-width:64rem){._qwfh1wug{isolation:auto}._13wn1if8{position:sticky}}
|
|
@@ -16,8 +16,7 @@ var _constants = require("../constants");
|
|
|
16
16
|
var _useLayoutId = require("../use-layout-id");
|
|
17
17
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
18
18
|
var mainElementStyles = {
|
|
19
|
-
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug
|
|
20
|
-
fixedHeight: "_4t3ieqxy"
|
|
19
|
+
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8"
|
|
21
20
|
};
|
|
22
21
|
|
|
23
22
|
/**
|
|
@@ -37,7 +36,7 @@ function Main(_ref) {
|
|
|
37
36
|
return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
38
37
|
id: id,
|
|
39
38
|
"data-layout-slot": true,
|
|
40
|
-
className: (0, _runtime.ax)([mainElementStyles.root,
|
|
39
|
+
className: (0, _runtime.ax)([mainElementStyles.root, xcss]),
|
|
41
40
|
role: "main",
|
|
42
41
|
"data-testid": testId
|
|
43
42
|
}, children));
|
|
@@ -71,7 +71,7 @@ var panelSplitterPortalTargetStyles = {
|
|
|
71
71
|
root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
|
|
72
72
|
};
|
|
73
73
|
var styles = {
|
|
74
|
-
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
|
|
74
|
+
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
|
|
75
75
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
76
76
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
77
77
|
animationRTLSupport: "_15yekb7n _65m41mrw",
|
|
@@ -88,37 +88,6 @@ var styles = {
|
|
|
88
88
|
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
|
|
89
89
|
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
|
|
90
90
|
};
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
|
|
94
|
-
*
|
|
95
|
-
* The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
|
|
96
|
-
* desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
|
|
97
|
-
*
|
|
98
|
-
* Why this is needed:
|
|
99
|
-
* The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
|
|
100
|
-
* rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
|
|
101
|
-
* is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
|
|
102
|
-
* stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
|
|
103
|
-
* extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
|
|
104
|
-
* injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
|
|
105
|
-
* (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
|
|
106
|
-
* unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
|
|
107
|
-
*
|
|
108
|
-
* - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
|
|
109
|
-
* - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
|
|
110
|
-
* of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
|
|
111
|
-
* so insertion order no longer matters and the bug cannot occur.
|
|
112
|
-
*
|
|
113
|
-
* Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
|
|
114
|
-
* 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
|
|
115
|
-
* `styles.root`.
|
|
116
|
-
* 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
|
|
117
|
-
*/
|
|
118
|
-
var gridAreaStyles = {
|
|
119
|
-
mobileLegacy: "_nd5l1b6c",
|
|
120
|
-
mobile: "_89fi1b6c"
|
|
121
|
-
};
|
|
122
91
|
var fallbackDefaultWidth = 320;
|
|
123
92
|
var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
|
|
124
93
|
|
|
@@ -792,7 +761,7 @@ function SideNavInternal(_ref) {
|
|
|
792
761
|
style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
|
|
793
762
|
ref: mergedRef,
|
|
794
763
|
"data-testid": testId,
|
|
795
|
-
className: (0, _runtime.ax)([styles.root,
|
|
764
|
+
className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
|
|
796
765
|
}), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
|
|
797
766
|
variableName: _constants.sideNavLiveWidthVar,
|
|
798
767
|
value: "0px",
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
._19121cl4{isolation:isolate}
|
|
4
4
|
._1reo1wug{overflow-x:auto}
|
|
5
5
|
._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
|
|
6
|
-
@media (min-width:64rem){._qwfh1wug{isolation:auto}.
|
|
6
|
+
@media (min-width:64rem){._qwfh1wug{isolation:auto}._13wn1if8{position:sticky}}
|
|
@@ -8,8 +8,7 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
|
|
|
8
8
|
import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
|
|
9
9
|
import { useLayoutId } from '../use-layout-id';
|
|
10
10
|
const mainElementStyles = {
|
|
11
|
-
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug
|
|
12
|
-
fixedHeight: "_4t3ieqxy"
|
|
11
|
+
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8"
|
|
13
12
|
};
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -29,7 +28,7 @@ export function Main({
|
|
|
29
28
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
30
29
|
id: id,
|
|
31
30
|
"data-layout-slot": true,
|
|
32
|
-
className: ax([mainElementStyles.root,
|
|
31
|
+
className: ax([mainElementStyles.root, xcss]),
|
|
33
32
|
role: "main",
|
|
34
33
|
"data-testid": testId
|
|
35
34
|
}, children));
|
|
@@ -58,7 +58,7 @@ const panelSplitterPortalTargetStyles = {
|
|
|
58
58
|
root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
|
|
59
59
|
};
|
|
60
60
|
const styles = {
|
|
61
|
-
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
|
|
61
|
+
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
|
|
62
62
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
63
63
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
64
64
|
animationRTLSupport: "_15yekb7n _65m41mrw",
|
|
@@ -75,37 +75,6 @@ const styles = {
|
|
|
75
75
|
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
|
|
76
76
|
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
|
|
77
77
|
};
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
|
|
81
|
-
*
|
|
82
|
-
* The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
|
|
83
|
-
* desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
|
|
84
|
-
*
|
|
85
|
-
* Why this is needed:
|
|
86
|
-
* The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
|
|
87
|
-
* rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
|
|
88
|
-
* is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
|
|
89
|
-
* stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
|
|
90
|
-
* extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
|
|
91
|
-
* injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
|
|
92
|
-
* (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
|
|
93
|
-
* unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
|
|
94
|
-
*
|
|
95
|
-
* - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
|
|
96
|
-
* - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
|
|
97
|
-
* of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
|
|
98
|
-
* so insertion order no longer matters and the bug cannot occur.
|
|
99
|
-
*
|
|
100
|
-
* Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
|
|
101
|
-
* 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
|
|
102
|
-
* `styles.root`.
|
|
103
|
-
* 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
|
|
104
|
-
*/
|
|
105
|
-
const gridAreaStyles = {
|
|
106
|
-
mobileLegacy: "_nd5l1b6c",
|
|
107
|
-
mobile: "_89fi1b6c"
|
|
108
|
-
};
|
|
109
78
|
const fallbackDefaultWidth = 320;
|
|
110
79
|
export const onPeekStartDelayMs = 500;
|
|
111
80
|
|
|
@@ -783,7 +752,7 @@ function SideNavInternal({
|
|
|
783
752
|
},
|
|
784
753
|
ref: mergedRef,
|
|
785
754
|
"data-testid": testId,
|
|
786
|
-
className: ax([styles.root,
|
|
755
|
+
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
|
|
787
756
|
}), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
|
|
788
757
|
variableName: sideNavLiveWidthVar,
|
|
789
758
|
value: "0px",
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
._19121cl4{isolation:isolate}
|
|
4
4
|
._1reo1wug{overflow-x:auto}
|
|
5
5
|
._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
|
|
6
|
-
@media (min-width:64rem){._qwfh1wug{isolation:auto}.
|
|
6
|
+
@media (min-width:64rem){._qwfh1wug{isolation:auto}._13wn1if8{position:sticky}}
|
|
@@ -8,8 +8,7 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
|
|
|
8
8
|
import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
|
|
9
9
|
import { useLayoutId } from '../use-layout-id';
|
|
10
10
|
var mainElementStyles = {
|
|
11
|
-
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug
|
|
12
|
-
fixedHeight: "_4t3ieqxy"
|
|
11
|
+
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8"
|
|
13
12
|
};
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -29,7 +28,7 @@ export function Main(_ref) {
|
|
|
29
28
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
30
29
|
id: id,
|
|
31
30
|
"data-layout-slot": true,
|
|
32
|
-
className: ax([mainElementStyles.root,
|
|
31
|
+
className: ax([mainElementStyles.root, xcss]),
|
|
33
32
|
role: "main",
|
|
34
33
|
"data-testid": testId
|
|
35
34
|
}, children));
|
|
@@ -62,7 +62,7 @@ var panelSplitterPortalTargetStyles = {
|
|
|
62
62
|
root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
|
|
63
63
|
};
|
|
64
64
|
var styles = {
|
|
65
|
-
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
|
|
65
|
+
root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
|
|
66
66
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
67
67
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
68
68
|
animationRTLSupport: "_15yekb7n _65m41mrw",
|
|
@@ -79,37 +79,6 @@ var styles = {
|
|
|
79
79
|
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
|
|
80
80
|
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
|
|
81
81
|
};
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
|
|
85
|
-
*
|
|
86
|
-
* The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
|
|
87
|
-
* desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
|
|
88
|
-
*
|
|
89
|
-
* Why this is needed:
|
|
90
|
-
* The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
|
|
91
|
-
* rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
|
|
92
|
-
* is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
|
|
93
|
-
* stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
|
|
94
|
-
* extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
|
|
95
|
-
* injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
|
|
96
|
-
* (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
|
|
97
|
-
* unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
|
|
98
|
-
*
|
|
99
|
-
* - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
|
|
100
|
-
* - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
|
|
101
|
-
* of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
|
|
102
|
-
* so insertion order no longer matters and the bug cannot occur.
|
|
103
|
-
*
|
|
104
|
-
* Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
|
|
105
|
-
* 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
|
|
106
|
-
* `styles.root`.
|
|
107
|
-
* 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
|
|
108
|
-
*/
|
|
109
|
-
var gridAreaStyles = {
|
|
110
|
-
mobileLegacy: "_nd5l1b6c",
|
|
111
|
-
mobile: "_89fi1b6c"
|
|
112
|
-
};
|
|
113
82
|
var fallbackDefaultWidth = 320;
|
|
114
83
|
export var onPeekStartDelayMs = 500;
|
|
115
84
|
|
|
@@ -783,7 +752,7 @@ function SideNavInternal(_ref) {
|
|
|
783
752
|
style: _defineProperty({}, sideNavVar, clampedWidth),
|
|
784
753
|
ref: mergedRef,
|
|
785
754
|
"data-testid": testId,
|
|
786
|
-
className: ax([styles.root,
|
|
755
|
+
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
|
|
787
756
|
}), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
|
|
788
757
|
variableName: sideNavLiveWidthVar,
|
|
789
758
|
value: "0px",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.11.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",
|
|
@@ -54,12 +54,12 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@atlaskit/analytics-next": "^12.3.0",
|
|
57
|
-
"@atlaskit/app-provider": "^5.
|
|
58
|
-
"@atlaskit/avatar": "^
|
|
57
|
+
"@atlaskit/app-provider": "^5.3.0",
|
|
58
|
+
"@atlaskit/avatar": "^27.0.0",
|
|
59
59
|
"@atlaskit/button": "^25.0.0",
|
|
60
60
|
"@atlaskit/css": "^1.0.0",
|
|
61
61
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
62
|
-
"@atlaskit/icon": "^37.
|
|
62
|
+
"@atlaskit/icon": "^37.3.0",
|
|
63
63
|
"@atlaskit/layering": "^5.0.0",
|
|
64
64
|
"@atlaskit/logo": "^21.4.0",
|
|
65
65
|
"@atlaskit/motion": "^8.0.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@atlaskit/primitives": "^22.2.0",
|
|
71
71
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
72
72
|
"@atlaskit/side-nav-items": "^2.3.0",
|
|
73
|
-
"@atlaskit/tokens": "^16.
|
|
73
|
+
"@atlaskit/tokens": "^16.4.0",
|
|
74
74
|
"@atlaskit/tooltip": "^24.0.0",
|
|
75
75
|
"@atlaskit/visually-hidden": "^4.2.0",
|
|
76
76
|
"@babel/runtime": "^7.0.0",
|
|
@@ -90,28 +90,28 @@
|
|
|
90
90
|
"@atlaskit/badge": "^21.0.0",
|
|
91
91
|
"@atlaskit/banner": "^15.1.0",
|
|
92
92
|
"@atlaskit/breadcrumbs": "^17.5.0",
|
|
93
|
-
"@atlaskit/dropdown-menu": "^
|
|
93
|
+
"@atlaskit/dropdown-menu": "^18.0.0",
|
|
94
94
|
"@atlaskit/flag": "^18.2.0",
|
|
95
95
|
"@atlaskit/form": "^16.1.0",
|
|
96
96
|
"@atlaskit/heading": "^7.0.0",
|
|
97
|
-
"@atlaskit/inline-dialog": "^
|
|
97
|
+
"@atlaskit/inline-dialog": "^20.0.0",
|
|
98
98
|
"@atlaskit/link": "^5.0.0",
|
|
99
99
|
"@atlaskit/lozenge": "^15.0.0",
|
|
100
|
-
"@atlaskit/menu": "^
|
|
101
|
-
"@atlaskit/modal-dialog": "^16.
|
|
100
|
+
"@atlaskit/menu": "^10.0.0",
|
|
101
|
+
"@atlaskit/modal-dialog": "^16.3.0",
|
|
102
102
|
"@atlaskit/onboarding": "^15.1.0",
|
|
103
103
|
"@atlaskit/page-header": "^13.1.0",
|
|
104
104
|
"@atlaskit/page-layout": "^5.2.0",
|
|
105
|
-
"@atlaskit/popper": "^9.
|
|
105
|
+
"@atlaskit/popper": "^9.1.0",
|
|
106
106
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
107
107
|
"@atlaskit/select": "^22.6.0",
|
|
108
108
|
"@atlaskit/skeleton": "^4.2.0",
|
|
109
109
|
"@atlaskit/spotlight": "^3.0.0",
|
|
110
110
|
"@atlaskit/textfield": "^10.0.0",
|
|
111
|
-
"@atlaskit/top-layer": "^3.
|
|
111
|
+
"@atlaskit/top-layer": "^3.2.0",
|
|
112
112
|
"@atlassian/feature-flags-test-utils": "^1.2.0",
|
|
113
113
|
"@atlassian/gemini": "^1.51.0",
|
|
114
|
-
"@atlassian/search-dialog": "^10.
|
|
114
|
+
"@atlassian/search-dialog": "^10.8.0",
|
|
115
115
|
"@atlassian/ssr-tests": "workspace:^",
|
|
116
116
|
"@atlassian/test-utils": "^1.1.0",
|
|
117
117
|
"@atlassian/testing-library": "^0.11.0",
|
|
@@ -166,9 +166,6 @@
|
|
|
166
166
|
"platform_dst_nav4_skip_link_a11y_1": {
|
|
167
167
|
"type": "boolean"
|
|
168
168
|
},
|
|
169
|
-
"platform_dst_nav4_side_nav_grid_area_fix": {
|
|
170
|
-
"type": "boolean"
|
|
171
|
-
},
|
|
172
169
|
"platform-dst-motion-uplift-button": {
|
|
173
170
|
"type": "boolean",
|
|
174
171
|
"referenceOnly": true
|
|
@@ -180,9 +177,6 @@
|
|
|
180
177
|
"platform_dst_ads_appswitcher_improvements": {
|
|
181
178
|
"type": "boolean",
|
|
182
179
|
"referenceOnly": true
|
|
183
|
-
},
|
|
184
|
-
"platform-ads-nav-fixed-height": {
|
|
185
|
-
"type": "boolean"
|
|
186
180
|
}
|
|
187
181
|
},
|
|
188
182
|
"homepage": "https://atlassian.design/components/navigation-system"
|