@atlaskit/navigation-system 10.16.3 → 10.16.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/ui/page-layout/panel.compiled.css +1 -5
  3. package/dist/cjs/ui/page-layout/panel.js +7 -9
  4. package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +1 -1
  5. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +1 -1
  6. package/dist/es2019/ui/page-layout/panel.compiled.css +1 -5
  7. package/dist/es2019/ui/page-layout/panel.js +5 -7
  8. package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +1 -1
  9. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +1 -1
  10. package/dist/esm/ui/page-layout/panel.compiled.css +1 -5
  11. package/dist/esm/ui/page-layout/panel.js +5 -7
  12. package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +1 -1
  13. package/dist/esm/ui/page-layout/side-nav/side-nav.js +1 -1
  14. package/package.json +43 -43
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.16.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 10.16.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`1cfdd8f6d54e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1cfdd8f6d54e6) -
14
+ Behind `platform-dst-motion-uplift-sidenav`, the side nav now holds `grid-area: main` for the
15
+ first 150ms of its desktop enter animation instead of switching immediately, so the main content
16
+ reflows shortly into the animation rather than at the very start.
17
+
18
+ Behind `platform-dst-motion-uplift-panel`, the panel holds `position: fixed` for the first 150ms
19
+ of its enter animation, and its enter and exit animations are now disabled under
20
+ `prefers-reduced-motion: reduce`.
21
+
3
22
  ## 10.16.3
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/ui/page-layout/panel.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
2
  ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
- ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
- ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
3
  ._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
6
- [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
- [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
8
4
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
9
5
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
10
6
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -17,8 +13,8 @@
17
13
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
18
14
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
19
15
  ._kqsw1if8{position:sticky}
20
- ._kqsw1n9t{position:fixed}
21
16
  ._vchhusvi{box-sizing:border-box}
17
+ @media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
22
18
  @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
23
19
  @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
24
20
  @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}
package/dist/cjs/ui/page-layout/panel.js CHANGED
@@ -13,9 +13,9 @@ var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _react2 = require("@compiled/react");
17
16
  var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
18
- var _useMotion2 = require("@atlaskit/motion/use-motion");
17
+ var _useMotion2 = require("@atlaskit/motion/entering/use-motion");
18
+ var _reanimate = require("@atlaskit/motion/reanimate");
19
19
  var _fg = require("@atlaskit/platform-feature-flags/fg");
20
20
  var _responsive = require("@atlaskit/primitives/responsive");
21
21
  var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
@@ -44,8 +44,8 @@ var styles = {
44
44
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
45
45
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
46
46
  hidden: "_1e0cglyw",
47
- entering: "_y44v1nn1 _kqsw1n9t _158obamb",
48
- exiting: "_y44v14vv _kqsw1n9t _158oeydr",
47
+ entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
48
+ exiting: "_k1af14vv _bq641n9t _105aeydr",
49
49
  contentEntering: "_y44v11az",
50
50
  contentExiting: "_y44vf1qi"
51
51
  };
@@ -136,12 +136,12 @@ function Panel(_ref) {
136
136
  }
137
137
  if (isMotionUpliftEnabled) {
138
138
  if (defaultWidth === 0) {
139
- reanimate(_useMotion2.Reanimate.exit);
139
+ reanimate(_reanimate.Reanimate.exit);
140
140
  defaultWidthRef.current = defaultWidth;
141
141
  // Set width to 0 once the exit animation is complete
142
142
  return;
143
143
  } else if (defaultWidthRef.current === 0) {
144
- reanimate(_useMotion2.Reanimate.enter);
144
+ reanimate(_reanimate.Reanimate.enter);
145
145
  }
146
146
  }
147
147
  defaultWidthRef.current = defaultWidth;
@@ -200,9 +200,7 @@ function Panel(_ref) {
200
200
  "aria-label": label
201
201
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
202
202
  ,
203
- className: (0, _runtime.ax)([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
204
- // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
205
- (0, _react2.cx)(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
203
+ className: (0, _runtime.ax)([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
206
204
  style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
207
205
  "data-testid": testId,
208
206
  ref: mergedRef
package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -25,7 +25,7 @@
25
25
  @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
26
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
27
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
28
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
29
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
30
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
31
31
  @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}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/cjs/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -110,7 +110,7 @@ var motionUpliftStyles = {
110
110
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
111
111
  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
112
112
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
113
- expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
113
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
114
114
  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
115
115
  };
116
116
  var fallbackDefaultWidth = 320;
package/dist/es2019/ui/page-layout/panel.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
2
  ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
- ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
- ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
3
  ._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
6
- [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
- [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
8
4
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
9
5
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
10
6
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -17,8 +13,8 @@
17
13
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
18
14
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
19
15
  ._kqsw1if8{position:sticky}
20
- ._kqsw1n9t{position:fixed}
21
16
  ._vchhusvi{box-sizing:border-box}
17
+ @media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
22
18
  @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
23
19
  @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
24
20
  @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}
package/dist/es2019/ui/page-layout/panel.js CHANGED
@@ -3,9 +3,9 @@ import "./panel.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
6
- import { cx } from '@compiled/react';
7
6
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
8
- import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
7
+ import { useMotion } from '@atlaskit/motion/entering/use-motion';
8
+ import { Reanimate } from '@atlaskit/motion/reanimate';
9
9
  import { fg } from '@atlaskit/platform-feature-flags/fg';
10
10
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
11
11
  import { media } from '@atlaskit/primitives/responsive';
@@ -33,8 +33,8 @@ const styles = {
33
33
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
34
34
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
35
35
  hidden: "_1e0cglyw",
36
- entering: "_y44v1nn1 _kqsw1n9t _158obamb",
37
- exiting: "_y44v14vv _kqsw1n9t _158oeydr",
36
+ entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
37
+ exiting: "_k1af14vv _bq641n9t _105aeydr",
38
38
  contentEntering: "_y44v11az",
39
39
  contentExiting: "_y44vf1qi"
40
40
  };
@@ -182,9 +182,7 @@ export function Panel({
182
182
  "aria-label": label
183
183
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
184
184
  ,
185
- className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
186
- // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
187
- cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
185
+ className: ax([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
188
186
  style: {
189
187
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
190
188
  [panelVar]: panelVariableWidth,
package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -25,7 +25,7 @@
25
25
  @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
26
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
27
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
28
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
29
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
30
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
31
31
  @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}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/es2019/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -97,7 +97,7 @@ const motionUpliftStyles = {
97
97
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
98
98
  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
99
99
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
100
- expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
100
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
101
101
  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
102
102
  };
103
103
  const fallbackDefaultWidth = 320;
package/dist/esm/ui/page-layout/panel.compiled.css CHANGED
@@ -1,10 +1,6 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
2
  ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
- ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
- ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
3
  ._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
6
- [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
- [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
8
4
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
9
5
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
10
6
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -17,8 +13,8 @@
17
13
  ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
18
14
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
19
15
  ._kqsw1if8{position:sticky}
20
- ._kqsw1n9t{position:fixed}
21
16
  ._vchhusvi{box-sizing:border-box}
17
+ @media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
22
18
  @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
23
19
  @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
24
20
  @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}
package/dist/esm/ui/page-layout/panel.js CHANGED
@@ -5,9 +5,9 @@ import "./panel.compiled.css";
5
5
  import * as React from 'react';
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
8
- import { cx } from '@compiled/react';
9
8
  import mergeRefs from '@atlaskit/ds-lib/merge-refs';
10
- import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
9
+ import { useMotion } from '@atlaskit/motion/entering/use-motion';
10
+ import { Reanimate } from '@atlaskit/motion/reanimate';
11
11
  import { fg } from '@atlaskit/platform-feature-flags/fg';
12
12
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
13
13
  import { media } from '@atlaskit/primitives/responsive';
@@ -35,8 +35,8 @@ var styles = {
35
35
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
36
36
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
37
37
  hidden: "_1e0cglyw",
38
- entering: "_y44v1nn1 _kqsw1n9t _158obamb",
39
- exiting: "_y44v14vv _kqsw1n9t _158oeydr",
38
+ entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
39
+ exiting: "_k1af14vv _bq641n9t _105aeydr",
40
40
  contentEntering: "_y44v11az",
41
41
  contentExiting: "_y44vf1qi"
42
42
  };
@@ -191,9 +191,7 @@ export function Panel(_ref) {
191
191
  "aria-label": label
192
192
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
193
193
  ,
194
- className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
195
- // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
196
- cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
194
+ className: ax([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
197
195
  style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
198
196
  "data-testid": testId,
199
197
  ref: mergedRef
package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -25,7 +25,7 @@
25
25
  @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
26
26
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
27
27
  @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
28
- @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
28
+ @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
29
29
  @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
30
30
  @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
31
31
  @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}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}
package/dist/esm/ui/page-layout/side-nav/side-nav.js CHANGED
@@ -101,7 +101,7 @@ var motionUpliftStyles = {
101
101
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
102
102
  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
103
103
  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
104
- expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
104
+ expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
105
105
  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
106
106
  };
107
107
  var fallbackDefaultWidth = 320;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.16.3",
3
+ "version": "10.16.5",
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",
@@ -53,26 +53,26 @@
53
53
  }
54
54
  },
55
55
  "dependencies": {
56
- "@atlaskit/analytics-next": "^12.4.0",
57
- "@atlaskit/app-provider": "^5.4.0",
58
- "@atlaskit/avatar": "^27.2.0",
59
- "@atlaskit/button": "^25.2.0",
56
+ "@atlaskit/analytics-next": "^12.5.0",
57
+ "@atlaskit/app-provider": "^5.5.0",
58
+ "@atlaskit/avatar": "^28.0.0",
59
+ "@atlaskit/button": "^25.3.0",
60
60
  "@atlaskit/css": "^1.1.0",
61
61
  "@atlaskit/ds-lib": "^8.0.0",
62
- "@atlaskit/icon": "^37.5.0",
63
- "@atlaskit/layering": "^5.1.0",
64
- "@atlaskit/logo": "^21.5.0",
65
- "@atlaskit/motion": "^8.5.0",
66
- "@atlaskit/platform-feature-flags": "^2.1.0",
67
- "@atlaskit/platform-feature-flags-react": "^1.1.0",
68
- "@atlaskit/popup": "^6.2.0",
69
- "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
70
- "@atlaskit/primitives": "^22.4.0",
62
+ "@atlaskit/icon": "^37.6.0",
63
+ "@atlaskit/layering": "^5.2.0",
64
+ "@atlaskit/logo": "^21.6.0",
65
+ "@atlaskit/motion": "^8.6.0",
66
+ "@atlaskit/platform-feature-flags": "^2.2.0",
67
+ "@atlaskit/platform-feature-flags-react": "^1.2.0",
68
+ "@atlaskit/popup": "^6.3.0",
69
+ "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
70
+ "@atlaskit/primitives": "^22.5.0",
71
71
  "@atlaskit/react-compiler-gating": "^0.2.0",
72
72
  "@atlaskit/side-nav-items": "^2.3.0",
73
- "@atlaskit/tokens": "^16.8.0",
74
- "@atlaskit/tooltip": "^24.2.0",
75
- "@atlaskit/visually-hidden": "^4.3.0",
73
+ "@atlaskit/tokens": "^16.11.0",
74
+ "@atlaskit/tooltip": "^24.3.0",
75
+ "@atlaskit/visually-hidden": "^4.4.0",
76
76
  "@babel/runtime": "^7.0.0",
77
77
  "@compiled/react": "^1.0.2",
78
78
  "bind-event-listener": "^3.0.0",
@@ -87,35 +87,35 @@
87
87
  "@af/accessibility-testing": "workspace:^",
88
88
  "@af/integration-testing": "workspace:^",
89
89
  "@af/visual-regression": "workspace:^",
90
- "@atlaskit/badge": "^21.1.0",
91
- "@atlaskit/banner": "^15.2.0",
92
- "@atlaskit/breadcrumbs": "^17.6.0",
93
- "@atlaskit/dropdown-menu": "^18.2.0",
94
- "@atlaskit/flag": "^18.4.0",
95
- "@atlaskit/form": "^17.1.0",
96
- "@atlaskit/heading": "^7.1.0",
97
- "@atlaskit/image": "^5.1.0",
98
- "@atlaskit/inline-dialog": "^20.2.0",
90
+ "@atlaskit/badge": "^21.2.0",
91
+ "@atlaskit/banner": "^15.3.0",
92
+ "@atlaskit/breadcrumbs": "^17.7.0",
93
+ "@atlaskit/dropdown-menu": "^18.3.0",
94
+ "@atlaskit/flag": "^18.5.0",
95
+ "@atlaskit/form": "^17.2.0",
96
+ "@atlaskit/heading": "^7.2.0",
97
+ "@atlaskit/image": "^5.2.0",
98
+ "@atlaskit/inline-dialog": "^20.3.0",
99
99
  "@atlaskit/link": "^5.1.0",
100
- "@atlaskit/lozenge": "^15.3.0",
101
- "@atlaskit/menu": "^10.1.0",
102
- "@atlaskit/modal-dialog": "^16.5.0",
103
- "@atlaskit/onboarding": "^15.3.0",
104
- "@atlaskit/page-header": "^13.2.0",
105
- "@atlaskit/page-layout": "^5.4.0",
106
- "@atlaskit/popper": "^9.3.0",
107
- "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
108
- "@atlaskit/section-message": "^10.1.0",
109
- "@atlaskit/select": "^22.10.0",
110
- "@atlaskit/skeleton": "^4.3.0",
100
+ "@atlaskit/lozenge": "^15.4.0",
101
+ "@atlaskit/menu": "^10.2.0",
102
+ "@atlaskit/modal-dialog": "^16.6.0",
103
+ "@atlaskit/onboarding": "^15.4.0",
104
+ "@atlaskit/page-header": "^13.3.0",
105
+ "@atlaskit/page-layout": "^5.5.0",
106
+ "@atlaskit/popper": "^9.4.0",
107
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
108
+ "@atlaskit/section-message": "^10.2.0",
109
+ "@atlaskit/select": "^22.11.0",
110
+ "@atlaskit/skeleton": "^4.4.0",
111
111
  "@atlaskit/spotlight": "^4.2.0",
112
- "@atlaskit/tabs": "^21.1.0",
113
- "@atlaskit/tag": "^15.7.0",
114
- "@atlaskit/textfield": "^10.1.0",
112
+ "@atlaskit/tabs": "^21.2.0",
113
+ "@atlaskit/tag": "^15.8.0",
114
+ "@atlaskit/textfield": "^10.2.0",
115
115
  "@atlaskit/top-layer": "^4.4.0",
116
- "@atlassian/feature-flags-test-utils": "^1.2.0",
117
- "@atlassian/gemini": "^1.52.0",
118
- "@atlassian/search-dialog": "^10.10.0",
116
+ "@atlassian/feature-flags-test-utils": "^1.3.0",
117
+ "@atlassian/gemini": "^1.53.0",
118
+ "@atlassian/search-dialog": "^10.13.0",
119
119
  "@atlassian/ssr-tests": "workspace:^",
120
120
  "@atlassian/test-utils": "^1.1.0",
121
121
  "@atlassian/testing-library": "^0.11.0",