@carbon/react 1.85.1 → 1.86.0-rc.0

package/es/components/DataTable/DataTable.js

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import isEqual from 'react-fast-compare';
 import getDerivedStateFromProps from './state/getDerivedStateFromProps.js';
 import { getNextSortState } from './state/sorting.js';
@@ -51,6 +50,9 @@ const translationKeys = {
   unselectRow: 'carbon.table.row.unselect'
 };
 
+// TODO: All code comments in this file should be revisited for accuracy and
+// clarity.
+
 /**
  * Message ids that will be passed to translateWithId().
  */
@@ -76,557 +78,544 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-class DataTable extends Component {
-  constructor(_props) {
-    super(_props);
-    _defineProperty(this, "instanceId", void 0);
-    // TODO: Replace with a `type` when this component is converted to a
-    // functional component.
-    _defineProperty(this, "rp", void 0);
-    /**
-     * Get the props associated with the given header. Mostly used for adding in
-     * sorting behavior.
-     */
-    _defineProperty(this, "getHeaderProps", ({
-      header,
-      onClick,
-      isSortable = this.props.isSortable,
-      ...rest
-    }) => {
-      const {
-        sortDirection,
-        sortHeaderKey
-      } = this.state;
-      return {
-        ...rest,
-        key: header.key,
-        sortDirection,
-        isSortable,
-        isSortHeader: sortHeaderKey === header.key,
-        slug: header.slug,
-        decorator: header.decorator,
-        onClick: event => {
-          const nextSortState = getNextSortState(this.props, this.state, {
-            key: header.key
-          });
-          this.setState(nextSortState, () => {
-            onClick && this.handleOnHeaderClick(onClick, {
-              sortHeaderKey: header.key,
-              sortDirection: nextSortState.sortDirection
-            })(event);
-          });
-        }
-      };
-    });
-    /**
-     * Get the props associated with the given expand header.
-     */
-    _defineProperty(this, "getExpandHeaderProps", ({
-      onClick,
-      onExpand,
-      ...rest
-    } = {}) => {
-      const {
-        translateWithId: t = translateWithId
-      } = this.props;
-      const {
-        isExpandedAll,
-        rowIds,
-        rowsById
-      } = this.state;
-      const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
-      const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
-      return {
-        ...rest,
-        'aria-label': t(translationKey),
-        // Provide a string of all the expanded row id's, separated by a space.
-        'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
-        isExpanded,
-        // Compose the event handlers so we don't overwrite a consumer's `onClick`
-        // handler
-        onExpand: composeEventHandlers([this.handleOnExpandAll, onExpand, onClick && this.handleOnExpandHeaderClick(onClick, {
-          isExpanded
-        })])
-      };
-    });
-    /**
-     * Decorate consumer's `onClick` event handler with sort parameters
-     */
-    _defineProperty(this, "handleOnHeaderClick", (onClick, sortParams) => {
-      return event => onClick(event, sortParams);
-    });
-    /**
-     * Decorate consumer's `onClick` event handler with expand parameters
-     */
-    _defineProperty(this, "handleOnExpandHeaderClick", (onClick, expandParams) => {
-      return event => onClick(event, expandParams);
-    });
-    /**
-     * Get the props associated with the given row. Mostly used for expansion.
-     */
-    _defineProperty(this, "getRowProps", ({
-      row,
-      onClick,
-      ...rest
-    }) => {
-      const {
-        translateWithId: t = translateWithId
-      } = this.props;
-      const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
+const DataTable = props => {
+  const {
+    children,
+    filterRows = defaultFilterRows,
+    headers,
+    render,
+    translateWithId: t = translateWithId,
+    size,
+    isSortable: isSortableProp,
+    useZebraStyles,
+    useStaticWidth,
+    stickyHeader,
+    overflowMenuOnHover,
+    experimentalAutoAlign,
+    radio,
+    rows
+  } = props;
+  const instanceId = useMemo(() => getInstanceId(), []);
+  const [state, setState] = useState(() => ({
+    ...getDerivedStateFromProps(props, {}),
+    isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
+  }));
+  useEffect(() => {
+    const nextRowIds = rows.map(row => row.id);
+    const nextHeaders = headers.map(header => header.key);
+    const hasRowIdsChanged = !isEqual(nextRowIds, state.rowIds);
+    const currentHeaders = Object.keys(state.cellsById).reduce((acc, cellId) => {
+      const headerKey = cellId.split(':')[1];
+      if (headerKey && !acc.includes(headerKey)) {
+        acc.push(headerKey);
+      }
+      return acc;
+    }, []);
+    const hasHeadersChanged = !isEqual(nextHeaders, currentHeaders);
+    const currentRows = state.rowIds.map(id => {
+      const row = state.rowsById[id];
       return {
-        ...rest,
-        key: row.id,
-        onClick,
-        // Compose the event handlers so we don't overwrite a consumer's `onClick`
-        // handler
-        onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
+        // TODO: Investigate whether it be okay to just return `row`.
+        id: row.id,
+        disabled: row.disabled,
         isExpanded: row.isExpanded,
-        'aria-label': t(translationKey),
-        'aria-controls': `expanded-row-${row.id}`,
-        isSelected: row.isSelected,
-        disabled: row.disabled
+        isSelected: row.isSelected
       };
     });
-    /**
-     * Get the props associated with an expanded row
-     */
-    _defineProperty(this, "getExpandedRowProps", ({
-      row,
-      ...rest
-    }) => {
-      return {
-        ...rest,
-        id: `expanded-row-${row.id}`
-      };
-    });
-    /**
-     * Gets the props associated with selection for a header or a row, where
-     * applicable. Most often used to indicate selection status of the table or
-     * for a specific row.
-     */
-    _defineProperty(this, "getSelectionProps", ({
-      onClick,
-      row,
-      ...rest
-    } = {}) => {
-      const {
-        translateWithId: t = translateWithId
-      } = this.props;
+    const hasRowsChanged = !isEqual(rows, currentRows);
+    if (hasRowIdsChanged || hasHeadersChanged || hasRowsChanged) {
+      setState(prev => getDerivedStateFromProps(props, prev));
+    }
+  }, [headers, rows]);
 
-      // If we're given a row, return the selection state values for that row
-      if (row) {
-        const translationKey = row.isSelected ? translationKeys.unselectRow : translationKeys.selectRow;
-        return {
-          ...rest,
-          checked: row.isSelected,
-          onSelect: composeEventHandlers([this.handleOnSelectRow(row.id), onClick]),
-          id: `${this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${this.instanceId}`,
-          'aria-label': t(translationKey),
-          disabled: row.disabled,
-          radio: this.props.radio
-        };
+  /**
+   * Get the props associated with the given header. Mostly used for adding in
+   * sorting behavior.
+   */
+  const getHeaderProps = ({
+    header,
+    onClick,
+    isSortable = isSortableProp,
+    ...rest
+  }) => {
+    const {
+      sortDirection,
+      sortHeaderKey
+    } = state;
+    return {
+      ...rest,
+      key: header.key,
+      sortDirection,
+      isSortable,
+      isSortHeader: sortHeaderKey === header.key,
+      slug: header.slug,
+      decorator: header.decorator,
+      onClick: event => {
+        const nextSortState = getNextSortState(props, state, {
+          key: header.key
+        });
+        setState(prev => ({
+          ...prev,
+          ...nextSortState
+        }));
+        onClick && handleOnHeaderClick(onClick, {
+          sortHeaderKey: header.key,
+          sortDirection: nextSortState.sortDirection
+        })(event);
       }
+    };
+  };
+
+  /**
+   * Get the props associated with the given expand header.
+   */
+  const getExpandHeaderProps = ({
+    onClick,
+    onExpand,
+    ...rest
+  } = {}) => {
+    const {
+      isExpandedAll,
+      rowIds,
+      rowsById
+    } = state;
+    const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
+    const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
+    return {
+      ...rest,
+      'aria-label': t(translationKey),
+      // Provide a string of all the expanded row id's, separated by a space.
+      'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
+      isExpanded,
+      // Compose the event handlers so we don't overwrite a consumer's `onClick`
+      // handler
+      onExpand: composeEventHandlers([handleOnExpandAll, onExpand,
+      // TODO: Avoid passing `false` to this function.
+      onClick && handleOnExpandHeaderClick(onClick, {
+        isExpanded
+      })])
+    };
+  };
+
+  /**
+   * Decorate consumer's `onClick` event handler with sort parameters
+   */
+  const handleOnHeaderClick = (onClick, sortParams) => {
+    return event => onClick(event, sortParams);
+  };
 
-      // Otherwise, we're working on `TableSelectAll` which handles toggling the
-      // selection state of all rows.
-      const rowCount = this.state.rowIds.length;
-      const selectedRowCount = this.getSelectedRows().length;
-      const checked = rowCount > 0 && selectedRowCount === rowCount;
-      const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
-      const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
+  /**
+   * Decorate consumer's `onClick` event handler with expand parameters
+   */
+  const handleOnExpandHeaderClick = (onClick, expandParams) => {
+    return event => onClick(event, expandParams);
+  };
+
+  /**
+   * Get the props associated with the given row. Mostly used for expansion.
+   */
+  const getRowProps = ({
+    row,
+    onClick,
+    ...rest
+  }) => {
+    const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
+    return {
+      ...rest,
+      key: row.id,
+      onClick,
+      // Compose the event handlers so we don't overwrite a consumer's `onClick`
+      // handler
+      onExpand: composeEventHandlers([handleOnExpandRow(row.id), onClick]),
+      isExpanded: row.isExpanded,
+      'aria-label': t(translationKey),
+      'aria-controls': `expanded-row-${row.id}`,
+      isSelected: row.isSelected,
+      disabled: row.disabled
+    };
+  };
+
+  /**
+   * Get the props associated with an expanded row
+   */
+  const getExpandedRowProps = ({
+    row,
+    ...rest
+  }) => {
+    return {
+      ...rest,
+      id: `expanded-row-${row.id}`
+    };
+  };
+
+  /**
+   * Gets the props associated with selection for a header or a row, where
+   * applicable. Most often used to indicate selection status of the table or
+   * for a specific row.
+   */
+  const getSelectionProps = ({
+    onClick,
+    row,
+    ...rest
+  } = {}) => {
+    // If we're given a row, return the selection state values for that row
+    if (row) {
+      const translationKey = row.isSelected ? translationKeys.unselectRow : translationKeys.selectRow;
       return {
         ...rest,
+        checked: row.isSelected,
+        onSelect: composeEventHandlers([handleOnSelectRow(row.id), onClick]),
+        id: `${getTablePrefix()}__select-row-${row.id}`,
+        name: `select-row-${instanceId}`,
         'aria-label': t(translationKey),
-        checked,
-        id: `${this.getTablePrefix()}__select-all`,
-        indeterminate,
-        name: `select-all-${this.instanceId}`,
-        onSelect: composeEventHandlers([this.handleSelectAll, onClick])
-      };
-    });
-    _defineProperty(this, "getToolbarProps", props => {
-      const {
-        size
-      } = this.props;
-      const isSmall = size === 'xs' || size === 'sm';
-      return {
-        ...props,
-        size: isSmall ? 'sm' : undefined
-      };
-    });
-    _defineProperty(this, "getBatchActionProps", props => {
-      const {
-        shouldShowBatchActions
-      } = this.state;
-      const totalSelected = this.getSelectedRows().length;
-      return {
-        onSelectAll: undefined,
-        totalCount: this.state.rowIds.length || 0,
-        ...props,
-        shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
-        totalSelected,
-        onCancel: this.handleOnCancel
-      };
-    });
-    _defineProperty(this, "getTableProps", () => {
-      const {
-        useZebraStyles,
-        size = 'lg',
-        isSortable,
-        useStaticWidth,
-        stickyHeader,
-        overflowMenuOnHover = false,
-        experimentalAutoAlign
-      } = this.props;
-      return {
-        useZebraStyles,
-        size,
-        isSortable,
-        useStaticWidth,
-        stickyHeader,
-        overflowMenuOnHover,
-        experimentalAutoAlign
-      };
-    });
-    _defineProperty(this, "getTableContainerProps", () => {
-      const {
-        stickyHeader,
-        useStaticWidth
-      } = this.props;
-      return {
-        stickyHeader,
-        useStaticWidth
+        disabled: row.disabled,
+        radio
       };
-    });
-    // TODO: `getHeaderProps` and `getRowProps` return `key` props. Would it be
-    // beneficial for this function to also return a `key` prop?
-    /**
-     * Get the props associated with the given table cell.
-     */
-    _defineProperty(this, "getCellProps", ({
-      cell: {
-        hasAILabelHeader,
-        hasDecoratorHeader
-      },
-      ...rest
-    }) => {
+    }
+
+    // Otherwise, we're working on `TableSelectAll` which handles toggling the
+    // selection state of all rows.
+    const rowCount = state.rowIds.length;
+    const selectedRowCount = getSelectedRows().length;
+    const checked = rowCount > 0 && selectedRowCount === rowCount;
+    const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
+    const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
+    return {
+      ...rest,
+      'aria-label': t(translationKey),
+      checked,
+      id: `${getTablePrefix()}__select-all`,
+      indeterminate,
+      name: `select-all-${instanceId}`,
+      onSelect: composeEventHandlers([handleSelectAll, onClick])
+    };
+  };
+  const getToolbarProps = props => {
+    const isSmall = size === 'xs' || size === 'sm';
+    return {
+      ...props,
+      size: isSmall ? 'sm' : undefined
+    };
+  };
+  const getBatchActionProps = props => {
+    const {
+      shouldShowBatchActions
+    } = state;
+    const totalSelected = getSelectedRows().length;
+    return {
+      onSelectAll: undefined,
+      totalCount: state.rowIds.length || 0,
+      ...props,
+      shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
+      totalSelected,
+      onCancel: handleOnCancel
+    };
+  };
+  const getTableProps = () => {
+    return {
+      useZebraStyles,
+      size: size ?? 'lg',
+      isSortable: isSortableProp,
+      useStaticWidth,
+      stickyHeader,
+      overflowMenuOnHover: overflowMenuOnHover ?? false,
+      experimentalAutoAlign
+    };
+  };
+  const getTableContainerProps = () => {
+    return {
+      stickyHeader,
+      useStaticWidth
+    };
+  };
+
+  // TODO: `getHeaderProps` and `getRowProps` return `key` props. Would it be
+  // beneficial for this function to also return a `key` prop?
+  /**
+   * Get the props associated with the given table cell.
+   */
+  const getCellProps = ({
+    cell: {
+      hasAILabelHeader,
+      hasDecoratorHeader
+    },
+    ...rest
+  }) => {
+    return {
+      ...rest,
+      hasAILabelHeader,
+      hasDecoratorHeader
+    };
+  };
+
+  /**
+   * Helper utility to get all the currently selected rows
+   *
+   * @returns the array of rowIds that are currently selected
+   */
+  const getSelectedRows = () => state.rowIds.filter(id => {
+    const row = state.rowsById[id];
+    return row.isSelected && !row.disabled;
+  });
+
+  /**
+   * Helper utility to get all of the available rows after applying the filter
+   *
+   * @returns the array of rowIds that are currently included through the filter
+   */
+  const getFilteredRowIds = () => {
+    const filteredRowIds = typeof state.filterInputValue === 'string' ? filterRows({
+      rowIds: state.rowIds,
+      headers: headers,
+      cellsById: state.cellsById,
+      inputValue: state.filterInputValue,
+      getCellId
+    }) : state.rowIds;
+    // TODO: Use strict equality check.
+    if (filteredRowIds.length == 0) {
+      return [];
+    }
+    return filteredRowIds;
+  };
+
+  /**
+   * Helper for getting the table prefix for elements that require an
+   * `id` attribute that is unique.
+   */
+  const getTablePrefix = () => `data-table-${instanceId}`;
+
+  /**
+   * Helper for toggling all selected items in a state. Does not call
+   * setState, so use it when setting state.
+   *
+   * @returns object to put into this.setState (use spread operator)
+   */
+  const setAllSelectedState = (initialState, isSelected, filteredRowIds) => {
+    const {
+      rowIds
+    } = initialState;
+    // TODO: Use strict inequality check.
+    const isFiltered = rowIds.length != filteredRowIds.length;
+    return {
+      // TODO: Should the `reduce` be typed with `<Record<string,
+      // DataTableRow<ColTypes>>>`?
+      rowsById: rowIds.reduce((acc, id) => {
+        const row = {
+          ...initialState.rowsById[id]
+        };
+        if (!row.disabled && (!isFiltered || filteredRowIds.includes(id))) {
+          row.isSelected = isSelected;
+        }
+        acc[id] = row; // Local mutation for performance with large tables
+        return acc;
+      }, {})
+    };
+  };
+
+  /**
+   * Handler for the `onCancel` event to hide the batch action bar and
+   * deselect all selected rows
+   */
+  const handleOnCancel = () => {
+    setState(prev => {
       return {
-        ...rest,
-        hasAILabelHeader,
-        hasDecoratorHeader
+        ...prev,
+        shouldShowBatchActions: false,
+        ...setAllSelectedState(prev, false, getFilteredRowIds())
       };
     });
-    /**
-     * Helper utility to get all the currently selected rows
-     *
-     * @returns the array of rowIds that are currently selected
-     */
-    _defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
-      const row = this.state.rowsById[id];
-      return row.isSelected && !row.disabled;
-    }));
-    /**
-     * Helper utility to get all of the available rows after applying the filter
-     *
-     * @returns the array of rowIds that are currently included through the filter
-     */
-    _defineProperty(this, "getFilteredRowIds", () => {
-      const {
-        filterRows = defaultFilterRows
-      } = this.props;
-      const filteredRowIds = typeof this.state.filterInputValue === 'string' ? filterRows({
-        rowIds: this.state.rowIds,
-        headers: this.props.headers,
-        cellsById: this.state.cellsById,
-        inputValue: this.state.filterInputValue,
-        getCellId
-      }) : this.state.rowIds;
-      if (filteredRowIds.length == 0) {
-        return [];
-      }
-      return filteredRowIds;
-    });
-    /**
-     * Helper for getting the table prefix for elements that require an
-     * `id` attribute that is unique.
-     */
-    _defineProperty(this, "getTablePrefix", () => `data-table-${this.instanceId}`);
-    /**
-     * Helper for toggling all selected items in a state. Does not call
-     * setState, so use it when setting state.
-     *
-     * @returns object to put into this.setState (use spread operator)
-     */
-    _defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
+  };
+
+  /**
+   * Handler for toggling the selection state of all rows in the database
+   */
+  const handleSelectAll = () => {
+    setState(prev => {
+      const filteredRowIds = getFilteredRowIds();
       const {
-        rowIds
-      } = initialState;
-      const isFiltered = rowIds.length != filteredRowIds.length;
+        rowsById
+      } = prev;
+      const isSelected = !(Object.values(rowsById).filter(row => row.isSelected && !row.disabled).length > 0);
       return {
-        rowsById: rowIds.reduce((acc, id) => {
-          const row = {
-            ...initialState.rowsById[id]
-          };
-          if (!row.disabled && (!isFiltered || filteredRowIds.includes(id))) {
-            row.isSelected = isSelected;
-          }
-          acc[id] = row; // Local mutation for performance with large tables
-          return acc;
-        }, {})
+        ...prev,
+        shouldShowBatchActions: isSelected,
+        ...setAllSelectedState(prev, isSelected, filteredRowIds)
       };
     });
-    /**
-     * Handler for the `onCancel` event to hide the batch action bar and
-     * deselect all selected rows
-     */
-    _defineProperty(this, "handleOnCancel", () => {
-      this.setState(state => {
+  };
+
+  /**
+   * Handler for toggling the selection state of a given row.
+   */
+  const handleOnSelectRow = rowId => () => {
+    setState(prev => {
+      const row = prev.rowsById[rowId];
+      if (radio) {
+        // TODO:
+        // 1. Should the `reduce` be typed with `<Record<string,
+        // DataTableRow<ColTypes>>>`?
+        // 2. Add better parameter names. Use `acc` and `row`.
+        //
+        // deselect all radio buttons
+        const rowsById = Object.entries(prev.rowsById).reduce((p, c) => {
+          const [key, val] = c;
+          val.isSelected = false;
+          p[key] = val;
+          return p;
+        }, {});
         return {
+          ...prev,
           shouldShowBatchActions: false,
-          ...this.setAllSelectedState(state, false, this.getFilteredRowIds())
-        };
-      });
-    });
-    /**
-     * Handler for toggling the selection state of all rows in the database
-     */
-    _defineProperty(this, "handleSelectAll", () => {
-      this.setState(state => {
-        const filteredRowIds = this.getFilteredRowIds();
-        const {
-          rowsById
-        } = state;
-        const isSelected = !(Object.values(rowsById).filter(row => row.isSelected && !row.disabled).length > 0);
-        return {
-          shouldShowBatchActions: isSelected,
-          ...this.setAllSelectedState(state, isSelected, filteredRowIds)
-        };
-      });
-    });
-    /**
-     * Handler for toggling the selection state of a given row.
-     */
-    _defineProperty(this, "handleOnSelectRow", rowId => () => {
-      this.setState(state => {
-        const row = state.rowsById[rowId];
-        if (this.props.radio) {
-          // deselect all radio buttons
-          const rowsById = Object.entries(state.rowsById).reduce((p, c) => {
-            const [key, val] = c;
-            val.isSelected = false;
-            p[key] = val;
-            return p;
-          }, {});
-          return {
-            shouldShowBatchActions: false,
-            rowsById: {
-              ...rowsById,
-              [rowId]: {
-                ...row,
-                isSelected: !row.isSelected
-              }
-            }
-          };
-        }
-        const selectedRows = state.rowIds.filter(id => state.rowsById[id].isSelected).length;
-        // Predict the length of the selected rows after this change occurs
-        const selectedRowsCount = !row.isSelected ? selectedRows + 1 : selectedRows - 1;
-        return {
-          // Basic assumption here is that we want to show the batch action bar if
-          // the row is being selected. If it's being unselected, then see if we
-          // have a non-zero number of selected rows that batch actions could
-          // still apply to
-          shouldShowBatchActions: !row.isSelected || selectedRowsCount > 0,
           rowsById: {
-            ...state.rowsById,
+            ...rowsById,
             [rowId]: {
               ...row,
               isSelected: !row.isSelected
             }
           }
         };
-      });
-    });
-    /**
-     * Handler for toggling the expansion state of a given row.
-     */
-    _defineProperty(this, "handleOnExpandRow", rowId => () => {
-      this.setState(state => {
-        const row = state.rowsById[rowId];
-        const {
-          isExpandedAll
-        } = state;
-        return {
-          isExpandedAll: row.isExpanded ? false : isExpandedAll,
-          rowsById: {
-            ...state.rowsById,
-            [rowId]: {
-              ...row,
-              isExpanded: !row.isExpanded
-            }
+      }
+      const selectedRows = prev.rowIds.filter(id => prev.rowsById[id].isSelected).length;
+      // Predict the length of the selected rows after this change occurs
+      const selectedRowsCount = !row.isSelected ? selectedRows + 1 : selectedRows - 1;
+      return {
+        ...prev,
+        // Basic assumption here is that we want to show the batch action bar if
+        // the row is being selected. If it's being unselected, then see if we
+        // have a non-zero number of selected rows that batch actions could
+        // still apply to
+        shouldShowBatchActions: !row.isSelected || selectedRowsCount > 0,
+        rowsById: {
+          ...prev.rowsById,
+          [rowId]: {
+            ...row,
+            isSelected: !row.isSelected
           }
-        };
-      });
-    });
-    /**
-     * Handler for changing the expansion state of all rows.
-     */
-    _defineProperty(this, "handleOnExpandAll", () => {
-      this.setState(state => {
-        const {
-          rowIds,
-          isExpandedAll
-        } = state;
-        return {
-          isExpandedAll: !isExpandedAll,
-          rowsById: rowIds.reduce((acc, id) => ({
-            ...acc,
-            [id]: {
-              ...state.rowsById[id],
-              isExpanded: !isExpandedAll
-            }
-          }), {})
-        };
-      });
+        }
+      };
     });
-    /**
-     * Handler for transitioning to the next sort state of the table
-     *
-     * @param headerKey - The field for the header that we are sorting by.
-     */
-    _defineProperty(this, "handleSortBy", headerKey => () => {
-      this.setState(state => getNextSortState(this.props, state, {
-        key: headerKey
-      }));
+  };
+
+  /**
+   * Handler for toggling the expansion state of a given row.
+   */
+  const handleOnExpandRow = rowId => () => {
+    setState(prev => {
+      const row = prev.rowsById[rowId];
+      const {
+        isExpandedAll
+      } = prev;
+      return {
+        ...prev,
+        isExpandedAll: row.isExpanded ? false : isExpandedAll,
+        rowsById: {
+          ...prev.rowsById,
+          [rowId]: {
+            ...row,
+            isExpanded: !row.isExpanded
+          }
+        }
+      };
     });
-    /**
-     * Event handler for transitioning input value state changes for the table
-     * filter component.
-     */
-    _defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
-      if (event.target) {
-        this.setState({
-          filterInputValue: event.target.value
-        });
-      }
-      if (defaultValue) {
-        this.setState({
-          filterInputValue: defaultValue
-        });
-      }
+  };
+
+  /**
+   * Handler for changing the expansion state of all rows.
+   */
+  const handleOnExpandAll = () => {
+    setState(prev => {
+      const {
+        rowIds,
+        isExpandedAll
+      } = prev;
+      return {
+        ...prev,
+        isExpandedAll: !isExpandedAll,
+        // TODO: Add generic to `reduce`.
+        rowsById: rowIds.reduce((acc, id) => ({
+          ...acc,
+          [id]: {
+            ...prev.rowsById[id],
+            isExpanded: !isExpandedAll
+          }
+        }), {})
+      };
     });
-    this.state = {
-      ...getDerivedStateFromProps(_props, {}),
-      isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
-    };
-    this.instanceId = getInstanceId();
-  }
+  };
 
-  // If state needs to be updated, defer render until after the update completes.
-  shouldComponentUpdate(nextProps) {
-    if (this.props !== nextProps) {
-      const nextRowIds = nextProps.rows.map(row => row.id);
-      const rowIds = this.props.rows.map(row => row.id);
-      if (!isEqual(nextRowIds, rowIds)) {
-        this.setState(state => getDerivedStateFromProps(this.props, state));
-        return false;
-      }
-      const nextHeaders = nextProps.headers.map(header => header.key);
-      const headers = this.props.headers.map(header => header.key);
-      if (!isEqual(nextHeaders, headers)) {
-        this.setState(state => getDerivedStateFromProps(this.props, state));
-        return false;
-      }
-      if (!isEqual(nextProps.rows, this.props.rows)) {
-        this.setState(state => getDerivedStateFromProps(this.props, state));
-        return false;
-      }
-    }
-    return true;
-  }
-  render() {
-    const {
-      children,
-      filterRows = defaultFilterRows,
-      headers,
-      render
-    } = this.props;
-    const {
-      filterInputValue,
-      rowIds,
-      rowsById,
-      cellsById
-    } = this.state;
-    const filteredRowIds = typeof filterInputValue === 'string' ? filterRows({
-      rowIds,
-      headers,
-      cellsById,
-      inputValue: filterInputValue,
-      getCellId
-    }) : rowIds;
-    const renderProps = {
-      // Data derived from state
-      rows: denormalize(filteredRowIds, rowsById, cellsById),
-      headers: this.props.headers,
-      selectedRows: denormalize(this.getSelectedRows(), rowsById, cellsById),
-      // Prop accessors/getters
-      getHeaderProps: this.getHeaderProps,
-      getExpandHeaderProps: this.getExpandHeaderProps,
-      getRowProps: this.getRowProps,
-      getExpandedRowProps: this.getExpandedRowProps,
-      getSelectionProps: this.getSelectionProps,
-      getToolbarProps: this.getToolbarProps,
-      getBatchActionProps: this.getBatchActionProps,
-      getTableProps: this.getTableProps,
-      getTableContainerProps: this.getTableContainerProps,
-      getCellProps: this.getCellProps,
-      // Custom event handlers
-      onInputChange: this.handleOnInputValueChange,
-      // Expose internal state change actions
-      sortBy: headerKey => this.handleSortBy(headerKey)(),
-      selectAll: this.handleSelectAll,
-      selectRow: rowId => this.handleOnSelectRow(rowId)(),
-      expandRow: rowId => this.handleOnExpandRow(rowId)(),
-      expandAll: this.handleOnExpandAll,
-      radio: this.props.radio
-    };
-    if (typeof render !== 'undefined') {
-      return render(renderProps);
+  /**
+   * Handler for transitioning to the next sort state of the table
+   *
+   * @param headerKey - The field for the header that we are sorting by.
+   */
+  const handleSortBy = headerKey => () => {
+    setState(prev => getNextSortState(props, prev, {
+      key: headerKey
+    }));
+  };
+
+  /**
+   * Event handler for transitioning input value state changes for the table
+   * filter component.
+   */
+  const handleOnInputValueChange = (event, defaultValue) => {
+    if (event.target) {
+      setState(prev => ({
+        ...prev,
+        filterInputValue: event.target.value
+      }));
     }
-    if (typeof children !== 'undefined') {
-      return children(renderProps);
+    if (defaultValue) {
+      setState(prev => ({
+        ...prev,
+        filterInputValue: defaultValue
+      }));
     }
-    return null;
+  };
+
+  // TODO: Could getFilteredRowIds be used here?
+  const filteredRowIds = typeof state.filterInputValue === 'string' ? filterRows({
+    rowIds: state.rowIds,
+    headers,
+    cellsById: state.cellsById,
+    inputValue: state.filterInputValue,
+    getCellId
+  }) : state.rowIds;
+  const renderProps = {
+    // Data derived from state
+    rows: denormalize(filteredRowIds, state.rowsById, state.cellsById),
+    headers: headers,
+    selectedRows: denormalize(getSelectedRows(), state.rowsById, state.cellsById),
+    // Prop accessors/getters
+    getHeaderProps,
+    getExpandHeaderProps,
+    getRowProps,
+    getExpandedRowProps,
+    getSelectionProps,
+    getToolbarProps,
+    getBatchActionProps,
+    getTableProps,
+    getTableContainerProps,
+    getCellProps,
+    // Custom event handlers
+    onInputChange: handleOnInputValueChange,
+    // Expose internal state change actions
+    sortBy: headerKey => handleSortBy(headerKey)(),
+    selectAll: handleSelectAll,
+    selectRow: rowId => handleOnSelectRow(rowId)(),
+    expandRow: rowId => handleOnExpandRow(rowId)(),
+    expandAll: handleOnExpandAll,
+    radio: radio
+  };
+  if (typeof render !== 'undefined') {
+    return render(renderProps);
+  }
+  if (typeof children !== 'undefined') {
+    return children(renderProps);
   }
-}
-_defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
-// TODO: Delete these static properties when the components are converted to a
-// functional component.
-//
-// Static properties for sub-components
-_defineProperty(DataTable, "Table", void 0);
-_defineProperty(DataTable, "TableActionList", void 0);
-_defineProperty(DataTable, "TableBatchAction", void 0);
-_defineProperty(DataTable, "TableBatchActions", void 0);
-_defineProperty(DataTable, "TableBody", void 0);
-_defineProperty(DataTable, "TableCell", void 0);
-_defineProperty(DataTable, "TableContainer", void 0);
-_defineProperty(DataTable, "TableDecoratorRow", void 0);
-_defineProperty(DataTable, "TableExpandHeader", void 0);
-_defineProperty(DataTable, "TableExpandRow", void 0);
-_defineProperty(DataTable, "TableExpandedRow", void 0);
-_defineProperty(DataTable, "TableHead", void 0);
-_defineProperty(DataTable, "TableHeader", void 0);
-_defineProperty(DataTable, "TableRow", void 0);
-_defineProperty(DataTable, "TableSelectAll", void 0);
-_defineProperty(DataTable, "TableSelectRow", void 0);
-_defineProperty(DataTable, "TableSlugRow", void 0);
-_defineProperty(DataTable, "TableToolbar", void 0);
-_defineProperty(DataTable, "TableToolbarAction", void 0);
-_defineProperty(DataTable, "TableToolbarContent", void 0);
-_defineProperty(DataTable, "TableToolbarSearch", void 0);
-_defineProperty(DataTable, "TableToolbarMenu", void 0);
+  return null;
+};
+DataTable.translationKeys = Object.values(translationKeys);
 DataTable.Table = Table;
 DataTable.TableActionList = TableActionList;
 DataTable.TableBatchAction = TableBatchAction;
@@ -726,4 +715,4 @@ DataTable.propTypes = {
   useZebraStyles: PropTypes.bool
 };
 
-export { DataTable as default };
+export { DataTable };