@atlaskit/datetime-picker 13.11.2 → 14.0.0

package/codemods/utils/helpers.tsx

@@ -0,0 +1,306 @@
+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,
+) {
+	return getImportDeclarationCollection(j, collection, importPath).length > 0;
+}
+
+export function getImportDeclarationCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+) {
+	return collection
+		.find(j.ImportDeclaration)
+		.filter((importDeclarationPath) => importDeclarationPath.node.source.value === importPath);
+}
+
+export function hasDynamicImport(j: JSCodeshift, collection: Collection<any>, importPath: string) {
+	return getDynamicImportCollection(j, collection, importPath).length > 0;
+}
+
+export function getDynamicImportCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+) {
+	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,
+) {
+	return importDeclarationCollection
+		.find(j.ImportSpecifier)
+		.filter((importSpecifierPath) => importSpecifierPath.node.imported.name === importName);
+}
+
+export function getImportSpecifierName(importSpecifierCollection: Collection<ImportSpecifier>) {
+	if (importSpecifierCollection.length === 0) {
+		return null;
+	}
+
+	return importSpecifierCollection.nodes()[0]!.local!.name;
+}
+
+export function isVariableDeclaratorIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+) {
+	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,
+) {
+	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,
+) {
+	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,
+) {
+	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,
+) {
+	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>) => {
+		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 => {
+	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,
+) => {
+	j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.forEach((openingElement) => {
+			openingElement.node.attributes?.push(jsxAttribute);
+		});
+};
+
+export const removeJSXAttributeByName = (
+	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>) =>
+	jsxElementPath.node.openingElement.attributes as JSXAttribute[];
+
+export const removeJSXAttributeObjectPropertyByName = (
+	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/dist/cjs/components/date-picker.js

@@ -18,7 +18,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
-var _pick = _interopRequireDefault(require("lodash/pick"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/glyph/calendar"));
 var _locale = require("@atlaskit/locale");
@@ -38,7 +37,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.11.2";
+var packageVersion = "14.0.0";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -80,8 +79,13 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerRef", null);
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSafeState", function () {
-      return _objectSpread(_objectSpread(_objectSpread({}, _this.state), (0, _pick.default)(_this.props, ['value', 'isOpen'])), (0, _pick.default)(_this.props.selectProps, ['inputValue']));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getValue", function () {
+      var _this$props$value;
+      return (_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.state.value;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getIsOpen", function () {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = _this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : _this.state.isOpen;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDateDisabled", function (date) {
       return _this.props.disabled.indexOf(date) > -1;
@@ -131,7 +135,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
-      if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
+      if (!_this.props.isDisabled && !_this.getIsOpen()) {
         _this.setState({
           isOpen: true
         });
@@ -156,7 +160,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectBlur", function (event) {
       var _this$containerRef3;
       var newlyFocusedElement = event.relatedTarget;
-      if (_this.getSafeState().clearingFromIcon) {
+      if (_this.state.clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         _this.setState({
           clearingFromIcon: false
@@ -171,9 +175,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSelectFocus", function (event) {
-      var _this$getSafeState = _this.getSafeState(),
-        clearingFromIcon = _this$getSafeState.clearingFromIcon,
-        value = _this$getSafeState.value;
+      var clearingFromIcon = _this.state.clearingFromIcon;
+      var value = _this.getValue();
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         _this.setState({
@@ -207,9 +210,8 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputKeyDown", function (event) {
       var _this$containerRef4;
-      var _this$getSafeState2 = _this.getSafeState(),
-        value = _this$getSafeState2.value,
-        calendarValue = _this$getSafeState2.calendarValue;
+      var calendarValue = _this.state.calendarValue;
+      var value = _this.getValue();
       var keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
@@ -337,8 +339,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       if (parseInputValue) {
         return parseInputValue(date, dateFormat || _internal.defaultDateFormat);
       }
-      var _this$getSafeState3 = _this.getSafeState(),
-        l10n = _this$getSafeState3.l10n;
+      var l10n = _this.state.l10n;
       return l10n.parseDate(date);
     });
     /**
@@ -352,8 +353,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       var _this$props2 = _this.props,
         formatDisplayLabel = _this$props2.formatDisplayLabel,
         dateFormat = _this$props2.dateFormat;
-      var _this$getSafeState4 = _this.getSafeState(),
-        l10n = _this$getSafeState4.l10n;
+      var l10n = _this.state.l10n;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || _internal.defaultDateFormat);
       }
@@ -365,8 +365,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       if (placeholder) {
         return placeholder;
       }
-      var _this$getSafeState5 = _this.getSafeState(),
-        l10n = _this$getSafeState5.l10n;
+      var l10n = _this.state.l10n;
       return l10n.formatDate(_internal.placeholderDatetime);
     });
     _this.state = {
@@ -408,14 +407,13 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         locale = _this$props3.locale,
         testId = _this$props3.testId,
         weekStartDay = _this$props3.weekStartDay;
-      var _this$getSafeState6 = this.getSafeState(),
-        value = _this$getSafeState6.value,
-        calendarValue = _this$getSafeState6.calendarValue,
-        isOpen = _this$getSafeState6.isOpen,
-        selectInputValue = _this$getSafeState6.selectInputValue;
+      var _this$state = this.state,
+        calendarValue = _this$state.calendarValue,
+        selectInputValue = _this$state.selectInputValue;
+      var value = this.getValue();
       var actualSelectInputValue;
       actualSelectInputValue = selectInputValue;
-      var menuIsOpen = isOpen && !isDisabled;
+      var menuIsOpen = this.getIsOpen() && !isDisabled;
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
       var SingleValue = (0, _singleValue.makeSingleValue)({