@atlaskit/datetime-picker 17.6.2 → 17.6.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/datetime-picker
 
+## 17.6.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.6.3
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
 ## 17.6.2
 
 ### Patch Changes

package/codemods/14.0.0-remove-duplicate-and-unused-props.tsx

@@ -1,78 +1,35 @@
 import { type API, type FileInfo, type JSCodeshift, type Options } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
+import { addJSXAttributeToJSXElement } from './utils/add-jsx-attribute-to-jsx-element';
 import {
-	addJSXAttributeToJSXElement,
-	getImportDeclarationCollection,
-	getImportSpecifierCollection,
-	getImportSpecifierName,
-	getJSXAttributeByName,
-	getJSXAttributesByName,
-	hasImportDeclaration,
-	removeJSXAttributeByName,
-	removeJSXAttributeObjectPropertyByName,
-} from './utils/helpers';
-
-type ToPickerFormula = {
-	oldPropName: string;
-	destination: string[];
-};
-
-type FromPickerFormula = {
-	source: string[];
-	newPropName: string;
-};
+	dtpPropsToMoveIntoPickerProps,
+	type ToPickerFormula,
+} from './utils/dtp-props-to-move-into-picker-props';
+import { getImportDeclarationCollection } from './utils/get-import-declaration-collection';
+import { getImportSpecifierCollection } from './utils/get-import-specifier-collection';
+import { getImportSpecifierName } from './utils/get-import-specifier-name';
+import { getJSXAttributeByName } from './utils/get-jsx-attribute-by-name';
+import { getJSXAttributesByName } from './utils/get-jsx-attributes-by-name';
+import { hasImportDeclaration } from './utils/has-import-declaration';
+import { removeJSXAttributeByName } from './utils/remove-jsx-attribute-by-name';
+import { removeJSXAttributeObjectPropertyByName } from './utils/remove-jsx-attribute-object-property-by-name';
+import {
+	type FromPickerFormula,
+	selectPropsToMoveIntoProps,
+} from './utils/select-props-to-move-into-props';
 
 const importPath = '@atlaskit/datetime-picker';
 
 const dateTimePickerImportName = 'DateTimePicker';
-export const datePickerImportName = 'DatePicker';
-export const timePickerImportName = 'TimePicker';
+const datePickerImportName = 'DatePicker';
+const timePickerImportName = 'TimePicker';
 
 const pickerAndSelectPropNames = [
 	['datePickerSelectProps', 'datePickerProps'],
 	['timePickerSelectProps', 'timePickerProps'],
 ];
 
-export const dtpPropsToMoveIntoPickerProps: ToPickerFormula[] = [
-	{
-		oldPropName: 'dateFormat',
-		destination: ['datePickerProps', 'dateFormat'],
-	},
-	{
-		oldPropName: 'times',
-		destination: ['timePickerProps', 'times'],
-	},
-	{
-		oldPropName: 'timeFormat',
-		destination: ['timePickerProps', 'timeFormat'],
-	},
-	{
-		oldPropName: 'timeIsEditable',
-		destination: ['timePickerProps', 'timeIsEditable'],
-	},
-];
-
-// For the pickers, not for DTP
-export const selectPropsToMoveIntoProps: FromPickerFormula[] = [
-	{
-		source: ['selectProps', 'aria-describedby'],
-		newPropName: 'aria-describedby',
-	},
-	{
-		source: ['selectProps', 'aria-label'],
-		newPropName: 'label',
-	},
-	{
-		source: ['selectProps', 'inputId'],
-		newPropName: 'id',
-	},
-	{
-		source: ['selectProps', 'placeholder'],
-		newPropName: 'placeholder',
-	},
-];
-
 /**
  * Move *pickerSelectProps into their respectice *pickerProps as a property
  * named `selectProps`.

package/codemods/__tests__/next-remove-duplicate-and-unused-props.tsx

@@ -1,14 +1,14 @@
 jest.autoMockOff();
 
-import transformer, {
-	datePickerImportName,
-	dtpPropsToMoveIntoPickerProps,
-	selectPropsToMoveIntoProps,
-	timePickerImportName,
-} from '../14.0.0-remove-duplicate-and-unused-props';
+import transformer from '../14.0.0-remove-duplicate-and-unused-props';
+import { dtpPropsToMoveIntoPickerProps } from '../utils/dtp-props-to-move-into-picker-props';
+import { selectPropsToMoveIntoProps } from '../utils/select-props-to-move-into-props';
 
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
+const datePickerImportName = 'DatePicker';
+const timePickerImportName = 'TimePicker';
+
 defineInlineTest(
 	{ default: transformer, parser: 'tsx' },
 	{},

package/codemods/utils/add-jsx-attribute-to-jsx-element.tsx

@@ -0,0 +1,13 @@
+import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
+
+export const addJSXAttributeToJSXElement: (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	jsxAttribute: JSXAttribute,
+) => void = (j: JSCodeshift, jsxElementPath: ASTPath<JSXElement>, jsxAttribute: JSXAttribute) => {
+	j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.forEach((openingElement) => {
+			openingElement.node.attributes?.push(jsxAttribute);
+		});
+};

package/codemods/utils/create-remove-func-for.tsx

@@ -0,0 +1,30 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentToStartOfFile, getNamedSpecifier } from '@atlaskit/codemod-utils';
+
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+
+export const createRemoveFuncFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: JSCodeshift, source: Collection<Node>) => void =
+	(component: string, importName: string, prop: string, comment?: string) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const specifier = getNamedSpecifier(j, source, component, importName);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+				j(attribute).remove();
+				if (comment) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+				}
+			});
+		});
+	};

package/codemods/utils/dtp-props-to-move-into-picker-props.tsx

@@ -0,0 +1,23 @@
+export type ToPickerFormula = {
+	oldPropName: string;
+	destination: string[];
+};
+
+export const dtpPropsToMoveIntoPickerProps: ToPickerFormula[] = [
+	{
+		oldPropName: 'dateFormat',
+		destination: ['datePickerProps', 'dateFormat'],
+	},
+	{
+		oldPropName: 'times',
+		destination: ['timePickerProps', 'times'],
+	},
+	{
+		oldPropName: 'timeFormat',
+		destination: ['timePickerProps', 'timeFormat'],
+	},
+	{
+		oldPropName: 'timeIsEditable',
+		destination: ['timePickerProps', 'timeIsEditable'],
+	},
+];

package/codemods/utils/get-dynamic-import-collection.tsx

@@ -0,0 +1,40 @@
+import { type CallExpression, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+function isCallExpressionCalleeImportType(callee: CallExpression['callee']) {
+	return callee && callee.type === 'Import';
+}
+
+function isCallExpressionArgumentStringLiteralType(
+	callExpressionArguments: CallExpression['arguments'],
+) {
+	return (
+		callExpressionArguments &&
+		callExpressionArguments.length &&
+		callExpressionArguments[0].type === 'StringLiteral'
+	);
+}
+
+function isCallExpressionArgumentValueMatches(
+	callExpressionArgument: CallExpression['arguments'][0],
+	j: JSCodeshift,
+	value: string,
+) {
+	return j(callExpressionArgument).some((path) => path.node.value === value);
+}
+
+export function getDynamicImportCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+): Collection<CallExpression> {
+	return collection.find(j.CallExpression).filter((callExpressionPath) => {
+		const { callee, arguments: callExpressionArguments } = callExpressionPath.node;
+
+		return !!(
+			isCallExpressionCalleeImportType(callee) &&
+			isCallExpressionArgumentStringLiteralType(callExpressionArguments) &&
+			isCallExpressionArgumentValueMatches(callExpressionArguments[0], j, importPath)
+		);
+	});
+}

package/codemods/utils/get-import-declaration-collection.tsx

@@ -0,0 +1,12 @@
+import { type ImportDeclaration, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getImportDeclarationCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+): Collection<ImportDeclaration> {
+	return collection
+		.find(j.ImportDeclaration)
+		.filter((importDeclarationPath) => importDeclarationPath.node.source.value === importPath);
+}

package/codemods/utils/get-import-specifier-collection.tsx

@@ -0,0 +1,12 @@
+import { type ImportDeclaration, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getImportSpecifierCollection(
+	j: JSCodeshift,
+	importDeclarationCollection: Collection<ImportDeclaration>,
+	importName: string,
+): Collection<ImportSpecifier> {
+	return importDeclarationCollection
+		.find(j.ImportSpecifier)
+		.filter((importSpecifierPath) => importSpecifierPath.node.imported.name === importName);
+}

package/codemods/utils/get-import-specifier-name.tsx

@@ -0,0 +1,12 @@
+import { type ImportSpecifier } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getImportSpecifierName(
+	importSpecifierCollection: Collection<ImportSpecifier>,
+): string | null {
+	if (importSpecifierCollection.length === 0) {
+		return null;
+	}
+
+	return importSpecifierCollection.nodes()[0]!.local!.name;
+}

package/codemods/utils/get-jsx-attribute-by-name.tsx

@@ -0,0 +1,15 @@
+import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
+
+export const getJSXAttributeByName: (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+) => JSXAttribute | undefined = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): JSXAttribute | undefined => {
+	const attributes: JSXAttribute[] = j(jsxElementPath).find(j.JSXAttribute).nodes();
+
+	return attributes?.find((attr) => attr.name && attr.name.name === attributeName);
+};

package/codemods/utils/get-jsx-attributes-by-name.tsx

@@ -0,0 +1,17 @@
+import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getJSXAttributesByName(
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): Collection<JSXAttribute> {
+	return j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((jsxAttributePath) =>
+			j(jsxAttributePath)
+				.find(j.JSXIdentifier)
+				.some((jsxIdentifierPath) => jsxIdentifierPath.node.name === attributeName),
+		);
+}

package/codemods/utils/get-jsx-attributes.tsx

@@ -0,0 +1,5 @@
+import { type ASTPath, type JSXAttribute, type JSXElement } from 'jscodeshift';
+
+export const getJSXAttributes: (jsxElementPath: ASTPath<JSXElement>) => JSXAttribute[] = (
+	jsxElementPath: ASTPath<JSXElement>,
+) => jsxElementPath.node.openingElement.attributes as JSXAttribute[];

package/codemods/utils/get-jsx-spread-identifier-attributes-by-name.tsx

@@ -0,0 +1,37 @@
+import { type ASTPath, type JSCodeshift, type JSXElement, type ObjectProperty } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getJSXSpreadIdentifierAttributesByName(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): Collection<ObjectProperty> | null {
+	const identifierCollection = j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXSpreadAttribute)
+		.filter((jsxSpreadAttributePath) => jsxSpreadAttributePath.node.argument.type === 'Identifier')
+		.find(j.Identifier);
+
+	if (identifierCollection.length === 0) {
+		return null;
+	}
+
+	return collection
+		.find(j.VariableDeclarator)
+		.filter((variableDeclaratorPath) => {
+			const { id } = variableDeclaratorPath.node;
+
+			return (
+				id.type === 'Identifier' &&
+				identifierCollection.some((identifierPath) => identifierPath.node.name === id.name)
+			);
+		})
+		.find(j.ObjectExpression)
+		.find(j.ObjectProperty)
+		.filter((objectPropertyPath) =>
+			j(objectPropertyPath)
+				.find(j.Identifier)
+				.some((identifierPath) => identifierPath.node.name === attributeName),
+		);
+}

package/codemods/utils/get-jsx-spread-object-expression-attributes-by-name.tsx

@@ -0,0 +1,19 @@
+import { type ASTPath, type JSCodeshift, type JSXElement, type ObjectProperty } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getJSXSpreadObjectExpressionAttributesByName(
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): Collection<ObjectProperty> {
+	return j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXSpreadAttribute)
+		.find(j.ObjectExpression)
+		.find(j.ObjectProperty)
+		.filter((objectPropertyPath) =>
+			j(objectPropertyPath)
+				.find(j.Identifier)
+				.some((identifierPath) => identifierPath.node.name === attributeName),
+		);
+}

package/codemods/utils/has-dynamic-import.tsx

@@ -0,0 +1,12 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { getDynamicImportCollection } from './get-dynamic-import-collection';
+
+export function hasDynamicImport(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+): boolean {
+	return getDynamicImportCollection(j, collection, importPath).length > 0;
+}

package/codemods/utils/has-import-declaration.tsx

@@ -0,0 +1,12 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { getImportDeclarationCollection } from './get-import-declaration-collection';
+
+export function hasImportDeclaration(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+): boolean {
+	return getImportDeclarationCollection(j, collection, importPath).length > 0;
+}

package/codemods/utils/is-class-declaration-identifier-present.tsx

@@ -0,0 +1,14 @@
+import { type Identifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function isClassDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+): boolean {
+	return collection.find(j.ClassDeclaration).some((classDeclarationPath) => {
+		const { id } = classDeclarationPath.node;
+
+		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+	});
+}

package/codemods/utils/is-function-declaration-identifier-present.tsx

@@ -0,0 +1,14 @@
+import { type Identifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function isFunctionDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+): boolean {
+	return collection.find(j.FunctionDeclaration).some((functionDeclarationPath) => {
+		const { id } = functionDeclarationPath.node;
+
+		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+	});
+}

package/codemods/utils/is-import-declaration-identifier-present.tsx

@@ -0,0 +1,13 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function isImportDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+): boolean {
+	return collection
+		.find(j.ImportDeclaration)
+		.find(j.Identifier)
+		.some((identifierPath) => identifierPath.node.name === variableName);
+}

package/codemods/utils/is-variable-declarator-identifier-present.tsx

@@ -0,0 +1,17 @@
+import { type Identifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function isVariableDeclaratorIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+): boolean {
+	return collection
+		.find(j.VariableDeclaration)
+		.find(j.VariableDeclarator)
+		.some((variableDeclaratorPath) => {
+			const { id } = variableDeclaratorPath.node;
+
+			return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+		});
+}

package/codemods/utils/remove-jsx-attribute-by-name.tsx

@@ -0,0 +1,16 @@
+import { type ASTPath, type JSCodeshift, type JSXElement } from 'jscodeshift';
+
+import { getJSXAttributeByName } from './get-jsx-attribute-by-name';
+import { getJSXAttributes } from './get-jsx-attributes';
+
+export const removeJSXAttributeByName: (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attrName: string,
+) => void = (j: JSCodeshift, jsxElementPath: ASTPath<JSXElement>, attrName: string) => {
+	const attributes = getJSXAttributes(jsxElementPath);
+	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
+	if (attr) {
+		attributes?.splice(attributes.indexOf(attr), 1);
+	}
+};

package/codemods/utils/remove-jsx-attribute-object-property-by-name.tsx

@@ -0,0 +1,58 @@
+import {
+	type ASTPath,
+	type Identifier,
+	type JSCodeshift,
+	type JSXElement,
+	type StringLiteral,
+} from 'jscodeshift';
+
+import { getJSXAttributeByName } from './get-jsx-attribute-by-name';
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { removeJSXAttributeByName } from './remove-jsx-attribute-by-name';
+
+export const removeJSXAttributeObjectPropertyByName: (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attrName: string,
+	propertyToRemove: string,
+) => void = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attrName: string,
+	propertyToRemove: string,
+) => {
+	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
+
+	if (!attr) {
+		return;
+	}
+
+	const attrCollection = getJSXAttributesByName(j, jsxElementPath, attrName);
+
+	const removeMatchingNodes = (p: ASTPath<Identifier | StringLiteral>) => {
+		const name = p.node.type === 'Identifier' ? p.node?.name : p.node?.value;
+		// Need to account for quoted properties
+		const nameMatches = propertyToRemove.match(new RegExp(`['"]?${name}['"]?`));
+		// This will otherwise try to remove values of properties since they are literals
+		const isKey = p.parent.value?.type === 'ObjectProperty';
+		// Sorry about all the parents. This is the easiest way to get the name
+		// of the attribute name. And I always know the depth of the object
+		// property here.
+		const parentNameMatches = attrName === p.parent.parent.parent.parent.node?.name?.name;
+		if (isKey && nameMatches && parentNameMatches) {
+			j(p.parent).remove();
+		}
+	};
+
+	// Remove all the now migrated object properties
+	const objectProperties = attrCollection.find(j.ObjectProperty);
+	objectProperties.find(j.Identifier).forEach(removeMatchingNodes);
+	objectProperties.find(j.StringLiteral).forEach(removeMatchingNodes);
+
+	// @ts-ignore -- Property 'expression' does not exist on type 'LiteralKind | JSXElement | JSXExpressionContainer | JSXFragment'. Property 'expression' does not exist on type 'Literal'.
+	const attrProperties = attr.value?.expression.properties;
+
+	if (attrProperties && attrProperties?.length === 0) {
+		removeJSXAttributeByName(j, jsxElementPath, attrName);
+	}
+};

package/codemods/utils/select-props-to-move-into-props.tsx

@@ -0,0 +1,23 @@
+export type FromPickerFormula = {
+	source: string[];
+	newPropName: string;
+};
+
+export const selectPropsToMoveIntoProps: FromPickerFormula[] = [
+	{
+		source: ['selectProps', 'aria-describedby'],
+		newPropName: 'aria-describedby',
+	},
+	{
+		source: ['selectProps', 'aria-label'],
+		newPropName: 'label',
+	},
+	{
+		source: ['selectProps', 'inputId'],
+		newPropName: 'id',
+	},
+	{
+		source: ['selectProps', 'placeholder'],
+		newPropName: 'placeholder',
+	},
+];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "17.6.2",
+	"version": "17.6.4",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,6 +25,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Date time picker",
@@ -33,10 +40,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/calendar": "^17.2.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/locale": "^3.0.0",
@@ -44,7 +51,7 @@
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"date-fns": "^2.17.0"
@@ -60,15 +67,16 @@
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/modal-dialog": "^14.14.0",
+		"@atlaskit/heading": "^5.4.0",
+		"@atlaskit/link": "^3.4.0",
+		"@atlaskit/modal-dialog": "^14.15.0",
 		"@atlaskit/popup": "^4.16.0",
 		"@atlaskit/range": "^10.0.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/toggle": "^15.2.0",
+		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/toggle": "^15.4.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",

package/codemods/utils/helpers.tsx

@@ -1,327 +0,0 @@
-import type {
-	ASTPath,
-	CallExpression,
-	default as core,
-	Identifier,
-	ImportDeclaration,
-	ImportSpecifier,
-	JSCodeshift,
-	JSXAttribute,
-	JSXElement,
-	ObjectProperty,
-	StringLiteral,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { addCommentToStartOfFile, getNamedSpecifier } from '@atlaskit/codemod-utils';
-
-export function hasImportDeclaration(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	importPath: string,
-): boolean {
-	return getImportDeclarationCollection(j, collection, importPath).length > 0;
-}
-
-export function getImportDeclarationCollection(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	importPath: string,
-): Collection<ImportDeclaration> {
-	return collection
-		.find(j.ImportDeclaration)
-		.filter((importDeclarationPath) => importDeclarationPath.node.source.value === importPath);
-}
-
-export function hasDynamicImport(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	importPath: string,
-): boolean {
-	return getDynamicImportCollection(j, collection, importPath).length > 0;
-}
-
-export function getDynamicImportCollection(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	importPath: string,
-): Collection<CallExpression> {
-	return collection.find(j.CallExpression).filter((callExpressionPath) => {
-		const { callee, arguments: callExpressionArguments } = callExpressionPath.node;
-
-		return !!(
-			isCallExpressionCalleeImportType(callee) &&
-			isCallExpressionArgumentStringLiteralType(callExpressionArguments) &&
-			isCallExpressionArgumentValueMatches(callExpressionArguments[0], j, importPath)
-		);
-	});
-}
-function isCallExpressionCalleeImportType(callee: CallExpression['callee']) {
-	return callee && callee.type === 'Import';
-}
-function isCallExpressionArgumentStringLiteralType(
-	callExpressionArguments: CallExpression['arguments'],
-) {
-	return (
-		callExpressionArguments &&
-		callExpressionArguments.length &&
-		callExpressionArguments[0].type === 'StringLiteral'
-	);
-}
-function isCallExpressionArgumentValueMatches(
-	callExpressionArgument: CallExpression['arguments'][0],
-	j: JSCodeshift,
-	value: string,
-) {
-	return j(callExpressionArgument).some((path) => path.node.value === value);
-}
-
-export function getImportSpecifierCollection(
-	j: JSCodeshift,
-	importDeclarationCollection: Collection<ImportDeclaration>,
-	importName: string,
-): Collection<ImportSpecifier> {
-	return importDeclarationCollection
-		.find(j.ImportSpecifier)
-		.filter((importSpecifierPath) => importSpecifierPath.node.imported.name === importName);
-}
-
-export function getImportSpecifierName(
-	importSpecifierCollection: Collection<ImportSpecifier>,
-): string | null {
-	if (importSpecifierCollection.length === 0) {
-		return null;
-	}
-
-	return importSpecifierCollection.nodes()[0]!.local!.name;
-}
-
-export function isVariableDeclaratorIdentifierPresent(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	variableName: string,
-): boolean {
-	return collection
-		.find(j.VariableDeclaration)
-		.find(j.VariableDeclarator)
-		.some((variableDeclaratorPath) => {
-			const { id } = variableDeclaratorPath.node;
-
-			return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
-		});
-}
-
-export function isFunctionDeclarationIdentifierPresent(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	variableName: string,
-): boolean {
-	return collection.find(j.FunctionDeclaration).some((functionDeclarationPath) => {
-		const { id } = functionDeclarationPath.node;
-
-		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
-	});
-}
-
-export function isClassDeclarationIdentifierPresent(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	variableName: string,
-): boolean {
-	return collection.find(j.ClassDeclaration).some((classDeclarationPath) => {
-		const { id } = classDeclarationPath.node;
-
-		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
-	});
-}
-
-export function isImportDeclarationIdentifierPresent(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	variableName: string,
-): boolean {
-	return collection
-		.find(j.ImportDeclaration)
-		.find(j.Identifier)
-		.some((identifierPath) => identifierPath.node.name === variableName);
-}
-
-export function getJSXAttributesByName(
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): Collection<JSXAttribute> {
-	return j(jsxElementPath)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXAttribute)
-		.filter((jsxAttributePath) =>
-			j(jsxAttributePath)
-				.find(j.JSXIdentifier)
-				.some((jsxIdentifierPath) => jsxIdentifierPath.node.name === attributeName),
-		);
-}
-
-export function getJSXSpreadIdentifierAttributesByName(
-	j: JSCodeshift,
-	collection: Collection<any>,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): Collection<ObjectProperty> | null {
-	const identifierCollection = j(jsxElementPath)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXSpreadAttribute)
-		.filter((jsxSpreadAttributePath) => jsxSpreadAttributePath.node.argument.type === 'Identifier')
-		.find(j.Identifier);
-
-	if (identifierCollection.length === 0) {
-		return null;
-	}
-
-	return collection
-		.find(j.VariableDeclarator)
-		.filter((variableDeclaratorPath) => {
-			const { id } = variableDeclaratorPath.node;
-
-			return (
-				id.type === 'Identifier' &&
-				identifierCollection.some((identifierPath) => identifierPath.node.name === id.name)
-			);
-		})
-		.find(j.ObjectExpression)
-		.find(j.ObjectProperty)
-		.filter((objectPropertyPath) =>
-			j(objectPropertyPath)
-				.find(j.Identifier)
-				.some((identifierPath) => identifierPath.node.name === attributeName),
-		);
-}
-
-export function getJSXSpreadObjectExpressionAttributesByName(
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): Collection<ObjectProperty> {
-	return j(jsxElementPath)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXSpreadAttribute)
-		.find(j.ObjectExpression)
-		.find(j.ObjectProperty)
-		.filter((objectPropertyPath) =>
-			j(objectPropertyPath)
-				.find(j.Identifier)
-				.some((identifierPath) => identifierPath.node.name === attributeName),
-		);
-}
-
-export const createRemoveFuncFor: (
-	component: string,
-	importName: string,
-	prop: string,
-	comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	(component: string, importName: string, prop: string, comment?: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier = getNamedSpecifier(j, source, component, importName);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
-				j(attribute).remove();
-				if (comment) {
-					addCommentToStartOfFile({ j, base: source, message: comment });
-				}
-			});
-		});
-	};
-
-export const getJSXAttributeByName: (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-) => JSXAttribute | undefined = (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attributeName: string,
-): JSXAttribute | undefined => {
-	const attributes: JSXAttribute[] = j(jsxElementPath).find(j.JSXAttribute).nodes();
-
-	return attributes?.find((attr) => attr.name && attr.name.name === attributeName);
-};
-
-export const addJSXAttributeToJSXElement: (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	jsxAttribute: JSXAttribute,
-) => void = (j: JSCodeshift, jsxElementPath: ASTPath<JSXElement>, jsxAttribute: JSXAttribute) => {
-	j(jsxElementPath)
-		.find(j.JSXOpeningElement)
-		.forEach((openingElement) => {
-			openingElement.node.attributes?.push(jsxAttribute);
-		});
-};
-
-export const removeJSXAttributeByName: (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attrName: string,
-) => void = (j: JSCodeshift, jsxElementPath: ASTPath<JSXElement>, attrName: string) => {
-	const attributes = getJSXAttributes(jsxElementPath);
-	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
-	if (attr) {
-		attributes?.splice(attributes.indexOf(attr), 1);
-	}
-};
-
-export const getJSXAttributes: (jsxElementPath: ASTPath<JSXElement>) => JSXAttribute[] = (
-	jsxElementPath: ASTPath<JSXElement>,
-) => jsxElementPath.node.openingElement.attributes as JSXAttribute[];
-
-export const removeJSXAttributeObjectPropertyByName: (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attrName: string,
-	propertyToRemove: string,
-) => void = (
-	j: JSCodeshift,
-	jsxElementPath: ASTPath<JSXElement>,
-	attrName: string,
-	propertyToRemove: string,
-) => {
-	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
-
-	if (!attr) {
-		return;
-	}
-
-	const attrCollection = getJSXAttributesByName(j, jsxElementPath, attrName);
-
-	const removeMatchingNodes = (p: ASTPath<Identifier | StringLiteral>) => {
-		const name = p.node.type === 'Identifier' ? p.node?.name : p.node?.value;
-		// Need to account for quoted properties
-		const nameMatches = propertyToRemove.match(new RegExp(`['"]?${name}['"]?`));
-		// This will otherwise try to remove values of properties since they are literals
-		const isKey = p.parent.value?.type === 'ObjectProperty';
-		// Sorry about all the parents. This is the easiest way to get the name
-		// of the attribute name. And I always know the depth of the object
-		// property here.
-		const parentNameMatches = attrName === p.parent.parent.parent.parent.node?.name?.name;
-		if (isKey && nameMatches && parentNameMatches) {
-			j(p.parent).remove();
-		}
-	};
-
-	// Remove all the now migrated object properties
-	const objectProperties = attrCollection.find(j.ObjectProperty);
-	objectProperties.find(j.Identifier).forEach(removeMatchingNodes);
-	objectProperties.find(j.StringLiteral).forEach(removeMatchingNodes);
-
-	// @ts-ignore -- Property 'expression' does not exist on type 'LiteralKind | JSXElement | JSXExpressionContainer | JSXFragment'. Property 'expression' does not exist on type 'Literal'.
-	const attrProperties = attr.value?.expression.properties;
-
-	if (attrProperties && attrProperties?.length === 0) {
-		removeJSXAttributeByName(j, jsxElementPath, attrName);
-	}
-};