@atlaskit/menu 2.14.2 → 2.14.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/menu
 
+## 2.14.3
+
+### Patch Changes
+
+- [#113256](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113256)
+  [`ae6561e3b5b1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae6561e3b5b1e) -
+  Update dependencies and remove old codemods.
+
 ## 2.14.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "2.14.2",
+	"version": "2.14.3",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
 		"@atlaskit/focus-ring": "^2.1.0",
 		"@atlaskit/interaction-context": "^2.6.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -60,15 +60,19 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
+		"@atlaskit/button": "^20.5.1",
+		"@atlaskit/docs": "*",
+		"@atlaskit/icon": "^23.8.0",
+		"@atlaskit/icon-file-type": "^6.9.0",
+		"@atlaskit/icon-object": "^6.10.1",
+		"@atlaskit/link": "*",
+		"@atlaskit/section-message": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@emotion/jest": "^11.8.0",
-		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^13.4.0",
 		"ast-types": "^0.13.3",
-		"bind-event-listener": "^3.0.0",
 		"jscodeshift": "^0.13.0",
-		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2"
 	},
 	"keywords": [
@@ -81,7 +85,6 @@
 			"import-structure": "atlassian-conventions"
 		},
 		"@repo/internal": {
-			"dom-events": "use-bind-event-listener",
 			"ui-components": "lite-mode",
 			"design-system": "v1",
 			"styling": [

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

@@ -1,149 +0,0 @@
-import { type NodePath } from 'ast-types/lib/node-path';
-import type {
-	API,
-	ASTPath,
-	default as core,
-	FileInfo,
-	ImportDeclaration,
-	ImportSpecifier,
-	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);
-		});
-}
-
-function getImportSpecifier(
-	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;
-}
-
-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,
-) {
-	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/menu')) {
-		const defaultSpecifier = getDefaultSpecifierName({
-			j,
-			base: source,
-			packageName: '@atlaskit/menu',
-		});
-
-		if (defaultSpecifier != null) {
-			updateCssFnProp(j, source, defaultSpecifier);
-		}
-
-		[
-			'ButtonItem',
-			'LinkItem',
-			'CustomItem',
-			'HeadingItem',
-			'SkeletonItem',
-			'SkeletonHeadingItem',
-			'MenuGroup',
-			'PopupMenuGroup',
-			'Section',
-		].forEach((pkg) => {
-			const importSpecifier = getImportSpecifier(j, source, '@atlaskit/menu', pkg);
-
-			if (importSpecifier != null) {
-				updateCssFnProp(j, source, importSpecifier);
-			}
-		});
-
-		return source.toSource(
-			options.printOptions || {
-				quote: 'single',
-				trailingComma: true,
-			},
-		);
-	}
-
-	return fileInfo.source;
-}

package/codemods/2.1.0-invalid-link-item-to-button-item.tsx

@@ -1,146 +0,0 @@
-import type {
-	API,
-	ASTPath,
-	default as core,
-	FileInfo,
-	ImportDeclaration,
-	ImportSpecifier,
-	Options,
-} from 'jscodeshift';
-
-const invalidHrefValues = ['', '#'];
-const pkg = '@atlaskit/menu';
-
-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,
-) {
-	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 convertInvalidLinkItemsToButtonItems(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	specifier: string,
-) {
-	// For each instance of LinkItem
-	source.findJSXElements(specifier).forEach((element) => {
-		const hrefPropCollection = getJSXAttributesByName(j, element, 'href');
-
-		// base case: no `href` prop exists, it is invalid
-		let validHref = false;
-
-		// if `href` exists
-		if (hrefPropCollection.length > 0) {
-			const hrefProp = hrefPropCollection.get();
-
-			const hrefStringLiteral = j(hrefProp).find(j.StringLiteral);
-			const hrefExpressionContainer = j(hrefProp).find(j.JSXExpressionContainer).find(j.Expression);
-
-			// This is tin foil hattery. Can something be neither a string literal
-			// nor an expression container? Don't know but gonna cover that
-			if (hrefStringLiteral.length === 0 && hrefExpressionContainer.length === 0) {
-				return;
-			}
-
-			if (hrefStringLiteral.length > 0) {
-				const hrefValue = hrefStringLiteral.get().value.value;
-				if (invalidHrefValues.includes(hrefValue)) {
-					j(hrefProp).forEach((el) => j(el).remove());
-				} else {
-					validHref = true;
-				}
-			} else {
-				// It seems foolish to try and resolve variables, so we will assume it
-				// is valid
-				validHref = true;
-			}
-		}
-
-		if (!validHref) {
-			const pkgImport = source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === pkg);
-			const buttonItemIsImported =
-				pkgImport
-					.find(j.ImportSpecifier)
-					.nodes()
-					.filter((node) => node.imported.name === 'ButtonItem').length > 0;
-			if (!buttonItemIsImported) {
-				// Add ButtonItem to imports
-				const newSpecifier = j.importSpecifier(j.identifier('ButtonItem'));
-				pkgImport.forEach((moduleImport) => {
-					const specifiers = moduleImport.node.specifiers ? [...moduleImport.node.specifiers] : [];
-					j(moduleImport).replaceWith(
-						j.importDeclaration(specifiers.concat([newSpecifier]), moduleImport.node.source),
-					);
-				});
-			}
-
-			// Replace existing LinkItem with ButtonItem, while maintaining the same props
-			if (element.value.openingElement.name.type === 'JSXIdentifier') {
-				element.value.openingElement.name.name = 'ButtonItem';
-				if (
-					element.value.closingElement &&
-					element.value.closingElement.name.type === 'JSXIdentifier'
-				) {
-					element.value.closingElement.name.name = 'ButtonItem';
-				}
-			}
-		}
-	});
-}
-
-function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	importPath: string,
-) {
-	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, pkg)) {
-		const importSpecifier = getImportSpecifier(j, source, pkg, 'LinkItem');
-
-		if (importSpecifier != null) {
-			convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
-		}
-
-		return source.toSource(
-			options.printOptions || {
-				quote: 'single',
-				trailingComma: true,
-			},
-		);
-	}
-
-	return fileInfo.source;
-}

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

@@ -1,360 +0,0 @@
-jest.autoMockOff();
-
-import * as transformer from '../0.7.0-change-css-fn-prop';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('Updates and removes current inline styles', () => {
-	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',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-      import { ButtonItem } from '@atlaskit/menu';
-
-      const App = () => {
-        return <ButtonItem cssFn={(styles, state) => ({
-
-        })} />;
-      }
-    `,
-		`
-      import { ButtonItem } from '@atlaskit/menu';
-
-      const App = () => {
-        return (
-          <ButtonItem cssFn={state => {
-
-          }} />
-        );
-      }
-  `,
-		'should remove current styles from inline function',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-      import { ButtonItem } from '@atlaskit/menu';
-
-      const App = () => {
-        return (
-          <div cssFn={(styles, state) => ({
-            ...styles,
-          })}>
-            <ButtonItem
-              cssFn={(styles, state) => ({
-                ...styles,
-              })}
-            />
-          </div>
-        );
-      };
-
-      `,
-		`
-      import { ButtonItem } from '@atlaskit/menu';
-
-      const App = () => {
-        return (
-          <div cssFn={(styles, state) => ({
-            ...styles,
-          })}>
-            <ButtonItem
-              cssFn={state => ({})}
-            />
-          </div>
-        );
-      };
-  `,
-		'should remove current styles from scope',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-        })} />
-      );
-    }
-    `,
-		'correctly removes spread styles',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-        ':hover': {
-          ...styles[':hover'],
-          color: 'blue',
-        }
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-
-          ':hover': {
-            color: 'blue',
-          },
-        })} />
-      );
-    }
-    `,
-		'correctly removes spread styles with pseudo-selector access',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={(styles, state) => ({
-          ...(state.x ? styles : {}),
-          color: 'red',
-        })} />
-      );
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) 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.
-          */
-          cssFn={(styles, state) => ({
-            ...(state.x ? styles : {}),
-            color: 'red',
-          })} />
-      );
-    }
-      `,
-		'fail smoothly if the current styles are being used in a non-trivial way',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem cssFn={() => ({
-        color: 'red',
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem cssFn={() => ({
-        color: 'red',
-      })} />;
-    }
-    `,
-		'not change anything if user is not using the current state or styles',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-      })}>
-        <ButtonItem cssFn={(styles, state) => ({
-          ...styles,
-          color: 'red',
-        })}/>
-      </ButtonItem>;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-        })}>
-          <ButtonItem cssFn={state => ({
-            color: 'red',
-          })}/>
-        </ButtonItem>
-      );
-    }
-    `,
-		'should remove styles in nested children',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const App = () => {
-      return <ButtonItem />;
-    }
-    `,
-		'should leave affected items with no use of cssFn untouched',
-	);
-});
-
-describe('Updates and removes current styles', () => {
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const cssFn = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return <ButtonItem cssFn={cssFn} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/menu';
-
-    const cssFn = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) 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.
-          */
-          cssFn={cssFn} />
-      );
-    }
-    `,
-		'should add prompt for non-inline function',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem, LinkItem } from '@atlaskit/menu';
-
-    const cssFunction = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={cssFunction}>
-          <LinkItem cssFn={cssFunction} />
-        </ButtonItem>
-      );
-    };
-      `,
-		`
-    import { ButtonItem, LinkItem } from '@atlaskit/menu';
-
-    const cssFunction = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) 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.
-          */
-          cssFn={cssFunction}>
-          <LinkItem
-            /*
-            TODO: (from codemod) 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.
-            */
-            cssFn={cssFunction} />
-        </ButtonItem>
-      );
-    };
-    `,
-		'should add prompt for non-inline function to multiple instances',
-	);
-});