@atlaskit/side-navigation 3.6.2 → 3.6.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/side-navigation
 
+## 3.6.4
+
+### Patch Changes
+
+- [#167504](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167504)
+  [`3aef43e98843a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3aef43e98843a) -
+  Internal change to how styles are applied. There is no expected visual change.
+- Updated dependencies
+
+## 3.6.3
+
+### Patch Changes
+
+- [#168160](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168160)
+  [`5c96046203b6f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c96046203b6f) -
+  Tag top and side navigation components for SSR placeholder replacement
+
 ## 3.6.2
 
 ### Patch Changes

package/dist/cjs/components/NavigationContent/styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
 var _constants = require("../../common/constants");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -16,7 +15,7 @@ var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = '1px';
 var containerPadding = 8;
-var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
+var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
 var skeletonHeadingHeight = containerPadding;
 var skeletonHeadingMarginOffset = 3;
 // Skeleton content is slightly shorter than the real content.

package/dist/cjs/components/SideNavigation/index.js

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
@@ -43,13 +46,17 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     label = props.label,
     _props$isServer = props.isServer,
     isServer = _props$isServer === void 0 ? false : _props$isServer;
-  return (0, _react2.jsx)("nav", {
+  return (0, _react2.jsx)("nav", (0, _extends2.default)({
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles,
     "data-vc": "side-navigation".concat(isServer ? '-ssr' : '')
-  }, (0, _react2.jsx)(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, isServer && (0, _platformFeatureFlags.fg)('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder': 'side-navigation-placeholder'
+  }, !isServer && (0, _platformFeatureFlags.fg)('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder-replace': 'side-navigation-placeholder'
+  }), (0, _react2.jsx)(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "notch"
   }, children));
 });

package/dist/es2019/components/NavigationContent/styles.js

@@ -1,13 +1,12 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { N10, N30 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 const scrollIndicatorMaskZIndex = 2;
 const scrollIndicatorZIndex = 1;
 const scrollIndicatorHeight = 2;
 const scrollIndicatorBorderRadius = '1px';
 const containerPadding = 8;
-const itemHeadingContentHeight = headingSizes.h100.lineHeight;
+const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
 const skeletonHeadingHeight = containerPadding;
 const skeletonHeadingMarginOffset = 3;
 // Skeleton content is slightly shorter than the real content.

package/dist/es2019/components/SideNavigation/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,7 @@ import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N10, N500 } from '@atlaskit/theme/colors';
 const sidebarMinWidth = '240px';
 const sideNavStyles = css({
@@ -37,13 +39,17 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     label,
     isServer = false
   } = props;
-  return jsx("nav", {
+  return jsx("nav", _extends({
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles,
     "data-vc": `side-navigation${isServer ? '-ssr' : ''}`
-  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, isServer && fg('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder': 'side-navigation-placeholder'
+  }, !isServer && fg('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder-replace': 'side-navigation-placeholder'
+  }), jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "notch"
   }, children));
 });

package/dist/esm/components/NavigationContent/styles.js

@@ -3,14 +3,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { N10, N30 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = '1px';
 var containerPadding = 8;
-var itemHeadingContentHeight = headingSizes.h100.lineHeight;
+var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
 var skeletonHeadingHeight = containerPadding;
 var skeletonHeadingMarginOffset = 3;
 // Skeleton content is slightly shorter than the real content.

package/dist/esm/components/SideNavigation/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,7 @@ import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N10, N500 } from '@atlaskit/theme/colors';
 var sidebarMinWidth = '240px';
 var sideNavStyles = css({
@@ -36,13 +38,17 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     label = props.label,
     _props$isServer = props.isServer,
     isServer = _props$isServer === void 0 ? false : _props$isServer;
-  return jsx("nav", {
+  return jsx("nav", _extends({
     ref: ref,
     "data-testid": testId,
     "aria-label": label,
     css: sideNavStyles,
     "data-vc": "side-navigation".concat(isServer ? '-ssr' : '')
-  }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, isServer && fg('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder': 'side-navigation-placeholder'
+  }, !isServer && fg('add_ssr_placeholder_replacements_to_nin_and_nav') && {
+    'data-ssr-placeholder-replace': 'side-navigation-placeholder'
+  }), jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "notch"
   }, children));
 });

package/docs/00-intro.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { md } from '@atlaskit/docs';
+import Link from '@atlaskit/link';
 import SectionMessage from '@atlaskit/section-message';
 
 export default md`
 ${(
 	<SectionMessage appearance="information">
 		This component is now documented on{' '}
-		<a href="https://atlassian.design/components/side-navigation">atlassian.design</a>
+		<Link href="https://atlassian.design/components/side-navigation">atlassian.design</Link>
 	</SectionMessage>
 )}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "3.6.2",
+	"version": "3.6.4",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Side navigation",
-			"category": "Components",
+			"category": "Navigation",
 			"status": {
 				"type": "intent-to-deprecate",
 				"description": "We are in the process of building a new side navigation component: [@atlassian/navigation-system](https://staging.atlassian.design/components/navigation-system/side-navigation/examples) (For Atlassian employees only at this stage)"
@@ -32,14 +32,14 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/icon": "^22.25.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/icon": "^22.28.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -93,6 +93,9 @@
 	"platform-feature-flags": {
 		"platform-side-navigation-keyboard-focus": {
 			"type": "boolean"
+		},
+		"add_ssr_placeholder_replacements_to_nin_and_nav": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/side-navigation/"