@carbon/ibm-products 1.11.1 → 1.13.0

package/es/components/AddSelect/AddSelectColumn.js

@@ -216,7 +216,6 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       size: "sm"
     }, colItems.length))
   })), /*#__PURE__*/React.createElement(AddSelectList, _extends({}, props, {
-    inColumn: true,
     filteredItems: colItems,
     setMultiSelection: setMultiSelection,
     multiSelection: multiSelection

package/es/components/AddSelect/AddSelectList.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
 // Copyright IBM Corp. 2022
@@ -6,14 +7,16 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell } from 'carbon-components-react';
+import { Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, StructuredListCell, Dropdown } from 'carbon-components-react';
 import { ChevronRight16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { UserProfileImage } from '../UserProfileImage';
 import { pkg } from '../../settings';
 var componentName = 'AddSelectList';
 export var AddSelectList = function AddSelectList(_ref) {
   var filteredItems = _ref.filteredItems,
-      inColumn = _ref.inColumn,
+      modifiers = _ref.modifiers,
       multi = _ref.multi,
       multiSelection = _ref.multiSelection,
       path = _ref.path,
@@ -99,32 +102,75 @@ export var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
+  var isSelected = function isSelected(id) {
+    return multiSelection.includes(id);
+  };
+
+  var getAvatarProps = function getAvatarProps(_ref3) {
+    var src = _ref3.src,
+        alt = _ref3.alt,
+        icon = _ref3.icon,
+        backgroundColor = _ref3.backgroundColor;
+    return {
+      className: "".concat(blockClass, "-cell-avatar"),
+      size: 'lg',
+      theme: 'light',
+      image: src,
+      imageDescription: alt,
+      icon: icon,
+      backgroundColor: backgroundColor
+    };
+  };
+
+  var getItemIcon = function getItemIcon(_ref4) {
+    var Icon = _ref4.icon;
+    return /*#__PURE__*/React.createElement(Icon, null);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
+    var _modifiers$options;
+
     return /*#__PURE__*/React.createElement(StructuredListRow, {
       key: item.id,
-      className: "".concat(blockClass, "-row")
+      className: cx("".concat(blockClass, "-row"), _defineProperty({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
     }, /*#__PURE__*/React.createElement(StructuredListCell, {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/React.createElement(Checkbox, {
-      className: "".concat(blockClass, "-checkbox"),
+    }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-checkbox")
+    }, /*#__PURE__*/React.createElement(Checkbox, {
       onChange: function onChange(checked) {
         return handleMultiSelection(item.id, checked);
       },
-      labelText: !inColumn ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(blockClass, "-cell-title")
-      }, item.title), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(blockClass, "-cell-subtitle")
-      }, item.subtitle)) : item.title,
+      labelText: item.title,
       id: item.id,
-      checked: multiSelection.includes(item.id)
-    }) : /*#__PURE__*/React.createElement(RadioButton, {
+      checked: isSelected(item.id),
+      className: "".concat(blockClass, "-checkbox-wrapper")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-wrapper")
+    }, item.avatar && /*#__PURE__*/React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-cell-icon")
+    }, getItemIcon(item)), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-text")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "-cell-title")
+    }, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "-cell-subtitle")
+    }, item.subtitle)))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/React.createElement(Dropdown, {
+      id: "".concat(item.id, "-modifier"),
+      type: "inline",
+      items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,
+      light: true,
+      label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
+      disabled: !isSelected(item.id),
+      className: "".concat(blockClass, "-dropdown")
+    })) : /*#__PURE__*/React.createElement(RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
@@ -141,7 +187,7 @@ export var AddSelectList = function AddSelectList(_ref) {
 };
 AddSelectList.propTypes = {
   filteredItems: PropTypes.array,
-  inColumn: PropTypes.bool,
+  modifiers: PropTypes.object,
   multi: PropTypes.bool,
   multiSelection: PropTypes.array,
   path: PropTypes.array,

package/es/components/AddSelect/AddSelectSidebar.js

@@ -1,3 +1,5 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "avatar"];
 //
 // Copyright IBM Corp. 2022
 //
@@ -28,11 +30,19 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
     setMultiSelection(newSelections);
   };
 
-  var sidebarItems = multiSelection.map(function (selectedId) {
-    return items.find(function (item) {
-      return item.id === selectedId;
-    });
-  });
+  var sidebarItems = multiSelection.reduce(function (acc, cur) {
+    var selectedItem = items.find(function (item) {
+      return item.id === cur;
+    }); // certain properties should not be displayed in the sidebar
+    // eslint-disable-next-line no-unused-vars
+
+    var icon = selectedItem.icon,
+        avatar = selectedItem.avatar,
+        newItem = _objectWithoutProperties(selectedItem, _excluded);
+
+    acc.push(newItem);
+    return acc;
+  }, []);
 
   var getTitle = function getTitle(_ref2) {
     var title = _ref2.title,

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -76,6 +76,8 @@ export var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       key: "breadcrumb-overflow-".concat(internalId.current)
     }, /*#__PURE__*/React.createElement(OverflowMenu, {
       ariaLabel: overflowAriaLabel,
+      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      ,
       renderIcon: OverflowMenuHorizontal32,
       className: "".concat(blockClass, "__overflow-menu"),
       menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -61,23 +61,23 @@ export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
     title: title
-  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  }); // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
 
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
+  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
   useEffect(function () {
     setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit and onNext values to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
   return stepsContext ? /*#__PURE__*/React.createElement("section", _extends({}, rest, {

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -63,24 +63,24 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     shouldIncludeStep: shouldIncludeStep,
     secondaryLabel: secondaryLabel,
     title: title
-  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  }); // This useEffect reports back the onMount value so that they can be used
   // in the appropriate custom hooks.
 
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
+  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
 
   useEffect(function () {
     setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit and onNext values to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext.setIsDisabled(disableSubmit);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
   return stepsContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {