@atlaskit/navigation-system 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlassian/navigation-system
 
+## 10.4.0
+
+### Minor Changes
+
+- [`5ad834eeed183`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ad834eeed183) -
+  Main component now has a fixed height on smaller viewports behind a feature gate. This is to
+  enable in-app panels with correct scroll and overlay behaviour.
+
 ## 10.3.0
 
 ### Minor Changes

package/dist/cjs/entry-points/layout/panel.js

@@ -9,4 +9,23 @@ Object.defineProperty(exports, "Panel", {
     return _panel.Panel;
   }
 });
-var _panel = require("../../ui/page-layout/panel");
+Object.defineProperty(exports, "contentHeightWhenFixed", {
+  enumerable: true,
+  get: function get() {
+    return _constants.contentHeightWhenFixed;
+  }
+});
+Object.defineProperty(exports, "contentInsetBlockStart", {
+  enumerable: true,
+  get: function get() {
+    return _constants.contentInsetBlockStart;
+  }
+});
+Object.defineProperty(exports, "sideNavLiveWidthVar", {
+  enumerable: true,
+  get: function get() {
+    return _constants.sideNavLiveWidthVar;
+  }
+});
+var _panel = require("../../ui/page-layout/panel");
+var _constants = require("../../ui/page-layout/constants");

package/dist/cjs/entry-points/layout/side-nav.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "useExpandSideNav", {
     return _useExpandSideNav.useExpandSideNav;
   }
 });
+Object.defineProperty(exports, "useSideNavRef", {
+  enumerable: true,
+  get: function get() {
+    return _useSideNavRef.useSideNavRef;
+  }
+});
 Object.defineProperty(exports, "useToggleSideNav", {
   enumerable: true,
   get: function get() {
@@ -58,4 +64,5 @@ var _sideNavFooter = require("../../ui/page-layout/side-nav/side-nav-footer");
 var _toggleButton = require("../../ui/page-layout/side-nav/toggle-button");
 var _useToggleSideNav = require("../../ui/page-layout/side-nav/use-toggle-side-nav");
 var _useExpandSideNav = require("../../ui/page-layout/side-nav/use-expand-side-nav");
+var _useSideNavRef = require("../../ui/page-layout/side-nav/use-side-nav-ref");
 var _sideNavPanelSplitter = require("../../ui/page-layout/panel-splitter/side-nav-panel-splitter");

package/dist/cjs/ui/page-layout/main/main.compiled.css

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 @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

@@ -16,7 +16,8 @@ var _constants = require("../constants");
 var _useLayoutId = require("../use-layout-id");
 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); }
 var mainElementStyles = {
-  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
+  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
+  fixedHeight: "_4t3ieqxy"
 };
 
 /**
@@ -36,7 +37,7 @@ function Main(_ref) {
   return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: (0, _runtime.ax)([mainElementStyles.root, xcss]),
+    className: (0, _runtime.ax)([mainElementStyles.root, (0, _platformFeatureFlags.fg)('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
     role: "main",
     "data-testid": testId
   }, children));

package/dist/es2019/entry-points/layout/panel.js

@@ -1 +1,2 @@
-export { Panel } from '../../ui/page-layout/panel';
+export { Panel } from '../../ui/page-layout/panel';
+export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar } from '../../ui/page-layout/constants';

package/dist/es2019/entry-points/layout/side-nav.js

@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
 export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
 export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

package/dist/es2019/ui/page-layout/main/main.compiled.css

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 @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

@@ -8,7 +8,8 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
 const mainElementStyles = {
-  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
+  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
+  fixedHeight: "_4t3ieqxy"
 };
 
 /**
@@ -28,7 +29,7 @@ export function Main({
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([mainElementStyles.root, xcss]),
+    className: ax([mainElementStyles.root, fg('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
     role: "main",
     "data-testid": testId
   }, children));

package/dist/esm/entry-points/layout/panel.js

@@ -1 +1,2 @@
-export { Panel } from '../../ui/page-layout/panel';
+export { Panel } from '../../ui/page-layout/panel';
+export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar } from '../../ui/page-layout/constants';

package/dist/esm/entry-points/layout/side-nav.js

@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
 export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
 export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

package/dist/esm/ui/page-layout/main/main.compiled.css

@@ -3,4 +3,5 @@
 ._18m91wug{overflow-y:auto}
 ._19121cl4{isolation:isolate}
 ._1reo1wug{overflow-x:auto}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 @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

@@ -8,7 +8,8 @@ import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
 var mainElementStyles = {
-  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
+  root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8",
+  fixedHeight: "_4t3ieqxy"
 };
 
 /**
@@ -28,7 +29,7 @@ export function Main(_ref) {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([mainElementStyles.root, xcss]),
+    className: ax([mainElementStyles.root, fg('platform-ads-nav-fixed-height') && mainElementStyles.fixedHeight, xcss]),
     role: "main",
     "data-testid": testId
   }, children));

package/dist/types/entry-points/layout/panel.d.ts

@@ -1 +1,2 @@
 export { Panel } from '../../ui/page-layout/panel';
+export { contentHeightWhenFixed, contentInsetBlockStart, sideNavLiveWidthVar, } from '../../ui/page-layout/constants';

package/dist/types/entry-points/layout/side-nav.d.ts

@@ -5,4 +5,5 @@ export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
 export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
 export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
 export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';
+export { useSideNavRef } from '../../ui/page-layout/side-nav/use-side-nav-ref';
 export { SideNavPanelSplitter } from '../../ui/page-layout/panel-splitter/side-nav-panel-splitter';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.3.0",
+	"version": "10.4.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -11,9 +11,7 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": [
-		"*.compiled.css"
-	],
+	"sideEffects": ["*.compiled.css"],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"react-compiler": {
@@ -46,10 +44,7 @@
 			]
 		},
 		"integrationTests": {
-			"additionalBrowsers": [
-				"desktop-firefox",
-				"desktop-webkit"
-			]
+			"additionalBrowsers": ["desktop-firefox", "desktop-webkit"]
 		}
 	},
 	"dependencies": {
@@ -59,14 +54,14 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^36.1.0",
+		"@atlaskit/icon": "^36.2.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/logo": "^21.3.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
-		"@atlaskit/primitives": "^20.3.0",
+		"@atlaskit/primitives": "^20.4.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.2.0",
 		"@atlaskit/tokens": "^15.4.0",
@@ -103,17 +98,17 @@
 		"@atlaskit/page-layout": "^5.2.0",
 		"@atlaskit/popper": "^8.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
-		"@atlaskit/select": "^22.3.0",
-		"@atlaskit/skeleton": "^3.1.0",
+		"@atlaskit/select": "^22.4.0",
+		"@atlaskit/skeleton": "^4.0.0",
 		"@atlaskit/spotlight": "^2.1.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/top-layer": "^1.3.0",
+		"@atlaskit/top-layer": "^1.4.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/gemini": "^1.47.0",
+		"@atlassian/gemini": "^1.48.0",
 		"@atlassian/search-dialog": "^10.5.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
-		"@atlassian/testing-library": "^0.8.0",
+		"@atlassian/testing-library": "^0.10.0",
 		"@axe-core/playwright": "^4.11.1",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -127,17 +122,10 @@
 		},
 		"@repo/internal": {
 			"dom-events": "use-bind-event-listener",
-			"design-tokens": [
-				"color",
-				"spacing"
-			],
+			"design-tokens": ["color", "spacing"],
 			"deprecation": "no-deprecated-imports",
-			"imports": [
-				"import-no-extraneous-disable-for-examples-and-docs"
-			],
-			"styling": [
-				"emotion"
-			]
+			"imports": ["import-no-extraneous-disable-for-examples-and-docs"],
+			"styling": ["emotion"]
 		}
 	},
 	"platform-feature-flags": {
@@ -167,6 +155,9 @@
 		"platform-dst-motion-uplift-button": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform-ads-nav-fixed-height": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"