@carbon/ibm-products 1.6.1 → 1.7.0

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "columns", "data"];
+
+/**
+ * Copyright IBM Corp. 2022, 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 portions of React that are needed.
+import React, { useMemo } from 'react';
+import { useBlockLayout, useTable } from 'react-table';
+import { FixedSizeList } from 'react-window'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg
+/*, carbon */
+} from '../../settings';
+import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
+var componentName = 'DataSpreadsheet';
+/**
+ * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ */
+
+export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      columns = _ref.columns,
+      data = _ref.data,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var defaultColumn = useMemo(function () {
+    return {
+      width: 150,
+      rowHeaderWidth: 64
+    };
+  }, []);
+  var scrollBarSize = useMemo(function () {
+    return getScrollbarWidth();
+  }, []);
+
+  var _useTable = useTable({
+    columns: columns,
+    data: data,
+    defaultColumn: defaultColumn
+  }, useBlockLayout),
+      getTableProps = _useTable.getTableProps,
+      getTableBodyProps = _useTable.getTableBodyProps,
+      headerGroups = _useTable.headerGroups,
+      rows = _useTable.rows,
+      totalColumnsWidth = _useTable.totalColumnsWidth,
+      prepareRow = _useTable.prepareRow;
+
+  var RenderRow = React.useCallback(function (_ref2) {
+    var index = _ref2.index,
+        style = _ref2.style;
+    var row = rows[index];
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
+      style: style
+    }), {
+      className: "tr",
+      "data-row-index": index
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th")),
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+      }
+    }, index + 1), row.cells.map(function (cell, index) {
+      return /*#__PURE__*/React.createElement("button", _extends({
+        key: "cell_".concat(index)
+      }, cell.getCellProps(), {
+        type: "button",
+        className: "".concat(blockClass, "__td")
+      }), cell.render('Cell'));
+    }));
+  }, [prepareRow, rows, defaultColumn.rowHeaderWidth]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
+    className: cx(blockClass, className),
+    ref: ref,
+    role: "grid"
+  }), /*#__PURE__*/React.createElement("div", null, headerGroups.map(function (headerGroup, index) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: "header_".concat(index)
+    }, headerGroup.getHeaderGroupProps(), {
+      className: "".concat(blockClass, "__tr")
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(blockClass, "__th"),
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      }
+    }, "\xA0"), headerGroup.headers.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("button", _extends({
+        key: "column_".concat(index)
+      }, column.getHeaderProps(), {
+        type: "button",
+        className: "".concat(blockClass, "__th")
+      }), column.render('Header'));
+    }));
+  })), /*#__PURE__*/React.createElement("div", getTableBodyProps(), /*#__PURE__*/React.createElement(FixedSizeList, {
+    height: 400,
+    itemCount: rows.length,
+    itemSize: 36,
+    width: totalColumnsWidth + scrollBarSize
+  }, RenderRow)));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+DataSpreadsheet = pkg.checkComponentEnabled(DataSpreadsheet, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+DataSpreadsheet.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.
+
+DataSpreadsheet.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The data that will build the column headers
+   */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    Header: PropTypes.string,
+    accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    Cell: PropTypes.func // optional cell formatter
+
+  })),
+
+  /**
+   * The spreadsheet data that will be rendered in the body of the spreadsheet component
+   */
+  data: PropTypes.arrayOf(PropTypes.shape)
+  /* TODO: add types and DocGen for all props. */
+
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+DataSpreadsheet.defaultProps = {
+  data: [],
+  columns: []
+};

package/es/components/DataSpreadsheet/generateData.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// cspell:disable
+var pets = ['dog', 'cat', 'bird', 'lizard', 'frog', 'hamster', 'fish', 'rabbit', 'snake'];
+var petNames = ['Bruno', 'Willow', 'Kona', 'Heidi', 'Rusty', 'Bonnie', 'Cash', 'Gucci', 'Brody', 'Emma', 'Loki', 'Angel', 'Astro', 'Sherman', 'Layla', 'Peanut', 'Grace', 'Mickey', 'Sasha', 'Finn', 'Tucker', 'Bear', 'Mocha', 'Roscoe']; // cspell:enable
+
+var range = function range(len) {
+  var arr = [];
+
+  for (var i = 0; i < len; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+
+var newPet = function newPet() {
+  return {
+    petType: pets[Math.floor(Math.random() * pets.length)],
+    firstName: petNames[Math.floor(Math.random() * petNames.length)],
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 40),
+    health: Math.floor(Math.random() * 100)
+  };
+};
+
+export var generateData = function generateData() {
+  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
+    lens[_key] = arguments[_key];
+  }
+
+  var makeDataLevel = function makeDataLevel() {
+    var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var len = lens[depth];
+    return range(len).map(function () {
+      return _objectSpread(_objectSpread({}, newPet()), {}, {
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
+      });
+    });
+  };
+
+  return makeDataLevel();
+};

package/es/components/DataSpreadsheet/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+export { DataSpreadsheet } from './DataSpreadsheet';

package/es/components/InlineEdit/InlineEdit.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
+var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "size", "value", "warn", "warnText"];
 
 /**
  * Copyright IBM Corp. 2022, 2022
@@ -48,7 +48,6 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       onChange = _ref.onChange,
       placeholder = _ref.placeholder,
       saveDescription = _ref.saveDescription,
-      saveDisabled = _ref.saveDisabled,
       size = _ref.size,
       value = _ref.value,
       warn = _ref.warn,
@@ -69,9 +68,9 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       internalValue = _useState4[0],
       setInternalValue = _useState4[1];
 
-  var showValidationText = invalid || warn;
+  var showValidation = invalid || warn;
   var validationText = invalidText || warnText;
-  var validationIcon = showValidationText ? invalid ? /*#__PURE__*/React.createElement(WarningFilled16, null) : /*#__PURE__*/React.createElement(WarningAltFilled16, null) : null;
+  var validationIcon = showValidation ? invalid ? /*#__PURE__*/React.createElement(WarningFilled16, null) : /*#__PURE__*/React.createElement(WarningAltFilled16, null) : null;
 
   var doSetEditing = function doSetEditing(value) {
     if (value === false) {
@@ -123,6 +122,14 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     }
   };
 
+  var handleInput = function handleInput() {
+    setInternalValue(refInput.current.innerText);
+
+    if (onChange) {
+      onChange(refInput.current.innerText);
+    }
+  };
+
   var handlePaste = function handlePaste(ev) {
     ev.preventDefault(); // Get clipboard as plain text
 
@@ -150,14 +157,6 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
     }
   };
 
-  var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
-
-    if (onChange) {
-      onChange(refInput.current.innerText);
-    }
-  };
-
   var handleCancel = function handleCancel() {
     refInput.current.innerText = value;
     handleInput(value);
@@ -171,7 +170,6 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
 
   var handleBlur = function handleBlur(ev) {
     if (!ref.current.contains(ev.relatedTarget)) {
-      doSetEditing(false);
       handleSave();
     }
   };
@@ -242,7 +240,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       "aria-hidden": !editing
     }, "\u2026"), /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__toolbar"), (_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), _defineProperty(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
-    }, showValidationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
+    }, showValidation && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
     }, validationIcon), editing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "__cancel"),
@@ -258,7 +256,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       iconDescription: saveDescription,
       onClick: handleSave,
       renderIcon: Checkmark16,
-      disabled: invalid || saveDisabled || value === internalValue
+      disabled: value === internalValue
     })) : /*#__PURE__*/React.createElement(Button, {
       "aria-hidden": "true",
       className: cx("".concat(blockClass, "__edit"), _defineProperty({}, "".concat(blockClass, "__edit--hover-visible"), editVisibleOnHoverOnly)),
@@ -271,7 +269,7 @@ export var InlineEdit = /*#__PURE__*/React.forwardRef(function (_ref, refIn) {
       tabIndex: -1
     }))), /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__disabled-cover"))
-    }), showValidationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
+    }), showValidation && validationText && validationText.length > 0 && /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__validation-text ").concat(carbon.prefix, "--form-requirement")
     }, validationText))
   );
@@ -342,12 +340,16 @@ InlineEdit.propTypes = {
   onCancel: PropTypes.func,
 
   /**
-   * method called on input event (it's a React thing onChange behaves like on input)
+   * method called on input event (it's a React thing onChange behaves like on input).
+   *
+   * NOTE: caller to handle invalid/warn states and associated text
    */
   onChange: PropTypes.func,
 
   /**
    * method called on change event
+   *
+   * NOTE: caller to handle invalid/warn states and associated text
    */
   onSave: PropTypes.func,
 
@@ -361,11 +363,6 @@ InlineEdit.propTypes = {
    */
   saveDescription: PropTypes.string.isRequired,
 
-  /**
-   * disabled state of the save button
-   */
-  saveDisabled: PropTypes.bool,
-
   /**
    * vertical size of control
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 // Import portions of React that are needed.
-import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
 
 import PropTypes from 'prop-types';
@@ -120,10 +120,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setTimeout(function () {
       return element.focus();
     }, 1);
-  }; // Hook called whenever the tearsheet mounts, unmounts, or 'open' changes.
+  };
 
-
-  useLayoutEffect(function () {
+  useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);

package/es/components/index.js

@@ -37,4 +37,5 @@ export { WebTerminal } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { CancelableTextEdit } from './CancelableTextEdit';
-export { InlineEdit } from './InlineEdit';
+export { InlineEdit } from './InlineEdit';
+export { DataSpreadsheet } from './DataSpreadsheet';

package/es/global/js/package-settings.js

@@ -63,7 +63,8 @@ var defaults = {
     EditSidePanel: false,
     OptionsTile: false,
     CancelableTextEdit: false,
-    InlineEdit: false
+    InlineEdit: false,
+    DataSpreadsheet: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/es/global/js/utils/getScrollbarWidth.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+export var getScrollbarWidth = function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+  document.body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return scrollbarWidth;
+};

package/lib/components/ActionSet/ActionSet.js

@@ -61,7 +61,7 @@ ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsRea
   label: _propTypes.default.string,
   loading: _propTypes.default.bool
 });
-var defaultKind = _carbonComponentsReact.Button.defaultProps.kind;
+var defaultKind = 'primary';
 
 var willStack = function willStack(size, numberOfActions) {
   return size === 'xs' || size === 'sm' || size === 'md' && numberOfActions > 2;

package/lib/components/AddSelect/AddSelect.js

@@ -37,7 +37,7 @@ var _AddSelectBreadcrumbs = require("./AddSelectBreadcrumbs");
 
 var _AddSelectList = require("./AddSelectList");
 
-var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "title"];
+var _excluded = ["className", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,6 +64,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onSubmit = _ref.onSubmit,
       onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
+      removeIconDescription = _ref.removeIconDescription,
+      textInputLabel = _ref.textInputLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select"); // hooks
@@ -118,7 +120,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       } // otherwise use the default label filter
 
 
-      return item.label.toLowerCase().includes(searchTerm);
+      return item.title.toLowerCase().includes(searchTerm);
     });
     return results;
   };
@@ -129,7 +131,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     id: "temp-id",
-    labelText: "temp label",
+    labelText: textInputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
     onChange: handleSearch
@@ -182,7 +184,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     items: items,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
-    noSelectionTitle: noSelectionTitle
+    noSelectionTitle: noSelectionTitle,
+    removeIconDescription: removeIconDescription,
+    setMultiSelection: setMultiSelection
   };
   var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
@@ -201,7 +205,7 @@ AddSelect.propTypes = {
   inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
     value: _propTypes.default.string.isRequired
   })),
   itemsLabel: _propTypes.default.string,
@@ -216,6 +220,8 @@ AddSelect.propTypes = {
   onSubmit: _propTypes.default.func,
   onSubmitButtonText: _propTypes.default.string,
   open: _propTypes.default.bool,
+  removeIconDescription: _propTypes.default.string,
+  textInputLabel: _propTypes.default.string,
   title: _propTypes.default.string
 };
 AddSelect.defaultProps = {

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -58,7 +58,7 @@ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
       key: entry.id,
       isCurrentPage: isCurrentPage,
       onClick: crumbHandler
-    }, entry.label);
+    }, entry.title);
   }));
 };
 

package/lib/components/AddSelect/AddSelectList.js

@@ -57,10 +57,10 @@ var AddSelectList = function AddSelectList(_ref) {
 
   var onNavigateItem = function onNavigateItem(_ref2) {
     var id = _ref2.id,
-        label = _ref2.label;
+        title = _ref2.title;
     setPath([].concat((0, _toConsumableArray2.default)(path), [{
       id: id,
-      label: label
+      title: title
     }]));
   };
 
@@ -79,7 +79,7 @@ var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange(value) {
         return handleMultiSelection(item.id, value);
       },
-      labelText: item.label,
+      labelText: item.title,
       id: item.id,
       checked: multiSelection.includes(item.id)
     }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
@@ -87,7 +87,7 @@ var AddSelectList = function AddSelectList(_ref) {
       name: "add-select-selections",
       id: item.id,
       value: item.value,
-      labelText: item.label,
+      labelText: item.title,
       onChange: handleSingleSelection,
       selected: item.value === singleSelection
     }), item.children && /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronRight16, {

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -13,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _iconsReact = require("@carbon/icons-react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _NoDataEmptyState = require("../../components/EmptyStates/NoDataEmptyState");
@@ -27,8 +29,18 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       items = _ref.items,
       multiSelection = _ref.multiSelection,
       noSelectionDescription = _ref.noSelectionDescription,
-      noSelectionTitle = _ref.noSelectionTitle;
-  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar"); // utility to flatten the list of items and their children into a single searchable array
+      noSelectionTitle = _ref.noSelectionTitle,
+      removeIconDescription = _ref.removeIconDescription,
+      setMultiSelection = _ref.setMultiSelection;
+  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar");
+
+  var handleItemRemove = function handleItemRemove(id) {
+    var newSelections = multiSelection.filter(function (v) {
+      return v !== id;
+    });
+    setMultiSelection(newSelections);
+  }; // utility to flatten the list of items and their children into a single searchable array
+
 
   var flattenItems = function flattenItems(arr) {
     return arr.reduce(function (prev, cur) {
@@ -44,6 +56,25 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       return item.id === selectedId;
     });
   });
+
+  var getTitle = function getTitle(_ref2) {
+    var title = _ref2.title,
+        subtitle = _ref2.subtitle,
+        id = _ref2.id;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "-accordion-title")
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, title), /*#__PURE__*/_react.default.createElement("p", null, subtitle)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+      renderIcon: _iconsReact.SubtractAlt32,
+      iconDescription: removeIconDescription,
+      hasIconOnly: true,
+      onClick: function onClick() {
+        return handleItemRemove(id);
+      },
+      kind: "ghost",
+      className: "".concat(blockClass, "-item-remove-button")
+    }));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -57,7 +88,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     align: "start"
   }, sidebarItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
-      title: item.value,
+      title: getTitle(item),
       key: item.id
     }, Object.keys(item).map(function (key) {
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -84,6 +115,8 @@ AddSelectSidebar.propTypes = {
   items: _propTypes.default.array,
   multiSelection: _propTypes.default.array,
   noSelectionDescription: _propTypes.default.string,
-  noSelectionTitle: _propTypes.default.string
+  noSelectionTitle: _propTypes.default.string,
+  removeIconDescription: _propTypes.default.string,
+  setMultiSelection: _propTypes.default.func
 };
 AddSelectSidebar.displayName = componentName;

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -111,5 +111,5 @@ ButtonMenu.propTypes = {
   size: _carbonComponentsReact.Button.propTypes.size
 };
 ButtonMenu.defaultProps = {
-  size: _carbonComponentsReact.Button.defaultProps.size
+  size: 'default'
 };