@atlaskit/popup 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 2.0.2
+
+### Patch Changes
+
+- [#121410](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121410)
+  [`b26d53ac2517a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b26d53ac2517a) -
+  Prevent onClick handler gets called when popup is open on Firefox
+
+## 2.0.1
+
+### Patch Changes
+
+- [#118418](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118418)
+  [`d2e804df6bf9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2e804df6bf9c) -
+  Update dependencies and remove old codemod and unused internal exports.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/popup.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Popup = void 0;
+exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -139,5 +139,4 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }, popupContent);
   }
   return popupContent;
-});
-var _default = exports.default = Popup;
+});

package/dist/cjs/use-close-manager.js

@@ -188,16 +188,32 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
         }
       });
     }
-    var unbind = (0, _bindEventListener.bindAll)(window, [{
-      type: 'click',
-      listener: onClick,
-      options: {
-        capture: capture
-      }
-    }, {
-      type: 'keydown',
-      listener: onKeyDown
-    }]);
+    var unbind = _noop.default;
+    if ((0, _platformFeatureFlags.fg)('popup-onclose-fix')) {
+      setTimeout(function () {
+        unbind = (0, _bindEventListener.bindAll)(window, [{
+          type: 'click',
+          listener: onClick,
+          options: {
+            capture: capture
+          }
+        }, {
+          type: 'keydown',
+          listener: onKeyDown
+        }]);
+      }, 0);
+    } else {
+      unbind = (0, _bindEventListener.bindAll)(window, [{
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture: capture
+        }
+      }, {
+        type: 'keydown',
+        listener: onKeyDown
+      }]);
+    }
 
     // bind onBlur event listener to fix popup not close when clicking on iframe outside
     var unbindBlur = _noop.default;
@@ -212,8 +228,14 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     });
     return function () {
       var _parentUnbind;
+      if ((0, _platformFeatureFlags.fg)('popup-onclose-fix')) {
+        setTimeout(function () {
+          unbind();
+        }, 0);
+      } else {
+        unbind();
+      }
       cancelAllFrames();
-      unbind();
       (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 || _parentUnbind();
       unbindBlur();
     };

package/dist/es2019/popup.js

@@ -119,5 +119,4 @@ export const Popup = /*#__PURE__*/memo(({
     }, popupContent);
   }
   return popupContent;
-});
-export default Popup;
+});

package/dist/es2019/use-close-manager.js

@@ -189,16 +189,32 @@ export const useCloseManager = ({
         }
       });
     }
-    const unbind = bindAll(window, [{
-      type: 'click',
-      listener: onClick,
-      options: {
-        capture
-      }
-    }, {
-      type: 'keydown',
-      listener: onKeyDown
-    }]);
+    let unbind = noop;
+    if (fg('popup-onclose-fix')) {
+      setTimeout(() => {
+        unbind = bindAll(window, [{
+          type: 'click',
+          listener: onClick,
+          options: {
+            capture
+          }
+        }, {
+          type: 'keydown',
+          listener: onKeyDown
+        }]);
+      }, 0);
+    } else {
+      unbind = bindAll(window, [{
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture
+        }
+      }, {
+        type: 'keydown',
+        listener: onKeyDown
+      }]);
+    }
 
     // bind onBlur event listener to fix popup not close when clicking on iframe outside
     let unbindBlur = noop;
@@ -213,8 +229,14 @@ export const useCloseManager = ({
     });
     return () => {
       var _parentUnbind;
+      if (fg('popup-onclose-fix')) {
+        setTimeout(() => {
+          unbind();
+        }, 0);
+      } else {
+        unbind();
+      }
       cancelAllFrames();
-      unbind();
       (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 ? void 0 : _parentUnbind();
       unbindBlur();
     };

package/dist/esm/popup.js

@@ -131,5 +131,4 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     }, popupContent);
   }
   return popupContent;
-});
-export default Popup;
+});

package/dist/esm/use-close-manager.js

@@ -180,16 +180,32 @@ export var useCloseManager = function useCloseManager(_ref) {
         }
       });
     }
-    var unbind = bindAll(window, [{
-      type: 'click',
-      listener: onClick,
-      options: {
-        capture: capture
-      }
-    }, {
-      type: 'keydown',
-      listener: onKeyDown
-    }]);
+    var unbind = noop;
+    if (fg('popup-onclose-fix')) {
+      setTimeout(function () {
+        unbind = bindAll(window, [{
+          type: 'click',
+          listener: onClick,
+          options: {
+            capture: capture
+          }
+        }, {
+          type: 'keydown',
+          listener: onKeyDown
+        }]);
+      }, 0);
+    } else {
+      unbind = bindAll(window, [{
+        type: 'click',
+        listener: onClick,
+        options: {
+          capture: capture
+        }
+      }, {
+        type: 'keydown',
+        listener: onKeyDown
+      }]);
+    }
 
     // bind onBlur event listener to fix popup not close when clicking on iframe outside
     var unbindBlur = noop;
@@ -204,8 +220,14 @@ export var useCloseManager = function useCloseManager(_ref) {
     });
     return function () {
       var _parentUnbind;
+      if (fg('popup-onclose-fix')) {
+        setTimeout(function () {
+          unbind();
+        }, 0);
+      } else {
+        unbind();
+      }
       cancelAllFrames();
-      unbind();
       (_parentUnbind = parentUnbind) === null || _parentUnbind === void 0 || _parentUnbind();
       unbindBlur();
     };

package/dist/types/popup.d.ts

@@ -5,4 +5,3 @@
 import { type FC } from 'react';
 import { type PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
-export default Popup;

package/dist/types-ts4.5/popup.d.ts

@@ -5,4 +5,3 @@
 import { type FC } from 'react';
 import { type PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
-export default Popup;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,9 +45,9 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.0.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -63,15 +63,21 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^21.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/code": "^16.0.0",
+		"@atlaskit/docs": "*",
+		"@atlaskit/form": "^12.0.0",
+		"@atlaskit/heading": "^5.0.0",
+		"@atlaskit/icon": "^24.1.0",
+		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/modal-dialog": "^13.0.0",
+		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@compiled/react": "^0.18.2",
-		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
@@ -79,7 +85,6 @@
 		"jscodeshift": "^0.13.0",
 		"raf-stub": "^2.0.1",
 		"react-dom": "^18.2.0",
-		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2"
 	},
 	"keywords": [
@@ -125,6 +130,9 @@
 		},
 		"fix-dropdown-close-outside-iframe": {
 			"type": "boolean"
+		},
+		"popup-onclose-fix": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"

package/codemods/1.0.0-lite-mode.tsx

@@ -1,178 +0,0 @@
-import {
-	type API,
-	type ASTPath,
-	type default as core,
-	type FileInfo,
-	type JSXElement,
-	JSXExpressionContainer,
-	type Literal,
-	type Options,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import {
-	addCommentToStartOfFile,
-	getDefaultSpecifierName,
-	getJSXAttributesByName,
-	getSpecifierName,
-	hasImportDeclaration,
-	isUsingProp,
-	updateRenderProps,
-} from './utils/helpers';
-
-function updateBoundariesProps(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
-	source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
-		if (
-			isUsingProp({
-				j,
-				base: source,
-				element: path,
-				propName: 'boundariesElement',
-			})
-		) {
-			// Get value from prop
-			getJSXAttributesByName({
-				j,
-				element: path,
-				attributeName: 'boundariesElement',
-			}).forEach((attribute) => {
-				const expression = attribute.node.value;
-				if (expression && expression.type === 'StringLiteral') {
-					const value = expression && expression.value;
-					if (value === 'window') {
-						j(attribute).replaceWith(
-							j.jsxAttribute(j.jsxIdentifier('rootBoundary'), j.stringLiteral('document')),
-						);
-					} else if (value === 'viewport') {
-						j(attribute).replaceWith(
-							j.jsxAttribute(j.jsxIdentifier('rootBoundary'), j.stringLiteral('viewport')),
-						);
-					} else if (value === 'scrollParents') {
-						j(attribute).replaceWith(
-							j.jsxAttribute(j.jsxIdentifier('boundary'), j.stringLiteral('clippingParents')),
-						);
-					}
-				}
-			});
-			// Add relevant replacement props
-
-			// Remove old prop
-			getJSXAttributesByName({
-				j,
-				element: path,
-				attributeName: 'boundariesElement',
-			}).remove();
-		}
-	});
-}
-
-function updateOffset(j: core.JSCodeshift, source: Collection<any>, specifier: string) {
-	source.findJSXElements(specifier).forEach((path: ASTPath<JSXElement>) => {
-		getJSXAttributesByName({
-			j,
-			element: path,
-			attributeName: 'offset',
-		})
-			.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 (value.includes('%') || value.includes('vw') || value.includes('vh')) {
-						addCommentToStartOfFile({
-							j,
-							base: source,
-							message: `
-                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
-                Change the offset value to use pixel values
-                Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/
-                `,
-						});
-					} else if (value.includes(',')) {
-						// Split by comma
-						const offsetArray: Literal[] = expression.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[] = expression.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)])),
-							);
-						}
-					}
-				} 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: `
-              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
-              Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/
-              `,
-					});
-				}
-			});
-	});
-}
-
-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/popup')) {
-		return file.source;
-	}
-
-	// Get imported name for the component
-	var specifier = getDefaultSpecifierName({
-		j,
-		base: source,
-		packageName: '@atlaskit/popup',
-	});
-	if (!specifier) {
-		specifier = getSpecifierName({
-			j,
-			base: source,
-			packageName: '@atlaskit/popup',
-			component: 'Popup',
-		});
-	}
-	if (!specifier) {
-		return file.source;
-	}
-
-	// Convert boundaries prop
-	updateBoundariesProps(j, source, specifier);
-
-	// Convert offset prop
-	updateOffset(j, source, specifier);
-
-	// Rename render props
-	updateRenderProps(j, source, specifier, 'scheduleUpdate', 'update');
-
-	return source.toSource(options.printOptions || { quote: 'single' });
-}

package/codemods/__tests__/1.0.0-lite-mode.tsx

@@ -1,532 +0,0 @@
-jest.autoMockOff();
-
-import noop from '@atlaskit/ds-lib/noop';
-
-import transformer from '../1.0.0-lite-mode';
-
-const applyTransform = require('jscodeshift/dist/testUtils').applyTransform;
-
-type TestArgs = {
-	it: string;
-	original: string;
-	expected: string;
-	mode?: 'only' | 'skip';
-	before?: () => void;
-	after?: () => void;
-};
-
-function check({
-	it: name,
-	original,
-	expected,
-	before = noop,
-	after = noop,
-	mode = undefined,
-}: TestArgs) {
-	const run = mode === 'only' ? it.only : mode === 'skip' ? it.skip : it;
-
-	run(name, () => {
-		before();
-		try {
-			const output: string = applyTransform(
-				{ default: transformer, parser: 'tsx' },
-				{},
-				{ source: original },
-			);
-			expect(output).toBe(expected.trim());
-		} catch (e) {
-			// a failed assertion will throw
-			after();
-			throw e;
-		}
-		// will only be hit if we don't throw
-		after();
-	});
-}
-
-/**
- * - `boundariesElement` has been replaced with two props: `boundary` and `rootBoundary`. The three supported values
- *  from the boundariesElement prop have been split between the two as follows:
- * - `boundariesElement="scrollParents"` has been renamed: use `boundary="clippingParents"`.
- * - `boundariesElement="window"` has been renamed: use `rootBoundary="document"`, and acts in a similar fashion.
- * - `boundariesElement="viewport"` has been moved: use `rootBoundary="viewport"`.
- */
-
-describe('Convert boundaries props', () => {
-	check({
-		it: 'should turn `boundariesElement="scrollParents"` to `boundary="clippingParents"`',
-		original: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          boundariesElement='scrollParents'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-		expected: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          boundary='clippingParents'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-	});
-
-	check({
-		it: 'should turn `boundariesElement="window"` into `rootBoundary="document"`',
-		original: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          boundariesElement='window'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-		expected: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          rootBoundary='document'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-	});
-
-	check({
-		it: 'should turn `boundariesElement="viewport"` into `rootBoundary="viewport"`',
-		original: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          boundariesElement='viewport'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-		expected: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          rootBoundary='viewport'
-          placement="bottom-start"
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-	});
-});
-
-describe('Convert offset props', () => {
-	/**
-	 * `offset` prop is no longer a string, but an array of two integers (i.e. '0px 8px' is now [0, 8])
-	 */
-	check({
-		it: 'should convert offset from a string to an array of two integers',
-		original: `
-    import Popup from '@atlaskit/popup';
-
-    export default () => (
-      <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={'5px 8px'}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-
-    function numCommaOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={'5px, 8px'}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-
-    function numStringOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={'10'}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-
-    function numOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={10}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-  `,
-		expected: `
-    import Popup from '@atlaskit/popup';
-
-    export default () => (
-      <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={[5, 8]}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-
-    function numCommaOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={[5, 8]}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-
-    function numStringOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={[10, 0]}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-
-    function numOffset() {
-      return (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={[10, 0]}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    }
-    `,
-	});
-	/**
-	 * If a user is passing in an offset with vh, vw or % in the offset, let them know that's no longer supported
-	 */
-	check({
-		it: 'should warn users using vh, vw or % in the offset',
-		original: `
-    import Popup from '@atlaskit/popup';
-
-    export default () => (
-      <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={'5px + 7vh, 8px'}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-    `,
-		expected: `
-    /* 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
-    Change the offset value to use pixel values
-    Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/ */
-    import Popup from '@atlaskit/popup';
-
-    export default () => (
-      <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={'5px + 7vh, 8px'}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-    `,
-	});
-
-	/**
-	 * If a user is passing in a variable for offset then we should leave a comment to update it themselves
-	 */
-	check({
-		it: 'warn users passing in a variable for an offset',
-		original: `
-    import Popup from '@atlaskit/popup';
-
-    function directOffset({offset}) {
-      return (
-       <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={offset}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-      );
-    }
-    `,
-		expected: `
-    /* 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
-    Further details can be found in the popper docs https://popper.js.org/docs/v2/modifiers/offset/ */
-    import Popup from '@atlaskit/popup';
-
-    function directOffset({offset}) {
-      return (
-       <Popup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={offset}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-      );
-    }
-    `,
-	});
-	// Works with an aliased import and other imports
-	check({
-		it: 'should work with aliased import and other imports',
-		original: `
-
-    import AkPopup, { PopupProps as AkPopupProps, TriggerProps as AkTriggerProps } from '@atlaskit/popup';
-
-    export default () => (
-      <AkPopup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={'5px, 8px'}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-    `,
-		expected: `
-    import AkPopup, { PopupProps as AkPopupProps, TriggerProps as AkTriggerProps } from '@atlaskit/popup';
-
-    export default () => (
-      <AkPopup
-        isOpen={isOpen}
-        onClose={() => {}}
-        offset={[5, 8]}
-        content={() => (
-          <div />
-        )}
-        trigger={triggerProps => (
-          <div />
-        )}
-      />
-    );
-  `,
-	});
-
-	// Works when not a default import
-	check({
-		it: 'should work when not accessed using a default import',
-		original: `
-      import { Popup } from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={'5px, 8px'}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-      `,
-		expected: `
-      import { Popup } from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          offset={[5, 8]}
-          content={() => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-	});
-});
-
-/**
- * Render Props:
- * - `scheduleUpdate`, for async updates, has been renamed to `update`, and now returns a Promise.
- */
-describe('Convert render props', () => {
-	check({
-		it: 'should rename schedulUpdate to `update`',
-		original: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          placement="bottom-start"
-          content={({ scheduleUpdate }) => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-		expected: `
-      import Popup from '@atlaskit/popup';
-
-      export default () => (
-        <Popup
-          isOpen={isOpen}
-          onClose={() => {}}
-          placement="bottom-start"
-          content={({
-            update: scheduleUpdate
-          }) => (
-            <div />
-          )}
-          trigger={triggerProps => (
-            <div />
-          )}
-        />
-      );
-    `,
-	});
-});

package/codemods/utils/helpers.tsx

@@ -1,333 +0,0 @@
-import { type NodePath } from 'ast-types/lib/node-path';
-import {
-	type ASTPath,
-	type default as core,
-	type ImportDeclaration,
-	type JSXAttribute,
-	type JSXElement,
-	type Node,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-export type Nullable<T> = T | null;
-
-export function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: string,
-	importPath: string,
-): boolean {
-	return (
-		j(source)
-			.find(j.ImportDeclaration)
-			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === importPath).length >
-		0
-	);
-}
-
-export function getDefaultSpecifierName({
-	j,
-	base,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	packageName: string;
-}): Nullable<string> {
-	const specifiers = base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === packageName)
-		.find(j.ImportDefaultSpecifier);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-export function getSpecifierName({
-	j,
-	base,
-	packageName,
-	component,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	packageName: string;
-	component: string;
-}): Nullable<string> {
-	const specifiers = base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === packageName)
-		.find(j.ImportSpecifier);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	const specifierNode = specifiers.nodes().find((node) => node.imported.name === component);
-	if (!specifierNode) {
-		return null;
-	}
-	// @ts-ignore
-	return specifierNode.local.name;
-}
-
-export function getJSXAttributesByName({
-	j,
-	element,
-	attributeName,
-}: {
-	j: core.JSCodeshift;
-	element: JSXElement | ASTPath<JSXElement>;
-	attributeName: string;
-}): Collection<JSXAttribute> {
-	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);
-		});
-}
-
-export function hasJSXAttributesByName({
-	j,
-	element,
-	attributeName,
-}: {
-	j: core.JSCodeshift;
-	element: JSXElement;
-	attributeName: string;
-}): boolean {
-	return getJSXAttributesByName({ j, element, attributeName }).length > 0;
-}
-
-export function isUsingSupportedSpread({
-	j,
-	base,
-	element,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-}): boolean {
-	const isUsingSpread: boolean = j(element).find(j.JSXSpreadAttribute).length > 0;
-
-	if (!isUsingSpread) {
-		return true;
-	}
-
-	return (
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.filter((spread) => {
-				const argument = spread.value.argument;
-				// in place expression is supported
-				if (argument.type === 'ObjectExpression') {
-					return true;
-				}
-
-				// Supporting identifiers that point to an a local object expression
-				if (argument.type === 'Identifier') {
-					return (
-						base.find(j.VariableDeclarator).filter((declarator): boolean => {
-							return (
-								declarator.value.id.type === 'Identifier' &&
-								// @ts-ignore
-								declarator.value.init.type === 'ObjectExpression'
-							);
-						}).length > 0
-					);
-				}
-
-				// We don't support anything else
-				return false;
-			}).length > 0
-	);
-}
-
-export function isUsingThroughSpread({
-	j,
-	base,
-	element,
-	propName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-	propName: string;
-}): boolean {
-	if (!isUsingSupportedSpread({ j, base, element })) {
-		return false;
-	}
-
-	const isUsedThroughExpression: boolean =
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.find(j.ObjectExpression)
-			.filter((item) => {
-				const match: boolean =
-					item.value.properties.filter(
-						(property) =>
-							property.type === 'ObjectProperty' &&
-							property.key.type === 'Identifier' &&
-							property.key.name === propName,
-					).length > 0;
-
-				return match;
-			}).length > 0;
-
-	if (isUsedThroughExpression) {
-		return true;
-	}
-
-	const isUsedThroughIdentifier: boolean =
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.find(j.Identifier)
-			.filter((identifier): boolean => {
-				return (
-					base
-						.find(j.VariableDeclarator)
-						.filter(
-							(declarator) =>
-								declarator.value.id.type === 'Identifier' &&
-								declarator.value.id.name === identifier.value.name,
-						)
-						.filter((declarator) => {
-							const value = declarator.value;
-							if (value.id.type !== 'Identifier') {
-								return false;
-							}
-
-							if (value.id.name !== identifier.value.name) {
-								return false;
-							}
-							// @ts-ignore
-							if (value.init.type !== 'ObjectExpression') {
-								return false;
-							}
-
-							const match: boolean =
-								// @ts-ignore
-								value.init.properties.filter(
-									// @ts-ignore
-									(property) =>
-										property.type === 'ObjectProperty' &&
-										property.key.type === 'Identifier' &&
-										property.key.name === propName,
-								).length > 0;
-
-							return match;
-						}).length > 0
-				);
-			}).length > 0;
-
-	return isUsedThroughIdentifier;
-}
-
-export function isUsingProp({
-	j,
-	base,
-	element,
-	propName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-	propName: string;
-}): boolean {
-	return (
-		hasJSXAttributesByName({
-			j,
-			element: element.value,
-			attributeName: propName,
-		}) ||
-		isUsingThroughSpread({
-			j,
-			base,
-			element,
-			propName,
-		})
-	);
-}
-
-// not replacing newlines (which \s does)
-const spacesAndTabs: RegExp = /[ \t]{2,}/g;
-const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
-
-function clean(value: string): string {
-	return (
-		value
-			.replace(spacesAndTabs, ' ')
-			.replace(lineStartWithSpaces, '')
-			// using .trim() to clear the any newlines before the first text and after last text
-			.trim()
-	);
-}
-
-export function addCommentToStartOfFile({
-	j,
-	base,
-	message,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<Node>;
-	message: string;
-}) {
-	addCommentBefore({
-		j,
-		// @ts-ignore
-		target: base.find(j.Program),
-		message,
-	});
-}
-
-export function addCommentBefore({
-	j,
-	target,
-	message,
-}: {
-	j: core.JSCodeshift;
-	target: Collection<Node>;
-	message: string;
-}) {
-	const content: string = ` TODO: (from codemod) ${clean(message)} `;
-	target.forEach((path) => {
-		path.value.comments = path.value.comments || [];
-
-		const exists = path.value.comments.find((comment) => comment.value === content);
-
-		// avoiding duplicates of the same comment
-		if (exists) {
-			return;
-		}
-
-		path.value.comments.push(j.commentBlock(content));
-	});
-}
-
-export function updateRenderProps(
-	j: core.JSCodeshift,
-	source: Collection<any>,
-	specifier: string,
-	oldProperty: string,
-	newProperty: string,
-) {
-	source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
-		j(element)
-			.find(j.ArrowFunctionExpression)
-			.find(j.ObjectPattern)
-			.find(j.ObjectProperty)
-			.filter(
-				// @ts-ignore
-				(path: ASTPath<ObjectProperty>) => path.value.key.name === oldProperty,
-			)
-			.forEach((path) => {
-				j(path).replaceWith(
-					j.property('init', j.identifier(newProperty), j.identifier(oldProperty)),
-				);
-			});
-	});
-}