@atlaskit/popper 5.6.0 → 6.1.0

package/__perf__/default.tsx

@@ -3,20 +3,21 @@ import React from 'react';
 import { Manager, Popper, Reference } from '../src';
 
 export default () => (
-  <Manager>
-    <Reference>
-      {({ ref }) => (
-        <button ref={ref} type="button">
-          Reference element
-        </button>
-      )}
-    </Reference>
-    <Popper placement="right">
-      {({ ref, style }) => (
-        <div ref={ref} style={style}>
-          ↔ This text is a popper placed to the right
-        </div>
-      )}
-    </Popper>
-  </Manager>
+	<Manager>
+		<Reference>
+			{({ ref }) => (
+				<button ref={ref} type="button">
+					Reference element
+				</button>
+			)}
+		</Reference>
+		<Popper placement="right">
+			{({ ref, style }) => (
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				<div ref={ref} style={style}>
+					↔ This text is a popper placed to the right
+				</div>
+			)}
+		</Popper>
+	</Manager>
 );

package/codemods/5.0.0-lite-mode.tsx

@@ -1,181 +1,152 @@
-import core, {
-  API,
-  ASTPath,
-  FileInfo,
-  JSXElement,
-  JSXExpressionContainer,
-  Literal,
-  Options,
-  StringLiteral,
+import {
+	type API,
+	type ASTPath,
+	type default as core,
+	type FileInfo,
+	type JSXElement,
+	JSXExpressionContainer,
+	type Literal,
+	type Options,
+	StringLiteral,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 import {
-  messageForModifierProps,
-  messageForUsingExpression,
-  messageForUsingVariable,
+	messageForModifierProps,
+	messageForUsingExpression,
+	messageForUsingVariable,
 } from './utils/constants';
 import {
-  addCommentToStartOfFile,
-  getJSXAttributesByName,
-  getSpecifierName,
-  hasImportDeclaration,
-  isUsingProp,
-  updateRenderProps,
+	addCommentToStartOfFile,
+	getJSXAttributesByName,
+	getSpecifierName,
+	hasImportDeclaration,
+	isUsingProp,
+	updateRenderProps,
 } from './utils/helpers';
 
-const updateOffsetNumbers = (
-  value: string,
-  j: core.JSCodeshift,
-  attribute: ASTPath<any>,
-) => {
-  if (value.includes(',')) {
-    // Split by comma
-    const offsetArray: Literal[] = value
-      .split(',')
-      //@ts-ignore
-      .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
-    if (offsetArray.length === 2) {
-      j(attribute).replaceWith(
-        j.jsxExpressionContainer(j.arrayExpression(offsetArray)),
-      );
-    }
-  } else {
-    // Split by space but check if it is a single number
-    const offsetArray: Literal[] = value
-      .split(' ')
-      .filter((elem) => elem.length)
-      .map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
-    if (offsetArray.length === 2) {
-      j(attribute).replaceWith(
-        j.jsxExpressionContainer(j.arrayExpression(offsetArray)),
-      );
-    } else if (offsetArray.length === 1) {
-      j(attribute).replaceWith(
-        j.jsxExpressionContainer(
-          j.arrayExpression([offsetArray[0], j.literal(0)]),
-        ),
-      );
-    }
-  }
+const updateOffsetNumbers = (value: string, j: core.JSCodeshift, attribute: ASTPath<any>) => {
+	if (value.includes(',')) {
+		// Split by comma
+		const offsetArray: Literal[] = value
+			.split(',')
+			//@ts-ignore
+			.map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
+		if (offsetArray.length === 2) {
+			j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
+		}
+	} else {
+		// Split by space but check if it is a single number
+		const offsetArray: Literal[] = value
+			.split(' ')
+			.filter((elem) => elem.length)
+			.map((elem) => j.literal(parseInt(elem.replace(/\D/g, ''))));
+		if (offsetArray.length === 2) {
+			j(attribute).replaceWith(j.jsxExpressionContainer(j.arrayExpression(offsetArray)));
+		} else if (offsetArray.length === 1) {
+			j(attribute).replaceWith(
+				j.jsxExpressionContainer(j.arrayExpression([offsetArray[0], j.literal(0)])),
+			);
+		}
+	}
 };
 
 const isJSExpression = (value: string) =>
-  value.includes('%') || value.includes('vw') || value.includes('vh');
+	value.includes('%') || value.includes('vw') || value.includes('vh');
 
-function updateOffset(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-) {
-  source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
-    const offsetExpr = getJSXAttributesByName({
-      j,
-      element: path,
-      attributeName: 'offset',
-    });
+function updateOffset(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
+	source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
+		const offsetExpr = getJSXAttributesByName({
+			j,
+			element: path,
+			attributeName: 'offset',
+		});
 
-    const stringLiteral = offsetExpr.filter((attr) => {
-      return attr.value!.value!.type === 'StringLiteral';
-    });
+		const stringLiteral = offsetExpr.filter((attr) => {
+			return attr.value!.value!.type === 'StringLiteral';
+		});
 
-    const expression = offsetExpr.filter((attr) => {
-      return attr.value!.value!.type === 'JSXExpressionContainer';
-    });
+		const expression = offsetExpr.filter((attr) => {
+			return attr.value!.value!.type === 'JSXExpressionContainer';
+		});
 
-    if (stringLiteral.length > 0) {
-      stringLiteral.find(StringLiteral).forEach((attribute) => {
-        const expression = attribute.value;
-        updateOffsetNumbers(expression.value, j, attribute);
-      });
-    } else {
-      expression.find(JSXExpressionContainer).forEach((attribute) => {
-        const expression = attribute.value.expression;
-        if (expression.type === 'StringLiteral') {
-          const value = expression.value;
-          // Not testing for cases like '10 + 10%' because I assume if you're
-          // adding or taking numbers it's with units that are not supported
-          // and will be picked up by the first case
-          if (isJSExpression(value)) {
-            addCommentToStartOfFile({
-              j,
-              base: source,
-              message: messageForUsingExpression,
-            });
-          } else {
-            updateOffsetNumbers(value, j, attribute);
-          }
-        } else if (expression.type === 'NumericLiteral') {
-          // If it is a single number convert to [number, 0]
-          j(attribute).replaceWith(
-            j.jsxExpressionContainer(
-              j.arrayExpression([expression, j.literal(0)]),
-            ),
-          );
-        } else if (expression.type === 'Identifier') {
-          // If there is a variable add this comment
-          addCommentToStartOfFile({
-            j,
-            base: source,
-            message: messageForUsingVariable,
-          });
-        }
-      });
-    }
-  });
+		if (stringLiteral.length > 0) {
+			stringLiteral.find(StringLiteral).forEach((attribute) => {
+				const expression = attribute.value;
+				updateOffsetNumbers(expression.value, j, attribute);
+			});
+		} else {
+			expression.find(JSXExpressionContainer).forEach((attribute) => {
+				const expression = attribute.value.expression;
+				if (expression.type === 'StringLiteral') {
+					const value = expression.value;
+					// Not testing for cases like '10 + 10%' because I assume if you're
+					// adding or taking numbers it's with units that are not supported
+					// and will be picked up by the first case
+					if (isJSExpression(value)) {
+						addCommentToStartOfFile({
+							j,
+							base: source,
+							message: messageForUsingExpression,
+						});
+					} else {
+						updateOffsetNumbers(value, j, attribute);
+					}
+				} else if (expression.type === 'NumericLiteral') {
+					// If it is a single number convert to [number, 0]
+					j(attribute).replaceWith(
+						j.jsxExpressionContainer(j.arrayExpression([expression, j.literal(0)])),
+					);
+				} else if (expression.type === 'Identifier') {
+					// If there is a variable add this comment
+					addCommentToStartOfFile({
+						j,
+						base: source,
+						message: messageForUsingVariable,
+					});
+				}
+			});
+		}
+	});
 }
 
-function updateModifierProp(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-) {
-  source.findJSXElements(specifier).forEach((element) => {
-    if (isUsingProp({ j, base: source, element, propName: 'modifiers' })) {
-      addCommentToStartOfFile({
-        j,
-        base: source,
-        message: messageForModifierProps,
-      });
-    }
-  });
+function updateModifierProp(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
+	source.findJSXElements(specifier).forEach((element) => {
+		if (isUsingProp({ j, base: source, element, propName: 'modifiers' })) {
+			addCommentToStartOfFile({
+				j,
+				base: source,
+				message: messageForModifierProps,
+			});
+		}
+	});
 }
 
-export default function transformer(
-  file: FileInfo,
-  { jscodeshift: j }: API,
-  options: Options,
-) {
-  const source = j(file.source);
+export default function transformer(file: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(file.source);
 
-  // Exit early if not relevant
-  // We are doing this so we don't touch the formatting of unrelated files
-  if (!hasImportDeclaration(j, file.source, '@atlaskit/popper')) {
-    return file.source;
-  }
+	// Exit early if not relevant
+	// We are doing this so we don't touch the formatting of unrelated files
+	if (!hasImportDeclaration(j, file.source, '@atlaskit/popper')) {
+		return file.source;
+	}
 
-  const specifier = getSpecifierName({
-    j,
-    base: source,
-    packageName: '@atlaskit/popper',
-    component: 'Popper',
-  });
+	const specifier = getSpecifierName({
+		j,
+		base: source,
+		packageName: '@atlaskit/popper',
+		component: 'Popper',
+	});
 
-  if (!specifier) {
-    return file.source;
-  }
+	if (!specifier) {
+		return file.source;
+	}
 
-  updateRenderProps(
-    j,
-    source,
-    specifier,
-    'outOfBoundaries',
-    'isReferenceHidden',
-  );
-  updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
-  updateOffset(j, source, specifier);
-  updateModifierProp(j, source, specifier);
+	updateRenderProps(j, source, specifier, 'outOfBoundaries', 'isReferenceHidden');
+	updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
+	updateOffset(j, source, specifier);
+	updateModifierProp(j, source, specifier);
 
-  // const base: Collection<any> = j(file.source);
-  return source.toSource(options.printOptions || { quote: 'single' });
+	// const base: Collection<any> = j(file.source);
+	return source.toSource(options.printOptions || { quote: 'single' });
 }

package/codemods/__tests__/update-modifier.tsx

@@ -5,20 +5,20 @@ import transformer from '../5.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Changing popper usage', () => {
-  // TODO this probably isn't worth including, as they still have to do some major work to
-  //  re-work these modifiers.
+	// TODO this probably isn't worth including, as they still have to do some major work to
+	//  re-work these modifiers.
 
-  /**
-   * Modifiers:
-   * - format has been changed from object of objects, to array of objects, with the key for each
-   *   modifier replaced with a name key:value pair inside the modifier object
-   * - modifier-specific options have been moved inside an options: key:value pair
-   * - modifier options have been changed significantly: check the popper.js docs for more info
-   */
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	/**
+	 * Modifiers:
+	 * - format has been changed from object of objects, to array of objects, with the key for each
+	 *   modifier replaced with a name key:value pair inside the modifier object
+	 * - modifier-specific options have been moved inside an options: key:value pair
+	 * - modifier options have been changed significantly: check the popper.js docs for more info
+	 */
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import { Popper } from '@atlaskit/popper';
 
     export default () => {
@@ -40,7 +40,7 @@ describe('Changing popper usage', () => {
         </Popper>
     )};
   `,
-    `
+		`
     /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2,
     and as a result the modifier prop has changed significantly. The format has been
     changed from object of objects, to array of objects, with the key for each modifier
@@ -68,5 +68,5 @@ describe('Changing popper usage', () => {
         </Popper>
       );};
   `,
-  );
+	);
 });

package/codemods/__tests__/update-offset-prop.tsx

@@ -5,11 +5,11 @@ import transformer from '../5.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Update offset prop', () => {
-  describe('offset as a string', () => {
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+	describe('offset as a string', () => {
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -23,7 +23,7 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      `
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -37,13 +37,13 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      'should convert string literal to array notation',
-    );
+			'should convert string literal to array notation',
+		);
 
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -57,7 +57,7 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      `
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -71,15 +71,15 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      'should convert string literal to array notation - with comma',
-    );
-  });
+			'should convert string literal to array notation - with comma',
+		);
+	});
 
-  describe('offset as object expression', () => {
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+	describe('offset as object expression', () => {
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -93,7 +93,7 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      `
+			`
       import { Popper } from '@atlaskit/popper';
 
       export default () => (
@@ -107,13 +107,13 @@ describe('Update offset prop', () => {
         </Popper>
       );
       `,
-      `should convert object to array notation`,
-    );
+			`should convert object to array notation`,
+		);
 
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
       import { Popper } from '@atlaskit/popper';
 
       function numCommaOffset() {
@@ -129,7 +129,7 @@ describe('Update offset prop', () => {
         );
       }
     `,
-      `
+			`
       import { Popper } from '@atlaskit/popper';
 
       function numCommaOffset() {
@@ -145,13 +145,13 @@ describe('Update offset prop', () => {
         );
       }
       `,
-      `should convert number with comma as offset`,
-    );
+			`should convert number with comma as offset`,
+		);
 
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
     import { Popper } from '@atlaskit/popper';
 
     function numStringOffset() {
@@ -167,7 +167,7 @@ describe('Update offset prop', () => {
       );
     }
   `,
-      `
+			`
     import { Popper } from '@atlaskit/popper';
 
     function numStringOffset() {
@@ -183,13 +183,13 @@ describe('Update offset prop', () => {
       );
     }
     `,
-      `should add default value as 0 when one offset is missing - string`,
-    );
+			`should add default value as 0 when one offset is missing - string`,
+		);
 
-    defineInlineTest(
-      { default: transformer, parser: 'tsx' },
-      {},
-      `
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
     import { Popper } from '@atlaskit/popper';
 
     function numOffset() {
@@ -205,7 +205,7 @@ describe('Update offset prop', () => {
       );
     }
   `,
-      `
+			`
     import { Popper } from '@atlaskit/popper';
 
     function numOffset() {
@@ -221,14 +221,14 @@ describe('Update offset prop', () => {
       );
     }
     `,
-      `should add default value as 0 when one offset is missing - number`,
-    );
-  });
+			`should add default value as 0 when one offset is missing - number`,
+		);
+	});
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
   import { Popper } from '@atlaskit/popper';
 
   export default () => (
@@ -242,7 +242,7 @@ describe('Update offset prop', () => {
     </Popper>
   );
   `,
-    `
+		`
   /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2,
   and as a result the offset prop has changed to be an array. e.g '0px 8px' -> [0, 8]
   Along with this change you cannot use vw, vh or % units or addition or multiplication
@@ -261,17 +261,17 @@ describe('Update offset prop', () => {
     </Popper>
   );
   `,
-    `should add correct document string for vh, vw and %`,
-  );
+		`should add correct document string for vh, vw and %`,
+	);
 
-  /**
-   * If a user is passing in a variable for offset then we should leave a comment to
-   * update it themselves
-   */
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	/**
+	 * If a user is passing in a variable for offset then we should leave a comment to
+	 * update it themselves
+	 */
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import { Popper } from '@atlaskit/popper';
 
     function directOffset({offset}) {
@@ -287,7 +287,7 @@ describe('Update offset prop', () => {
       );
     }
     `,
-    `
+		`
     /* TODO: (from codemod) Popper.js has been upgraded from 1.14.1 to 2.4.2, and as a result the offset
     prop has changed to be an array. e.g '0px 8px' -> [0, 8]
     As you are using a variable, you will have change the offset prop manually
@@ -307,13 +307,13 @@ describe('Update offset prop', () => {
       );
     }
     `,
-    `should add correct document string for variable`,
-  );
+		`should add correct document string for variable`,
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import { Manager, Popper as Popeye } from '@atlaskit/popper';
 
     export default () => (
@@ -327,7 +327,7 @@ describe('Update offset prop', () => {
       </Popeye>
     );
     `,
-    `
+		`
     import { Manager, Popper as Popeye } from '@atlaskit/popper';
 
     export default () => (
@@ -341,6 +341,6 @@ describe('Update offset prop', () => {
       </Popeye>
     );
   `,
-    `should works with an aliased import and other imports`,
-  );
+		`should works with an aliased import and other imports`,
+	);
 });