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

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { FixedSizeList } from 'react-window';
@@ -19,6 +19,7 @@ import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell.js';
 import { checkSelectedHeaderCell } from './utils/checkSelectedHeaderCell.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
 import { handleBodyCellClick, handleBodyCellHover, handleRowHeaderClick } from './utils/commonEventHandlers.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseUp } from './hooks/useSpreadsheetMouseUp.js';
 
@@ -195,10 +196,6 @@ var DataSpreadsheetBody = /*#__PURE__*/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.
-  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.
@@ -237,6 +234,11 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }, [ref, setSelectionAreas, setSelectionAreaData]);
 
+  //selectionAreas will be set when ever a selection area is made.
+  useEffect(function () {
+    removeDuplicateSelections();
+  }, [selectionAreas, removeDuplicateSelections]);
+
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
 
@@ -299,9 +301,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var row = rows[index];
     if (rows && rows.length) {
       prepareRow(row);
-      return /*#__PURE__*/React__default.createElement("div", _extends({}, row.getRowProps({
+      var rowProps = prepareProps(row.getRowProps({
         style: style
-      }), {
+      }), 'key');
+      return /*#__PURE__*/React__default.createElement("div", _extends({
+        key: _objectSpread2({}, row.getRowProps().key)
+      }, rowProps, {
         className: cx("".concat(blockClass, "__tr")),
         "data-row-index": index,
         "aria-rowindex": index + 1,
@@ -322,10 +327,11 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }, index + 1)), row.cells.map(function (cell, index) {
         var _cell$column;
+        var cellProps = prepareProps(cell.getCellProps(), 'key');
         return /*#__PURE__*/React__default.createElement("div", _extends({
           key: "cell_".concat(index),
           "aria-colindex": index + 1
-        }, cell.getCellProps(), {
+        }, cellProps, {
           role: "gridcell",
           style: _objectSpread2(_objectSpread2({}, cell.getCellProps().style), {}, {
             display: 'grid',

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -17,6 +17,7 @@ import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection.js'
 import { selectAllCells } from './utils/selectAllCells.js';
 import { getSpreadsheetWidth } from './utils/getSpreadsheetWidth.js';
 import { checkForHoldingKey } from './utils/checkForHoldingKey.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useSpreadsheetMouseMove } from './hooks/useSpreadsheetMouseMove.js';
 
@@ -134,9 +135,10 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: cx("".concat(blockClass, "__header--container")),
     role: "rowgroup"
   }, headerGroups.map(function (headerGroup, index) {
+    var headerProps = prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default.createElement("div", _extends({
       key: "header_".concat(index)
-    }, headerGroup.getHeaderGroupProps(), {
+    }, headerProps, {
       style: _objectSpread2(_objectSpread2({}, headerGroup.getHeaderGroupProps().style), {}, {
         width: getSpreadsheetWidth({
           type: 'header',
@@ -166,12 +168,13 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleSelectAllClick,
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _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 = prepareProps(column.getHeaderProps(), 'key');
       var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React__default.createElement("div", _extends({
         key: "column_".concat(index),
         role: "columnheader",
         className: "".concat(blockClass, "__columnheader")
-      }, column.getHeaderProps()), /*#__PURE__*/React__default.createElement("button", {
+      }, colProps), /*#__PURE__*/React__default.createElement("button", {
         id: "".concat(blockClass, "__cell--header--").concat(index),
         "data-row-index": "header",
         "data-column-index": index,

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

@@ -15,12 +15,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
   useEffect(function () {
     performCreateActiveCell();
   }, [activeCellContent, performCreateActiveCell, isActiveHeaderCellChanged]);
-  var performCreateActiveCell = useCallback(function () {
+  performCreateActiveCell = 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/es/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/es/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/es/components/SearchBar/SearchBar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -13,7 +13,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { MultiSelect, Search, Button } from '@carbon/react';
 
-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(pkg.prefix, "--search-bar");
@@ -39,7 +39,7 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     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,
@@ -113,30 +113,32 @@ var SearchBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setText(value);
     onChange(eventObject);
   };
+  var multiSelectProps = {
+    initialSelectedItems: selectedScopes,
+    items: scopes,
+    itemToString: scopeToString,
+    label: scopesTypeLabel,
+    sortItems: sortItems,
+    translateWithId: translateWithId
+  };
   return /*#__PURE__*/React__default.createElement("form", _extends({}, rest, {
     ref: ref
   }, getDevtoolsProps(componentName), {
     className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
     onSubmit: handleSubmit
-  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React__default.createElement(MultiSelect, {
+  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React__default.createElement(MultiSelect, _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.createElement(Search, {
+  })) : null, /*#__PURE__*/React__default.createElement(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.createElement(Button, {
@@ -164,11 +166,19 @@ var conditionalScopePropValidator = function conditionalScopePropValidator(props
   }
   return PropTypes.string.apply(PropTypes, [props, propName, componentName].concat(rest));
 };
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   *
+   * Provide accessible label text for the scopes MultiSelect.
+   */
+  titleText: PropTypes.string
+};
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-SearchBar.propTypes = {
+SearchBar.propTypes = _objectSpread2({
   /** @type {string} Optional additional class name. */
   className: PropTypes.string,
   /** @type {string} The label text for the search text input. */
@@ -184,7 +194,7 @@ SearchBar.propTypes = {
   /** @type {Function} Function handler for when the user submits a search. */
   onSubmit: PropTypes.func,
   /** @type {string} Placeholder text to be displayed in the search input. */
-  placeHolderText: PropTypes.string.isRequired,
+  placeholderText: PropTypes.string.isRequired,
   /** @type {Function} Function to get the text for each scope to display in dropdown. */
   scopeToString: PropTypes.func,
   /** @type {Array<any>} Array of allowed search scopes. */
@@ -206,16 +216,12 @@ SearchBar.propTypes = {
 
   /** @type {string} The label text for the search submit button. */
   submitLabel: PropTypes.string.isRequired,
-  /**
-   * Provide accessible label text for the scopes MultiSelect.
-   */
-  titleText: PropTypes.string,
   /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
   translateWithId: PropTypes.func,
   // eslint-disable-line react/require-default-props
 
   /** @type {string} Search query value. */
   value: PropTypes.string
-};
+}, deprecatedProps);
 
-export { SearchBar };
+export { SearchBar, deprecatedProps };

package/es/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';

package/es/components/TagSet/TagSet.js

@@ -32,18 +32,26 @@ var defaults = {
   overflowType: 'default',
   onOverflowTagChange: function onOverflowTagChange() {}
 };
+
+// interface TagType extends TagBaseProps
+// {
+//   label: string;
+//   // we duplicate this prop to improve the DocGen
+//   type?: typeof tagTypes[number];
+// }
+
 var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaults.align : _ref$align,
+    align = _ref$align === void 0 ? 'start' : _ref$align,
     allTagsModalTarget = _ref.allTagsModalTarget,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
     _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowClassName = _ref.overflowClassName,
     _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
     allTagsModalTitle = _ref.allTagsModalTitle,
     allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
@@ -73,7 +81,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setShowAllModalOpen = _useState8[1];
   var localTagSetRef = useRef(null);
   var tagSetRef = ref || localTagSetRef;
-  var sizingContainerRef = useRef();
+  var sizingContainerRef = useRef(null);
   var displayedArea = useRef(null);
   var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
@@ -98,7 +106,9 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         key: index,
         className: "".concat(blockClass, "__sizing-tag"),
         ref: function ref(el) {
-          return newSizingTags[index] = el;
+          if (el != null) {
+            newSizingTags[index] = el;
+          }
         }
       }, /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
         // ensure id is not duplicated
@@ -155,7 +165,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [displayCount, overflowAlign, overflowClassName, overflowType, showAllTagsLabel, tags, onOverflowTagChange, popoverOpen, handleTagOnClose]);
   var checkFullyVisibleTags = useCallback(function () {
     if (multiline) {
-      return setDisplayCount(maxVisible);
+      return setDisplayCount(maxVisible || 3);
     }
 
     // how many will fit?
@@ -163,7 +173,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (sizingTags.length > 0) {
       var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
       var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
-      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef === null || tagSetRef === void 0 ? void 0 : tagSetRef['current'].offsetWidth;
       for (var i in sizingTags) {
         var _sizingTags$i;
         var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
@@ -174,7 +184,7 @@ var TagSet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
           break;
         }
       }
-      if (willFit < sizingTags.length) {
+      if (willFit < sizingTags.length && overflowTag.current) {
         while (willFit > 0 && spaceAvailable < overflowTag.current.offsetWidth) {
           // Highly unlikely any useful tag is smaller
           willFit -= 1; // remove one tag
@@ -262,7 +272,7 @@ var TYPES = {
   outline: 'Outline'
 };
 var tagTypes = Object.keys(TYPES);
-TagSet.types = tagTypes;
+TagSet['types'] = tagTypes;
 TagSet.propTypes = {
   /**
    * align the Tags displayed by the TagSet. Default start.
@@ -292,6 +302,7 @@ TagSet.propTypes = {
    * Optional ref for custom resize container to measure available space
    * Default will measure the available space of the TagSet container itself.
    */
+  /**@ts-ignore */
   containingElementRef: PropTypes.object,
   /**
    * maximum visible tags

package/es/components/TagSet/TagSetModal.d.ts

@@ -1,29 +1,35 @@
-export function TagSetModal({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: {
-    [x: string]: any;
-    allTags: any;
-    className: any;
-    title: any;
-    onClose: any;
-    open: any;
-    portalTarget: any;
-    searchLabel?: string | undefined;
-    searchPlaceholder: any;
-}): any;
-export namespace TagSetModal {
-    export namespace propTypes {
-        let allTags: PropTypes.Requireable<(PropTypes.InferProps<{
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Tag } from '@carbon/react';
+interface TagType {
+    label: string;
+}
+type AllTags = TagType[] & Omit<React.ComponentProps<Tag>, 'filter'>[];
+interface TagSetModalProps {
+    allTags?: AllTags;
+    className?: string;
+    onClose?: () => void;
+    open?: boolean;
+    portalTarget?: ReactNode;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    title?: string;
+}
+export declare const TagSetModal: {
+    ({ allTags, className, title, onClose, open, portalTarget: portalTargetIn, searchLabel, searchPlaceholder, ...rest }: TagSetModalProps): any;
+    propTypes: {
+        allTags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
-        let className: PropTypes.Requireable<string>;
-        let onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        let open: PropTypes.Requireable<boolean>;
-        let portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let searchLabel: PropTypes.Requireable<string>;
-        let searchPlaceholder: PropTypes.Requireable<string>;
-        let title: PropTypes.Requireable<string>;
-    }
-    export { componentName as displayName };
-}
-import PropTypes from 'prop-types';
-declare const componentName: "TagSetModal";
+        className: PropTypes.Requireable<string>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        open: PropTypes.Requireable<boolean>;
+        portalTarget: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        searchLabel: PropTypes.Requireable<string>;
+        searchPlaceholder: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};
 export {};

package/es/components/TagSet/TagSetModal.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { ComposedModal, ModalHeader, Search, ModalBody, Tag } from '@carbon/react';
+import { Tag, ComposedModal, ModalHeader, Search, ModalBody } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
@@ -47,11 +47,11 @@ var TagSetModal = function TagSetModal(_ref) {
   useEffect(function () {
     var newFilteredModalTags = [];
     if (open) {
-      if (search === '') {
-        newFilteredModalTags = allTags.slice(0);
+      if (search === '' && allTags) {
+        newFilteredModalTags = allTags === null || allTags === void 0 ? void 0 : allTags.slice(0);
       } else {
         var lCaseSearch = search.toLocaleLowerCase();
-        allTags.forEach(function (tag) {
+        allTags === null || allTags === void 0 || allTags.forEach(function (tag) {
           var _tag$dataSearch, _tag$label;
           var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
           var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);

package/es/components/TagSet/TagSetOverflow.d.ts

@@ -1,2 +1,45 @@
-export const TagSetOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+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';
+interface TagSetOverflowProps {
+    /**
+     * count of overflowTags over which a modal is offered
+     */
+    allTagsModalSearchThreshold?: number;
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * function to execute on clicking show all
+     */
+    onShowAllClick: () => void;
+    /**
+     * overflowAlign from the standard tooltip
+     */
+    overflowAlign?: OverflowAlign;
+    /** @type {Array<any>}
+     * tags shown in overflow
+     */
+    overflowTags: ReactNode[];
+    /**
+     * Type of rendering displayed inside of the tag overflow component
+     */
+    overflowType?: OverflowType;
+    /**
+     * Open state of the popover
+     */
+    popoverOpen?: boolean;
+    /**
+     * Setter function for the popoverOpen state value
+     */
+    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    /**
+     * label for the overflow show all tags link
+     */
+    showAllTagsLabel?: string;
+}
+export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export {};