@carbon/ibm-products 2.19.2 → 2.21.0

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { pkg } from '../../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var InlineEditButton = function InlineEditButton(_ref) {
-  var _cx, _cx2;
   var label = _ref.label,
     Icon = _ref.renderIcon,
     disabled = _ref.disabled,
@@ -23,7 +22,7 @@ export var InlineEditButton = function InlineEditButton(_ref) {
     columnConfig = _ref.columnConfig,
     type = _ref.type;
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    className: cx("".concat(blockClass, "__inline-edit-button"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -32,7 +31,7 @@ export var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), _defineProperty(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
+    className: cx("".concat(blockClass, "__inline-edit-button-label"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
   }, label) : /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React.createElement("div", {

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -23,7 +23,7 @@ import { usePreviousValue } from '../../../../../../global/js/hooks';
 import { prepareProps } from '../../../../../../global/js/utils/props-helper';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var InlineEditCell = function InlineEditCell(_ref) {
-  var _config$validator, _cx3, _value$text;
+  var _config$validator, _value$text;
   var cell = _ref.cell,
     config = _ref.config,
     instance = _ref.instance,
@@ -438,7 +438,7 @@ export var InlineEditCell = function InlineEditCell(_ref) {
       "data-inline-type": type,
       onClick: !nonEditCell ? handleInlineCellClick : addActiveState,
       onKeyDown: !nonEditCell ? handleKeyDown : null,
-      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), _defineProperty(_cx3, "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)), _cx3))
+      className: cx("".concat(blockClass, "__inline-edit--outer-cell-button"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit--outer-cell-button--").concat(rowSize), rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--lg"), !rowSize), "".concat(blockClass, "__inline-edit--outer-cell-button--invalid"), config === null || config === void 0 || (_config$validator = config.validator) === null || _config$validator === void 0 ? void 0 : _config$validator.call(config, cellValue)))
     }, !inEditMode && /*#__PURE__*/React.createElement(InlineEditButton, {
       isActiveCell: cellId === activeCellId,
       renderIcon: setRenderIcon(),

package/es/components/Datagrid/useActionsColumn.js

@@ -37,7 +37,6 @@ var useActionsColumn = function useActionsColumn(hooks) {
         var row = cell.row,
           column = cell.column;
         if (column.isAction) {
-          var _cx3;
           var isColumnSticky = !!column.sticky;
           return [props, {
             children: /*#__PURE__*/React.createElement("div", {
@@ -109,7 +108,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 key: id
               }));
             })))),
-            className: cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__cell"), true), _defineProperty(_cx3, "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky), _cx3)),
+            className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__actions-column-cell"), true), "".concat(blockClass, "__cell"), true), "".concat(blockClass, "__actions-column-cell-non-sticky"), !isColumnSticky)),
             style: {
               width: rowActions.length > 2 || isColumnSticky ? 48 : 96
             }

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -17,8 +17,7 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var StringRenderer = function StringRenderer(tableProps) {
     var _tableProps$column;
     return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll))),
-      title: tableProps.value
+      className: cx("".concat(blockClass, "__defaultStringRenderer"), _defineProperty({}, "".concat(blockClass, "__defaultStringRenderer--multiline"), ((_tableProps$column = tableProps.column) === null || _tableProps$column === void 0 ? void 0 : _tableProps$column.multiLineWrap) || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.multiLineWrapAll)))
     }, tableProps.value);
   };
   var HeaderRenderer = function HeaderRenderer(header) {

package/es/components/Datagrid/useFiltering.js

@@ -18,6 +18,7 @@ var useFiltering = function useFiltering(hooks) {
   useEffect(function () {
     pkg.checkReportFeatureEnabled('Datagrid.useFiltering');
   }, []);
+  /* istanbul ignore next */
   var filterTypes = useMemo(function () {
     return {
       date: function date(rows, id, _ref) {

package/es/components/Datagrid/useNestedRowExpander.js

@@ -33,7 +33,6 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     var expanderColumn = {
       id: 'expander',
       Cell: function Cell(_ref) {
-        var _cx;
         var row = _ref.row;
         var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
           onClick: function onClick(event) {
@@ -56,7 +55,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
         }, expanderButtonProps, {
           title: expanderTitle
         }), /*#__PURE__*/React.createElement(ChevronRight, {
-          className: cx("".concat(blockClass, "__expander-icon"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
+          className: cx("".concat(blockClass, "__expander-icon"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), "".concat(blockClass, "__expander-icon--open"), row.isExpanded))
         }));
       },
       width: 48,

package/es/components/Datagrid/useNestedRows.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,46 +9,62 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import cx from 'classnames';
 import { pkg } from '../../settings';
 import useNestedRowExpander from './useNestedRowExpander';
+import { useEffect } from 'react';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
   useNestedRowExpander(hooks);
-  var marginLeft = 24;
-  var getRowProps = function getRowProps(props, _ref) {
-    var _cx;
-    var row = _ref.row;
-    return [props, {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
-    }];
-  };
-  var getRowStyles = function getRowStyles(props, _ref2) {
-    var row = _ref2.row;
-    return [props, {
-      style: {
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
-      }
-    }];
-  };
-  var getCellProps = function getCellProps(props, _ref3) {
-    var cell = _ref3.cell,
-      instance = _ref3.instance;
-    // reduce the "first cell"s width to compensate added (left) margin
-    var isFirstCell = instance.columns.findIndex(function (c) {
-      return c.id === cell.column.id;
-    }) === 0;
-    return [props, {
-      style: {
-        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
-      }
-    }];
-  };
   var useInstance = function useInstance(instance) {
+    // This useEffect will expand rows if they exist in the initialState obj
+    useEffect(function () {
+      var rows = instance.rows,
+        initialState = instance.initialState;
+      var expandedRowIds = initialState.expandedRowIds;
+      if (expandedRowIds) {
+        Object.keys(expandedRowIds).forEach(function (key) {
+          var row = rows.filter(function (r) {
+            return r.id.toString() === key.toString();
+          });
+          if (row.length && key.toString() === row[0].id.toString()) {
+            row[0].toggleRowExpanded();
+          }
+        });
+      }
+    }, [instance]);
+    var marginLeft = 24;
+    var getRowProps = function getRowProps(props, _ref) {
+      var row = _ref.row;
+      return [props, {
+        className: cx(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded))
+      }];
+    };
+    var getRowStyles = function getRowStyles(props, _ref2) {
+      var row = _ref2.row;
+      return [props, {
+        style: {
+          paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
+        }
+      }];
+    };
+    var getCellProps = function getCellProps(props, _ref3) {
+      var cell = _ref3.cell,
+        instance = _ref3.instance;
+      // reduce the "first cell"s width to compensate added (left) margin
+      var isFirstCell = instance.columns.findIndex(function (c) {
+        return c.id === cell.column.id;
+      }) === 0;
+      return [props, {
+        style: {
+          marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
+        }
+      }];
+    };
     Object.assign(instance, {
       withNestedRows: true
     });
+    hooks.getRowProps.push(getRowProps);
+    hooks.getRowProps.push(getRowStyles);
+    hooks.getCellProps.push(getCellProps);
   };
-  hooks.getRowProps.push(getRowProps);
-  hooks.getRowProps.push(getRowStyles);
-  hooks.getCellProps.push(getCellProps);
   hooks.useInstance.push(useInstance);
 };
 export default useNestedRows;

package/es/components/Datagrid/useOnRowClick.js

@@ -29,7 +29,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
               row.classList.remove("".concat(carbon.prefix, "--data-table--selected"));
             });
           }
-          var closestRow = event.target.closest(".".concat(pkg.prefix, "--datagrid__carbon-row"));
+          var closestRow = event.currentTarget.closest('tr');
           closestRow.classList.add("".concat(carbon.prefix, "--data-table--selected"));
           if (!withSelectRows) {
             instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {

package/es/components/Datagrid/useSelectRows.js

@@ -62,12 +62,11 @@ var useSelectRows = function useSelectRows(hooks) {
 };
 var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
-    var _ref2;
     var row = _ref.row;
     var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
       checked = _row$getToggleRowSele.checked;
     return [props, {
-      className: cx(["".concat(blockClass, "__carbon-row"), (_ref2 = {}, _defineProperty(_ref2, "".concat(carbon.prefix, "--data-table--selected"), checked), _defineProperty(_ref2, "".concat(blockClass, "__active-row"), checked), _ref2)])
+      className: cx(["".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty({}, "".concat(carbon.prefix, "--data-table--selected"), checked), "".concat(blockClass, "__active-row"), checked)])
     }];
   };
   hooks.getRowProps.push(getRowProps);

package/es/components/Datagrid/useSortableColumns.js

@@ -89,7 +89,6 @@ var useSortableColumns = function useSortableColumns(hooks) {
         return /*#__PURE__*/React.createElement(ArrowsVertical, iconProps);
       };
       var Header = function Header(headerProp) {
-        var _cx;
         return column.disableSortBy === true || column.id === 'datagridSelection' ? column.disableSortBy ? column.Header : /*#__PURE__*/React.createElement(SelectAll, instance) : /*#__PURE__*/React.createElement(Button, {
           "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
             ascendingSortableLabelText: ascendingSortableLabelText,
@@ -104,7 +103,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
           renderIcon: function renderIcon(props) {
             return icon(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, props);
           },
-          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), _defineProperty(_cx, "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false), _cx))
+          className: cx("".concat(carbon.prefix, "--table-sort ").concat(blockClass, "--table-sort"), _defineProperty(_defineProperty({}, "".concat(blockClass, "--table-sort--desc"), headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc), "".concat(blockClass, "--table-sort--asc"), (headerProp === null || headerProp === void 0 ? void 0 : headerProp.column.isSortedDesc) === false))
         }, column.Header);
       };
       return _objectSpread(_objectSpread({}, column), {}, {

package/es/components/Datagrid/useStickyColumn.js

@@ -143,17 +143,16 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
   var column = data.column || data.cell.column;
   if (column.sticky === 'right') {
-    var _cx;
     return [props, _objectSpread({
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), false), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+      className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
   if (column.sticky === 'left') {
-    var _data$instance, _cx2;
+    var _data$instance;
     return [props, _objectSpread({
-      className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
+      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];

package/es/components/Datagrid/utils/filterPropsForTesting.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { handleFilterTagLabelText } from './handleFilterTagLabelText';
+export var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
+  return {
+    id: "".concat(index),
+    labelText: "Dummy checkbox ".concat(index + 1),
+    value: 'dummy-checkbox',
+    disabled: true
+  };
+});
+export var filterProps = function filterProps() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$includeManyCheck = _ref.includeManyCheckboxes,
+    includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
+    _ref$dropdownOnChange = _ref.dropdownOnChange,
+    dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
+  var checkboxList = [{
+    id: 'normal',
+    labelText: 'Normal',
+    value: 'normal'
+  }, {
+    id: 'minor-warning',
+    labelText: 'Minor warning',
+    value: 'minor-warning'
+  }, {
+    id: 'critical',
+    labelText: 'Critical',
+    value: 'critical'
+  }].concat(_toConsumableArray(includeManyCheckboxes ? generateDummyCheckboxes : []));
+  return {
+    autoHideFilters: includeManyCheckboxes ? false : true,
+    variation: 'panel',
+    panelIconDescription: 'Open filters',
+    sections: [{
+      categoryTitle: 'Category title',
+      hasAccordion: true,
+      filters: [{
+        filterLabel: 'Joined',
+        filter: {
+          type: 'date',
+          column: 'joined',
+          props: {
+            DatePicker: {
+              datePickerType: 'range'
+            },
+            DatePickerInput: {
+              start: {
+                id: 'date-picker-input-id-start',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined start date'
+              },
+              end: {
+                id: 'date-picker-input-id-end',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined end date'
+              }
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Status',
+        filter: {
+          type: 'dropdown',
+          column: 'status',
+          props: {
+            Dropdown: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+              id: 'marital-status-dropdown'
+            }, 'aria-label', 'Marital status dropdown'), "items", ['relationship', 'complicated', 'single']), "label", 'Marital status'), "titleText", 'Marital status'), "onChange", dropdownOnChange)
+          }
+        }
+      }]
+    }, {
+      categoryTitle: 'Category title',
+      filters: [{
+        filterLabel: 'Role',
+        filter: {
+          type: 'radio',
+          column: 'role',
+          props: {
+            FormGroup: {
+              legendText: 'Role'
+            },
+            RadioButtonGroup: {
+              orientation: 'vertical',
+              legend: 'Role legend',
+              name: 'role-radio-button-group'
+            },
+            RadioButton: [{
+              id: 'developer',
+              labelText: 'Developer',
+              value: 'developer'
+            }, {
+              id: 'designer',
+              labelText: 'Designer',
+              value: 'designer'
+            }, {
+              id: 'researcher',
+              labelText: 'Researcher',
+              value: 'researcher'
+            }]
+          }
+        }
+      }, {
+        filterLabel: 'Visits',
+        filter: {
+          type: 'number',
+          column: 'visits',
+          props: {
+            NumberInput: {
+              min: 0,
+              id: 'visits-number-input',
+              invalidText: 'A valid value is required',
+              label: 'Visits',
+              placeholder: 'Type a number amount of visits'
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Password strength',
+        filter: {
+          type: 'checkbox',
+          column: 'passwordStrength',
+          props: {
+            FormGroup: {
+              legendText: 'Password strength'
+            },
+            Checkbox: checkboxList
+          }
+        }
+      }]
+    }],
+    renderLabel: function renderLabel(key, value) {
+      return handleFilterTagLabelText(key, value);
+    },
+    renderDateLabel: function renderDateLabel(start, end) {
+      var startDateObj = new Date(start);
+      var endDateObj = new Date(end);
+      return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+    }
+  };
+};

package/es/components/EditInPlace/EditInPlace.js

@@ -29,7 +29,6 @@ var defaults = {
   size: 'sm'
 };
 export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cx;
   var cancelLabel = _ref.cancelLabel,
     editAlwaysVisible = _ref.editAlwaysVisible,
     editLabel = _ref.editLabel,
@@ -148,7 +147,7 @@ export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _defineProperty(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), _defineProperty(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
+    className: cx(blockClass, "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement("label", {

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -25,7 +25,6 @@ var defaults = {
   hasFieldset: true
 };
 export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cx;
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
@@ -43,7 +42,7 @@ export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: title
   });
   return formContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _defineProperty(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
+    className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm))),
     ref: ref
   }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,

package/es/components/FilterSummary/FilterSummary.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["key", "value"];
+var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
+  _excluded2 = ["key", "value"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -16,6 +18,7 @@ import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _filterSummaryClearBu;
@@ -23,22 +26,21 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
     clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
-    _ref$clearFilters = _ref.clearFilters,
-    clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
-    _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    clearFilters = _ref.clearFilters,
+    filters = _ref.filters,
     _ref$renderLabel = _ref.renderLabel,
     renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
     _ref$clearButtonInlin = _ref.clearButtonInline,
-    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin;
+    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var filterSummaryId = "".concat(blockClass, "__").concat(uuidv4());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+      rest = _objectWithoutProperties(_ref2, _excluded2);
     return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
@@ -46,12 +48,13 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   var filterSummaryClearButton = useRef();
   var filterSummaryRef = useRef();
-  var localRef = filterSummaryRef || ref;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: localRef,
-    className: cx([blockClass, className]),
+  var localRef = ref || filterSummaryRef;
+  return /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), {
     id: filterSummaryId
-  }, /*#__PURE__*/React.createElement(TagSet, {
+  }, rest, {
+    ref: localRef,
+    className: cx([blockClass, className])
+  }), /*#__PURE__*/React.createElement(TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -212,14 +212,13 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
   });
   previousNotifications = sortChronologically(previousNotifications);
   var renderDescription = function renderDescription(id) {
-    var _ref2, _ref3;
     var notification = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
       return item.id === id;
     })[0];
     var trimLength = 88;
     var description = notification.description;
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "__notification-long-description"), notification.showAll), _defineProperty(_ref2, "".concat(blockClass, "__notification-short-description"), !notification.showAll), _ref2)]);
-    var showMoreButtonClassName = cx([(_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), _defineProperty(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
+    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React.createElement(Button, {

package/es/components/PageHeader/PageHeader.js

@@ -38,7 +38,7 @@ var defaults = {
   narrowGrid: false
 };
 export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
+  var _withoutBackground, _enableBreadcrumbScro;
   var actionBarItems = _ref.actionBarItems,
     actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
     actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
@@ -234,17 +234,15 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
     setPageHeaderStyles(function (prev) {
-      var _objectSpread2;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "--".concat(blockClass, "--max-action-bar-width-px"), newActionBarWidth), _defineProperty(_objectSpread2, "--".concat(blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)), _objectSpread2));
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty(_defineProperty({}, "--".concat(blockClass, "--max-action-bar-width-px"), newActionBarWidth), "--".concat(blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)));
     });
   }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
   useEffect(function () {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      var _objectSpread3;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), _defineProperty(_objectSpread3, "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      )))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
     });
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   useNearestScroll(headerRef,
@@ -323,7 +321,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
-    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref7, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
+    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--has-navigation"), navigation || tags), "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FlexGrid, {
@@ -333,7 +331,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__non-navigation-row-content")
   }, hasBreadcrumbRow ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__breadcrumb-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx2, "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
+    className: cx("".concat(blockClass, "__breadcrumb-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__breadcrumb-row--container")
   }, /*#__PURE__*/React.createElement(Column, {
@@ -344,7 +342,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
   }) : null), /*#__PURE__*/React.createElement(Column, {
-    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref8 = {}, _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
+    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -359,7 +357,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onWidthChange: handleActionBarWidthChange,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__title-row"), (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), _defineProperty(_cx4, "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx4, "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), _defineProperty(_cx4, "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
+    className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
   }, /*#__PURE__*/React.createElement(Column, {
     className: "".concat(blockClass, "__title-column")
   }, title ? /*#__PURE__*/React.createElement(PageHeaderTitle, {
@@ -393,7 +391,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__navigation-row"), (_cx7 = {}, _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--spacing-above-06"), !!navigation), _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--has-tags"), tags), _cx7))
+    className: cx("".concat(blockClass, "__navigation-row"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(blockClass, "__navigation-row--has-tags"), tags))
   }, /*#__PURE__*/React.createElement(Column, {
     className: "".concat(blockClass, "__navigation-tabs")
   }, navigation), tags ? /*#__PURE__*/React.createElement(Column, {