@carbon/react 1.29.1 → 1.30.0

package/lib/components/DataTable/TableToolbarSearch.js

@@ -29,11 +29,9 @@ const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
 };
-
 const translateWithId = id => {
   return translationKeys[id];
 };
-
 const TableToolbarSearch = _ref => {
   let {
     className,
@@ -74,7 +72,8 @@ const TableToolbarSearch = _ref => {
     if (defaultValue) {
       onChangeProp('', defaultValue);
     }
-  }, //eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   const searchClasses = cx__default["default"](className, {
     [searchContainerClass]: searchContainerClass,
@@ -83,33 +82,25 @@ const TableToolbarSearch = _ref => {
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,
     [`${prefix}--toolbar-search-container-persistent`]: persistent
   });
-
   const handleExpand = function (event) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
-
     if (!disabled) {
       if (!controlled && !persistent) {
         setExpandedState(value);
       }
-
       if (onExpand) {
         onExpand(event, value);
       }
     }
   };
-
   const onChange = e => {
     setValue(e.target.value);
-
     if (onChangeProp) {
       onChangeProp(e);
     }
   };
-
   const handleOnFocus = event => handleExpand(event, true);
-
   const handleOnBlur = event => !value && handleExpand(event, false);
-
   return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
     disabled: disabled,
     className: searchClasses,
@@ -124,99 +115,80 @@ const TableToolbarSearch = _ref => {
     size: size
   }, rest));
 };
-
 TableToolbarSearch.propTypes = {
   children: PropTypes__default["default"].node,
-
   /**
    * Provide an optional class name for the search container
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specifies if the search should initially render in an expanded state
    */
   defaultExpanded: PropTypes__default["default"].bool,
-
   /**
    * Provide an optional default value for the Search component
    */
   defaultValue: PropTypes__default["default"].string,
-
   /**
    * Specifies if the search should be disabled
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specifies if the search should expand
    */
   expanded: PropTypes__default["default"].bool,
-
   /**
    * Provide an optional id for the search container
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Provide an optional label text for the Search component icon
    */
   labelText: PropTypes__default["default"].string,
-
   /**
    * Provide an optional function to be called when the search input loses focus, this will be
    * passed the event as the first parameter and a function to handle the expanding of the search
    * input as the second
    */
   onBlur: PropTypes__default["default"].func,
-
   /**
    * Provide an optional hook that is called each time the input is updated
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Optional callback called when the search value is cleared.
    */
   onClear: PropTypes__default["default"].func,
-
   /**
    * Provide an optional hook that is called each time the input is expanded
    */
   onExpand: PropTypes__default["default"].func,
-
   /**
    * Provide an optional function to be called when the search input gains focus, this will be
    * passed the event as the first parameter and a function to handle the expanding of the search
    * input as the second.
    */
   onFocus: PropTypes__default["default"].func,
-
   /**
    * Whether the search should be allowed to expand
    */
   persistent: PropTypes__default["default"].bool,
-
   /**
    * Provide an optional placeholder text for the Search component
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Provide an optional className for the overall container of the Search
    */
   searchContainerClass: PropTypes__default["default"].string,
-
   /**
    * Specify the size of the Search
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-
   /**
    * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
    */
   tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-
   /**
    * Provide custom text for the component for each translation id
    */

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

@@ -19,7 +19,6 @@ var normalize = require('../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,
@@ -40,20 +39,17 @@ const getDerivedStateFromProps = (props, prevState) => {
     // batch actions menu
     shouldShowBatchActions: prevState.shouldShowBatchActions || false
   };
-
   if (prevState.sortDirection && prevState.sortHeaderKey) {
     const {
       rowIds
     } = sorting.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;
 
 exports["default"] = getDerivedStateFromProps$1;

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

@@ -12,9 +12,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var sortStates = require('./sortStates.js');
 var sorting = require('../tools/sorting.js');
 
+// Our initialSortState should be `NONE`, unless a consumer has specified a
 // different initialSortState
-
 const initialSortState = sortStates.sortStates.NONE;
+
 /**
  * Utility used to get the next sort state given the following pieces of
  * information:
@@ -24,7 +25,6 @@ const initialSortState = sortStates.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
@@ -34,16 +34,13 @@ const getNextSortDirection = (prevHeader, header, prevState) => {
     if (prevState === 'NONE') {
       return sortStates.sortStates.ASC;
     }
-
     if (prevState === 'ASC') {
       return sortStates.sortStates.DESC;
     }
-
     return sortStates.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.sortStates.ASC;
 };
 const getNextSortState = (props, state, _ref) => {
@@ -57,6 +54,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
@@ -75,7 +73,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/lib/components/DataTable/tools/denormalize.js

@@ -24,11 +24,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @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;
 
 exports["default"] = denormalize$1;

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

@@ -36,11 +36,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/lib/components/DataTable/tools/instanceId.js

@@ -19,7 +19,6 @@ const setupGetInstanceId = () => {
     return ++instanceId;
   };
 };
-
 var setupGetInstanceId$1 = setupGetInstanceId;
 
 exports["default"] = setupGetInstanceId$1;

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

@@ -18,7 +18,6 @@ var cells = require('./cells.js');
  * @param {Array<object>} headers
  * @returns {object}
  */
-
 const normalize = function (rows, headers) {
   let prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -28,9 +27,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,
@@ -43,20 +42,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 = cells.getCellId(row.id, key); // Initialize the cell info and state values, namely for editing
-
+      const id = cells.getCellId(row.id, key);
+      // Initialize the cell info and state values, namely for editing
       cellsById[id] = {
         id,
         value: row[key],
@@ -67,7 +66,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;
@@ -79,7 +80,6 @@ const normalize = function (rows, headers) {
     cellsById
   };
 };
-
 var normalize$1 = normalize;
 
 exports["default"] = normalize$1;

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

@@ -23,30 +23,27 @@ var sortStates = require('../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.
@@ -56,20 +53,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
@@ -89,7 +84,6 @@ const compareStrings = function (a, b) {
  * @param {Function} config.sortRow
  * @returns {Array[string]} array of sorted rowIds
  */
-
 const sortRows = _ref => {
   let {
     rowIds,
@@ -118,11 +112,9 @@ const defaultSortRow = (cellA, cellB, _ref2) => {
     sortStates,
     locale
   } = _ref2;
-
   if (sortDirection === sortStates.ASC) {
     return compare(cellA, cellB, locale);
   }
-
   return compare(cellB, cellA, locale);
 };
 

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -22,7 +22,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _span, _span2;
-
 const DataTableSkeleton = _ref => {
   let {
     headers,
@@ -47,7 +46,6 @@ const DataTableSkeleton = _ref => {
   const columnsArray = Array.from({
     length: columnCount
   }, (_, index) => index);
-
   for (let i = 0; i < rowRepeat; i++) {
     rows[i] = /*#__PURE__*/React__default["default"].createElement("tr", {
       key: i
@@ -55,7 +53,6 @@ const DataTableSkeleton = _ref => {
       key: j
     }, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null)))));
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--skeleton ${prefix}--data-table-container`
   }, showHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -73,56 +70,44 @@ const DataTableSkeleton = _ref => {
     className: `${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`
   }))) : null, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     className: dataTableSkeletonClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columnsArray.map(i => {
-    var _headers$i;
-
-    return /*#__PURE__*/React__default["default"].createElement("th", {
-      key: i
-    }, headers ? /*#__PURE__*/React__default["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["default"].createElement("span", null)));
-  }))), /*#__PURE__*/React__default["default"].createElement("tbody", null, rows)));
+  }, rest), /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columnsArray.map(i => /*#__PURE__*/React__default["default"].createElement("th", {
+    key: i
+  }, headers ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "bx--table-header-label"
+  }, headers[i]?.header) : _span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", null)))))), /*#__PURE__*/React__default["default"].createElement("tbody", null, rows)));
 };
-
 DataTableSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the number of columns that you want to render in the skeleton state
    */
   columnCount: PropTypes__default["default"].number,
-
   /**
    * Optionally specify whether you want the Skeleton to be rendered as a
    * compact DataTable
    */
   compact: PropTypes__default["default"].bool,
-
   /**
    * Optionally specify the displayed headers
    */
   headers: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
     key: PropTypes__default["default"].string
   })]),
-
   /**
    * Specify the number of rows that you want to render in the skeleton state
    */
   rowCount: PropTypes__default["default"].number,
-
   /**
    * Specify if the table header should be rendered as part of the skeleton.
    */
   showHeader: PropTypes__default["default"].bool,
-
   /**
    * Specify if the table toolbar should be rendered as part of the skeleton.
    */
   showToolbar: PropTypes__default["default"].bool,
-
   /**
    * Optionally specify whether you want the DataTable to be zebra striped
    */

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -33,7 +33,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["default"].createElement("label", {
     className: `${prefix}--label`,
@@ -41,7 +40,6 @@ const DatePickerSkeleton = _ref => {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--date-picker__input ${prefix}--skeleton`
   }));
-
   if (range) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--form-item`
@@ -49,25 +47,21 @@ const DatePickerSkeleton = _ref => {
       className: cx__default["default"](`${prefix}--date-picker`, `${prefix}--date-picker--range`, `${prefix}--skeleton`, className)
     }, rest), dateInput, dateInput));
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--form-item`
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${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__default["default"].string,
-
   /**
    * Specify the id to add.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Specify whether the skeleton should be of range date picker.
    */