@carbon/ibm-products 1.11.0 → 1.12.0

package/es/components/AddSelect/AddSelectColumn.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["columnInputPlaceholder", "filteredItems", "header"];
+var _excluded = ["columnInputPlaceholder", "filteredItems", "header", "multiSelection", "setMultiSelection"];
 //
 // 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.
 //
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TextInput, Tag, OverflowMenu, OverflowMenuItem, Checkbox } from 'carbon-components-react';
 import { Filter32, ArrowsVertical32, ArrowUp16, ArrowDown16 } from '@carbon/icons-react';
@@ -23,30 +23,43 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
       filteredItems = _ref.filteredItems,
       header = _ref.header,
+      multiSelection = _ref.multiSelection,
+      setMultiSelection = _ref.setMultiSelection,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(''),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
+      allSelected = _useState2[0],
+      setAllSelected = _useState2[1];
 
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      sortDirection = _useState4[0],
-      setSortDirection = _useState4[1];
+      searchTerm = _useState4[0],
+      setSearchTerm = _useState4[1];
 
   var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      sortAttribute = _useState6[0],
-      setSortAttribute = _useState6[1];
+      sortDirection = _useState6[0],
+      setSortDirection = _useState6[1];
 
-  var _useState7 = useState([]),
+  var _useState7 = useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      filters = _useState8[0],
-      setFilters = _useState8[1];
+      sortAttribute = _useState8[0],
+      setSortAttribute = _useState8[1];
+
+  var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      filters = _useState10[0],
+      setFilters = _useState10[1];
 
   var blockClass = "".concat(pkg.prefix, "--add-select");
-  var colClass = "".concat(blockClass, "__column"); // sorting
+  var colClass = "".concat(blockClass, "__column");
+  useEffect(function () {
+    var isAllSelected = filteredItems.every(function (item) {
+      return multiSelection.includes(item.id);
+    });
+    setAllSelected(isAllSelected);
+  }, [filteredItems, multiSelection]); // sorting
 
   var colSortBy = (_filteredItems$find = filteredItems.find(function (item) {
     return item.sortBy;
@@ -80,6 +93,21 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection(direction);
   };
 
+  var selectAllHandler = function selectAllHandler(checked) {
+    var itemIds = filteredItems.map(function (item) {
+      return item.id;
+    });
+
+    if (checked) {
+      setMultiSelection([].concat(_toConsumableArray(multiSelection), _toConsumableArray(itemIds)));
+    } else {
+      var newItems = multiSelection.filter(function (i) {
+        return !itemIds.includes(i);
+      });
+      setMultiSelection(newItems);
+    }
+  };
+
   var filterHandler = function filterHandler(checked, opt) {
     if (checked) {
       var newFilters = [].concat(_toConsumableArray(filters), [opt]);
@@ -177,19 +205,27 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     })));
   })))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, header), /*#__PURE__*/React.createElement(Tag, {
-    type: "gray",
-    size: "sm"
-  }, colItems.length)), /*#__PURE__*/React.createElement(AddSelectList, _extends({}, props, {
-    inColumn: true,
-    filteredItems: colItems
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "".concat(uuidv4(), "-select-all"),
+    checked: allSelected,
+    onChange: selectAllHandler,
+    labelText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__tag-container-label")
+    }, header), /*#__PURE__*/React.createElement(Tag, {
+      type: "gray",
+      size: "sm"
+    }, colItems.length))
+  })), /*#__PURE__*/React.createElement(AddSelectList, _extends({}, props, {
+    filteredItems: colItems,
+    setMultiSelection: setMultiSelection,
+    multiSelection: multiSelection
   })));
 };
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: PropTypes.string,
   filteredItems: PropTypes.array,
-  header: PropTypes.string
+  header: PropTypes.string,
+  multiSelection: PropTypes.array,
+  setMultiSelection: PropTypes.func
 };
 AddSelectColumn.displayName = componentName;

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,15 @@ 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 { 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,
@@ -27,13 +29,13 @@ export var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(value, checked) {
+  var handleMultiSelection = function handleMultiSelection(id, checked) {
     if (checked) {
-      var newValues = [].concat(_toConsumableArray(multiSelection), [value]);
+      var newValues = [].concat(_toConsumableArray(multiSelection), [id]);
       setMultiSelection(newValues);
     } else {
       var _newValues = multiSelection.filter(function (v) {
-        return v !== value;
+        return v !== id;
       });
 
       setMultiSelection(_newValues);
@@ -99,32 +101,50 @@ export var AddSelectList = function AddSelectList(_ref) {
     }
   };
 
+  var isSelected = function isSelected(id) {
+    return multiSelection.includes(id);
+  };
+
   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"),
-      onChange: function onChange(value) {
-        return handleMultiSelection(item.id, value);
+    }, 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-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 +161,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

@@ -54,7 +54,8 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
         return handleItemRemove(id);
       },
       kind: "ghost",
-      className: "".concat(blockClass, "-item-remove-button")
+      className: "".concat(blockClass, "-item-remove-button"),
+      size: "sm"
     }));
   };
 

package/es/components/ButtonMenu/ButtonMenu.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "iconDescription", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -22,7 +22,8 @@ var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported he
 // Default values for props
 
 var defaults = {
-  size: 'default'
+  size: 'default',
+  kind: 'primary'
 };
 /**
  * Combining a standard button with an overflow menu, this component appears
@@ -36,6 +37,8 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       iconDescription = _ref.iconDescription,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
@@ -50,7 +53,7 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--primary"), "".concat(carbon.prefix, "--btn--").concat(size)])
+        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--").concat(kind), "".concat(carbon.prefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
@@ -86,6 +89,11 @@ ButtonMenu.propTypes = {
    */
   iconDescription: Button.propTypes.iconDescription,
 
+  /**
+   * The three types the menu button supports: primary, tertiary and ghost.
+   */
+  kind: PropTypes.oneOf(['primary', 'tertiary', 'ghost']),
+
   /**
    * The button label for the menu trigger.
    */

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, {