@atlaskit/side-navigation 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
@@ -43,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/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;
 }

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

@@ -5,30 +5,30 @@ import * as transformer from '../0.8.0-change-css-fn-prop';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Updates and removes current inline styles', () => {
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
       import { ButtonItem } from '@atlaskit/something';
 
       const App = () => {
         return <ButtonItem />;
       }
     `,
-    `
+		`
       import { ButtonItem } from '@atlaskit/something';
 
       const App = () => {
         return <ButtonItem />;
       }
   `,
-    'leaves unrelated code untouched',
-  );
+		'leaves unrelated code untouched',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
       import { ButtonItem } from '@atlaskit/side-navigation';
 
       const App = () => {
@@ -37,7 +37,7 @@ describe('Updates and removes current inline styles', () => {
         })} />;
       }
     `,
-    `
+		`
       import { ButtonItem } from '@atlaskit/side-navigation';
 
       const App = () => {
@@ -48,13 +48,13 @@ describe('Updates and removes current inline styles', () => {
         );
       }
   `,
-    'should remove current styles from inline function',
-  );
+		'should remove current styles from inline function',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
       import { ButtonItem } from '@atlaskit/side-navigation';
 
       const App = () => {
@@ -72,7 +72,7 @@ describe('Updates and removes current inline styles', () => {
       };
 
       `,
-    `
+		`
       import { ButtonItem } from '@atlaskit/side-navigation';
 
       const App = () => {
@@ -87,13 +87,13 @@ describe('Updates and removes current inline styles', () => {
         );
       };
   `,
-    'should remove current styles from scope',
-  );
+		'should remove current styles from scope',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -103,7 +103,7 @@ describe('Updates and removes current inline styles', () => {
       })} />;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -114,13 +114,13 @@ describe('Updates and removes current inline styles', () => {
       );
     }
     `,
-    'correctly removes spread styles',
-  );
+		'correctly removes spread styles',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -134,7 +134,7 @@ describe('Updates and removes current inline styles', () => {
       })} />;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -149,13 +149,13 @@ describe('Updates and removes current inline styles', () => {
       );
     }
     `,
-    'correctly removes spread styles with pseudo-selector access',
-  );
+		'correctly removes spread styles with pseudo-selector access',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -167,7 +167,7 @@ describe('Updates and removes current inline styles', () => {
       );
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -185,13 +185,13 @@ describe('Updates and removes current inline styles', () => {
       );
     }
       `,
-    'fail smoothly if the current styles are being used in a non-trivial way',
-  );
+		'fail smoothly if the current styles are being used in a non-trivial way',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -200,7 +200,7 @@ describe('Updates and removes current inline styles', () => {
       })} />;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -209,13 +209,13 @@ describe('Updates and removes current inline styles', () => {
       })} />;
     }
     `,
-    'not change anything if user is not using the current state or styles',
-  );
+		'not change anything if user is not using the current state or styles',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -230,7 +230,7 @@ describe('Updates and removes current inline styles', () => {
       </ButtonItem>;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
@@ -245,35 +245,35 @@ describe('Updates and removes current inline styles', () => {
       );
     }
     `,
-    'should remove styles in nested children',
-  );
+		'should remove styles in nested children',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
       return <ButtonItem />;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const App = () => {
       return <ButtonItem />;
     }
     `,
-    'should leave affected items with no use of cssFn untouched',
-  );
+		'should leave affected items with no use of cssFn untouched',
+	);
 });
 
 describe('Updates and removes current styles', () => {
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const cssFn = (styles, state) => ({
@@ -285,7 +285,7 @@ describe('Updates and removes current styles', () => {
       return <ButtonItem cssFn={cssFn} />;
     }
       `,
-    `
+		`
     import { ButtonItem } from '@atlaskit/side-navigation';
 
     const cssFn = (styles, state) => ({
@@ -305,13 +305,13 @@ describe('Updates and removes current styles', () => {
       );
     }
     `,
-    'should add prompt for non-inline function',
-  );
+		'should add prompt for non-inline function',
+	);
 
-  defineInlineTest(
-    { ...transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ ...transformer, parser: 'tsx' },
+		{},
+		`
     import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
 
     const cssFunction = (styles, state) => ({
@@ -327,7 +327,7 @@ describe('Updates and removes current styles', () => {
       );
     };
       `,
-    `
+		`
     import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
 
     const cssFunction = (styles, state) => ({
@@ -355,6 +355,6 @@ describe('Updates and removes current styles', () => {
       );
     };
     `,
-    'should add prompt for non-inline function to multiple instances',
-  );
+		'should add prompt for non-inline function to multiple instances',
+	);
 });