@carbon/ibm-products 2.38.0-alpha.5 → 2.38.0

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -21,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "state", "popOverClassName", "config"];
+var _excluded = ["children", "className", "label", "renderIcon", "title", "type", "showToolTip", "condition", "popOverClassName", "config"];
 var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -30,7 +30,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
     title = _ref.title,
     type = _ref.type,
     showToolTip = _ref.showToolTip,
-    state = _ref.state,
+    condition = _ref.condition,
     popOverClassName = _ref.popOverClassName,
     config = _ref.config,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -53,17 +53,17 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
      * rest['data-name'] holds the current field name
      * popoverToOpen hold the next popover to be opened if required
      */
-    if (state) {
+    if (condition) {
       var currentField = rest['data-name'];
       //if any condition is changed, state prop is triggered
-      if (state.popoverToOpen && currentField !== state.popoverToOpen) {
+      if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
         setOpen(false);
-      } else if (currentField == 'valueField' && type == 'option' && state.operator !== 'one-of') {
+      } else if (currentField == 'valueField' && type == 'option' && condition.operator !== 'one-of') {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
         setOpen(false);
       }
-      if (state.popoverToOpen == currentField) {
+      if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
         setOpen(true);
       }
@@ -73,7 +73,7 @@ var ConditionBuilderItem = function ConditionBuilderItem(_ref) {
       setOpen(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, label]);
+  }, [condition, label]);
   React.useEffect(function () {
     //this will focus the first input field in the popover
     if (open && contentRef.current) {
@@ -121,6 +121,10 @@ ConditionBuilderItem.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * current condition state object
+   */
+  condition: index["default"].object,
   /**
    * this is the config object again the current property from inputConfig
    */
@@ -142,10 +146,6 @@ ConditionBuilderItem.propTypes = {
    * show tool tip
    */
   showToolTip: index["default"].bool,
-  /**
-   * current condition state object
-   */
-  state: index["default"].object,
   /**
    * title of the popover
    */

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.d.ts

@@ -5,20 +5,22 @@ export default ConditionGroupBuilder;
  * All the inner components of group are called from here.
  * @returns
  */
-declare function ConditionGroupBuilder({ state, aria, onRemove, onChange, conditionBuilderRef, }: {
-    state: any;
+declare function ConditionGroupBuilder({ group, aria, onRemove, onChange, conditionBuilderRef, className, }: {
+    group: any;
     aria: any;
     onRemove: any;
     onChange: any;
     conditionBuilderRef: any;
+    className: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ConditionGroupBuilder {
     namespace propTypes {
         let aria: PropTypes.Requireable<object>;
+        let className: PropTypes.Requireable<string>;
         let conditionBuilderRef: PropTypes.Requireable<object>;
+        let group: PropTypes.Requireable<object>;
         let onChange: PropTypes.Requireable<(...args: any[]) => any>;
         let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-        let state: PropTypes.Requireable<object>;
     }
 }
 import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -14,6 +14,7 @@ var React = require('react');
 var ConditionBlock = require('../ConditionBlock/ConditionBlock.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,17 +27,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @returns
  */
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
-  var _state$conditions;
-  var state = _ref.state,
+  var _group$conditions;
+  var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
-    conditionBuilderRef = _ref.conditionBuilderRef;
-  var onRemoveHandler = function onRemoveHandler(conditionIndex, e) {
-    if (state.conditions.length > 1) {
-      onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-        conditions: state.conditions.filter(function (condition, cIndex) {
-          return conditionIndex !== cIndex;
+    conditionBuilderRef = _ref.conditionBuilderRef,
+    className = _ref.className;
+  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+    if (group.conditions.length > 1) {
+      onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        conditions: group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
         })
       }));
       handleFocusOnClose(e);
@@ -44,23 +46,27 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onRemove();
     }
   };
-  var onChangeHandler = function onChangeHandler(updatedConditions, conditionIndex) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-      conditions: state.conditions.map(function (condition, cIndex) {
-        return conditionIndex === cIndex ? updatedConditions : condition;
-      })
+  var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
+    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)));
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: updatedConditions
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(state.conditions.slice(0, conditionIndex + 1)), [{
-        property: undefined,
-        operator: '',
-        value: '',
-        popoverToOpen: 'propertyField'
-      }], _rollupPluginBabelHelpers.toConsumableArray(state.conditions.slice(conditionIndex + 1)))
+    var newCondition = {
+      property: undefined,
+      operator: '',
+      value: '',
+      popoverToOpen: 'propertyField',
+      id: uuidv4["default"]()
+    };
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
+  var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
+    return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
+  };
   var handleFocusOnClose = function handleFocusOnClose(e) {
     var _e$currentTarget;
     var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
@@ -69,40 +75,39 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     }
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: " ".concat(DataConfigs.blockClass, "__condition-builder__group eachGroup")
+    className: "".concat(className, "  eachGroup")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
     role: "grid",
     "aria-label": DataConfigs.translateWithId('condition_builder_group')
-  }, state === null || state === void 0 || (_state$conditions = state.conditions) === null || _state$conditions === void 0 ? void 0 : _state$conditions.map(function (eachCondition, conditionIndex) {
+  }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: conditionIndex
+      key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
+      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
-      state: eachCondition,
-      onChange: function onChange(updatedConditions) {
-        onChangeHandler(updatedConditions, conditionIndex);
+      group: eachCondition,
+      onChange: function onChange(updatedCondition) {
+        onChangeHandler(updatedCondition, conditionIndex);
       },
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
-      conditionBuilderRef: conditionBuilderRef,
-      key: conditionIndex
+      conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
-      key: conditionIndex,
-      conjunction: conditionIndex > 0 ? state.groupOperator : undefined,
+      conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
       isStatement: conditionIndex == 0,
-      state: eachCondition,
-      group: state,
+      condition: eachCondition,
+      group: group,
       conditionIndex: conditionIndex,
       className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"),
       onChange: function onChange(updatedConditions) {
@@ -110,18 +115,19 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       },
       addConditionHandler: addConditionHandler,
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           groupOperator: op
         }));
       },
       onStatementChange: function onStatementChange(updatedStatement) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           statement: updatedStatement
         }));
-      }
+      },
+      isLastCondition: isLastCondition
     }));
   })));
 };
@@ -131,10 +137,18 @@ ConditionGroupBuilder.propTypes = {
    * object contains the aria attributes
    */
   aria: index["default"].object,
+  /**
+   * Provide an  class to be applied to the containing node.
+   */
+  className: index["default"].string,
   /**
    * ref of condition builder
    */
   conditionBuilderRef: index["default"].object,
+  /**
+   * group defines the current group
+   */
+  group: index["default"].object,
   /**
   
    * callback to update the current condition of the state tree
@@ -143,11 +157,7 @@ ConditionGroupBuilder.propTypes = {
   /**
    * call back to remove the particular group from the state tree
    */
-  onRemove: index["default"].func,
-  /**
-   * state defines the current group
-   */
-  state: index["default"].object
+  onRemove: index["default"].func
 };
 
 exports["default"] = ConditionGroupBuilder$1;

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -23,6 +23,7 @@ var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
 var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
 var commonEventHandlers = require('./utils/commonEventHandlers.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
@@ -204,10 +205,6 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, [defaultColumn, ref, activeCellCoordinates, previousState === null || previousState === void 0 ? void 0 : previousState.rowHeight, selectionAreas, setActiveCellInsideSelectionArea, setSelectionAreas, visibleColumns]);
-  //selectionAreas will be set when ever a selection area is made.
-  React.useEffect(function () {
-    removeDuplicateSelections();
-  }, [selectionAreas, removeDuplicateSelections]);
 
   //this method will check for any duplicate selection area and remove.
   //same selections are those have the same height, width, top, left styles. These inline styles are being set in createCellSelection util.
@@ -246,6 +243,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [ref, setSelectionAreas, setSelectionAreaData]);
 
+  //selectionAreas will be set when ever a selection area is made.
+  React.useEffect(function () {
+    removeDuplicateSelections();
+  }, [selectionAreas, removeDuplicateSelections]);
+
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
 
@@ -308,9 +310,12 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var row = rows[index];
     if (rows && rows.length) {
       prepareRow(row);
-      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, row.getRowProps({
+      var rowProps = propsHelper.prepareProps(row.getRowProps({
         style: style
-      }), {
+      }), 'key');
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        key: _rollupPluginBabelHelpers.objectSpread2({}, row.getRowProps().key)
+      }, rowProps, {
         className: cx__default["default"]("".concat(blockClass, "__tr")),
         "data-row-index": index,
         "aria-rowindex": index + 1,
@@ -331,10 +336,11 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       }, index + 1)), row.cells.map(function (cell, index) {
         var _cell$column;
+        var cellProps = propsHelper.prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
           key: "cell_".concat(index),
           "aria-colindex": index + 1
-        }, cell.getCellProps(), {
+        }, cellProps, {
           role: "gridcell",
           style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cell.getCellProps().style), {}, {
             display: 'grid',

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -21,6 +21,7 @@ var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
 var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseMove = require('./hooks/useSpreadsheetMouseMove.js');
 
@@ -143,9 +144,10 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cx__default["default"]("".concat(blockClass, "__header--container")),
     role: "rowgroup"
   }, headerGroups.map(function (headerGroup, index) {
+    var headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       key: "header_".concat(index)
-    }, headerGroup.getHeaderGroupProps(), {
+    }, headerProps, {
       style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth.getSpreadsheetWidth({
           type: 'header',
@@ -175,12 +177,13 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: handleSelectAllClick,
       className: cx__default["default"]("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
+      var colProps = propsHelper.prepareProps(column.getHeaderProps(), 'key');
       var selectedHeader = checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
         key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
-      }, column.getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("button", {
+      }, colProps), /*#__PURE__*/React__default["default"].createElement("button", {
         id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
         "data-column-index": index,

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -19,12 +19,13 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
     createActiveCell = _ref.createActiveCell,
     activeCellContent = _ref.activeCellContent,
     isActiveHeaderCellChanged = _ref.isActiveHeaderCellChanged;
+  var performCreateActiveCell;
   //new active cell is created when the activeCellContent changes or navigate through headers
   // Otherwise new active cell will display the old value in a glance
   React.useEffect(function () {
     performCreateActiveCell();
   }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
-  var performCreateActiveCell = React.useCallback(function () {
+  performCreateActiveCell = React.useCallback(function () {
     var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
     var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
     var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -1,5 +1,22 @@
+/**
+ * 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 React, { ReactNode } from 'react';
+interface EditTearsheetNarrowProps {
+    /**
+     * Provide the contents of the EditTearsheetNarrow.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
 /**
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
  */
-export let EditTearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/SearchBar/SearchBar.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
 type Scopes = string[] | object[];
 interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
@@ -22,7 +23,7 @@ interface SearchBarProps extends PropsWithChildren {
     /** @type {Function} Function handler for when the user submits a search. */
     onSubmit?: (event: any) => void;
     /** @type {string} Placeholder text to be displayed in the search input. */
-    placeHolderText: string;
+    placeholderText: string;
     /** @type {Function} Function to get the text for each scope to display in dropdown. */
     scopeToString?: () => void;
     /** @type {Array<any>} Array of allowed search scopes. */
@@ -50,4 +51,12 @@ interface SearchBarProps extends PropsWithChildren {
 }
 export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
 declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * Provide accessible label text for the scopes MultiSelect.
+     */
+    titleText: PropTypes.Requireable<string>;
+};
 export {};

package/lib/components/SearchBar/SearchBar.js

@@ -22,7 +22,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "clearButtonLabelText", "hideScopesLabel", "labelText", "onChange", "onSubmit", "placeHolderText", "scopes", "scopesTypeLabel", "scopeToString", "selectedScopes", "sortItems", "submitLabel", "translateWithId", "value"];
+var _excluded = ["className", "clearButtonLabelText", "hideScopesLabel", "labelText", "onChange", "onSubmit", "placeholderText", "scopes", "scopesTypeLabel", "scopeToString", "selectedScopes", "sortItems", "submitLabel", "translateWithId", "value"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--search-bar");
@@ -48,7 +48,7 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
-    placeHolderText = _ref.placeHolderText,
+    placeholderText = _ref.placeholderText,
     _ref$scopes = _ref.scopes,
     scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
     scopesTypeLabel = _ref.scopesTypeLabel,
@@ -122,30 +122,32 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
     setText(value);
     onChange(eventObject);
   };
+  var multiSelectProps = {
+    initialSelectedItems: selectedScopes,
+    items: scopes,
+    itemToString: scopeToString,
+    label: scopesTypeLabel,
+    sortItems: sortItems,
+    translateWithId: translateWithId
+  };
   return /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref
   }, devtools.getDevtoolsProps(componentName), {
     className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
     onSubmit: handleSubmit
-  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React__default["default"].createElement(react.MultiSelect, {
+  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React__default["default"].createElement(react.MultiSelect, _rollupPluginBabelHelpers["extends"]({}, multiSelectProps, {
     id: "".concat(blockClass, "__multi-select"),
     name: "search-scopes",
     className: "".concat(blockClass, "__scopes"),
-    label: scopesTypeLabel,
     onChange: handleSearchScopeChange,
-    initialSelectedItems: selectedScopes,
-    items: scopes,
-    itemToString: scopeToString,
-    translateWithId: translateWithId,
-    sortItems: sortItems,
     size: "lg"
-  }) : null, /*#__PURE__*/React__default["default"].createElement(react.Search, {
+  })) : null, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
     labelText: labelText || '',
     name: "search-input",
     onChange: handleInputChange,
-    placeholder: placeHolderText,
+    placeholder: placeholderText,
     value: text,
     size: "lg"
   }), /*#__PURE__*/React__default["default"].createElement(react.Button, {
@@ -173,11 +175,19 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   }
   return index["default"].string.apply(index["default"], [props, propName, componentName].concat(rest));
 };
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   *
+   * Provide accessible label text for the scopes MultiSelect.
+   */
+  titleText: index["default"].string
+};
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.SearchBar.propTypes = {
+exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** @type {string} Optional additional class name. */
   className: index["default"].string,
   /** @type {string} The label text for the search text input. */
@@ -193,7 +203,7 @@ exports.SearchBar.propTypes = {
   /** @type {Function} Function handler for when the user submits a search. */
   onSubmit: index["default"].func,
   /** @type {string} Placeholder text to be displayed in the search input. */
-  placeHolderText: index["default"].string.isRequired,
+  placeholderText: index["default"].string.isRequired,
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
   scopeToString: index["default"].func,
   /** @type {Array<any>} Array of allowed search scopes. */
@@ -215,14 +225,12 @@ exports.SearchBar.propTypes = {
 
   /** @type {string} The label text for the search submit button. */
   submitLabel: index["default"].string.isRequired,
-  /**
-   * Provide accessible label text for the scopes MultiSelect.
-   */
-  titleText: index["default"].string,
   /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
   translateWithId: index["default"].func,
   // eslint-disable-line react/require-default-props
 
   /** @type {string} Search query value. */
   value: index["default"].string
-};
+}, deprecatedProps);
+
+exports.deprecatedProps = deprecatedProps;

package/lib/components/TagSet/TagSet.d.ts

@@ -1,8 +1,92 @@
-export let TagSet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React, { ReactNode, PropsWithChildren } from 'react';
+import { TagBaseProps } from '@carbon/type';
+type Align = 'start' | 'center' | 'end';
+type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+type OverflowType = 'default' | 'tag';
+type TagType = {
+    label: string;
+    type?: keyof typeof tagTypes;
+} & TagBaseProps;
+interface TagSetProps extends PropsWithChildren {
+    /**
+     * align the Tags displayed by the TagSet. Default start.
+     */
+    align?: Align;
+    /**
+     * label text for the show all search. **Note: Required if more than 10 tags**
+     */
+    allTagsModalSearchLabel?: string;
+    /**
+     * placeholder text for the show all search. **Note: Required if more than 10 tags**
+     */
+    allTagsModalSearchPlaceholderText?: string;
+    /**
+     * portal target for the all tags modal
+     */
+    allTagsModalTarget?: ReactNode;
+    /**
+     * title for the show all modal. **Note: Required if more than 10 tags**
+     */
+    allTagsModalTitle?: string;
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * Optional ref for custom resize container to measure available space
+     * Default will measure the available space of the TagSet container itself.
+     */
+    containingElementRef?: React.RefObject<HTMLElement>;
+    /**
+     * maximum visible tags
+     */
+    maxVisible?: number;
+    /**
+     * Specify offset amount for measure available space, only used when `containingElementSelector`
+     * is also provided
+     */
+    measurementOffset?: number;
+    /**
+     * display tags in multiple lines
+     */
+    multiline?: boolean;
+    /**
+     * Handler to get overflow tags
+     */
+    onOverflowTagChange?: (value: ReactNode) => void;
+    /**
+     * overflowAlign from the standard tooltip. Default center.
+     */
+    overflowAlign?: OverflowAlign;
+    /**
+     * overflowClassName for the tooltip popup
+     */
+    overflowClassName?: string;
+    /**
+     * Type of rendering displayed inside of the tag overflow component
+     */
+    overflowType?: OverflowType;
+    /**
+     * label for the overflow show all tags link.
+     *
+     * **Note:** Required if more than 10 tags
+     */
+    showAllTagsLabel: string;
+    /**
+     * The tags to be shown in the TagSet. Each tag is specified as an object
+     * with properties: **label**\* (required) to supply the tag content, and
+     * other properties will be passed to the Carbon Tag component, such as
+     * **type**, **disabled**, **ref**, **className** , and any other Tag props.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
+     */
+    tags?: TagType[];
+}
+export declare let TagSet: React.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-export const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
+export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;
+declare const tagTypes: string[];
 export default TagSet;
-import React from 'react';