@atlaskit/navigation-system 3.0.1 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +2 -2
  3. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +2 -2
  4. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  5. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +5 -6
  6. package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +2 -2
  7. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +2 -2
  8. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  9. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +5 -6
  10. package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +2 -2
  11. package/dist/esm/ui/page-layout/side-nav/side-nav.js +2 -2
  12. package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  13. package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +5 -6
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ac431cadd9a33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ac431cadd9a33) -
8
+ Fixes a regression when the `navx-full-height-sidebar` feature gate is enabled, where the peeking
9
+ side nav would close if the user mouses over the `TopNavStart` element.
10
+
11
+ ## 3.1.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`ee578a4721dcf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee578a4721dcf) -
16
+ The following animations have been updated to shorten their durations from `300ms` to `200ms`.
17
+ These changes are behind the `navx-full-height-sidebar` feature flag.
18
+ - `SideNav` slide in/out animations, including peek (flyout) and regular expand/collapse
19
+ - `TopNavStart` button reorder animations
20
+
3
21
  ## 3.0.1
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -16,9 +16,9 @@
16
16
  ._kqsw1if8{position:sticky}
17
17
  ._vchhusvi{box-sizing:border-box}
18
18
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
19
- @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{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
19
+ @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
20
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
21
21
  @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}}
22
- @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
22
+ @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
23
23
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
24
24
  @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}}}
package/dist/cjs/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -63,13 +63,13 @@ var styles = {
63
63
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
64
64
  animationRTLSupport: "_15yekb7n _65m41mrw",
65
65
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
66
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
66
+ flyoutOpenFullHeightSidebar: "_hjoifnf5 _vgub1ku9 _s2eg1p9u",
67
67
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
68
68
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
69
69
  hiddenMobileAndDesktop: "_1e0cglyw",
70
70
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
71
71
  hiddenDesktopOnly: "_dm25glyw",
72
- animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
72
+ animationBaseStyles: "_10t88iot _1vrh1a5r _xrrpfnf5",
73
73
  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
74
74
  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
75
75
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -12,5 +12,5 @@
12
12
  ._lcxv1wug{pointer-events:auto}
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
- @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
15
+ @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
16
  @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -49,8 +49,7 @@ var innerStyles = {
49
49
  * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
50
50
  */
51
51
  var wrapperStyles = {
52
- root: "_vchhusvi",
53
- fullHeightSidebar: "_bozgutpp",
52
+ root: "_vchhusvi _bozgutpp _4t3i1osq",
54
53
  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
55
54
  };
56
55
 
@@ -71,7 +70,7 @@ var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
71
70
  var childrenWrapperStyles = {
72
71
  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
73
72
  animationBaseStyles: "_10t81e03",
74
- finalPosition: "_mjvcz12g _xrrp188d",
73
+ finalPosition: "_mjvcz12g _xrrpfnf5",
75
74
  expandAnimationStartPosition: "_mjvcyrjp",
76
75
  collapseAnimationStartPosition: "_mjvco0k7"
77
76
  };
@@ -85,7 +84,7 @@ var childrenWrapperStyles = {
85
84
  */
86
85
  var toggleButtonWrapperStyles = {
87
86
  root: "_15yekb7n _65m41mrw _10t81rjc",
88
- finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
87
+ finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
89
88
  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
90
89
  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
91
90
  expandAnimationTimingFunction: "_1xq51ytf",
@@ -120,10 +119,10 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
120
119
  }),
121
120
  isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
122
121
  return /*#__PURE__*/_react.default.createElement("div", {
122
+ className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
123
+ }, /*#__PURE__*/_react.default.createElement("div", {
123
124
  ref: ref,
124
125
  "data-testid": testId,
125
- className: (0, _runtime.ax)([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
126
- }, /*#__PURE__*/_react.default.createElement("div", {
127
126
  className: (0, _runtime.ax)([innerStyles.root, innerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
128
127
  }, children));
129
128
  });
package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -16,9 +16,9 @@
16
16
  ._kqsw1if8{position:sticky}
17
17
  ._vchhusvi{box-sizing:border-box}
18
18
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
19
- @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{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
19
+ @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
20
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
21
21
  @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}}
22
- @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
22
+ @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
23
23
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
24
24
  @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}}}
package/dist/es2019/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -50,13 +50,13 @@ const styles = {
50
50
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
51
51
  animationRTLSupport: "_15yekb7n _65m41mrw",
52
52
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
53
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
53
+ flyoutOpenFullHeightSidebar: "_hjoifnf5 _vgub1ku9 _s2eg1p9u",
54
54
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
55
55
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
56
56
  hiddenMobileAndDesktop: "_1e0cglyw",
57
57
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
58
58
  hiddenDesktopOnly: "_dm25glyw",
59
- animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
59
+ animationBaseStyles: "_10t88iot _1vrh1a5r _xrrpfnf5",
60
60
  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
61
61
  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
62
62
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -12,5 +12,5 @@
12
12
  ._lcxv1wug{pointer-events:auto}
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
- @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
15
+ @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
16
  @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -40,8 +40,7 @@ const innerStyles = {
40
40
  * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
41
41
  */
42
42
  const wrapperStyles = {
43
- root: "_vchhusvi",
44
- fullHeightSidebar: "_bozgutpp",
43
+ root: "_vchhusvi _bozgutpp _4t3i1osq",
45
44
  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
46
45
  };
47
46
 
@@ -62,7 +61,7 @@ const childrenWrapperAnimationOffset = `calc(2rem + ${flexGap})`;
62
61
  const childrenWrapperStyles = {
63
62
  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
64
63
  animationBaseStyles: "_10t81e03",
65
- finalPosition: "_mjvcz12g _xrrp188d",
64
+ finalPosition: "_mjvcz12g _xrrpfnf5",
66
65
  expandAnimationStartPosition: "_mjvcyrjp",
67
66
  collapseAnimationStartPosition: "_mjvco0k7"
68
67
  };
@@ -76,7 +75,7 @@ const childrenWrapperStyles = {
76
75
  */
77
76
  const toggleButtonWrapperStyles = {
78
77
  root: "_15yekb7n _65m41mrw _10t81rjc",
79
- finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
78
+ finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
80
79
  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
81
80
  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
82
81
  expandAnimationTimingFunction: "_1xq51ytf",
@@ -114,10 +113,10 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
114
113
  defaultCollapsed: true
115
114
  });
116
115
  return /*#__PURE__*/React.createElement("div", {
116
+ className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
117
+ }, /*#__PURE__*/React.createElement("div", {
117
118
  ref: ref,
118
119
  "data-testid": testId,
119
- className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
120
- }, /*#__PURE__*/React.createElement("div", {
121
120
  className: ax([innerStyles.root, innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
122
121
  }, children));
123
122
  });
package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -16,9 +16,9 @@
16
16
  ._kqsw1if8{position:sticky}
17
17
  ._vchhusvi{box-sizing:border-box}
18
18
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
19
- @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{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
19
+ @media (prefers-reduced-motion:no-preference){._10t88iot{transition-property:transform,display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}
20
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
21
21
  @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}}
22
- @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoi188d{transition-duration:.3s}._hjoifnf5{transition-duration:.2s}}
22
+ @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)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
23
23
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
24
24
  @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}}}
package/dist/esm/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -54,13 +54,13 @@ var styles = {
54
54
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
55
55
  animationRTLSupport: "_15yekb7n _65m41mrw",
56
56
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
57
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
57
+ flyoutOpenFullHeightSidebar: "_hjoifnf5 _vgub1ku9 _s2eg1p9u",
58
58
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
59
59
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
60
60
  hiddenMobileAndDesktop: "_1e0cglyw",
61
61
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
62
62
  hiddenDesktopOnly: "_dm25glyw",
63
- animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
63
+ animationBaseStyles: "_10t88iot _1vrh1a5r _xrrpfnf5",
64
64
  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
65
65
  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
66
66
  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -12,5 +12,5 @@
12
12
  ._lcxv1wug{pointer-events:auto}
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
- @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
15
+ @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
16
  @media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
package/dist/esm/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -41,8 +41,7 @@ var innerStyles = {
41
41
  * This wrapper element is only rendered when `navx-full-height-sidebar` is enabled.
42
42
  */
43
43
  var wrapperStyles = {
44
- root: "_vchhusvi",
45
- fullHeightSidebar: "_bozgutpp",
44
+ root: "_vchhusvi _bozgutpp _4t3i1osq",
46
45
  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
47
46
  };
48
47
 
@@ -63,7 +62,7 @@ var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
63
62
  var childrenWrapperStyles = {
64
63
  root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
65
64
  animationBaseStyles: "_10t81e03",
66
- finalPosition: "_mjvcz12g _xrrp188d",
65
+ finalPosition: "_mjvcz12g _xrrpfnf5",
67
66
  expandAnimationStartPosition: "_mjvcyrjp",
68
67
  collapseAnimationStartPosition: "_mjvco0k7"
69
68
  };
@@ -77,7 +76,7 @@ var childrenWrapperStyles = {
77
76
  */
78
77
  var toggleButtonWrapperStyles = {
79
78
  root: "_15yekb7n _65m41mrw _10t81rjc",
80
- finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
79
+ finalPosition: "_mjvcz12g _xrrpfnf5 _bgpzkb7n",
81
80
  expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
82
81
  collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
83
82
  expandAnimationTimingFunction: "_1xq51ytf",
@@ -112,10 +111,10 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
112
111
  }),
113
112
  isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
114
113
  return /*#__PURE__*/React.createElement("div", {
114
+ className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
115
+ }, /*#__PURE__*/React.createElement("div", {
115
116
  ref: ref,
116
117
  "data-testid": testId,
117
- className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
118
- }, /*#__PURE__*/React.createElement("div", {
119
118
  className: ax([innerStyles.root, innerStyles.fullHeightSidebar, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded])
120
119
  }, children));
121
120
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "3.0.1",
3
+ "version": "3.1.1",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -115,7 +115,7 @@
115
115
  "@atlaskit/skeleton": "^2.1.0",
116
116
  "@atlaskit/temp-nav-app-icons": "^0.14.0",
117
117
  "@atlaskit/textfield": "^8.0.0",
118
- "@atlassian/feature-flags-test-utils": "^0.3.0",
118
+ "@atlassian/feature-flags-test-utils": "^1.0.0",
119
119
  "@atlassian/gemini": "^1.20.0",
120
120
  "@atlassian/search-dialog": "^9.7.0",
121
121
  "@atlassian/ssr-tests": "^0.3.0",