@carbon/ibm-products 1.11.2 → 1.14.0

package/lib/components/AddSelect/AddSelectList.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectList = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,6 +19,10 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _UserProfileImage = require("../UserProfileImage");
+
 var _settings = require("../../settings");
 
 //
@@ -29,7 +35,7 @@ var componentName = 'AddSelectList';
 
 var AddSelectList = function AddSelectList(_ref) {
   var filteredItems = _ref.filteredItems,
-      inColumn = _ref.inColumn,
+      modifiers = _ref.modifiers,
       multi = _ref.multi,
       multiSelection = _ref.multiSelection,
       path = _ref.path,
@@ -113,32 +119,75 @@ 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.default.createElement(Icon, null);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
+    var _modifiers$options;
+
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
       key: item.id,
-      className: "".concat(blockClass, "-row")
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
-    }, multi ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
-      className: "".concat(blockClass, "-checkbox"),
+    }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox")
+    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       onChange: function onChange(checked) {
         return handleMultiSelection(item.id, checked);
       },
-      labelText: !inColumn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(blockClass, "-cell-title")
-      }, item.title), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(blockClass, "-cell-subtitle")
-      }, item.subtitle)) : item.title,
+      labelText: item.title,
       id: item.id,
-      checked: multiSelection.includes(item.id)
-    }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+      checked: isSelected(item.id),
+      className: "".concat(blockClass, "-checkbox-wrapper")
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-wrapper")
+    }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-cell-icon")
+    }, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-checkbox-label-text")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "-cell-title")
+    }, item.title), item.subtitle && /*#__PURE__*/_react.default.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.default.createElement(_carbonComponentsReact.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.default.createElement(_carbonComponentsReact.RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
@@ -157,7 +206,7 @@ var AddSelectList = function AddSelectList(_ref) {
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   filteredItems: _propTypes.default.array,
-  inColumn: _propTypes.default.bool,
+  modifiers: _propTypes.default.object,
   multi: _propTypes.default.bool,
   multiSelection: _propTypes.default.array,
   path: _propTypes.default.array,

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectSidebar = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -19,12 +21,7 @@ var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState")
 
 var _settings = require("../../settings");
 
-//
-// Copyright IBM Corp. 2022
-//
-// 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 _excluded = ["icon", "avatar"];
 var componentName = 'AddSelectSidebar';
 
 var AddSelectSidebar = function AddSelectSidebar(_ref) {
@@ -44,11 +41,18 @@ 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 = (0, _objectWithoutProperties2.default)(selectedItem, _excluded);
+    acc.push(newItem);
+    return acc;
+  }, []);
 
   var getTitle = function getTitle(_ref2) {
     var title = _ref2.title,

package/lib/components/AddSelect/add-select-utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalize = exports.flatten = void 0;
+exports.normalize = exports.getGlobalFilterValues = exports.flatten = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -74,5 +74,38 @@ var flatten = function flatten(entries) {
     return prev.concat(item).concat(children ? flatten(children.entries) : []);
   }, []);
 };
+/**
+ * takes in a global filters array and a flat list of items
+ * it then searches through the items and finds any with the matching filter properties
+ * and adds those values to the array
+ * globalFilters looks like [{ id: someProperty }]
+ * the returned array would look like [{ id: someProperty, opts: [value, value]}]
+ * @param {Array} globalFilters - list of filter properties
+ * @param {Array} items - items to search through
+ * @returns an array of filter values
+ */
+
+
+exports.flatten = flatten;
+
+var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items) {
+  var filterOpts = globalFilters.reduce(function (prevFilter, curFilter) {
+    var filterId = curFilter.id;
+    var opts = items.reduce(function (prevItem, curItem) {
+      var value = curItem[filterId];
+
+      if (value && !prevItem.includes(value)) {
+        prevItem.push(value);
+      }
+
+      return prevItem;
+    }, []);
+    prevFilter.push(_objectSpread({
+      opts: opts
+    }, curFilter));
+    return prevFilter;
+  }, []);
+  return filterOpts;
+};
 
-exports.flatten = flatten;
+exports.getGlobalFilterValues = getGlobalFilterValues;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

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