@atlaskit/navigation-system 10.9.0 → 10.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.9.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 10.9.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`ae45184d2cd0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae45184d2cd0b) -
14
+ Fix `Panel` enter/exit animation so a panel with a default width of `0` starts hidden instead of
15
+ flashing visible. The panel now uses `useMotion`'s new `initialState` to begin in the `hidden`
16
+ state (behind the `platform-dst-motion-uplift-panel` gate). The `animationFillMode` overrides on
17
+ the entering/exiting styles have been removed, as this is now set within the motion tokens
18
+ themselves.
19
+
20
+ Additionally, a `overflow: hidden` rule is now applied to the page layout root (behind the same
21
+ `platform-dst-motion-uplift-panel` gate) so that the panel transforming off screen no longer
22
+ causes scroll bars to appear.
23
+
24
+ - Updated dependencies
25
+
3
26
  ## 10.9.0
4
27
 
5
28
  ### Minor Changes
@@ -7,8 +7,6 @@
7
7
  ._18m91wug{overflow-y:auto}
8
8
  ._1bsb1dxx{width:min(90%,var(--minWidth))}
9
9
  ._1e0cglyw{display:none}
10
- ._1o51eoah{animation-fill-mode:backwards}
11
- ._1o51q7pw{animation-fill-mode:forwards}
12
10
  ._1pbykb7n{z-index:1}
13
11
  ._1reo1wug{overflow-x:auto}
14
12
  ._4t3i1osq{height:100%}
@@ -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: "_y44v1s3l _1o51eoah",
48
- exiting: "_y44vqhwn _1o51q7pw"
47
+ entering: "_y44v1s3l",
48
+ exiting: "_y44vqhwn"
49
49
  };
50
50
 
51
51
  /**
@@ -73,6 +73,12 @@ function Panel(_ref) {
73
73
  var id = (0, _useLayoutId.useLayoutId)({
74
74
  providedId: providedId
75
75
  });
76
+ var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
77
+ var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
78
+ defaultWidthProp: defaultWidthProp,
79
+ fallbackDefaultWidth: fallbackDefaultWidth,
80
+ slotName: 'Panel'
81
+ });
76
82
 
77
83
  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
78
84
  var _useMotion = (0, _useMotion2.useMotion)({
@@ -81,17 +87,12 @@ function Panel(_ref) {
81
87
  // Set width to 0 as animation is complete
82
88
  setWidth(0);
83
89
  }
84
- }
90
+ },
91
+ initialState: defaultWidth === 0 ? 'hidden' : undefined
85
92
  }),
86
93
  state = _useMotion.state,
87
94
  motionRef = _useMotion.ref,
88
95
  reanimate = _useMotion.reanimate;
89
- var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
90
- var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
91
- defaultWidthProp: defaultWidthProp,
92
- fallbackDefaultWidth: fallbackDefaultWidth,
93
- slotName: 'Panel'
94
- });
95
96
 
96
97
  /**
97
98
  * Don't show the skip link if the slot has 0 width.
@@ -199,7 +200,7 @@ function Panel(_ref) {
199
200
  ,
200
201
  className: (0, _runtime.ax)([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
201
202
  // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
202
- (0, _react2.cx)(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
203
+ (0, _react2.cx)(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
203
204
  style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
204
205
  "data-testid": testId,
205
206
  ref: mergedRef
@@ -1,6 +1,8 @@
1
+ ._18m915vq{overflow-y:hidden}
1
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
2
3
  ._1e0c11p5{display:grid}
3
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
+ ._1reo15vq{overflow-x:hidden}
4
6
  ._1tke1kxc{min-height:100vh}
5
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
6
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
@@ -25,7 +25,8 @@ var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
25
25
  var styles = {
26
26
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
27
27
  safetyRail: "_1ciragmp",
28
- safetyRailWithTopLayer: "_1tvnagmp"
28
+ safetyRailWithTopLayer: "_1tvnagmp",
29
+ panelUplift: "_1reo15vq _18m915vq"
29
30
  };
30
31
 
31
32
  /**
@@ -74,7 +75,7 @@ function Root(_ref) {
74
75
  testId: testId
75
76
  }, /*#__PURE__*/_react.default.createElement("div", {
76
77
  ref: ref,
77
- className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
78
+ className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel') && styles.panelUplift, (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
78
79
  id: gridRootId,
79
80
  "data-testid": testId
80
81
  }, children)))))))));
@@ -7,8 +7,6 @@
7
7
  ._18m91wug{overflow-y:auto}
8
8
  ._1bsb1dxx{width:min(90%,var(--minWidth))}
9
9
  ._1e0cglyw{display:none}
10
- ._1o51eoah{animation-fill-mode:backwards}
11
- ._1o51q7pw{animation-fill-mode:forwards}
12
10
  ._1pbykb7n{z-index:1}
13
11
  ._1reo1wug{overflow-x:auto}
14
12
  ._4t3i1osq{height:100%}
@@ -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: "_y44v1s3l _1o51eoah",
37
- exiting: "_y44vqhwn _1o51q7pw"
36
+ entering: "_y44v1s3l",
37
+ exiting: "_y44vqhwn"
38
38
  };
39
39
 
40
40
  /**
@@ -59,6 +59,12 @@ export function Panel({
59
59
  const id = useLayoutId({
60
60
  providedId
61
61
  });
62
+ const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
63
+ const defaultWidth = useSafeDefaultWidth({
64
+ defaultWidthProp,
65
+ fallbackDefaultWidth,
66
+ slotName: 'Panel'
67
+ });
62
68
 
63
69
  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
64
70
  const {
@@ -71,13 +77,8 @@ export function Panel({
71
77
  // Set width to 0 as animation is complete
72
78
  setWidth(0);
73
79
  }
74
- }
75
- });
76
- const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
77
- const defaultWidth = useSafeDefaultWidth({
78
- defaultWidthProp,
79
- fallbackDefaultWidth,
80
- slotName: 'Panel'
80
+ },
81
+ initialState: defaultWidth === 0 ? 'hidden' : undefined
81
82
  });
82
83
 
83
84
  /**
@@ -181,7 +182,7 @@ export function Panel({
181
182
  ,
182
183
  className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
183
184
  // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
184
- cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
185
+ cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
185
186
  style: {
186
187
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
187
188
  [panelVar]: panelVariableWidth,
@@ -1,6 +1,8 @@
1
+ ._18m915vq{overflow-y:hidden}
1
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
2
3
  ._1e0c11p5{display:grid}
3
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
+ ._1reo15vq{overflow-x:hidden}
4
6
  ._1tke1kxc{min-height:100vh}
5
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
6
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
@@ -17,7 +17,8 @@ export const gridRootId = 'unsafe-design-system-page-layout-root';
17
17
  const styles = {
18
18
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
19
19
  safetyRail: "_1ciragmp",
20
- safetyRailWithTopLayer: "_1tvnagmp"
20
+ safetyRailWithTopLayer: "_1tvnagmp",
21
+ panelUplift: "_1reo15vq _18m915vq"
21
22
  };
22
23
 
23
24
  /**
@@ -72,7 +73,7 @@ This message will not be displayed in production.
72
73
  testId: testId
73
74
  }, /*#__PURE__*/React.createElement("div", {
74
75
  ref: ref,
75
- className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
76
+ className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
76
77
  id: gridRootId,
77
78
  "data-testid": testId
78
79
  }, children)))))))));
@@ -7,8 +7,6 @@
7
7
  ._18m91wug{overflow-y:auto}
8
8
  ._1bsb1dxx{width:min(90%,var(--minWidth))}
9
9
  ._1e0cglyw{display:none}
10
- ._1o51eoah{animation-fill-mode:backwards}
11
- ._1o51q7pw{animation-fill-mode:forwards}
12
10
  ._1pbykb7n{z-index:1}
13
11
  ._1reo1wug{overflow-x:auto}
14
12
  ._4t3i1osq{height:100%}
@@ -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: "_y44v1s3l _1o51eoah",
39
- exiting: "_y44vqhwn _1o51q7pw"
38
+ entering: "_y44v1s3l",
39
+ exiting: "_y44vqhwn"
40
40
  };
41
41
 
42
42
  /**
@@ -64,6 +64,12 @@ export function Panel(_ref) {
64
64
  var id = useLayoutId({
65
65
  providedId: providedId
66
66
  });
67
+ var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
68
+ var defaultWidth = useSafeDefaultWidth({
69
+ defaultWidthProp: defaultWidthProp,
70
+ fallbackDefaultWidth: fallbackDefaultWidth,
71
+ slotName: 'Panel'
72
+ });
67
73
 
68
74
  // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
69
75
  var _useMotion = useMotion({
@@ -72,17 +78,12 @@ export function Panel(_ref) {
72
78
  // Set width to 0 as animation is complete
73
79
  setWidth(0);
74
80
  }
75
- }
81
+ },
82
+ initialState: defaultWidth === 0 ? 'hidden' : undefined
76
83
  }),
77
84
  state = _useMotion.state,
78
85
  motionRef = _useMotion.ref,
79
86
  reanimate = _useMotion.reanimate;
80
- var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
81
- var defaultWidth = useSafeDefaultWidth({
82
- defaultWidthProp: defaultWidthProp,
83
- fallbackDefaultWidth: fallbackDefaultWidth,
84
- slotName: 'Panel'
85
- });
86
87
 
87
88
  /**
88
89
  * Don't show the skip link if the slot has 0 width.
@@ -190,7 +191,7 @@ export function Panel(_ref) {
190
191
  ,
191
192
  className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
192
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
193
- cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
194
+ cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
194
195
  style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
195
196
  "data-testid": testId,
196
197
  ref: mergedRef
@@ -1,6 +1,8 @@
1
+ ._18m915vq{overflow-y:hidden}
1
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
2
3
  ._1e0c11p5{display:grid}
3
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
+ ._1reo15vq{overflow-x:hidden}
4
6
  ._1tke1kxc{min-height:100vh}
5
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
6
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
@@ -17,7 +17,8 @@ export var gridRootId = 'unsafe-design-system-page-layout-root';
17
17
  var styles = {
18
18
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
19
19
  safetyRail: "_1ciragmp",
20
- safetyRailWithTopLayer: "_1tvnagmp"
20
+ safetyRailWithTopLayer: "_1tvnagmp",
21
+ panelUplift: "_1reo15vq _18m915vq"
21
22
  };
22
23
 
23
24
  /**
@@ -66,7 +67,7 @@ export function Root(_ref) {
66
67
  testId: testId
67
68
  }, /*#__PURE__*/React.createElement("div", {
68
69
  ref: ref,
69
- className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
70
+ className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
70
71
  id: gridRootId,
71
72
  "data-testid": testId
72
73
  }, children)))))))));
@@ -3,6 +3,6 @@ export declare const getWidthFromDragLocation: ({ initialWidth, location, initia
3
3
  initialWidth: number;
4
4
  location: DragLocationHistory;
5
5
  initialClientX: number;
6
- direction: "ltr" | "rtl";
7
- position: "start" | "end";
6
+ direction: 'ltr' | 'rtl';
7
+ position: 'start' | 'end';
8
8
  }) => number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.9.0",
3
+ "version": "10.9.2",
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",
@@ -55,23 +55,23 @@
55
55
  "dependencies": {
56
56
  "@atlaskit/analytics-next": "^12.3.0",
57
57
  "@atlaskit/app-provider": "^5.1.0",
58
- "@atlaskit/avatar": "^26.2.0",
58
+ "@atlaskit/avatar": "^26.4.0",
59
59
  "@atlaskit/button": "^24.3.0",
60
60
  "@atlaskit/css": "^1.0.0",
61
61
  "@atlaskit/ds-lib": "^8.0.0",
62
62
  "@atlaskit/icon": "^37.2.0",
63
63
  "@atlaskit/layering": "^5.0.0",
64
64
  "@atlaskit/logo": "^21.4.0",
65
- "@atlaskit/motion": "^7.5.0",
65
+ "@atlaskit/motion": "^8.0.0",
66
66
  "@atlaskit/platform-feature-flags": "^2.1.0",
67
67
  "@atlaskit/platform-feature-flags-react": "^1.1.0",
68
- "@atlaskit/popup": "^5.1.0",
68
+ "@atlaskit/popup": "^5.2.0",
69
69
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
70
70
  "@atlaskit/primitives": "^22.2.0",
71
71
  "@atlaskit/react-compiler-gating": "^0.2.0",
72
72
  "@atlaskit/side-nav-items": "^2.3.0",
73
73
  "@atlaskit/tokens": "^16.3.0",
74
- "@atlaskit/tooltip": "^23.1.0",
74
+ "@atlaskit/tooltip": "^24.0.0",
75
75
  "@atlaskit/visually-hidden": "^4.2.0",
76
76
  "@babel/runtime": "^7.0.0",
77
77
  "@compiled/react": "^1.0.0",
@@ -87,31 +87,31 @@
87
87
  "@af/accessibility-testing": "workspace:^",
88
88
  "@af/integration-testing": "workspace:^",
89
89
  "@af/visual-regression": "workspace:^",
90
- "@atlaskit/badge": "^19.1.0",
90
+ "@atlaskit/badge": "^20.0.0",
91
91
  "@atlaskit/banner": "^15.1.0",
92
92
  "@atlaskit/breadcrumbs": "^17.5.0",
93
- "@atlaskit/dropdown-menu": "^17.1.0",
93
+ "@atlaskit/dropdown-menu": "^17.2.0",
94
94
  "@atlaskit/flag": "^18.2.0",
95
95
  "@atlaskit/form": "^16.1.0",
96
- "@atlaskit/heading": "^6.2.0",
97
- "@atlaskit/inline-dialog": "^19.1.0",
98
- "@atlaskit/link": "^4.3.0",
96
+ "@atlaskit/heading": "^7.0.0",
97
+ "@atlaskit/inline-dialog": "^19.2.0",
98
+ "@atlaskit/link": "^5.0.0",
99
99
  "@atlaskit/lozenge": "^14.1.0",
100
100
  "@atlaskit/menu": "^9.2.0",
101
- "@atlaskit/modal-dialog": "^16.1.0",
101
+ "@atlaskit/modal-dialog": "^16.2.0",
102
102
  "@atlaskit/onboarding": "^15.1.0",
103
103
  "@atlaskit/page-header": "^13.1.0",
104
104
  "@atlaskit/page-layout": "^5.2.0",
105
- "@atlaskit/popper": "^8.3.0",
105
+ "@atlaskit/popper": "^8.4.0",
106
106
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
107
- "@atlaskit/select": "^22.5.0",
107
+ "@atlaskit/select": "^22.6.0",
108
108
  "@atlaskit/skeleton": "^4.2.0",
109
109
  "@atlaskit/spotlight": "^3.0.0",
110
110
  "@atlaskit/textfield": "^9.1.0",
111
- "@atlaskit/top-layer": "^1.10.0",
111
+ "@atlaskit/top-layer": "^2.0.0",
112
112
  "@atlassian/feature-flags-test-utils": "^1.2.0",
113
113
  "@atlassian/gemini": "^1.51.0",
114
- "@atlassian/search-dialog": "^10.6.0",
114
+ "@atlassian/search-dialog": "^10.7.0",
115
115
  "@atlassian/ssr-tests": "workspace:^",
116
116
  "@atlassian/test-utils": "^1.1.0",
117
117
  "@atlassian/testing-library": "^0.11.0",