@atlaskit/navigation-system 10.3.0 → 10.5.0

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 (16) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/entry-points/layout/panel.js +20 -1
  3. package/dist/cjs/entry-points/layout/side-nav.js +7 -0
  4. package/dist/cjs/ui/page-layout/main/main.compiled.css +1 -0
  5. package/dist/cjs/ui/page-layout/main/main.js +3 -2
  6. package/dist/es2019/entry-points/layout/panel.js +2 -1
  7. package/dist/es2019/entry-points/layout/side-nav.js +1 -0
  8. package/dist/es2019/ui/page-layout/main/main.compiled.css +1 -0
  9. package/dist/es2019/ui/page-layout/main/main.js +3 -2
  10. package/dist/esm/entry-points/layout/panel.js +2 -1
  11. package/dist/esm/entry-points/layout/side-nav.js +1 -0
  12. package/dist/esm/ui/page-layout/main/main.compiled.css +1 -0
  13. package/dist/esm/ui/page-layout/main/main.js +3 -2
  14. package/dist/types/entry-points/layout/panel.d.ts +1 -0
  15. package/dist/types/entry-points/layout/side-nav.d.ts +1 -0
  16. package/package.json +20 -29
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2f56c78f969b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f56c78f969b8) -
8
+ Update i18n NPM package versions for teamwork-graph (Group 16)
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 10.4.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [`5ad834eeed183`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ad834eeed183) -
19
+ Main component now has a fixed height on smaller viewports behind a feature gate. This is to
20
+ enable in-app panels with correct scroll and overlay behaviour.
21
+
3
22
  ## 10.3.0
4
23
 
5
24
  ### Minor Changes
package/dist/cjs/entry-points/layout/panel.js CHANGED
@@ -9,4 +9,23 @@ Object.defineProperty(exports, "Panel", {
9
9
  return _panel.Panel;
10
10
  }
11
11
  });
12
- var _panel = require("../../ui/page-layout/panel");
12
+ Object.defineProperty(exports, "contentHeightWhenFixed", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _constants.contentHeightWhenFixed;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "contentInsetBlockStart", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _constants.contentInsetBlockStart;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "sideNavLiveWidthVar", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _constants.sideNavLiveWidthVar;
28
+ }
29
+ });
30
+ var _panel = require("../../ui/page-layout/panel");
31
+ var _constants = require("../../ui/page-layout/constants");
package/dist/cjs/entry-points/layout/side-nav.js CHANGED
@@ -45,6 +45,12 @@ Object.defineProperty(exports, "useExpandSideNav", {
45
45
  return _useExpandSideNav.useExpandSideNav;
46
46
  }
47
47
  });
48
+ Object.defineProperty(exports, "useSideNavRef", {
49
+ enumerable: true,
50
+ get: function get() {
51
+ return _useSideNavRef.useSideNavRef;
52
+ }
53
+ });
48
54
  Object.defineProperty(exports, "useToggleSideNav", {
49
55
  enumerable: true,
50
56
  get: function get() {
@@ -58,4 +64,5 @@ var _sideNavFooter = require("../../ui/page-layout/side-nav/side-nav-footer");
58
64
  var _toggleButton = require("../../ui/page-layout/side-nav/toggle-button");
59
65
  var _useToggleSideNav = require("../../ui/page-layout/side-nav/use-toggle-side-nav");
60
66
  var _useExpandSideNav = require("../../ui/page-layout/side-nav/use-expand-side-nav");
67
+ var _useSideNavRef = require("../../ui/page-layout/side-nav/use-side-nav-ref");
61
68
  var _sideNavPanelSplitter = require("../../ui/page-layout/panel-splitter/side-nav-panel-splitter");
package/dist/cjs/ui/page-layout/main/main.compiled.css CHANGED
@@ -3,4 +3,5 @@
3
3
  ._18m91wug{overflow-y:auto}
4
4
  ._19121cl4{isolation:isolate}
5
5
  ._1reo1wug{overflow-x:auto}
6
+ ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
6
7
  @media (min-width:64rem){._qwfh1wug{isolation:auto}._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}}
package/dist/cjs/ui/page-layout/main/main.js CHANGED
@@ -16,7 +16,8 @@ var _constants = require("../constants");
16
16
  var _useLayoutId = require("../use-layout-id");
17
17
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
18
  var mainElementStyles = {
19
- root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
19
+ root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
20
+ fixedHeight: "_4t3ieqxy"
20
21
  };
21
22
 
22
23
  /**
@@ -36,7 +37,7 @@ function Main(_ref) {
36
37
  return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
37
38
  id: id,
38
39
  "data-layout-slot": true,
39
- className: (0, _runtime.ax)([mainElementStyles.root, xcss]),
40
+ className: (0, _runtime.ax)([mainElementStyles.root, (0, _platformFeatureFlags.fg)('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
40
41
  role: "main",
41
42
  "data-testid": testId
42
43
  }, children));
package/dist/es2019/entry-points/layout/panel.js CHANGED
@@ -1 +1,2 @@
1
- export { Panel } from '../../ui/page-layout/panel';
1
+ export { Panel } from '../../ui/page-layout/panel';
2
+ export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar } from '../../ui/page-layout/constants';
package/dist/es2019/entry-points/layout/side-nav.js CHANGED
@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
5
5
  export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
6
6
  export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
7
7
  export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
8
+ export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
8
9
  export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';
package/dist/es2019/ui/page-layout/main/main.compiled.css CHANGED
@@ -3,4 +3,5 @@
3
3
  ._18m91wug{overflow-y:auto}
4
4
  ._19121cl4{isolation:isolate}
5
5
  ._1reo1wug{overflow-x:auto}
6
+ ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
6
7
  @media (min-width:64rem){._qwfh1wug{isolation:auto}._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}}
package/dist/es2019/ui/page-layout/main/main.js CHANGED
@@ -8,7 +8,8 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
8
8
  import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
9
9
  import { useLayoutId } from '../use-layout-id';
10
10
  const mainElementStyles = {
11
- root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
11
+ root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
12
+ fixedHeight: "_4t3ieqxy"
12
13
  };
13
14
 
14
15
  /**
@@ -28,7 +29,7 @@ export function Main({
28
29
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
29
30
  id: id,
30
31
  "data-layout-slot": true,
31
- className: ax([mainElementStyles.root, xcss]),
32
+ className: ax([mainElementStyles.root, fg('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
32
33
  role: "main",
33
34
  "data-testid": testId
34
35
  }, children));
package/dist/esm/entry-points/layout/panel.js CHANGED
@@ -1 +1,2 @@
1
- export { Panel } from '../../ui/page-layout/panel';
1
+ export { Panel } from '../../ui/page-layout/panel';
2
+ export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar } from '../../ui/page-layout/constants';
package/dist/esm/entry-points/layout/side-nav.js CHANGED
@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
5
5
  export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
6
6
  export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
7
7
  export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
8
+ export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
8
9
  export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';
package/dist/esm/ui/page-layout/main/main.compiled.css CHANGED
@@ -3,4 +3,5 @@
3
3
  ._18m91wug{overflow-y:auto}
4
4
  ._19121cl4{isolation:isolate}
5
5
  ._1reo1wug{overflow-x:auto}
6
+ ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
6
7
  @media (min-width:64rem){._qwfh1wug{isolation:auto}._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}}
package/dist/esm/ui/page-layout/main/main.js CHANGED
@@ -8,7 +8,8 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
8
8
  import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
9
9
  import { useLayoutId } from '../use-layout-id';
10
10
  var mainElementStyles = {
11
- root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
11
+ root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
12
+ fixedHeight: "_4t3ieqxy"
12
13
  };
13
14
 
14
15
  /**
@@ -28,7 +29,7 @@ export function Main(_ref) {
28
29
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
29
30
  id: id,
30
31
  "data-layout-slot": true,
31
- className: ax([mainElementStyles.root, xcss]),
32
+ className: ax([mainElementStyles.root, fg('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
32
33
  role: "main",
33
34
  "data-testid": testId
34
35
  }, children));
package/dist/types/entry-points/layout/panel.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { Panel } from '../../ui/page-layout/panel';
2
+ export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar, } from '../../ui/page-layout/constants';
package/dist/types/entry-points/layout/side-nav.d.ts CHANGED
@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
5
5
  export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
6
6
  export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
7
7
  export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
8
+ export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
8
9
  export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.3.0",
3
+ "version": "10.5.0",
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",
@@ -11,9 +11,7 @@
11
11
  "module": "dist/esm/index.js",
12
12
  "module:es2019": "dist/es2019/index.js",
13
13
  "types": "dist/types/index.d.ts",
14
- "sideEffects": [
15
- "*.compiled.css"
16
- ],
14
+ "sideEffects": ["*.compiled.css"],
17
15
  "atlaskit:src": "src/index.tsx",
18
16
  "atlassian": {
19
17
  "react-compiler": {
@@ -46,10 +44,7 @@
46
44
  ]
47
45
  },
48
46
  "integrationTests": {
49
- "additionalBrowsers": [
50
- "desktop-firefox",
51
- "desktop-webkit"
52
- ]
47
+ "additionalBrowsers": ["desktop-firefox", "desktop-webkit"]
53
48
  }
54
49
  },
55
50
  "dependencies": {
@@ -59,17 +54,17 @@
59
54
  "@atlaskit/button": "^24.3.0",
60
55
  "@atlaskit/css": "^1.0.0",
61
56
  "@atlaskit/ds-lib": "^8.0.0",
62
- "@atlaskit/icon": "^36.1.0",
57
+ "@atlaskit/icon": "^36.2.0",
63
58
  "@atlaskit/layering": "^4.1.0",
64
- "@atlaskit/logo": "^21.3.0",
59
+ "@atlaskit/logo": "^21.4.0",
65
60
  "@atlaskit/platform-feature-flags": "^2.0.0",
66
61
  "@atlaskit/platform-feature-flags-react": "^1.1.0",
67
62
  "@atlaskit/popup": "^5.1.0",
68
63
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
69
- "@atlaskit/primitives": "^20.3.0",
64
+ "@atlaskit/primitives": "^20.5.0",
70
65
  "@atlaskit/react-compiler-gating": "^0.2.0",
71
66
  "@atlaskit/side-nav-items": "^2.2.0",
72
- "@atlaskit/tokens": "^15.4.0",
67
+ "@atlaskit/tokens": "^15.5.0",
73
68
  "@atlaskit/tooltip": "^23.1.0",
74
69
  "@atlaskit/visually-hidden": "^4.1.0",
75
70
  "@babel/runtime": "^7.0.0",
@@ -88,11 +83,11 @@
88
83
  "@af/visual-regression": "workspace:^",
89
84
  "@atlaskit/badge": "^19.1.0",
90
85
  "@atlaskit/banner": "^15.1.0",
91
- "@atlaskit/breadcrumbs": "^17.2.0",
86
+ "@atlaskit/breadcrumbs": "^17.3.0",
92
87
  "@atlaskit/dropdown-menu": "^17.1.0",
93
88
  "@atlaskit/flag": "^18.1.0",
94
89
  "@atlaskit/form": "^16.1.0",
95
- "@atlaskit/heading": "^6.1.0",
90
+ "@atlaskit/heading": "^6.2.0",
96
91
  "@atlaskit/inline-dialog": "^19.1.0",
97
92
  "@atlaskit/link": "^4.1.0",
98
93
  "@atlaskit/lozenge": "^14.1.0",
@@ -103,17 +98,17 @@
103
98
  "@atlaskit/page-layout": "^5.2.0",
104
99
  "@atlaskit/popper": "^8.2.0",
105
100
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
106
- "@atlaskit/select": "^22.3.0",
107
- "@atlaskit/skeleton": "^3.1.0",
101
+ "@atlaskit/select": "^22.4.0",
102
+ "@atlaskit/skeleton": "^4.1.0",
108
103
  "@atlaskit/spotlight": "^2.1.0",
109
104
  "@atlaskit/textfield": "^9.1.0",
110
- "@atlaskit/top-layer": "^1.3.0",
105
+ "@atlaskit/top-layer": "^1.5.0",
111
106
  "@atlassian/feature-flags-test-utils": "^1.1.0",
112
- "@atlassian/gemini": "^1.47.0",
107
+ "@atlassian/gemini": "^1.48.0",
113
108
  "@atlassian/search-dialog": "^10.5.0",
114
109
  "@atlassian/ssr-tests": "workspace:^",
115
110
  "@atlassian/test-utils": "^1.0.0",
116
- "@atlassian/testing-library": "^0.8.0",
111
+ "@atlassian/testing-library": "^0.10.0",
117
112
  "@axe-core/playwright": "^4.11.1",
118
113
  "@testing-library/react": "^16.3.0",
119
114
  "@testing-library/user-event": "^14.4.3",
@@ -127,17 +122,10 @@
127
122
  },
128
123
  "@repo/internal": {
129
124
  "dom-events": "use-bind-event-listener",
130
- "design-tokens": [
131
- "color",
132
- "spacing"
133
- ],
125
+ "design-tokens": ["color", "spacing"],
134
126
  "deprecation": "no-deprecated-imports",
135
- "imports": [
136
- "import-no-extraneous-disable-for-examples-and-docs"
137
- ],
138
- "styling": [
139
- "emotion"
140
- ]
127
+ "imports": ["import-no-extraneous-disable-for-examples-and-docs"],
128
+ "styling": ["emotion"]
141
129
  }
142
130
  },
143
131
  "platform-feature-flags": {
@@ -167,6 +155,9 @@
167
155
  "platform-dst-motion-uplift-button": {
168
156
  "type": "boolean",
169
157
  "referenceOnly": true
158
+ },
159
+ "platform-ads-nav-fixed-height": {
160
+ "type": "boolean"
170
161
  }
171
162
  },
172
163
  "homepage": "https://atlassian.design/components/navigation-system"