@atlaskit/navigation-system 2.20.0 → 2.21.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 +20 -0
  2. package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css +5 -3
  3. package/dist/cjs/ui/page-layout/side-nav/side-nav.js +8 -7
  4. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css +4 -2
  5. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +12 -8
  6. package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css +5 -3
  7. package/dist/es2019/ui/page-layout/side-nav/side-nav.js +8 -7
  8. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css +4 -2
  9. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +12 -8
  10. package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css +5 -3
  11. package/dist/esm/ui/page-layout/side-nav/side-nav.js +8 -7
  12. package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css +4 -2
  13. package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +12 -8
  14. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 2.21.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.21.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`3476b9c121ef9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3476b9c121ef9) -
14
+ Side nav animations have been updated to support right-to-left (RTL) languages/text direction.
15
+ This change is behind the feature gate `navx-full-height-sidebar`.
16
+
17
+ This includes:
18
+
19
+ - `SideNav` peek animations
20
+ - `SideNav` expand and collapse animations
21
+ - `TopNavStart` reorder animations
22
+
3
23
  ## 2.20.0
4
24
 
5
25
  ### Minor Changes
package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
3
3
  ._191wglyw{border-inline-start:none}
4
4
  ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
5
+ ._15yekb7n{--animation-direction:1}
5
6
  ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
6
7
  ._1bah1yb4{justify-content:space-between}
7
8
  ._1bsb1ego{width:min(90%,20pc)}
@@ -14,9 +15,10 @@
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
15
16
  ._kqsw1if8{position:sticky}
16
17
  ._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)}}
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)}}
18
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
19
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}}
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
+ @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}}
23
+ @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
22
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
@@ -61,18 +61,19 @@ var styles = {
61
61
  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
62
62
  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
63
63
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
64
+ animationRTLSupport: "_15yekb7n _65m41mrw",
64
65
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
65
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
66
- flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
66
+ flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
67
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
67
68
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
68
69
  hiddenMobileAndDesktop: "_1e0cglyw",
69
70
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
70
71
  hiddenDesktopOnly: "_dm25glyw",
71
72
  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
72
- expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
73
- collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
74
- expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
75
- collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
73
+ expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
74
+ collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
75
+ expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
76
+ collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
76
77
  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
77
78
  };
78
79
  var fallbackDefaultWidth = 320;
@@ -632,7 +633,7 @@ function SideNavInternal(_ref) {
632
633
  style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
633
634
  ref: mergedRef,
634
635
  "data-testid": testId,
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])
636
+ className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationRTLSupport, 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])
636
637
  }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
637
638
  variableName: _constants.sideNavLiveWidthVar,
638
639
  value: "0px",
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}
3
3
  ._zulp1kw7{gap:inherit}
4
- ._yyhykb7n{grid-column:1}._1e0c1kw7{display:inherit}
4
+ ._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
5
+ ._1e0c1kw7{display:inherit}
5
6
  ._1e0c1txw{display:flex}
6
7
  ._1ul9idpf{min-width:0}
7
8
  ._4cvr1h6o{align-items:center}
@@ -10,5 +11,6 @@
10
11
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
11
12
  ._lcxv1wug{pointer-events:auto}
12
13
  ._vchhusvi{box-sizing:border-box}
13
- @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}._mjvc162w{transform:translateX(calc(-2rem + var(--ds-space-050, 4px)*-1))}._mjvcjq3t{transform:translateX(-100%)}._bgpzidpf{opacity:0}._mjvcsws1{transform:translateX(calc(2rem + var(--ds-space-050, 4px)))}._mjvcxwn4{transform:translateX(100%)}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
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}}
14
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
@@ -69,11 +69,11 @@ var wrapperStyles = {
69
69
  */
70
70
  var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
71
71
  var childrenWrapperStyles = {
72
- root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf",
72
+ root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
73
73
  animationBaseStyles: "_10t81e03",
74
74
  finalPosition: "_mjvcz12g _xrrp188d",
75
- expandAnimationStartPosition: "_mjvcsws1",
76
- collapseAnimationStartPosition: "_mjvc162w"
75
+ expandAnimationStartPosition: "_mjvcyrjp",
76
+ collapseAnimationStartPosition: "_mjvco0k7"
77
77
  };
78
78
 
79
79
  /**
@@ -84,10 +84,10 @@ var childrenWrapperStyles = {
84
84
  * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
85
85
  */
86
86
  var toggleButtonWrapperStyles = {
87
- root: "_10t81rjc",
87
+ root: "_15yekb7n _65m41mrw _10t81rjc",
88
88
  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
89
- expandAnimationStartPosition: "_mjvcjq3t _bgpzidpf",
90
- collapseAnimationStartPosition: "_mjvcxwn4 _bgpzidpf",
89
+ expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
90
+ collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
91
91
  expandAnimationTimingFunction: "_1xq51ytf",
92
92
  collapseAnimationTimingFunction: "_1xq55ucs",
93
93
  alignEnd: "_ahbq1wug"
@@ -238,11 +238,15 @@ function TopNavStart(_ref3) {
238
238
  testId: testId
239
239
  }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
240
240
  key: sideNavToggleButtonKey,
241
- className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
241
+ className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
242
+ // Timing function is applied when the browser animates to the idle position.
243
+ animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
242
244
  }, sideNavToggleButton), (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? /*#__PURE__*/_react.default.createElement("div", {
243
245
  className: (0, _runtime.ax)([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
244
246
  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement("div", {
245
247
  key: sideNavToggleButtonKey,
246
- className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
248
+ className: (0, _runtime.ax)([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
249
+ // Timing function is applied when the browser animates to the idle position.
250
+ animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
247
251
  }, sideNavToggleButton));
248
252
  }
package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
3
3
  ._191wglyw{border-inline-start:none}
4
4
  ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
5
+ ._15yekb7n{--animation-direction:1}
5
6
  ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
6
7
  ._1bah1yb4{justify-content:space-between}
7
8
  ._1bsb1ego{width:min(90%,20pc)}
@@ -14,9 +15,10 @@
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
15
16
  ._kqsw1if8{position:sticky}
16
17
  ._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)}}
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)}}
18
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
19
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}}
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
+ @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}}
23
+ @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
22
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
@@ -48,18 +48,19 @@ const styles = {
48
48
  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
49
49
  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
50
50
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
51
+ animationRTLSupport: "_15yekb7n _65m41mrw",
51
52
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
52
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
53
- flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
53
+ flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
54
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
54
55
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
55
56
  hiddenMobileAndDesktop: "_1e0cglyw",
56
57
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
57
58
  hiddenDesktopOnly: "_dm25glyw",
58
59
  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
59
- expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
60
- collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
61
- expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
62
- collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
60
+ expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
61
+ collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
62
+ expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
63
+ collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
63
64
  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
64
65
  };
65
66
  const fallbackDefaultWidth = 320;
@@ -624,7 +625,7 @@ function SideNavInternal({
624
625
  },
625
626
  ref: mergedRef,
626
627
  "data-testid": testId,
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])
628
+ className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, fg('navx-full-height-sidebar') && styles.animationRTLSupport, 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])
628
629
  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
629
630
  variableName: sideNavLiveWidthVar,
630
631
  value: "0px",
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}
3
3
  ._zulp1kw7{gap:inherit}
4
- ._yyhykb7n{grid-column:1}._1e0c1kw7{display:inherit}
4
+ ._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
5
+ ._1e0c1kw7{display:inherit}
5
6
  ._1e0c1txw{display:flex}
6
7
  ._1ul9idpf{min-width:0}
7
8
  ._4cvr1h6o{align-items:center}
@@ -10,5 +11,6 @@
10
11
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
11
12
  ._lcxv1wug{pointer-events:auto}
12
13
  ._vchhusvi{box-sizing:border-box}
13
- @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}._mjvc162w{transform:translateX(calc(-2rem + var(--ds-space-050, 4px)*-1))}._mjvcjq3t{transform:translateX(-100%)}._bgpzidpf{opacity:0}._mjvcsws1{transform:translateX(calc(2rem + var(--ds-space-050, 4px)))}._mjvcxwn4{transform:translateX(100%)}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
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}}
14
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
@@ -60,11 +60,11 @@ const wrapperStyles = {
60
60
  */
61
61
  const childrenWrapperAnimationOffset = `calc(2rem + ${flexGap})`;
62
62
  const childrenWrapperStyles = {
63
- root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf",
63
+ root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
64
64
  animationBaseStyles: "_10t81e03",
65
65
  finalPosition: "_mjvcz12g _xrrp188d",
66
- expandAnimationStartPosition: "_mjvcsws1",
67
- collapseAnimationStartPosition: "_mjvc162w"
66
+ expandAnimationStartPosition: "_mjvcyrjp",
67
+ collapseAnimationStartPosition: "_mjvco0k7"
68
68
  };
69
69
 
70
70
  /**
@@ -75,10 +75,10 @@ const childrenWrapperStyles = {
75
75
  * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
76
76
  */
77
77
  const toggleButtonWrapperStyles = {
78
- root: "_10t81rjc",
78
+ root: "_15yekb7n _65m41mrw _10t81rjc",
79
79
  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
80
- expandAnimationStartPosition: "_mjvcjq3t _bgpzidpf",
81
- collapseAnimationStartPosition: "_mjvcxwn4 _bgpzidpf",
80
+ expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
81
+ collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
82
82
  expandAnimationTimingFunction: "_1xq51ytf",
83
83
  collapseAnimationTimingFunction: "_1xq55ucs",
84
84
  alignEnd: "_ahbq1wug"
@@ -228,11 +228,15 @@ export function TopNavStart({
228
228
  testId: testId
229
229
  }, !fg('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
230
230
  key: sideNavToggleButtonKey,
231
- className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
231
+ className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
232
+ // Timing function is applied when the browser animates to the idle position.
233
+ animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
232
234
  }, sideNavToggleButton), fg('navx-full-height-sidebar') ? /*#__PURE__*/React.createElement("div", {
233
235
  className: ax([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
234
236
  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
235
237
  key: sideNavToggleButtonKey,
236
- className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
238
+ className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
239
+ // Timing function is applied when the browser animates to the idle position.
240
+ animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
237
241
  }, sideNavToggleButton));
238
242
  }
package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css CHANGED
@@ -2,6 +2,7 @@
2
2
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
3
3
  ._191wglyw{border-inline-start:none}
4
4
  ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
5
+ ._15yekb7n{--animation-direction:1}
5
6
  ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
6
7
  ._1bah1yb4{justify-content:space-between}
7
8
  ._1bsb1ego{width:min(90%,20pc)}
@@ -14,9 +15,10 @@
14
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
15
16
  ._kqsw1if8{position:sticky}
16
17
  ._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)}}
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)}}
18
20
  @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
19
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}}
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
+ @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}}
23
+ @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
22
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
@@ -52,18 +52,19 @@ var styles = {
52
52
  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
53
53
  flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
54
54
  flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
55
+ animationRTLSupport: "_15yekb7n _65m41mrw",
55
56
  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _17ly8iot _177m1a5r",
56
- flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2egjq3t",
57
- flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1ujq3t",
57
+ flyoutOpenFullHeightSidebar: "_hjoi188d _vgub1ku9 _s2eg1p9u",
58
+ flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
58
59
  flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
59
60
  hiddenMobileAndDesktop: "_1e0cglyw",
60
61
  hiddenMobileOnly: "_1e0cglyw _dm2518uv",
61
62
  hiddenDesktopOnly: "_dm25glyw",
62
63
  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrp188d",
63
- expandAnimationMobile: "_1xq51ku9 _1nu5jq3t",
64
- collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadijq3t",
65
- expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2egjq3t",
66
- collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1ujq3t",
64
+ expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
65
+ collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
66
+ expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
67
+ collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u",
67
68
  fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
68
69
  };
69
70
  var fallbackDefaultWidth = 320;
@@ -623,7 +624,7 @@ function SideNavInternal(_ref) {
623
624
  style: _defineProperty({}, sideNavVar, clampedWidth),
624
625
  ref: mergedRef,
625
626
  "data-testid": testId,
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])
627
+ className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, fg('navx-full-height-sidebar') && styles.animationRTLSupport, 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])
627
628
  }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
628
629
  variableName: sideNavLiveWidthVar,
629
630
  value: "0px",
package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}
3
3
  ._zulp1kw7{gap:inherit}
4
- ._yyhykb7n{grid-column:1}._1e0c1kw7{display:inherit}
4
+ ._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
5
+ ._1e0c1kw7{display:inherit}
5
6
  ._1e0c1txw{display:flex}
6
7
  ._1ul9idpf{min-width:0}
7
8
  ._4cvr1h6o{align-items:center}
@@ -10,5 +11,6 @@
10
11
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
11
12
  ._lcxv1wug{pointer-events:auto}
12
13
  ._vchhusvi{box-sizing:border-box}
13
- @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}._mjvc162w{transform:translateX(calc(-2rem + var(--ds-space-050, 4px)*-1))}._mjvcjq3t{transform:translateX(-100%)}._bgpzidpf{opacity:0}._mjvcsws1{transform:translateX(calc(2rem + var(--ds-space-050, 4px)))}._mjvcxwn4{transform:translateX(100%)}._mjvcz12g{transform:translateX(0)}._xrrp188d{transition-duration:.3s}._bgpzkb7n{opacity:1}}
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}}
14
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
@@ -61,11 +61,11 @@ var wrapperStyles = {
61
61
  */
62
62
  var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
63
63
  var childrenWrapperStyles = {
64
- root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf",
64
+ root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
65
65
  animationBaseStyles: "_10t81e03",
66
66
  finalPosition: "_mjvcz12g _xrrp188d",
67
- expandAnimationStartPosition: "_mjvcsws1",
68
- collapseAnimationStartPosition: "_mjvc162w"
67
+ expandAnimationStartPosition: "_mjvcyrjp",
68
+ collapseAnimationStartPosition: "_mjvco0k7"
69
69
  };
70
70
 
71
71
  /**
@@ -76,10 +76,10 @@ var childrenWrapperStyles = {
76
76
  * element from the exact old position (offset), and it avoids the additional complexity of needing to track and calculate the exact offset.
77
77
  */
78
78
  var toggleButtonWrapperStyles = {
79
- root: "_10t81rjc",
79
+ root: "_15yekb7n _65m41mrw _10t81rjc",
80
80
  finalPosition: "_mjvcz12g _xrrp188d _bgpzkb7n",
81
- expandAnimationStartPosition: "_mjvcjq3t _bgpzidpf",
82
- collapseAnimationStartPosition: "_mjvcxwn4 _bgpzidpf",
81
+ expandAnimationStartPosition: "_mjvc1p9u _bgpzidpf",
82
+ collapseAnimationStartPosition: "_mjvc1efy _bgpzidpf",
83
83
  expandAnimationTimingFunction: "_1xq51ytf",
84
84
  collapseAnimationTimingFunction: "_1xq55ucs",
85
85
  alignEnd: "_ahbq1wug"
@@ -230,11 +230,15 @@ export function TopNavStart(_ref3) {
230
230
  testId: testId
231
231
  }, !fg('navx-full-height-sidebar') && sideNavToggleButton, sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
232
232
  key: sideNavToggleButtonKey,
233
- className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
233
+ className: ax([!isFirefox && toggleButtonWrapperStyles.root, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
234
+ // Timing function is applied when the browser animates to the idle position.
235
+ animationState.type === 'idle' && toggleButtonWrapperStyles.collapseAnimationTimingFunction, !isFirefox && animationState.type === 'collapse' && toggleButtonWrapperStyles.collapseAnimationStartPosition])
234
236
  }, sideNavToggleButton), fg('navx-full-height-sidebar') ? /*#__PURE__*/React.createElement("div", {
235
237
  className: ax([childrenWrapperStyles.root, !isFirefox && childrenWrapperStyles.animationBaseStyles, !isFirefox && animationState.type === 'idle' && childrenWrapperStyles.finalPosition, !isFirefox && animationState.type === 'expand' && childrenWrapperStyles.expandAnimationStartPosition, !isFirefox && animationState.type === 'collapse' && childrenWrapperStyles.collapseAnimationStartPosition])
236
238
  }, children) : children, sideNavToggleButton && isDesktop && isExpandedOnDesktop && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
237
239
  key: sideNavToggleButtonKey,
238
- className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
240
+ className: ax([!isFirefox && toggleButtonWrapperStyles.root, toggleButtonWrapperStyles.alignEnd, !isFirefox && animationState.type === 'idle' && toggleButtonWrapperStyles.finalPosition, !isFirefox &&
241
+ // Timing function is applied when the browser animates to the idle position.
242
+ animationState.type === 'idle' && toggleButtonWrapperStyles.expandAnimationTimingFunction, !isFirefox && animationState.type === 'expand' && toggleButtonWrapperStyles.expandAnimationStartPosition])
239
243
  }, sideNavToggleButton));
240
244
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "2.20.0",
3
+ "version": "2.21.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",
@@ -69,7 +69,7 @@
69
69
  "@atlaskit/analytics-next": "^11.1.0",
70
70
  "@atlaskit/avatar": "^25.4.0",
71
71
  "@atlaskit/button": "^23.5.0",
72
- "@atlaskit/css": "^0.14.0",
72
+ "@atlaskit/css": "^0.15.0",
73
73
  "@atlaskit/ds-lib": "^5.1.0",
74
74
  "@atlaskit/icon": "^28.5.0",
75
75
  "@atlaskit/layering": "^3.1.0",
@@ -79,8 +79,8 @@
79
79
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
80
80
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
81
81
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
82
- "@atlaskit/primitives": "^14.15.0",
83
- "@atlaskit/tokens": "^6.4.0",
82
+ "@atlaskit/primitives": "^15.0.0",
83
+ "@atlaskit/tokens": "^6.5.0",
84
84
  "@atlaskit/tooltip": "^20.5.0",
85
85
  "@atlaskit/visually-hidden": "^3.0.0",
86
86
  "@babel/runtime": "^7.0.0",