@atlaskit/navigation-system 2.18.0 → 2.19.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 +16 -0
- package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +4 -1
- package/dist/cjs/ui/page-layout/side-nav/side-nav.js +41 -9
- package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +5 -4
- package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +4 -1
- package/dist/es2019/ui/page-layout/side-nav/side-nav.js +41 -9
- package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +5 -4
- package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +4 -1
- package/dist/esm/ui/page-layout/side-nav/side-nav.js +41 -9
- package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +5 -4
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 2.19.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8622b99ec3d36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8622b99ec3d36) -
|
|
8
|
+
Internal refactors to the full height sidebar animations to workaround some Compiled style
|
|
9
|
+
ordering issues. These changes are behind the feature gate `navx-full-height-sidear`.
|
|
10
|
+
|
|
11
|
+
## 2.19.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [`c506727d66d32`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c506727d66d32) -
|
|
16
|
+
Cleans up the `platform_fix_component_state_update_for_suspense` feature gate. There is now
|
|
17
|
+
improved ref handling for Suspense.
|
|
18
|
+
|
|
3
19
|
## 2.18.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
15
15
|
._kqsw1if8{position:sticky}
|
|
16
16
|
._vchhusvi{box-sizing:border-box}
|
|
17
|
+
@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
|
|
17
18
|
@media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
|
|
18
19
|
@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
|
|
19
|
-
@
|
|
20
|
+
@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
|
|
21
|
+
@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
|
|
22
|
+
@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
|
|
@@ -49,23 +49,30 @@ var widthResizeBounds = {
|
|
|
49
49
|
function getResizeBounds() {
|
|
50
50
|
return widthResizeBounds;
|
|
51
51
|
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
55
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
56
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
57
|
+
*/
|
|
58
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
52
59
|
var openLayerObserverSideNavNamespace = 'side-nav';
|
|
53
60
|
var styles = {
|
|
54
61
|
root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
|
|
55
62
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
56
63
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
57
|
-
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0
|
|
58
|
-
flyoutOpenFullHeightSidebar: "
|
|
59
|
-
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw
|
|
64
|
+
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
|
|
65
|
+
flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
|
|
66
|
+
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
|
|
60
67
|
flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
|
|
61
68
|
hiddenMobileAndDesktop: "_1e0cglyw",
|
|
62
69
|
hiddenMobileOnly: "_1e0cglyw _dm2518uv",
|
|
63
70
|
hiddenDesktopOnly: "_dm25glyw",
|
|
64
|
-
animationBaseStyles: "
|
|
65
|
-
expandAnimationMobile: "
|
|
66
|
-
collapseAnimationMobile: "
|
|
67
|
-
expandAnimationDesktop: "
|
|
68
|
-
collapseAnimationDesktop: "
|
|
71
|
+
animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
|
|
72
|
+
expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
|
|
73
|
+
collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
|
|
74
|
+
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
|
|
75
|
+
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
|
|
69
76
|
fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
|
|
70
77
|
};
|
|
71
78
|
var fallbackDefaultWidth = 320;
|
|
@@ -592,6 +599,31 @@ function SideNavInternal(_ref) {
|
|
|
592
599
|
isFirstRenderRef.current = false;
|
|
593
600
|
}
|
|
594
601
|
}, []);
|
|
602
|
+
|
|
603
|
+
// This is only used for the regular expand and collapse animations, not the flyout animations.
|
|
604
|
+
var shouldShowSidebarToggleAnimation =
|
|
605
|
+
// We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
|
|
606
|
+
// slide in initially.
|
|
607
|
+
!isFirstRenderRef.current &&
|
|
608
|
+
// We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
|
|
609
|
+
// If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
|
|
610
|
+
// flyout animation being disabled.
|
|
611
|
+
!isFlyoutVisible &&
|
|
612
|
+
/**
|
|
613
|
+
* Disabling animations for Firefox, as it doesn't support animating the `display` property:
|
|
614
|
+
* https://caniuse.com/mdn-css_properties_display_is_transitionable
|
|
615
|
+
*
|
|
616
|
+
* As of October 2025, Firefox supports the expand animation, but not the collapse animation (it instantly changes to `display: none`).
|
|
617
|
+
* Because of this, we are disabling all sidebar animations for Firefox so it doesn't look like a bug.
|
|
618
|
+
*
|
|
619
|
+
* Unfortunately we cannot use `@supports` to target the support of `transition-behavior: allow-discrete` specifically
|
|
620
|
+
* for the `display` property. And `@supports at-rule(@starting-style)` is also not ready for browser use yet.
|
|
621
|
+
*
|
|
622
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
623
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
624
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
625
|
+
*/
|
|
626
|
+
!isFirefox;
|
|
595
627
|
return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
|
|
596
628
|
id: id
|
|
597
629
|
}, devTimeOnlyAttributes, {
|
|
@@ -600,7 +632,7 @@ function SideNavInternal(_ref) {
|
|
|
600
632
|
style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
|
|
601
633
|
ref: mergedRef,
|
|
602
634
|
"data-testid": testId,
|
|
603
|
-
className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop,
|
|
635
|
+
className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && 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 && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
|
|
604
636
|
}), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
|
|
605
637
|
variableName: _constants.sideNavLiveWidthVar,
|
|
606
638
|
value: "0px",
|
|
@@ -89,10 +89,11 @@ function TopNavStart(_ref3) {
|
|
|
89
89
|
sideNavToggleButton = _ref3.sideNavToggleButton;
|
|
90
90
|
var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
|
|
91
91
|
var elementRef = (0, _react.useRef)(null);
|
|
92
|
+
|
|
93
|
+
// FIXME: unsafe pattern with Suspense, should use callback ref / store in state
|
|
94
|
+
// Should handle the underlying HTMLElement changing without a remount
|
|
92
95
|
(0, _react.useEffect)(function () {
|
|
93
|
-
|
|
94
|
-
ref(elementRef.current);
|
|
95
|
-
}
|
|
96
|
+
ref(elementRef.current);
|
|
96
97
|
}, [elementRef, ref]);
|
|
97
98
|
|
|
98
99
|
// This needs the real `defaultCollapsed` state or will not SSR properly
|
|
@@ -123,7 +124,7 @@ function TopNavStart(_ref3) {
|
|
|
123
124
|
});
|
|
124
125
|
var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
|
|
125
126
|
return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
|
|
126
|
-
ref:
|
|
127
|
+
ref: elementRef,
|
|
127
128
|
testId: testId
|
|
128
129
|
}, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
|
|
129
130
|
key: sideNavToggleButtonKey
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
15
15
|
._kqsw1if8{position:sticky}
|
|
16
16
|
._vchhusvi{box-sizing:border-box}
|
|
17
|
+
@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
|
|
17
18
|
@media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
|
|
18
19
|
@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
|
|
19
|
-
@
|
|
20
|
+
@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
|
|
21
|
+
@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
|
|
22
|
+
@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
|
|
@@ -36,23 +36,30 @@ const widthResizeBounds = {
|
|
|
36
36
|
function getResizeBounds() {
|
|
37
37
|
return widthResizeBounds;
|
|
38
38
|
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
42
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
43
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
44
|
+
*/
|
|
45
|
+
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
39
46
|
const openLayerObserverSideNavNamespace = 'side-nav';
|
|
40
47
|
const styles = {
|
|
41
48
|
root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
|
|
42
49
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
43
50
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
44
|
-
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0
|
|
45
|
-
flyoutOpenFullHeightSidebar: "
|
|
46
|
-
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw
|
|
51
|
+
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
|
|
52
|
+
flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
|
|
53
|
+
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
|
|
47
54
|
flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
|
|
48
55
|
hiddenMobileAndDesktop: "_1e0cglyw",
|
|
49
56
|
hiddenMobileOnly: "_1e0cglyw _dm2518uv",
|
|
50
57
|
hiddenDesktopOnly: "_dm25glyw",
|
|
51
|
-
animationBaseStyles: "
|
|
52
|
-
expandAnimationMobile: "
|
|
53
|
-
collapseAnimationMobile: "
|
|
54
|
-
expandAnimationDesktop: "
|
|
55
|
-
collapseAnimationDesktop: "
|
|
58
|
+
animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
|
|
59
|
+
expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
|
|
60
|
+
collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
|
|
61
|
+
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
|
|
62
|
+
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
|
|
56
63
|
fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
|
|
57
64
|
};
|
|
58
65
|
const fallbackDefaultWidth = 320;
|
|
@@ -581,6 +588,31 @@ function SideNavInternal({
|
|
|
581
588
|
isFirstRenderRef.current = false;
|
|
582
589
|
}
|
|
583
590
|
}, []);
|
|
591
|
+
|
|
592
|
+
// This is only used for the regular expand and collapse animations, not the flyout animations.
|
|
593
|
+
const shouldShowSidebarToggleAnimation =
|
|
594
|
+
// We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
|
|
595
|
+
// slide in initially.
|
|
596
|
+
!isFirstRenderRef.current &&
|
|
597
|
+
// We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
|
|
598
|
+
// If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
|
|
599
|
+
// flyout animation being disabled.
|
|
600
|
+
!isFlyoutVisible &&
|
|
601
|
+
/**
|
|
602
|
+
* Disabling animations for Firefox, as it doesn't support animating the `display` property:
|
|
603
|
+
* https://caniuse.com/mdn-css_properties_display_is_transitionable
|
|
604
|
+
*
|
|
605
|
+
* As of October 2025, Firefox supports the expand animation, but not the collapse animation (it instantly changes to `display: none`).
|
|
606
|
+
* Because of this, we are disabling all sidebar animations for Firefox so it doesn't look like a bug.
|
|
607
|
+
*
|
|
608
|
+
* Unfortunately we cannot use `@supports` to target the support of `transition-behavior: allow-discrete` specifically
|
|
609
|
+
* for the `display` property. And `@supports at-rule(@starting-style)` is also not ready for browser use yet.
|
|
610
|
+
*
|
|
611
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
612
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
613
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
614
|
+
*/
|
|
615
|
+
!isFirefox;
|
|
584
616
|
return /*#__PURE__*/React.createElement("nav", _extends({
|
|
585
617
|
id: id
|
|
586
618
|
}, devTimeOnlyAttributes, {
|
|
@@ -592,7 +624,7 @@ function SideNavInternal({
|
|
|
592
624
|
},
|
|
593
625
|
ref: mergedRef,
|
|
594
626
|
"data-testid": testId,
|
|
595
|
-
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop,
|
|
627
|
+
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && 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 && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
|
|
596
628
|
}), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
|
|
597
629
|
variableName: sideNavLiveWidthVar,
|
|
598
630
|
value: "0px",
|
|
@@ -84,10 +84,11 @@ export function TopNavStart({
|
|
|
84
84
|
}) {
|
|
85
85
|
const ref = useContext(TopNavStartAttachRef);
|
|
86
86
|
const elementRef = useRef(null);
|
|
87
|
+
|
|
88
|
+
// FIXME: unsafe pattern with Suspense, should use callback ref / store in state
|
|
89
|
+
// Should handle the underlying HTMLElement changing without a remount
|
|
87
90
|
useEffect(() => {
|
|
88
|
-
|
|
89
|
-
ref(elementRef.current);
|
|
90
|
-
}
|
|
91
|
+
ref(elementRef.current);
|
|
91
92
|
}, [elementRef, ref]);
|
|
92
93
|
|
|
93
94
|
// This needs the real `defaultCollapsed` state or will not SSR properly
|
|
@@ -116,7 +117,7 @@ export function TopNavStart({
|
|
|
116
117
|
});
|
|
117
118
|
const TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
|
|
118
119
|
return /*#__PURE__*/React.createElement(TopNavStartInner, {
|
|
119
|
-
ref:
|
|
120
|
+
ref: elementRef,
|
|
120
121
|
testId: testId
|
|
121
122
|
}, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
|
|
122
123
|
key: sideNavToggleButtonKey
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
15
15
|
._kqsw1if8{position:sticky}
|
|
16
16
|
._vchhusvi{box-sizing:border-box}
|
|
17
|
+
@media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrp188d{transition-duration:.3s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu5jq3t{transform:translateX(-100%)}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
|
|
17
18
|
@media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
|
|
18
19
|
@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
|
|
19
|
-
@
|
|
20
|
+
@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1ujq3t{transform:translateX(-100%)}@starting-style{._s2egjq3t{transform:translateX(-100%)}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
|
|
21
|
+
@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadijq3t{transform:translateX(-100%)}}
|
|
22
|
+
@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}}
|
|
@@ -40,23 +40,30 @@ var widthResizeBounds = {
|
|
|
40
40
|
function getResizeBounds() {
|
|
41
41
|
return widthResizeBounds;
|
|
42
42
|
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
46
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
47
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
48
|
+
*/
|
|
49
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
43
50
|
var openLayerObserverSideNavNamespace = 'side-nav';
|
|
44
51
|
var styles = {
|
|
45
52
|
root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
|
|
46
53
|
flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
|
|
47
54
|
flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
|
|
48
|
-
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0
|
|
49
|
-
flyoutOpenFullHeightSidebar: "
|
|
50
|
-
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw
|
|
55
|
+
flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
|
|
56
|
+
flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
|
|
57
|
+
flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
|
|
51
58
|
flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
|
|
52
59
|
hiddenMobileAndDesktop: "_1e0cglyw",
|
|
53
60
|
hiddenMobileOnly: "_1e0cglyw _dm2518uv",
|
|
54
61
|
hiddenDesktopOnly: "_dm25glyw",
|
|
55
|
-
animationBaseStyles: "
|
|
56
|
-
expandAnimationMobile: "
|
|
57
|
-
collapseAnimationMobile: "
|
|
58
|
-
expandAnimationDesktop: "
|
|
59
|
-
collapseAnimationDesktop: "
|
|
62
|
+
animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
|
|
63
|
+
expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
|
|
64
|
+
collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
|
|
65
|
+
expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
|
|
66
|
+
collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
|
|
60
67
|
fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
|
|
61
68
|
};
|
|
62
69
|
var fallbackDefaultWidth = 320;
|
|
@@ -583,6 +590,31 @@ function SideNavInternal(_ref) {
|
|
|
583
590
|
isFirstRenderRef.current = false;
|
|
584
591
|
}
|
|
585
592
|
}, []);
|
|
593
|
+
|
|
594
|
+
// This is only used for the regular expand and collapse animations, not the flyout animations.
|
|
595
|
+
var shouldShowSidebarToggleAnimation =
|
|
596
|
+
// We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
|
|
597
|
+
// slide in initially.
|
|
598
|
+
!isFirstRenderRef.current &&
|
|
599
|
+
// We also do not apply the animation styles if the side nav is in flyout mode to make sure we don't override flyout styles.
|
|
600
|
+
// If we instead try to unset the `transform` property in the flyout styles using `transform: initial`, it results in the entire
|
|
601
|
+
// flyout animation being disabled.
|
|
602
|
+
!isFlyoutVisible &&
|
|
603
|
+
/**
|
|
604
|
+
* Disabling animations for Firefox, as it doesn't support animating the `display` property:
|
|
605
|
+
* https://caniuse.com/mdn-css_properties_display_is_transitionable
|
|
606
|
+
*
|
|
607
|
+
* As of October 2025, Firefox supports the expand animation, but not the collapse animation (it instantly changes to `display: none`).
|
|
608
|
+
* Because of this, we are disabling all sidebar animations for Firefox so it doesn't look like a bug.
|
|
609
|
+
*
|
|
610
|
+
* Unfortunately we cannot use `@supports` to target the support of `transition-behavior: allow-discrete` specifically
|
|
611
|
+
* for the `display` property. And `@supports at-rule(@starting-style)` is also not ready for browser use yet.
|
|
612
|
+
*
|
|
613
|
+
* We are using JS to detect Firefox and disable animations, instead of using CSS, as Compiled currently does not merge duplicate
|
|
614
|
+
* CSS at-rules when at-rules are nested: https://github.com/atlassian-labs/compiled/blob/e04a325915e1d13010205089e4915de0e53bc2d4/packages/css/src/plugins/merge-duplicate-at-rules.ts#L5
|
|
615
|
+
* Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
|
|
616
|
+
*/
|
|
617
|
+
!isFirefox;
|
|
586
618
|
return /*#__PURE__*/React.createElement("nav", _extends({
|
|
587
619
|
id: id
|
|
588
620
|
}, devTimeOnlyAttributes, {
|
|
@@ -591,7 +623,7 @@ function SideNavInternal(_ref) {
|
|
|
591
623
|
style: _defineProperty({}, sideNavVar, clampedWidth),
|
|
592
624
|
ref: mergedRef,
|
|
593
625
|
"data-testid": testId,
|
|
594
|
-
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop,
|
|
626
|
+
className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && 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 && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
|
|
595
627
|
}), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
|
|
596
628
|
variableName: sideNavLiveWidthVar,
|
|
597
629
|
value: "0px",
|
|
@@ -81,10 +81,11 @@ export function TopNavStart(_ref3) {
|
|
|
81
81
|
sideNavToggleButton = _ref3.sideNavToggleButton;
|
|
82
82
|
var ref = useContext(TopNavStartAttachRef);
|
|
83
83
|
var elementRef = useRef(null);
|
|
84
|
+
|
|
85
|
+
// FIXME: unsafe pattern with Suspense, should use callback ref / store in state
|
|
86
|
+
// Should handle the underlying HTMLElement changing without a remount
|
|
84
87
|
useEffect(function () {
|
|
85
|
-
|
|
86
|
-
ref(elementRef.current);
|
|
87
|
-
}
|
|
88
|
+
ref(elementRef.current);
|
|
88
89
|
}, [elementRef, ref]);
|
|
89
90
|
|
|
90
91
|
// This needs the real `defaultCollapsed` state or will not SSR properly
|
|
@@ -115,7 +116,7 @@ export function TopNavStart(_ref3) {
|
|
|
115
116
|
});
|
|
116
117
|
var TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
|
|
117
118
|
return /*#__PURE__*/React.createElement(TopNavStartInner, {
|
|
118
|
-
ref:
|
|
119
|
+
ref: elementRef,
|
|
119
120
|
testId: testId
|
|
120
121
|
}, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
|
|
121
122
|
key: sideNavToggleButtonKey
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.19.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",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"@atlaskit/css": "^0.14.0",
|
|
73
73
|
"@atlaskit/ds-lib": "^5.1.0",
|
|
74
74
|
"@atlaskit/icon": "^28.5.0",
|
|
75
|
-
"@atlaskit/layering": "^3.
|
|
75
|
+
"@atlaskit/layering": "^3.1.0",
|
|
76
76
|
"@atlaskit/logo": "^19.9.0",
|
|
77
77
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
78
78
|
"@atlaskit/popup": "^4.4.0",
|
|
@@ -156,9 +156,6 @@
|
|
|
156
156
|
"platform-team25-app-icon-tiles": {
|
|
157
157
|
"type": "boolean"
|
|
158
158
|
},
|
|
159
|
-
"platform_fix_component_state_update_for_suspense": {
|
|
160
|
-
"type": "boolean"
|
|
161
|
-
},
|
|
162
159
|
"jiv-20710-fix-nav-rerender": {
|
|
163
160
|
"type": "boolean"
|
|
164
161
|
},
|