@carbon/ibm-products 1.6.0 → 1.6.1

package/es/components/PageHeader/PageHeader.js

@@ -770,7 +770,7 @@ PageHeader.propTypes = _objectSpread({
    *    - onChange: function to process the live value (React change === HTML Input)
    *    - onSave: function to process a confirmed change
    *    - editableLabel: label for edit required if onChange supplied
-   *    - revertDescription: label for edit revert button
+   *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
@@ -789,7 +789,7 @@ PageHeader.propTypes = _objectSpread({
     // .isRequired.if(inlineEditRequired),
     onChange: PropTypes.func,
     onSave: PropTypes.func,
-    revertDescription: PropTypes.string,
+    cancelDescription: PropTypes.string,
     //.isRequired.if(inlineEditRequired),
     saveDescription: PropTypes.string //.isRequired.if(inlineEditRequired),
     // Update docgen if changed

package/lib/components/AddSelect/AddSelect.js

@@ -179,6 +179,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
   var sidebarProps = {
     influencerTitle: influencerTitle,
+    items: items,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
     noSelectionTitle: noSelectionTitle
@@ -199,9 +200,9 @@ AddSelect.propTypes = {
   influencerTitle: _propTypes.default.string,
   inputPlaceholder: _propTypes.default.string,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    label: _propTypes.default.string,
-    value: _propTypes.default.string
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired
   })),
   itemsLabel: _propTypes.default.string,
   multi: _propTypes.default.bool,

package/lib/components/AddSelect/AddSelectList.js

@@ -77,11 +77,11 @@ var AddSelectList = function AddSelectList(_ref) {
     }, multi ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       className: "".concat(blockClass, "-checkbox"),
       onChange: function onChange(value) {
-        return handleMultiSelection(item.value, value);
+        return handleMultiSelection(item.id, value);
       },
       labelText: item.label,
       id: item.id,
-      checked: multiSelection.includes(item.value)
+      checked: multiSelection.includes(item.id)
     }) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",

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");
@@ -17,22 +19,33 @@ 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 = ["children"];
 var componentName = 'AddSelectSidebar';
 
 var AddSelectSidebar = function AddSelectSidebar(_ref) {
   var influencerTitle = _ref.influencerTitle,
+      items = _ref.items,
       multiSelection = _ref.multiSelection,
       noSelectionDescription = _ref.noSelectionDescription,
       noSelectionTitle = _ref.noSelectionTitle;
-  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__influencer");
+  var blockClass = "".concat(_settings.pkg.prefix, "--add-select__sidebar"); // 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) {
+      var children = cur.children,
+          item = (0, _objectWithoutProperties2.default)(cur, _excluded);
+      return prev.concat(item).concat(children ? flattenItems(children) : []);
+    }, []);
+  };
+
+  var flattenedItems = flattenItems(items);
+  var sidebarItems = multiSelection.map(function (selectedId) {
+    return flattenedItems.find(function (item) {
+      return item.id === selectedId;
+    });
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass)
+    className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-header")
   }, /*#__PURE__*/_react.default.createElement("p", {
@@ -40,13 +53,25 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
     size: "sm"
-  }, multiSelection.length)), /*#__PURE__*/_react.default.createElement("div", {
+  }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
+    align: "start"
+  }, sidebarItems.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
+      title: item.value,
+      key: item.id
+    }, Object.keys(item).map(function (key) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(blockClass, "-item"),
+        key: key
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        className: "".concat(blockClass, "-item-header")
+      }, key), /*#__PURE__*/_react.default.createElement("p", {
+        className: "".concat(blockClass, "-item-body")
+      }, item[key]));
+    }));
+  })) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-body")
-  }, multiSelection.length > 0 ? multiSelection.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement("p", {
-      key: item
-    }, item);
-  }) : /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
+  }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,
     size: "sm"
@@ -56,6 +81,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
 exports.AddSelectSidebar = AddSelectSidebar;
 AddSelectSidebar.propTypes = {
   influencerTitle: _propTypes.default.string,
+  items: _propTypes.default.array,
   multiSelection: _propTypes.default.array,
   noSelectionDescription: _propTypes.default.string,
   noSelectionTitle: _propTypes.default.string

package/lib/components/EmptyStates/EmptyState.js

@@ -123,7 +123,7 @@ EmptyState.propTypes = {
   /**
    * Empty state subtext
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state heading

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -37,7 +37,7 @@ var EmptyStateContent = function EmptyStateContent(_ref) {
       title = _ref.title;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
     className: (0, _classnames.default)("".concat(blockClass, "__header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__header--small"), size === 'sm'))
-  }, title), /*#__PURE__*/_react.default.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _classnames.default)("".concat(blockClass, "__subtitle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
   }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, action, {
     className: "".concat(blockClass, "__action-button"),
@@ -85,7 +85,7 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -114,7 +114,7 @@ ErrorEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -114,7 +114,7 @@ NoDataEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -114,7 +114,7 @@ NoTagsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -114,7 +114,7 @@ NotFoundEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -114,7 +114,7 @@ NotificationsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -114,7 +114,7 @@ UnauthorizedEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
   /**
    * Empty state title

package/lib/components/InlineEdit/InlineEdit.js

@@ -31,7 +31,7 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
+var _excluded = ["cancelDescription", "className", "disabled", "editDescription", "editVisibleOnHoverOnly", "id", "invalid", "invalidText", "labelText", "light", "onCancel", "onSave", "onChange", "placeholder", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
 
 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); }
 
@@ -46,7 +46,7 @@ var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported he
  */
 
 var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
-  var _cx, _cx2;
+  var _cx, _cx3;
 
   var cancelDescription = _ref.cancelDescription,
       className = _ref.className,
@@ -61,6 +61,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       onCancel = _ref.onCancel,
       onSave = _ref.onSave,
       onChange = _ref.onChange,
+      placeholder = _ref.placeholder,
       saveDescription = _ref.saveDescription,
       saveDisabled = _ref.saveDisabled,
       size = _ref.size,
@@ -86,13 +87,22 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   var validationText = invalidText || warnText;
   var validationIcon = showValidationText ? invalid ? /*#__PURE__*/_react.default.createElement(_iconsReact.WarningFilled16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, null) : null;
 
+  var doSetEditing = function doSetEditing(value) {
+    if (value === false) {
+      // move scroll to start
+      refInput.current.scrollLeft = 0;
+    }
+
+    setEditing(!disabled && value);
+  };
+
   var handleEdit = function handleEdit(ev) {
     if (!disabled) {
-      var rightOfInput = ev.currentTarget.classList.contains("".concat(blockClass, "__edit")) || ev.target.classList.contains("".concat(blockClass, "__controls"));
+      var rightOfInput = ev.currentTarget.classList.contains("".concat(blockClass, "__edit")) || ev.target.classList.contains("".concat(blockClass, "__after-input-elements"));
       var leftOfInput = ev.currentTarget = ev.target.classList.contains("".concat(blockClass)); // clicking on the content editable element should not set either of these to true
 
       if (rightOfInput || leftOfInput) {
-        setEditing(true);
+        doSetEditing(true);
         setTimeout(function () {
           refInput.current.focus(); // select all the content
 
@@ -111,14 +121,15 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleFocus = function handleFocus(ev) {
+    ev.preventDefault();
+
     if (!editing && ev.target.classList.contains("".concat(blockClass, "__input"))) {
-      // console.log(editing);
-      setEditing(true);
+      doSetEditing(true);
     }
   };
 
   var handleSave = function handleSave() {
-    setEditing(false);
+    doSetEditing(false);
     document.getSelection().removeAllRanges();
 
     if (onSave) {
@@ -164,7 +175,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   var handleCancel = function handleCancel() {
     refInput.current.innerText = value;
     handleInput(value);
-    setEditing(false);
+    doSetEditing(false);
     document.getSelection().removeAllRanges();
 
     if (onCancel) {
@@ -174,7 +185,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
 
   var handleBlur = function handleBlur(ev) {
     if (!ref.current.contains(ev.relatedTarget)) {
-      setEditing(false);
+      doSetEditing(false);
       handleSave();
     }
   };
@@ -190,13 +201,13 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
    <container>
     <!-- margin left of input to match Carbon -->
     <content-editable>
-    <-- margin right of input space for controls -->
-    <controls>
+    <-- margin right of input space for after-input-elements -->
+    <after-input-elements>
   </container>
     NOTE:
    - An input is not used as this would not permit a heading tag e.g. <h2>.
    - Some padding is added to the left 16px standard for a Carbon text input
-   - The controls are position absolute with a margin to on the input to reserve space. Using inline-flex
+   - The after-input-elements are position absolute with a margin to on the input to reserve space. Using inline-flex
    - does not measure space properly for the input otherwise.
    - The content editable is not expected to change size when buttons are added, to ensure the text does not move space
     is reserved up front for buttons and invalid icon. Mostly this is only noticed if the width of the component is not 100%.
@@ -209,14 +220,14 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   */
 
 
-  var controlsAnimation = true;
+  var toolbarAnimation = true;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line
     _react.default.createElement("div", {
       className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
-      "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), _cx)),
+      "".concat(blockClass, "--").concat(size), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--disabled"), disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--editing"), editing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--invalid"), invalid), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--warn"), warn), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--light"), light), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--overflows"), refInput.current && refInput.current.scrollWidth > refInput.current.offsetWidth), _cx)),
       onClick: handleEdit // disabled eslint for click handler
       ,
       onBlur: handleBlur,
@@ -224,26 +235,30 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
       id: id,
       size: size,
-      className: "".concat(blockClass, "__input"),
+      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), refInput.current && refInput.current.innerText.length === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",
-      tabIndex: "0",
+      tabIndex: disabled ? -1 : 0,
       onFocus: handleFocus,
       onInput: handleInput,
       onKeyDown: handleKeyDown,
       onPaste: handlePaste,
       suppressContentEditableWarning: true,
-      ref: refInput
-    }), value), refInput.current && refInput.current.innerText.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__placeholder")
-    }, labelText), showValidationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(blockClass, "__validation-text")
-    }, validationText), /*#__PURE__*/_react.default.createElement("div", {
+      ref: refInput,
+      "data-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : labelText
+    }), value), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(blockClass, "__after-input-elements")) // tabindex -1 fixes blur target test when clicking on after-input-elements background
+      ,
+      tabIndex: "-1"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__ellipsis"),
+      "aria-hidden": !editing
+    }, "\u2026"), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(blockClass, "__toolbar"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--animation"), toolbarAnimation), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__toolbar--saveable"), refInput.current && value !== internalValue), _cx3))
+    }, showValidationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__validation-icon")
-    }, validationIcon), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__controls"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__controls--animation"), controlsAnimation), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__controls--saveable"), invalid || saveDisabled || refInput.current && value !== internalValue), _cx2))
-    }, editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, validationIcon), editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       className: "".concat(blockClass, "__cancel"),
       kind: "ghost",
       hasIconOnly: true,
@@ -268,7 +283,11 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       renderIcon: disabled ? _iconsReact.EditOff16 : _iconsReact.Edit16,
       disabled: disabled,
       tabIndex: -1
-    })))
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(blockClass, "__disabled-cover"))
+    }), showValidationText && validationText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__validation-text ").concat(_settings.carbon.prefix, "--form-requirement")
+    }, validationText))
   );
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -348,6 +367,11 @@ InlineEdit.propTypes = {
    */
   onSave: _propTypes.default.func,
 
+  /**
+   * placeholder for text input
+   */
+  placeholder: _propTypes.default.string,
+
   /**
    * label for save button
    */

package/lib/components/PageHeader/PageHeader.js

@@ -803,7 +803,7 @@ PageHeader.propTypes = _objectSpread({
    *    - onChange: function to process the live value (React change === HTML Input)
    *    - onSave: function to process a confirmed change
    *    - editableLabel: label for edit required if onChange supplied
-   *    - revertDescription: label for edit revert button
+   *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
@@ -822,7 +822,7 @@ PageHeader.propTypes = _objectSpread({
     // .isRequired.if(inlineEditRequired),
     onChange: _propTypes.default.func,
     onSave: _propTypes.default.func,
-    revertDescription: _propTypes.default.string,
+    cancelDescription: _propTypes.default.string,
     //.isRequired.if(inlineEditRequired),
     saveDescription: _propTypes.default.string //.isRequired.if(inlineEditRequired),
     // Update docgen if changed

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,14 +33,14 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-all",
+    "build": "run-s clean build-first build-all",
     "build-all": "run-p build:*",
-    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules src:css",
-    "build:css-min": "sass --style=compressed --no-source-map --load-path node_modules --load-path ../../node_modules src/index.scss:css/index.min.css src/index-full-carbon.scss:css/index-full-carbon.min.css src/index-without-carbon.scss:css/index-without-carbon.min.css src/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
+    "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
+    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
+    "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
-    "build:scss": "copyfiles 'src/**/*.scss' scss -u 1",
     "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
@@ -51,24 +51,24 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.0",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.6",
+    "@babel/core": "^7.17.2",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.7",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
     "glob": "^7.2.0",
-    "jest": "^27.4.7",
-    "jest-config-ibm-cloud-cognitive": "^0.23.7",
-    "npm-check-updates": "^12.2.1",
+    "jest": "^27.5.1",
+    "jest-config-ibm-cloud-cognitive": "^0.23.8",
+    "npm-check-updates": "^12.3.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.49.7",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
+    "@babel/runtime": "^7.17.2",
     "@carbon/telemetry": "^0.0.0-alpha.6",
     "react-resize-detector": "^7.0.0"
   },
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "3e87aeeb51d41503263511831b8db5f08437d754"
+  "gitHead": "86c37c0c58a654ada45a703c5524237e9abb2664"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -49,26 +49,36 @@
     }
   }
 
-  // multi select specific
+  // sidebar
 
-  .#{$block-class}__influencer-header {
+  .#{$block-class}__sidebar-header {
     display: flex;
     padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
     border-bottom: 1px solid $ui-03;
 
-    .#{$block-class}__influencer-title {
+    .#{$block-class}__sidebar-title {
       @include carbon--type-style('productive-heading-02');
     }
   }
 
-  .#{$block-class}__influencer-title {
+  .#{$block-class}__sidebar-title {
     margin-right: $spacing-03;
   }
 
-  .#{$block-class}__influencer-body {
+  .#{$block-class}__sidebar-body {
     padding: $spacing-05;
   }
 
+  .#{$block-class} .#{$block-class}__sidebar-item-header {
+    @include carbon--type-style('label-01');
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-item-body {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-03;
+  }
+
   // overrides
 
   // the influencer sidebar needs to be even with the buttons

package/scss/components/CancelableTextEdit/_storybook-styles.scss

@@ -5,11 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
 // TODO: add any additional styles used by CancelableTextEdit.stories.js
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';

package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss

@@ -5,14 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
 @import '../../global/styles/project-settings';
 
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';
-
 $story-class: #{$pkg-prefix}--create-tearsheet-narrow--story;
 
 .#{$story-class}__flex-container {

package/scss/components/EditSidePanel/_storybook-styles.scss

@@ -5,9 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
-// TODO: add any additional styles used by EditSidePanel.stories.js
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--edit-side-panel;
@@ -28,8 +25,3 @@ $story-prefix: edit-side-panel-stories__;
 .#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';