feat(react): remove unsafe lifecycle methods from DataTable and DatePicker

packages/react/src/components/DataTable/DataTable.js

@@ -152,25 +152,29 @@ export default class DataTable extends React.Component {
     this.instanceId = getInstanceId();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
+    if (prevProps === this.props) {
+      return;
+    }
+
+    const prevRowIds = prevProps.rows.map((row) => row.id);
     const rowIds = this.props.rows.map((row) => row.id);
-    const nextRowIds = nextProps.rows.map((row) => row.id);
 
-    if (!isEqual(rowIds, nextRowIds)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevRowIds, rowIds)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
 
+    const prevHeaders = prevProps.headers.map((header) => header.key);
     const headers = this.props.headers.map((header) => header.key);
-    const nextHeaders = nextProps.headers.map((header) => header.key);
 
-    if (!isEqual(headers, nextHeaders)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevHeaders, headers)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
 
-    if (!isEqual(this.props.rows, nextProps.rows)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevProps.rows, this.props.rows)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
   }
@@ -331,6 +335,7 @@ export default class DataTable extends React.Component {
       checked || indeterminate
         ? translationKeys.unselectAll
         : translationKeys.selectAll;
+
     return {
       ...rest,
       ariaLabel: t(translationKey),

packages/react/src/components/DataTable/__tests__/DataTable-test.js

@@ -651,7 +651,7 @@ describe('DataTable', () => {
     });
   });
 
-  describe('componentWillReceiveProps', () => {
+  describe('componentDidUpdate', () => {
     let mockProps;
 
     beforeEach(() => {
@@ -756,7 +756,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.length).toBe(nextRows.length);
       expect(nextArgs.rows.map((row) => row.id)).toEqual(['b', 'a', 'c', 'd']);
     });
@@ -783,7 +783,7 @@ describe('DataTable', () => {
 
       wrapper.setProps(nextProps);
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.headers).toEqual(nextProps.headers);
     });
 
@@ -802,6 +802,7 @@ describe('DataTable', () => {
       ];
 
       wrapper.setProps({ rows: nextRows });
+      wrapper.update();
 
       expect(getSelectAll(wrapper).prop('checked')).toBe(false);
       const { getBatchActionProps, selectedRows } = getLastCallFor(
@@ -843,7 +844,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.map((row) => row.id)).toEqual(['c', 'a', 'b']);
     });
 
@@ -862,7 +863,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.map((row) => row.cells[0].value)).toEqual([
         'Field 2:A!',
         'Field 1:A!',

packages/react/src/components/DatePicker/DatePicker.js

@@ -307,19 +307,6 @@ export default class DatePicker extends Component {
     locale: 'en',
   };
 
-  UNSAFE_componentWillUpdate(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      if (this.cal) {
-        this.cal.setDate(nextProps.value);
-        this.updateClassNames(this.cal);
-      } else {
-        if (this.inputField) {
-          this.inputField.value = nextProps.value;
-        }
-      }
-    }
-  }
-
   componentDidMount() {
     const {
       appendTo,
@@ -392,8 +379,9 @@ export default class DatePicker extends Component {
     dateFormat: prevDateFormat,
     minDate: prevMinDate,
     maxDate: prevMaxDate,
+    value: prevValue,
   }) {
-    const { dateFormat, minDate, maxDate } = this.props;
+    const { dateFormat, minDate, maxDate, value } = this.props;
     if (this.cal) {
       if (prevDateFormat !== dateFormat) {
         this.cal.set({ dateFormat });
@@ -405,6 +393,17 @@ export default class DatePicker extends Component {
         this.cal.set('maxDate', maxDate);
       }
     }
+
+    // Coordinate when the given `value` prop changes. When this happens, we
+    // should update the calendar to the new value.
+    if (prevValue !== value) {
+      if (this.cal) {
+        this.cal.setDate(this.props.value);
+        this.updateClassNames(this.cal);
+      } else if (this.inputField) {
+        this.inputField.value = this.props.value;
+      }
+    }
   }
 
   componentWillUnmount() {