@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/DataTable/state/getDerivedStateFromProps.js

@@ -15,7 +15,6 @@ import normalize from '../tools/normalize.js';
  * Currently, it's being used as a way to normalize the incoming data that we
  * are receiving for rows
  */
-
 const getDerivedStateFromProps = (props, prevState) => {
   const {
     rowIds,
@@ -36,20 +35,17 @@ const getDerivedStateFromProps = (props, prevState) => {
     // batch actions menu
     shouldShowBatchActions: prevState.shouldShowBatchActions || false
   };
-
   if (prevState.sortDirection && prevState.sortHeaderKey) {
     const {
       rowIds
     } = getSortedState(props, state, prevState.sortHeaderKey, prevState.sortDirection);
     state.rowIds = rowIds;
   }
-
   state.isExpandedAll = state.rowIds.every(id => {
     return state.rowsById[id].isExpanded === true;
   });
   return state;
 };
-
 var getDerivedStateFromProps$1 = getDerivedStateFromProps;
 
 export { getDerivedStateFromProps$1 as default };

package/es/components/DataTable/state/sorting.js

@@ -9,9 +9,10 @@ import { sortStates } from './sortStates.js';
 export { sortStates } from './sortStates.js';
 import { sortRows } from '../tools/sorting.js';
 
+// Our initialSortState should be `NONE`, unless a consumer has specified a
 // different initialSortState
-
 const initialSortState = sortStates.NONE;
+
 /**
  * Utility used to get the next sort state given the following pieces of
  * information:
@@ -21,7 +22,6 @@ const initialSortState = sortStates.NONE;
  * @param {string} prevState the previous sort state of the table
  * @returns {string}
  */
-
 const getNextSortDirection = (prevHeader, header, prevState) => {
   // If the previous header is equivalent to the current header, we know that we
   // have to derive the next sort state from the previous sort state
@@ -31,16 +31,13 @@ const getNextSortDirection = (prevHeader, header, prevState) => {
     if (prevState === 'NONE') {
       return sortStates.ASC;
     }
-
     if (prevState === 'ASC') {
       return sortStates.DESC;
     }
-
     return sortStates.NONE;
-  } // Otherwise, we have selected a new header and need to start off by sorting
+  }
+  // Otherwise, we have selected a new header and need to start off by sorting
   // in descending order by default
-
-
   return sortStates.ASC;
 };
 const getNextSortState = (props, state, _ref) => {
@@ -54,6 +51,7 @@ const getNextSortState = (props, state, _ref) => {
   const nextSortDirection = getNextSortDirection(key, sortHeaderKey, sortDirection);
   return getSortedState(props, state, key, nextSortDirection);
 };
+
 /**
  * Derive the set of sorted state fields from props and state for the given
  * header key and sortDirection
@@ -72,7 +70,6 @@ const getNextSortState = (props, state, _ref) => {
  * @param {string} sortDirection The sortState that we want to order by
  * @returns {object}
  */
-
 const getSortedState = (props, state, key, sortDirection) => {
   const {
     rowIds,

package/es/components/DataTable/tools/denormalize.js

@@ -20,11 +20,11 @@
  * @param {object} cellsById object containing lookups for cells by id
  */
 const denormalize = (rowIds, rowsById, cellsById) => {
-  return rowIds.map(id => ({ ...rowsById[id],
+  return rowIds.map(id => ({
+    ...rowsById[id],
     cells: rowsById[id].cells.map(cellId => cellsById[cellId])
   }));
 };
-
 var denormalize$1 = denormalize;
 
 export { denormalize$1 as default };

package/es/components/DataTable/tools/filter.js

@@ -32,11 +32,9 @@ const defaultFilterRows = _ref => {
       key
     } = _ref2;
     const id = getCellId(rowId, key);
-
     if (typeof cellsById[id].value === 'boolean') {
       return false;
     }
-
     return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
   }));
 };

package/es/components/DataTable/tools/instanceId.js

@@ -15,7 +15,6 @@ const setupGetInstanceId = () => {
     return ++instanceId;
   };
 };
-
 var setupGetInstanceId$1 = setupGetInstanceId;
 
 export { setupGetInstanceId$1 as default };

package/es/components/DataTable/tools/normalize.js

@@ -14,7 +14,6 @@ import { getCellId } from './cells.js';
  * @param {Array<object>} headers
  * @returns {object}
  */
-
 const normalize = function (rows, headers) {
   let prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -24,9 +23,9 @@ const normalize = function (rows, headers) {
   const rowsById = {};
   const cellsById = {};
   rows.forEach((row, i) => {
-    rowIds[i] = row.id; // Initialize the row info and state values, namely for selection and
+    rowIds[i] = row.id;
+    // Initialize the row info and state values, namely for selection and
     // expansion
-
     const {
       id,
       isSelected = false,
@@ -39,20 +38,20 @@ const normalize = function (rows, headers) {
       isExpanded,
       disabled,
       cells: new Array(headers.length)
-    }; // If we have a previous state, and the row existed in that previous state,
-    // then we'll set the state values of the row to the previous state values.
+    };
 
+    // If we have a previous state, and the row existed in that previous state,
+    // then we'll set the state values of the row to the previous state values.
     if (prevRowsByIds && prevRowsByIds[row.id] !== undefined) {
       rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
       rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
     }
-
     headers.forEach((_ref, i) => {
       let {
         key
       } = _ref;
-      const id = getCellId(row.id, key); // Initialize the cell info and state values, namely for editing
-
+      const id = getCellId(row.id, key);
+      // Initialize the cell info and state values, namely for editing
       cellsById[id] = {
         id,
         value: row[key],
@@ -63,7 +62,9 @@ const normalize = function (rows, headers) {
         info: {
           header: key
         }
-      }; // TODO: When working on inline edits, we'll need to derive the state
+      };
+
+      // TODO: When working on inline edits, we'll need to derive the state
       // values similarly to rows above.
 
       rowsById[row.id].cells[i] = id;
@@ -75,7 +76,6 @@ const normalize = function (rows, headers) {
     cellsById
   };
 };
-
 var normalize$1 = normalize;
 
 export { normalize$1 as default };

package/es/components/DataTable/tools/sorting.js

@@ -19,30 +19,27 @@ import { sortStates } from '../state/sortStates.js';
  * @param {string} locale
  * @returns {number}
  */
-
 const compare = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
   // prevent multiple null values in one column (sorting breaks)
   a === null ? a = '' : null;
   b === null ? b = '' : null;
-
   if (typeof a === 'number' && typeof b === 'number') {
     return a - b;
   }
-
   if (typeof a === 'string' && typeof b === 'string') {
     return compareStrings(a, b, locale);
-  } // if column has React elements, this should sort by the child string if there is one
-
+  }
 
+  // if column has React elements, this should sort by the child string if there is one
   if (typeof a === 'object' && typeof b === 'object') {
     if (typeof a.props.children === 'string' && typeof b.props.children === 'string') {
       return compareStrings(a.props.children, b.props.children, locale);
     }
   }
-
   return compareStrings('' + a, '' + b, locale);
 };
+
 /**
  * Use the built-in `localeCompare` function available on strings to compare two
  * strings.
@@ -52,20 +49,18 @@ const compare = function (a, b) {
  * @param {string} locale
  * @returns {number}
  */
-
 const compareStrings = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
-
   // Only set `numeric: true` if the string only contains numbers
   // https://stackoverflow.com/a/175787
-  if (!isNaN(a) && !isNaN(parseFloat(a))) {
+  if (!isNaN(a) && !isNaN(parseFloat(a)) && !isNaN(b) && !isNaN(parseFloat(b))) {
     return a.localeCompare(b, locale, {
       numeric: true
     });
   }
-
   return a.localeCompare(b, locale);
 };
+
 /**
  * Default implementation of how we sort rows internally. The idea behind this
  * implementation is to use the given list of row ids to look up the cells in
@@ -85,7 +80,6 @@ const compareStrings = function (a, b) {
  * @param {Function} config.sortRow
  * @returns {Array[string]} array of sorted rowIds
  */
-
 const sortRows = _ref => {
   let {
     rowIds,
@@ -114,11 +108,9 @@ const defaultSortRow = (cellA, cellB, _ref2) => {
     sortStates,
     locale
   } = _ref2;
-
   if (sortDirection === sortStates.ASC) {
     return compare(cellA, cellB, locale);
   }
-
   return compare(cellB, cellA, locale);
 };
 

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -12,7 +12,6 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2;
-
 const DataTableSkeleton = _ref => {
   let {
     headers,
@@ -37,7 +36,6 @@ const DataTableSkeleton = _ref => {
   const columnsArray = Array.from({
     length: columnCount
   }, (_, index) => index);
-
   for (let i = 0; i < rowRepeat; i++) {
     rows[i] = /*#__PURE__*/React__default.createElement("tr", {
       key: i
@@ -45,7 +43,6 @@ const DataTableSkeleton = _ref => {
       key: j
     }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null)))));
   }
-
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--skeleton ${prefix}--data-table-container`
   }, showHeader ? /*#__PURE__*/React__default.createElement("div", {
@@ -63,56 +60,44 @@ const DataTableSkeleton = _ref => {
     className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`
   }))) : null, /*#__PURE__*/React__default.createElement("table", _extends({
     className: dataTableSkeletonClasses
-  }, rest), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columnsArray.map(i => {
-    var _headers$i;
-
-    return /*#__PURE__*/React__default.createElement("th", {
-      key: i
-    }, headers ? /*#__PURE__*/React__default.createElement("div", {
-      className: "bx--table-header-label"
-    }, (_headers$i = headers[i]) === null || _headers$i === void 0 ? void 0 : _headers$i.header) : _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)));
-  }))), /*#__PURE__*/React__default.createElement("tbody", null, rows)));
+  }, rest), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default.createElement("th", {
+    key: i
+  }, headers ? /*#__PURE__*/React__default.createElement("div", {
+    className: "bx--table-header-label"
+  }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)))))), /*#__PURE__*/React__default.createElement("tbody", null, rows)));
 };
-
 DataTableSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
   /**
    * Specify the number of columns that you want to render in the skeleton state
    */
   columnCount: PropTypes.number,
-
   /**
    * Optionally specify whether you want the Skeleton to be rendered as a
    * compact DataTable
    */
   compact: PropTypes.bool,
-
   /**
    * Optionally specify the displayed headers
    */
   headers: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
     key: PropTypes.string
   })]),
-
   /**
    * Specify the number of rows that you want to render in the skeleton state
    */
   rowCount: PropTypes.number,
-
   /**
    * Specify if the table header should be rendered as part of the skeleton.
    */
   showHeader: PropTypes.bool,
-
   /**
    * Specify if the table toolbar should be rendered as part of the skeleton.
    */
   showToolbar: PropTypes.bool,
-
   /**
    * Optionally specify whether you want the DataTable to be zebra striped
    */

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -23,7 +23,6 @@ const DatePickerSkeleton = _ref => {
     className: `${prefix}--date-picker-container`
   },
   /*#__PURE__*/
-
   /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */
   React__default.createElement("label", {
     className: `${prefix}--label`,
@@ -31,7 +30,6 @@ const DatePickerSkeleton = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--date-picker__input ${prefix}--skeleton`
   }));
-
   if (range) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--form-item`
@@ -39,25 +37,21 @@ const DatePickerSkeleton = _ref => {
       className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className)
     }, rest), dateInput, dateInput));
   }
-
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-item`
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(`${prefix}--date-picker`, `${prefix}--date-picker--short`, `${prefix}--date-picker--simple`, `${prefix}--skeleton`, className)
   }, rest), dateInput));
 };
-
 DatePickerSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
   /**
    * Specify the id to add.
    */
   id: PropTypes.string,
-
   /**
    * Specify whether the skeleton should be of range date picker.
    */