@carbon/ibm-products 2.20.0 → 2.22.0

package/lib/components/Datagrid/useStickyColumn.js

@@ -148,17 +148,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: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+      className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_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: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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/lib/components/Datagrid/utils/filterPropsForTesting.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDummyCheckboxes = exports.filterProps = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _handleFilterTagLabelText = require("./handleFilterTagLabelText");
+/**
+ * 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.
+ */
+
+var generateDummyCheckboxes = exports.generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
+  return {
+    id: "".concat(index),
+    labelText: "Dummy checkbox ".concat(index + 1),
+    value: 'dummy-checkbox',
+    disabled: true
+  };
+});
+var filterProps = exports.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((0, _toConsumableArray2.default)(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: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+              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 (0, _handleFilterTagLabelText.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/lib/components/DelimitedList/DelimitedList.docs-page.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./DelimitedList.stories"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      story: stories.delimited
+    }, {
+      story: stories.notDelimited
+    }, {
+      story: stories.empty
+    }]
+  });
+};
+var _default = exports.default = DocsPage;

package/lib/components/DelimitedList/DelimitedList.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DelimitedList = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["className", "delimiter", "items", "truncate"];
+/**
+ * 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 portions of React that are needed.
+// Other standard imports.
+var blockClass = "".concat(_settings.pkg.prefix, "--delimited-list");
+var componentName = 'DelimitedList';
+var defaults = {
+  delimiter: ', ',
+  items: [],
+  truncate: true
+};
+
+/**
+ * `DelimitedList` converts an array of items into a single line of
+ * comma-separated values.
+ */
+var DelimitedList = exports.DelimitedList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$delimiter = _ref.delimiter,
+    delimiter = _ref$delimiter === void 0 ? defaults.delimiter : _ref$delimiter,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? defaults.items : _ref$items,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className, [truncate && "".concat(blockClass, "-truncate")]),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), items.length > 0 ? items.join(delimiter) : '–');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DelimitedList = DelimitedList = _settings.pkg.checkComponentEnabled(DelimitedList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+DelimitedList.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+DelimitedList.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The character(s) used to separate the items.
+   */
+  delimiter: _propTypes.default.string,
+  /**
+   * Array of items to be listed.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * Toggle the component's ability to truncate or not.
+   */
+  truncate: _propTypes.default.bool
+};

package/lib/components/DelimitedList/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DelimitedList", {
+  enumerable: true,
+  get: function get() {
+    return _DelimitedList.DelimitedList;
+  }
+});
+var _DelimitedList = require("./DelimitedList");

package/lib/components/EditInPlace/EditInPlace.js

@@ -36,7 +36,6 @@ var defaults = {
   size: 'sm'
 };
 var EditInPlace = exports.EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _cx;
   var cancelLabel = _ref.cancelLabel,
     editAlwaysVisible = _ref.editAlwaysVisible,
     editLabel = _ref.editLabel,
@@ -155,7 +154,7 @@ var EditInPlace = exports.EditInPlace = /*#__PURE__*/(0, _react.forwardRef)(func
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--focused"), focused), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "--").concat(size), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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.default.createElement("label", {

package/lib/components/EditTearsheet/EditTearsheetForm.js

@@ -34,7 +34,6 @@ var defaults = {
   hasFieldset: true
 };
 var EditTearsheetForm = exports.EditTearsheetForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _cx;
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
@@ -52,7 +51,7 @@ var EditTearsheetForm = exports.EditTearsheetForm = /*#__PURE__*/(0, _react.forw
     title: title
   });
   return formContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
+    className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 12,

package/lib/components/FilterSummary/FilterSummary.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@carbon/react");
@@ -15,7 +16,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _excluded = ["key", "value"];
+var _devtools = require("../../global/js/utils/devtools");
+var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
+  _excluded2 = ["key", "value"];
 /**
  * Copyright IBM Corp. 2022, 2023
  *
@@ -33,22 +36,21 @@ var FilterSummary = /*#__PURE__*/_react2.default.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var filterSummaryId = "".concat(blockClass, "__").concat((0, _uuidv.default)());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      rest = (0, _objectWithoutProperties2.default)(_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)
@@ -56,12 +58,13 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
   });
   var filterSummaryClearButton = (0, _react2.useRef)();
   var filterSummaryRef = (0, _react2.useRef)();
-  var localRef = filterSummaryRef || ref;
-  return /*#__PURE__*/_react2.default.createElement("div", {
-    ref: localRef,
-    className: (0, _classnames.default)([blockClass, className]),
+  var localRef = ref || filterSummaryRef;
+  return /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({}, (0, _devtools.getDevtoolsProps)(componentName), {
     id: filterSummaryId
-  }, /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
+  }, rest, {
+    ref: localRef,
+    className: (0, _classnames.default)([blockClass, className])
+  }), /*#__PURE__*/_react2.default.createElement(_TagSet.TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -217,14 +217,13 @@ var NotificationsPanel = exports.NotificationsPanel = /*#__PURE__*/_react.defaul
   });
   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 = (0, _classnames.default)(["".concat(blockClass, "__notification-description"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__notification-long-description"), notification.showAll), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__notification-short-description"), !notification.showAll), _ref2)]);
-    var showMoreButtonClassName = (0, _classnames.default)([(_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
+    var descriptionClassName = (0, _classnames.default)(["".concat(blockClass, "__notification-description"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
+    var showMoreButtonClassName = (0, _classnames.default)([(0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_react2.Button, {

package/lib/components/PageHeader/PageHeader.js

@@ -44,7 +44,7 @@ var defaults = {
   narrowGrid: false
 };
 var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.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,
@@ -240,17 +240,15 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
       }
     }
     setPageHeaderStyles(function (prev) {
-      var _objectSpread2;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), (0, _defineProperty2.default)(_objectSpread2, "--".concat(_PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)), _objectSpread2));
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--max-action-bar-width-px"), newActionBarWidth), "--".concat(_PageHeaderUtils.blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)));
     });
   }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
   (0, _react.useEffect)(function () {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      var _objectSpread3;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread3 = {}, (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.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
-      )))), (0, _defineProperty2.default)(_objectSpread3, "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(_PageHeaderUtils.blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(_PageHeaderUtils.blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(_PageHeaderUtils.blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(_PageHeaderUtils.blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(_PageHeaderUtils.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(_PageHeaderUtils.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]);
   (0, _hooks.useNearestScroll)(headerRef,
@@ -329,7 +327,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
     className: "".concat(_PageHeaderUtils.blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
+    className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
@@ -339,7 +337,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__non-navigation-row-content")
   }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--container")
   }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
@@ -350,7 +348,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
   }) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
-    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref8 = {}, (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref8, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
+    className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -365,7 +363,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
     onWidthChange: handleActionBarWidthChange,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
   }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__title-column")
   }, title ? /*#__PURE__*/_react.default.createElement(_PageHeaderTitle.PageHeaderTitle, {
@@ -399,7 +397,7 @@ var PageHeader = exports.PageHeader = /*#__PURE__*/_react.default.forwardRef(fun
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
-    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (_cx7 = {}, (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags), _cx7))
+    className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
   }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__navigation-tabs")
   }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_react2.Column, {

package/lib/components/Saving/Saving.js

@@ -27,7 +27,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var componentName = 'Saving';
 var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _statusObj, _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
+  var _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
   var secondaryButtonText = _ref.secondaryButtonText,
     className = _ref.className,
     defaultIconDescription = _ref.defaultIconDescription,
@@ -43,7 +43,7 @@ var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     successText = _ref.successText,
     type = _ref.type,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var statusObj = (_statusObj = {
+  var statusObj = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
@@ -53,7 +53,7 @@ var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         }, props));
       }
     }
-  }, (0, _defineProperty2.default)(_statusObj, 'in-progress', {
+  }, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
     icon: function icon(props) {
@@ -61,7 +61,7 @@ var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         size: 16
       }, props));
     }
-  }), (0, _defineProperty2.default)(_statusObj, "success", {
+  }), "success", {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
@@ -69,7 +69,7 @@ var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         size: 16
       }, props));
     }
-  }), (0, _defineProperty2.default)(_statusObj, "fail", {
+  }), "fail", {
     text: failText,
     iconDescription: failIconDescription,
     icon: function icon(props) {
@@ -77,7 +77,7 @@ var Saving = exports.Saving = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         size: 16
       }, props));
     }
-  }), _statusObj);
+  });
   var blockClass = "".concat(_settings.pkg.prefix, "--saving");
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,