@atlaskit/side-navigation 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/side-navigation
 
+## 3.3.0
+
+### Minor Changes
+
+- [#110836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110836)
+  [`a8bd419fd70b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8bd419fd70b9) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes
@@ -37,7 +56,7 @@
 
 - [#94389](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94389)
   [`5ca1173e141e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ca1173e141e) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 3.0.10
 

package/README.md

@@ -10,7 +10,11 @@ yarn add @atlaskit/side-navigation
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/side-navigation).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/side-navigation).
 
-To add a top navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation)
-To control the layout of these navigation elements and add expand/collapse functionality to `side-navigation`, use [@atlaskit/page-layout](https://atlaskit.atlassian.com/packages/design-system/page-layout).
+To add a top navigation, use
+[@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation) To
+control the layout of these navigation elements and add expand/collapse functionality to
+`side-navigation`, use
+[@atlaskit/page-layout](https://atlaskit.atlassian.com/packages/design-system/page-layout).

package/afm-jira/tsconfig.json

@@ -30,6 +30,9 @@
     {
       "path": "../../motion/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../primitives/afm-jira/tsconfig.json"
     },

package/codemods/0.8.0-change-css-fn-prop.tsx

@@ -1,185 +1,157 @@
 import { type NodePath } from 'ast-types/lib/node-path';
 import {
-  type API,
-  type ASTPath,
-  type default as core,
-  type FileInfo,
-  type ImportDeclaration,
-  type ImportSpecifier,
-  type Options,
+	type API,
+	type ASTPath,
+	type default as core,
+	type FileInfo,
+	type ImportDeclaration,
+	type ImportSpecifier,
+	type Options,
 } from 'jscodeshift';
 
-import {
-  addCommentBeforeJSX,
-  getDefaultSpecifierName,
-} from './helpers/generic';
-
-function getJSXAttributesByName(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-) {
-  return j(element)
-    .find(j.JSXOpeningElement)
-    .find(j.JSXAttribute)
-    .filter((attribute) => {
-      const matches = j(attribute)
-        .find(j.JSXIdentifier)
-        .filter((identifier) => identifier.value.name === attributeName);
-      return Boolean(matches.length);
-    });
+import { addCommentBeforeJSX, getDefaultSpecifierName } from './helpers/generic';
+
+function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
 }
 
 function getImportSpecifier(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  specifier: string,
-  imported: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
+	imported: string,
 ) {
-  const specifiers = source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === specifier,
-    )
-    .find(j.ImportSpecifier)
-    .filter(
-      (path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported,
-    );
-
-  if (!specifiers.length) {
-    return null;
-  }
-
-  return specifiers.nodes()[0]!.local!.name;
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportSpecifier)
+		.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
+
+	if (!specifiers.length) {
+		return null;
+	}
+
+	return specifiers.nodes()[0]!.local!.name;
 }
 
-function updateCssFnProp(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  specifier: string,
-) {
-  source.findJSXElements(specifier).forEach((element) => {
-    const cssFnPropCollection = getJSXAttributesByName(j, element, 'cssFn');
-
-    // no cssProp usage for this element
-    if (!cssFnPropCollection.length) {
-      return;
-    }
-
-    const cssFnProp = cssFnPropCollection.get();
-
-    const cssFnExpression: NodePath = j(cssFnProp)
-      .find(j.JSXExpressionContainer)
-      .find(j.Expression)
-      .get();
-
-    if (cssFnExpression) {
-      // just remove the state styles param
-      try {
-        const [stylePropName] = cssFnExpression!.value.params;
-        j(cssFnExpression)
-          .find(j.SpreadElement)
-          .forEach((n) => {
-            // discerns whether there are multiple identifiers here
-            const isComplexIdentifier = j(n).find(j.Identifier).length > 1;
-
-            if (isComplexIdentifier) {
-              throw new Error(
-                'CSSFn Prop codemod: Unable to parse spread element',
-              );
-            }
-
-            const hasStyleProp = !!j(n)
-              .find(j.Identifier)
-              .filter((node) => node.value.name === stylePropName.name).length;
-            if (hasStyleProp) {
-              j(n).remove();
-            }
-          });
-
-        cssFnExpression!.value.params.shift();
-      } catch (e) {
-        addCommentBeforeJSX(
-          j,
-          cssFnProp,
-          `
+function updateCssFnProp(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
+	source.findJSXElements(specifier).forEach((element) => {
+		const cssFnPropCollection = getJSXAttributesByName(j, element, 'cssFn');
+
+		// no cssProp usage for this element
+		if (!cssFnPropCollection.length) {
+			return;
+		}
+
+		const cssFnProp = cssFnPropCollection.get();
+
+		const cssFnExpression: NodePath = j(cssFnProp)
+			.find(j.JSXExpressionContainer)
+			.find(j.Expression)
+			.get();
+
+		if (cssFnExpression) {
+			// just remove the state styles param
+			try {
+				const [stylePropName] = cssFnExpression!.value.params;
+				j(cssFnExpression)
+					.find(j.SpreadElement)
+					.forEach((n) => {
+						// discerns whether there are multiple identifiers here
+						const isComplexIdentifier = j(n).find(j.Identifier).length > 1;
+
+						if (isComplexIdentifier) {
+							throw new Error('CSSFn Prop codemod: Unable to parse spread element');
+						}
+
+						const hasStyleProp = !!j(n)
+							.find(j.Identifier)
+							.filter((node) => node.value.name === stylePropName.name).length;
+						if (hasStyleProp) {
+							j(n).remove();
+						}
+					});
+
+				cssFnExpression!.value.params.shift();
+			} catch (e) {
+				addCommentBeforeJSX(
+					j,
+					cssFnProp,
+					`
         The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
         The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
         For more info please reach out to #help-design-system-code.
         `,
-        );
-      }
-    }
-  });
+				);
+			}
+		}
+	});
 }
 
 function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  importPath: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
 ) {
-  return !!source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === importPath).length;
+	return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
+		.length;
 }
 
-export default function transformer(
-  fileInfo: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  const source = j(fileInfo.source);
-
-  if (hasImportDeclaration(j, source, '@atlaskit/side-navigation')) {
-    const defaultSpecifier = getDefaultSpecifierName({
-      j,
-      base: source,
-      packageName: '@atlaskit/side-navigation',
-    });
-
-    if (defaultSpecifier != null) {
-      updateCssFnProp(j, source, defaultSpecifier);
-    }
-
-    [
-      'SideNavigation',
-      'Header',
-      'NavigationHeader',
-      'NavigationContent',
-      'Section',
-      'HeadingItem',
-      'SkeletonHeadingItem',
-      'NestableNavigationContent',
-      'NestingItem',
-      'ButtonItem',
-      'LinkItem',
-      'GoBackItem',
-      'CustomItem',
-      'SkeletonItem',
-      'Footer',
-      'NavigationFooter',
-      'LoadingItems',
-    ].forEach((pkg) => {
-      const importSpecifier = getImportSpecifier(
-        j,
-        source,
-        '@atlaskit/side-navigation',
-        pkg,
-      );
-
-      if (importSpecifier != null) {
-        updateCssFnProp(j, source, importSpecifier);
-      }
-    });
-
-    return source.toSource(
-      options.printOptions || {
-        quote: 'single',
-        trailingComma: true,
-      },
-    );
-  }
-
-  return fileInfo.source;
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
+
+	if (hasImportDeclaration(j, source, '@atlaskit/side-navigation')) {
+		const defaultSpecifier = getDefaultSpecifierName({
+			j,
+			base: source,
+			packageName: '@atlaskit/side-navigation',
+		});
+
+		if (defaultSpecifier != null) {
+			updateCssFnProp(j, source, defaultSpecifier);
+		}
+
+		[
+			'SideNavigation',
+			'Header',
+			'NavigationHeader',
+			'NavigationContent',
+			'Section',
+			'HeadingItem',
+			'SkeletonHeadingItem',
+			'NestableNavigationContent',
+			'NestingItem',
+			'ButtonItem',
+			'LinkItem',
+			'GoBackItem',
+			'CustomItem',
+			'SkeletonItem',
+			'Footer',
+			'NavigationFooter',
+			'LoadingItems',
+		].forEach((pkg) => {
+			const importSpecifier = getImportSpecifier(j, source, '@atlaskit/side-navigation', pkg);
+
+			if (importSpecifier != null) {
+				updateCssFnProp(j, source, importSpecifier);
+			}
+		});
+
+		return source.toSource(
+			options.printOptions || {
+				quote: 'single',
+				trailingComma: true,
+			},
+		);
+	}
+
+	return fileInfo.source;
 }