@atlaskit/datetime-picker 17.6.1 → 17.6.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/datetime-picker
 
+## 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
+
+- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
 ## 17.6.1
 
 ### 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/dist/cjs/components/date-picker.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -477,7 +477,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
   var disabledStyle = isDisabled ? {
     pointerEvents: 'none',
-    color: "var(--ds-icon-disabled, inherit)"
+    color: "var(--ds-icon-disabled, #080F214A)"
   } : {};
   var calendarProps = {
     calendarContainerRef: containerRef.current,

package/dist/cjs/components/date-time-picker-class.js

@@ -30,7 +30,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /// <reference types="node" />
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

package/dist/cjs/components/date-time-picker-fc-new.js

@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

package/dist/cjs/components/date-time-picker-fc-old.js

@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

package/dist/cjs/components/time-picker.js

@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/date-time-picker-container.compiled.css

@@ -10,7 +10,6 @@
 ._1e0c1txw{display:flex}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhk1y3p{background-color:var(--ds-background-input-pressed,transparent)}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}

package/dist/cjs/internal/date-time-picker-container.js

@@ -44,6 +44,6 @@ var DateTimePickerContainer = exports.DateTimePickerContainer = /*#__PURE__*/(0,
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: (0, _runtime.ax)(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhk1y3p", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: (0, _runtime.ax)(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/es2019/components/date-picker.js

@@ -24,7 +24,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.0";
+const packageVersion = "0.0.0-development";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -405,7 +405,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
   } = selectProps;
   const disabledStyle = isDisabled ? {
     pointerEvents: 'none',
-    color: "var(--ds-icon-disabled, inherit)"
+    color: "var(--ds-icon-disabled, #080F214A)"
   } : {};
   const calendarProps = {
     calendarContainerRef: containerRef.current,

package/dist/es2019/components/date-time-picker-class.js

@@ -16,7 +16,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.0";
+const packageVersion = "0.0.0-development";
 const compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

package/dist/es2019/components/date-time-picker-fc-new.js

@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.0";
+const packageVersion = "0.0.0-development";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

package/dist/es2019/components/date-time-picker-fc-old.js

@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.0";
+const packageVersion = "0.0.0-development";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

package/dist/es2019/components/time-picker.js

@@ -13,7 +13,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "17.6.0";
+const packageVersion = "0.0.0-development";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/date-time-picker-container.compiled.css

@@ -10,7 +10,6 @@
 ._1e0c1txw{display:flex}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhk1y3p{background-color:var(--ds-background-input-pressed,transparent)}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}

package/dist/es2019/internal/date-time-picker-container.js

@@ -36,6 +36,6 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: ax(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", fg('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhk1y3p", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: ax(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", fg('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/esm/components/date-picker.js

@@ -30,7 +30,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -470,7 +470,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
   var disabledStyle = isDisabled ? {
     pointerEvents: 'none',
-    color: "var(--ds-icon-disabled, inherit)"
+    color: "var(--ds-icon-disabled, #080F214A)"
   } : {};
   var calendarProps = {
     calendarContainerRef: containerRef.current,

package/dist/esm/components/date-time-picker-class.js

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var compiledStyles = {
   datePickerContainerStyles: "_i0dl1ssb _16jlkb7n _1o9zidpf",
   timePickerContainerStyles: "_i0dl1ssb _16jlkb7n",

package/dist/esm/components/date-time-picker-fc-new.js

@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

package/dist/esm/components/date-time-picker-fc-old.js

@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

package/dist/esm/components/time-picker.js

@@ -19,7 +19,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "17.6.0";
+var packageVersion = "0.0.0-development";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/date-time-picker-container.compiled.css

@@ -10,7 +10,6 @@
 ._1e0c1txw{display:flex}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhk1y3p{background-color:var(--ds-background-input-pressed,transparent)}
 ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}

package/dist/esm/internal/date-time-picker-container.js

@@ -35,6 +35,6 @@ export var DateTimePickerContainer = /*#__PURE__*/forwardRef(function (_ref, ref
   return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
     ref: ref,
-    className: ax(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", fg('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhk1y3p", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
+    className: ax(["_2rko12b0 _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", fg('platform-dst-shape-theme-default') && "_2rko1qi0", "_19itno8c", isDisabled && "_1h6dbk0g _bfhkby5v _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhkr01l", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1v1w _16qsvyy1", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr3l4ek", notFocusedOrIsDisabled && !isInvalid && "_4cvxrsbi _irr3l4ek", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "17.6.1",
+	"version": "17.6.3",
 	"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",
@@ -69,6 +76,7 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/toggle": "^15.2.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);
-	}
-};