@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/DataTable/DataTable.js

@@ -59,8 +59,8 @@ const defaultTranslations = {
   [translationKeys.selectRow]: 'Select row',
   [translationKeys.unselectRow]: 'Unselect row'
 };
-
 const translateWithId = id => defaultTranslations[id];
+
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -71,15 +71,11 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-
-
 class DataTable extends React__default.Component {
   constructor(_props) {
     var _this;
-
     super(_props);
     _this = this;
-
     _defineProperty(this, "getHeaderProps", _ref => {
       let {
         header,
@@ -91,7 +87,8 @@ class DataTable extends React__default.Component {
         sortDirection,
         sortHeaderKey
       } = this.state;
-      return { ...rest,
+      return {
+        ...rest,
         key: header.key,
         sortDirection,
         isSortable,
@@ -109,7 +106,6 @@ class DataTable extends React__default.Component {
         }
       };
     });
-
     _defineProperty(this, "getExpandHeaderProps", function () {
       let {
         onClick,
@@ -126,7 +122,8 @@ class DataTable extends React__default.Component {
       } = _this.state;
       const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
       const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
-      return { ...rest,
+      return {
+        ...rest,
         ariaLabel: t(translationKey),
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
@@ -136,15 +133,12 @@ class DataTable extends React__default.Component {
         }) : null])
       };
     });
-
     _defineProperty(this, "handleOnHeaderClick", (onClick, sortParams) => {
       return e => onClick(e, sortParams);
     });
-
     _defineProperty(this, "handleOnExpandHeaderClick", (onClick, expandParams) => {
       return e => onClick(e, expandParams);
     });
-
     _defineProperty(this, "getRowProps", _ref2 => {
       let {
         row,
@@ -155,7 +149,8 @@ class DataTable extends React__default.Component {
         translateWithId: t
       } = this.props;
       const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
-      return { ...rest,
+      return {
+        ...rest,
         key: row.id,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
@@ -166,7 +161,6 @@ class DataTable extends React__default.Component {
         disabled: row.disabled
       };
     });
-
     _defineProperty(this, "getSelectionProps", function () {
       let {
         onClick,
@@ -175,11 +169,13 @@ class DataTable extends React__default.Component {
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         translateWithId: t
-      } = _this.props; // If we're given a row, return the selection state values for that row
+      } = _this.props;
 
+      // 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,
+        return {
+          ...rest,
           checked: row.isSelected,
           onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
@@ -188,18 +184,17 @@ class DataTable extends React__default.Component {
           disabled: row.disabled,
           radio: _this.props.radio || null
         };
-      } // Otherwise, we're working on `TableSelectAll` which handles toggling the
-      // selection state of all rows.
-
+      }
 
+      // 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;
-      return { ...rest,
+      return {
+        ...rest,
         ariaLabel: t(translationKey),
         checked,
         id: `${_this.getTablePrefix()}__select-all`,
@@ -208,33 +203,30 @@ class DataTable extends React__default.Component {
         onSelect: composeEventHandlers([_this.handleSelectAll, onClick])
       };
     });
-
     _defineProperty(this, "getToolbarProps", function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         size
       } = _this.props;
       let isSmall = size === 'xs' || size === 'sm';
-      return { ...props,
+      return {
+        ...props,
         size: isSmall ? 'sm' : undefined
       };
     });
-
     _defineProperty(this, "getBatchActionProps", function () {
       let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         shouldShowBatchActions
       } = _this.state;
-
       const totalSelected = _this.getSelectedRows().length;
-
-      return { ...props,
+      return {
+        ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
         totalSelected,
         onCancel: _this.handleOnCancel
       };
     });
-
     _defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
@@ -253,7 +245,6 @@ class DataTable extends React__default.Component {
         overflowMenuOnHover
       };
     });
-
     _defineProperty(this, "getTableContainerProps", () => {
       const {
         stickyHeader,
@@ -264,12 +255,10 @@ class DataTable extends React__default.Component {
         useStaticWidth
       };
     });
-
     _defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
       const row = this.state.rowsById[id];
       return row.isSelected && !row.disabled;
     }));
-
     _defineProperty(this, "getFilteredRowIds", () => {
       const filteredRowIds = typeof this.state.filterInputValue === 'string' ? this.props.filterRows({
         rowIds: this.state.rowIds,
@@ -278,31 +267,30 @@ class DataTable extends React__default.Component {
         inputValue: this.state.filterInputValue,
         getCellId
       }) : this.state.rowIds;
-
       if (filteredRowIds.length == 0) {
         return [];
       }
-
       return filteredRowIds;
     });
-
     _defineProperty(this, "getTablePrefix", () => `data-table-${this.instanceId}`);
-
     _defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
       const {
         rowIds
       } = initialState;
+      const isFiltered = rowIds.length != filteredRowIds.length;
       return {
-        rowsById: rowIds.reduce((acc, id) => ({ ...acc,
-          [id]: { ...initialState.rowsById[id],
-            ...(!initialState.rowsById[id].disabled && {
-              isSelected: filteredRowIds.includes(id) && isSelected
-            })
+        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;
+        }, {})
       };
     });
-
     _defineProperty(this, "handleOnCancel", () => {
       this.setState(state => {
         return {
@@ -311,7 +299,6 @@ class DataTable extends React__default.Component {
         };
       });
     });
-
     _defineProperty(this, "handleSelectAll", () => {
       this.setState(state => {
         const filteredRowIds = this.getFilteredRowIds();
@@ -325,11 +312,9 @@ class DataTable extends React__default.Component {
         };
       });
     });
-
     _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) => {
@@ -340,16 +325,17 @@ class DataTable extends React__default.Component {
           }, {});
           return {
             shouldShowBatchActions: false,
-            rowsById: { ...rowsById,
-              [rowId]: { ...row,
+            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 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
@@ -357,15 +343,16 @@ class DataTable extends React__default.Component {
           // have a non-zero number of selected rows that batch actions could
           // still apply to
           shouldShowBatchActions: !row.isSelected || selectedRowsCount > 0,
-          rowsById: { ...state.rowsById,
-            [rowId]: { ...row,
+          rowsById: {
+            ...state.rowsById,
+            [rowId]: {
+              ...row,
               isSelected: !row.isSelected
             }
           }
         };
       });
     });
-
     _defineProperty(this, "handleOnExpandRow", rowId => () => {
       this.setState(state => {
         const row = state.rowsById[rowId];
@@ -374,15 +361,16 @@ class DataTable extends React__default.Component {
         } = state;
         return {
           isExpandedAll: row.isExpanded ? false : isExpandedAll,
-          rowsById: { ...state.rowsById,
-            [rowId]: { ...row,
+          rowsById: {
+            ...state.rowsById,
+            [rowId]: {
+              ...row,
               isExpanded: !row.isExpanded
             }
           }
         };
       });
     });
-
     _defineProperty(this, "handleOnExpandAll", () => {
       this.setState(state => {
         const {
@@ -391,69 +379,64 @@ class DataTable extends React__default.Component {
         } = state;
         return {
           isExpandedAll: !isExpandedAll,
-          rowsById: rowIds.reduce((acc, id) => ({ ...acc,
-            [id]: { ...state.rowsById[id],
+          rowsById: rowIds.reduce((acc, id) => ({
+            ...acc,
+            [id]: {
+              ...state.rowsById[id],
               isExpanded: !isExpandedAll
             }
           }), {})
         };
       });
     });
-
     _defineProperty(this, "handleSortBy", headerKey => () => {
       this.setState(state => getNextSortState(this.props, state, {
         key: headerKey
       }));
     });
-
     _defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
         this.setState({
           filterInputValue: event.target.value
         });
       }
-
       if (defaultValue) {
         this.setState({
           filterInputValue: defaultValue
         });
       }
     });
-
-    this.state = { ...getDerivedStateFromProps(_props, {}),
+    this.state = {
+      ...getDerivedStateFromProps(_props, {}),
       isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
-
     };
-    this.instanceId = getInstanceId();
-  } // if state needs to be updated then wait for only update after state is finished
 
+    this.instanceId = getInstanceId();
+  }
 
+  // if state needs to be updated then wait for only update after state is finished
   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;
   }
+
   /**
    * Get the props associated with the given header. Mostly used for adding in
    * sorting behavior.
@@ -465,6 +448,123 @@ class DataTable extends React__default.Component {
    * @returns {object}
    */
 
+  /**
+   * Get the props associated with the given expand header.
+   *
+   * @param {object} config
+   * @param {Function} config.onClick a custom click handler for the expand header
+   * @param {Function} config.onExpand a custom click handler called when header is expanded
+   * @returns {object}
+   */
+
+  /**
+   * Decorate consumer's `onClick` event handler with sort parameters
+   *
+   * @param {Function} onClick
+   * @param {object} sortParams
+   * @returns {Function}
+   */
+
+  /**
+   * Decorate consumer's `onClick` event handler with sort parameters
+   *
+   * @param {Function} onClick
+   * @param {object} expandParams
+   * @returns {Function}
+   */
+
+  /**
+   * Get the props associated with the given row. Mostly used for expansion.
+   *
+   * @param {object} config
+   * @param {object} config.row the row we want the props for
+   * @param {Function} config.onClick a custom click handler for the header
+   * @returns {object}
+   */
+
+  /**
+   * 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.
+   *
+   * @param {object} [row] an optional row that we want to access the props for
+   * @param {Function} row.onClick
+   * @param {object} row.row
+   * @returns {object}
+   */
+
+  /**
+   * Helper utility to get the Table Props.
+   */
+
+  /**
+   * Helper utility to get the TableContainer Props.
+   */
+
+  /**
+   * Helper utility to get all the currently selected rows
+   * @returns {Array<string>} the array of rowIds that are currently selected
+   */
+
+  /**
+   * Helper utility to get all of the available rows after applying the filter
+   * @returns {Array<string>} the array of rowIds that are currently included through the filter
+   *  */
+
+  /**
+   * Helper for getting the table prefix for elements that require an
+   * `id` attribute that is unique.
+   *
+   * @returns {string}
+   */
+
+  /**
+   * Helper for toggling all selected items in a state. Does not call
+   * setState, so use it when setting state.
+   * @param {object} initialState
+   * @returns {object} object to put into this.setState (use spread operator)
+   */
+
+  /**
+   * Handler for the `onCancel` event to hide the batch action bar and
+   * deselect all selected rows
+   */
+
+  /**
+   * Handler for toggling the selection state of all rows in the database
+   */
+
+  /**
+   * Handler for toggling the selection state of a given row.
+   *
+   * @param {string} rowId
+   * @returns {Function}
+   */
+
+  /**
+   * Handler for toggling the expansion state of a given row.
+   *
+   * @param {string} rowId
+   * @returns {Function}
+   */
+
+  /**
+   * Handler for changing the expansion state of all rows.
+   */
+
+  /**
+   * Handler for transitioning to the next sort state of the table
+   *
+   * @param {string} headerKey the field for the header that we are sorting by
+   * @returns {Function}
+   */
+
+  /**
+   * Event handler for transitioning input value state changes for the table
+   * filter component.
+   *
+   * @param {Event} event
+   */
 
   render() {
     // eslint-disable-next-line react/prop-types
@@ -511,27 +611,21 @@ class DataTable extends React__default.Component {
       expandAll: this.handleOnExpandAll,
       radio: this.props.radio
     };
-
     if (render !== undefined) {
       return render(renderProps);
     }
-
     if (children !== undefined) {
       return children(renderProps);
     }
-
     return null;
   }
-
 }
-
 _defineProperty(DataTable, "propTypes", {
   /**
    * Optional hook to manually control filtering of the rows from the
    * TableToolbarSearch component
    */
   filterRows: PropTypes.func,
-
   /**
    * The `headers` prop represents the order in which the headers should
    * appear in the table. We expect an array of objects to be passed in, where
@@ -542,27 +636,22 @@ _defineProperty(DataTable, "propTypes", {
     key: PropTypes.string.isRequired,
     header: PropTypes.node.isRequired
   })).isRequired,
-
   /**
    * Specify whether the table should be able to be sorted by its headers
    */
   isSortable: PropTypes.bool,
-
   /**
    * Provide a string for the current locale
    */
   locale: PropTypes.string,
-
   /**
    * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
    */
   overflowMenuOnHover: PropTypes.bool,
-
   /**
    * Specify whether the control should be a radio button or inline checkbox
    */
   radio: PropTypes.bool,
-
   /**
    * The `rows` prop is where you provide us with a list of all the rows that
    * you want to render in the table. The only hard requirement is that this
@@ -575,41 +664,34 @@ _defineProperty(DataTable, "propTypes", {
     isSelected: PropTypes.bool,
     isExpanded: PropTypes.bool
   })).isRequired,
-
   /**
    *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
   /**
    * Optional hook to manually control sorting of the rows.
    */
   sortRow: PropTypes.func,
-
   /**
    * Specify whether the header should be sticky.
    * Still experimental: may not work with every combination of table props
    */
   stickyHeader: PropTypes.bool,
-
   /**
    * Optional method that takes in a message id and returns an
    * internationalized string. See `DataTable.translationKeys` for all
    * available message ids.
    */
   translateWithId: PropTypes.func,
-
   /**
    * `false` If true, will use a width of 'auto' instead of 100%
    */
   useStaticWidth: PropTypes.bool,
-
   /**
    * `true` to add useZebraStyles striping.
    */
   useZebraStyles: PropTypes.bool
 });
-
 _defineProperty(DataTable, "defaultProps", {
   sortRow: defaultSortRow,
   filterRows: defaultFilterRows,
@@ -618,9 +700,7 @@ _defineProperty(DataTable, "defaultProps", {
   overflowMenuOnHover: true,
   translateWithId
 });
-
 _defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
-
 DataTable.Table = Table;
 DataTable.TableActionList = TableActionList;
 DataTable.TableBatchAction = TableBatchAction;

package/es/components/DataTable/Table.js

@@ -55,32 +55,26 @@ Table.propTypes = {
    */
   children: PropTypes.node,
   className: PropTypes.string,
-
   /**
    * `false` If true, will apply sorting styles
    */
   isSortable: PropTypes.bool,
-
   /**
    * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
    */
   overflowMenuOnHover: PropTypes.bool,
-
   /**
    *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-
   /**
    * `false` If true, will keep the header sticky (only data rows will scroll)
    */
   stickyHeader: PropTypes.bool,
-
   /**
    * `false` If true, will use a width of 'auto' instead of 100%
    */
   useStaticWidth: PropTypes.bool,
-
   /**
    * `true` to add useZebraStyles striping.
    */

package/es/components/DataTable/TableBatchAction.js

@@ -11,13 +11,11 @@ import { AddFilled } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
 
 const TableBatchAction = props => /*#__PURE__*/React__default.createElement(Button, props);
-
 TableBatchAction.propTypes = {
   /**
    * Specify if the button is an icon-only button
    */
   hasIconOnly: PropTypes.bool,
-
   /**
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
@@ -26,10 +24,8 @@ TableBatchAction.propTypes = {
     if (props.renderIcon && !props.children && !props.iconDescription) {
       return new Error('renderIcon property specified without also providing an iconDescription property.');
     }
-
     return undefined;
   },
-
   /**
    * Optional function to render your own icon in the underlying button
    */