@carbon/ibm-products 2.43.2-canary.20 → 2.43.2-canary.201

package/es/components/SingleAddSelect/SingleAddSelect.js

@@ -7,11 +7,11 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
+import { AddSelect } from '../AddSelect/AddSelect.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
-import { AddSelect } from '../AddSelect/AddSelect.js';
 
 var componentName = 'SingleAddSelect';
 /**

package/es/components/SingleAddSelect/index.d.ts

@@ -1 +1,2 @@
-export { SingleAddSelect } from "./SingleAddSelect";
+export { SingleAddSelect } from './SingleAddSelect';
+export type { SingleAddSelectProps } from './SingleAddSelect';

package/es/components/StatusIcon/StatusIcon.d.ts

@@ -17,7 +17,7 @@ users to quickly assess and identify status and respond accordingly.
 type Size = 'sm' | 'md' | 'lg' | 'xl';
 type Theme = 'light' | 'dark';
 type Kind = 'fatal' | 'critical' | 'major-warning' | 'minor-warning' | 'undefined' | 'unknown' | 'normal' | 'info' | 'in-progress' | 'running' | 'pending';
-interface StatusIconProps extends PropsWithChildren {
+export interface StatusIconProps extends PropsWithChildren {
     /**
      * Provide an optional class to be applied to the modal root node.
      */

package/es/components/StatusIcon/StatusIcon.js

@@ -6,10 +6,10 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, InProgress, CheckmarkOutline, Pending } from '@carbon/react/icons';
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { Misuse, ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, UnknownFilled, CheckmarkFilled, InformationSquareFilled, InProgress, CheckmarkOutline, Pending } from '@carbon/react/icons';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/StatusIcon/index.d.ts

@@ -1 +1,8 @@
-export { StatusIcon } from "./StatusIcon";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { StatusIcon } from './StatusIcon';
+export type { StatusIconProps } from './StatusIcon';

package/es/components/StatusIndicator/StatusIndicatorStep.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { InlineLoading } from '@carbon/react';
+import { CircleStroke, ErrorOutline, CheckmarkOutline } from '@carbon/react/icons';
+
+var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
+var _excluded = ["className", "description", "errorMessage", "status"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--status-indicator-step");
+var componentName = 'StatusIndicatorStep';
+var defaults = {
+  status: 'inactive'
+};
+
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ */
+var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    errorMessage = _ref.errorMessage,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? defaults.status : _ref$status,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+    className: cx(blockClass, className, "".concat(blockClass, "--").concat(status)),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__details")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__icon")
+  }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React__default.createElement(CircleStroke, {
+    size: 16,
+    viewBox: "1 1 14 14"
+  }))), status === 'active' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React__default.createElement(InlineLoading, null))), status === 'error' && (_ErrorOutline || (_ErrorOutline = /*#__PURE__*/React__default.createElement(ErrorOutline, {
+    size: 16
+  }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default.createElement(CheckmarkOutline, {
+    size: 16
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__text")
+  }, description)), status === 'error' && errorMessage && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__error-message")
+  }, errorMessage));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+StatusIndicatorStep = pkg.checkComponentEnabled(StatusIndicatorStep, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+StatusIndicatorStep.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+StatusIndicatorStep.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The text associated with the icon.
+   */
+  description: PropTypes.string.isRequired,
+  /**
+   * This message will appear below the description if the `status` is "error".
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * Each `status` represents a different icon..
+   */
+  status: PropTypes.oneOf(['inactive', 'active', 'error', 'finished']).isRequired
+};
+
+export { StatusIndicatorStep };

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface SteppedAnimatedMediaProps {
+export interface SteppedAnimatedMediaProps {
     /**
      * Optional class name for this component.
      */
@@ -23,4 +23,3 @@ interface SteppedAnimatedMediaProps {
  * The SteppedAnimatedMedia is an Onboarding internal component and is not intended for general use.
  */
 export declare const SteppedAnimatedMedia: React.ForwardRefExoticComponent<SteppedAnimatedMediaProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/SteppedAnimatedMedia/index.d.ts

@@ -1 +1,8 @@
-export { SteppedAnimatedMedia } from "./SteppedAnimatedMedia";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { SteppedAnimatedMedia } from './SteppedAnimatedMedia';
+export type { SteppedAnimatedMediaProps } from './SteppedAnimatedMedia';

package/es/components/StringFormatter/StringFormatter.js

@@ -12,14 +12,15 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { DefinitionTooltip } from '@carbon/react';
-import { StringFormatterAlignment } from './utils/enums.js';
+import { StringFormatterAlignment, deprecated_StringFormatterAlignment, propMappingFunction } from './utils/enums.js';
+import { allPropTypes } from '../../global/js/utils/props-helper.js';
 
 var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
 var blockClass = "".concat(pkg.prefix, "--string-formatter");
 var componentName = 'StringFormatter';
 var defaults = {
   lines: 1,
-  tooltipDirection: StringFormatterAlignment.BOTTOM_LEFT,
+  tooltipDirection: StringFormatterAlignment.BOTTOM_START,
   truncate: false,
   width: null
 };
@@ -59,6 +60,16 @@ var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 });
 StringFormatter = pkg.checkComponentEnabled(StringFormatter, componentName);
 StringFormatter.displayName = componentName;
+StringFormatter.validateAlignment = function () {
+  return function (props, propName, componentName) {
+    var prop = props[propName];
+    var deprecatedAlignValues = Object.values(deprecated_StringFormatterAlignment);
+    if (deprecatedAlignValues.includes(prop)) {
+      var mappedNewProp = propMappingFunction(prop);
+      console.warn("\"".concat(prop, "\" is a deprecated value for the \"").concat(propName, "\" prop on the \"").concat(componentName, "\" component. Use \"").concat(mappedNewProp, "\" instead. Allowable values are: ").concat(Object.values(StringFormatterAlignment).join(', '), "."));
+    }
+  };
+};
 StringFormatter.propTypes = {
   /**
    * Provide an optional class to be applied to the containing node.
@@ -67,7 +78,7 @@ StringFormatter.propTypes = {
   /** Number of lines to clamp value. */
   lines: PropTypes.number,
   /** Specify the direction of the tooltip. Can be either top or bottom. */
-  tooltipDirection: PropTypes.oneOf(Object.values(StringFormatterAlignment)),
+  tooltipDirection: allPropTypes([StringFormatter.validateAlignment(), PropTypes.oneOf(Object.values(deprecated_StringFormatterAlignment), Object.values(StringFormatterAlignment))]),
   /** Whether or not the value should be truncated. */
   truncate: PropTypes.bool,
   /** Value to format. */

package/es/components/StringFormatter/utils/enums.d.ts

@@ -1,4 +1,4 @@
-export namespace StringFormatterAlignment {
+export namespace deprecated_StringFormatterAlignment {
     let TOP: string;
     let TOP_LEFT: string;
     let TOP_RIGHT: string;
@@ -12,3 +12,22 @@ export namespace StringFormatterAlignment {
     let RIGHT_BOTTOM: string;
     let RIGHT_TOP: string;
 }
+export namespace StringFormatterAlignment {
+    let TOP_1: string;
+    export { TOP_1 as TOP };
+    export let TOP_START: string;
+    export let TOP_END: string;
+    let BOTTOM_1: string;
+    export { BOTTOM_1 as BOTTOM };
+    export let BOTTOM_START: string;
+    export let BOTTOM_END: string;
+    let LEFT_1: string;
+    export { LEFT_1 as LEFT };
+    export let LEFT_END: string;
+    export let LEFT_START: string;
+    let RIGHT_1: string;
+    export { RIGHT_1 as RIGHT };
+    export let RIGHT_END: string;
+    export let RIGHT_START: string;
+}
+export function propMappingFunction(deprecatedValue: any): string;

package/es/components/StringFormatter/utils/enums.js

@@ -5,7 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var StringFormatterAlignment = {
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 deprecated_StringFormatterAlignment = {
   TOP: 'top',
   TOP_LEFT: 'top-left',
   TOP_RIGHT: 'top-right',
@@ -19,5 +28,23 @@ var StringFormatterAlignment = {
   RIGHT_BOTTOM: 'right-bottom',
   RIGHT_TOP: 'right-top'
 };
+var StringFormatterAlignment = {
+  TOP: 'top',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  BOTTOM: 'bottom',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT: 'left',
+  LEFT_END: 'left-end',
+  LEFT_START: 'left-start',
+  RIGHT: 'right',
+  RIGHT_END: 'right-end',
+  RIGHT_START: 'right-start'
+};
+var propMappingFunction = function propMappingFunction(deprecatedValue) {
+  var mapping = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, deprecated_StringFormatterAlignment.TOP_LEFT, StringFormatterAlignment.TOP_START), deprecated_StringFormatterAlignment.TOP_RIGHT, StringFormatterAlignment.TOP_END), deprecated_StringFormatterAlignment.BOTTOM_LEFT, StringFormatterAlignment.BOTTOM_START), deprecated_StringFormatterAlignment.BOTTOM_RIGHT, StringFormatterAlignment.BOTTOM_END), deprecated_StringFormatterAlignment.LEFT_BOTTOM, StringFormatterAlignment.LEFT_END), deprecated_StringFormatterAlignment.LEFT_TOP, StringFormatterAlignment.LEFT_START), deprecated_StringFormatterAlignment.RIGHT_BOTTOM, StringFormatterAlignment.RIGHT_END), deprecated_StringFormatterAlignment.RIGHT_START, StringFormatterAlignment.RIGHT_START);
+  return mapping[deprecatedValue];
+};
 
-export { StringFormatterAlignment };
+export { StringFormatterAlignment, deprecated_StringFormatterAlignment, propMappingFunction };

package/es/components/TagOverflow/TagOverflow.d.ts

@@ -1,10 +1,42 @@
 /**
- * TODO: A description of the component.
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React, { ReactNode, RefObject } from 'react';
+export interface TagOverflowItem {
+    className?: string;
+    filter?: boolean;
+    id: string;
+    label: string;
+    onClose: () => void;
+    tagType?: 'red' | 'magenta' | 'purple' | 'blue' | 'cyan' | 'teal' | 'green' | 'gray' | 'cool-gray' | 'warm-gray' | 'high-contrast' | 'outline';
+    type?: string;
+}
+export interface TagOverflowProps {
+    align?: 'start' | 'center' | 'end';
+    allTagsModalSearchLabel?: string;
+    allTagsModalSearchPlaceholderText?: string;
+    allTagsModalTarget?: ReactNode;
+    allTagsModalTitle?: string;
+    autoAlign?: boolean;
+    className?: string;
+    containingElementRef?: RefObject<HTMLElement>;
+    items: TagOverflowItem[];
+    maxVisible?: number;
+    measurementOffset?: number;
+    multiline?: boolean;
+    overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+    overflowClassName?: string;
+    overflowType?: 'default' | 'tag';
+    onOverflowTagChange?: (arr: TagOverflowItem[]) => void;
+    showAllTagsLabel?: string;
+    tagComponent?: string;
+}
+export declare let TagOverflow: React.ForwardRefExoticComponent<TagOverflowProps & 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;
-import React from 'react';
+export declare const string_required_if_more_than_10_tags: (props: any, propName: any, componentName: any, location: any, propFullName: any, secret: any) => any;

package/es/components/TagOverflow/TagOverflow.js

@@ -6,64 +6,49 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useCallback, useEffect, createElement } from 'react';
+import { Tooltip, Tag } from '@carbon/react';
 import PropTypes from '../../node_modules/prop-types/index.js';
+import { TYPES } from './constants.js';
+import { TagOverflowModal } from './TagOverflowModal.js';
+import { TagOverflowPopover } from './TagOverflowPopover.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
-import { Tooltip, Tag } from '@carbon/react';
-import { TYPES } from './constants.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { TagOverflowPopover } from './TagOverflowPopover.js';
-import { TagOverflowModal } from './TagOverflowModal.js';
 
-var _excluded = ["items", "tagComponent", "align", "showAllTagsLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "className", "containingElementRef", "measurementOffset", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange"],
+var _excluded = ["align", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
   _excluded4 = ["id", "label", "tagType", "onClose"];
 var blockClass = "".concat(pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
-
-// Default values for props
-var defaults = {
-  items: [],
-  align: 'start',
-  measurementOffset: 0,
-  overflowAlign: 'bottom',
-  overflowType: 'default',
-  onOverflowTagChange: function onOverflowTagChange() {}
-};
-
-/**
- * TODO: A description of the component.
- */
-var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? defaults.items : _ref$items,
-    tagComponent = _ref.tagComponent,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? defaults.align : _ref$align,
-    showAllTagsLabel = _ref.showAllTagsLabel,
-    allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
-    allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
-    allTagsModalTarget = _ref.allTagsModalTarget,
-    allTagsModalTitle = _ref.allTagsModalTitle,
-    className = _ref.className,
-    containingElementRef = _ref.containingElementRef,
-    _ref$measurementOffse = _ref.measurementOffset,
-    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
-    maxVisible = _ref.maxVisible,
-    multiline = _ref.multiline,
-    _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
-    overflowClassName = _ref.overflowClassName,
-    _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? defaults.overflowType : _ref$overflowType,
-    _ref$onOverflowTagCha = _ref.onOverflowTagChange,
-    onOverflowTagChange = _ref$onOverflowTagCha === void 0 ? defaults.onOverflowTagChange : _ref$onOverflowTagCha,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var TagOverflow = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$align = props.align,
+    align = _props$align === void 0 ? 'start' : _props$align,
+    allTagsModalSearchLabel = props.allTagsModalSearchLabel,
+    allTagsModalSearchPlaceholderText = props.allTagsModalSearchPlaceholderText,
+    allTagsModalTarget = props.allTagsModalTarget,
+    allTagsModalTitle = props.allTagsModalTitle,
+    autoAlign = props.autoAlign,
+    className = props.className,
+    containingElementRef = props.containingElementRef,
+    items = props.items,
+    maxVisible = props.maxVisible,
+    _props$measurementOff = props.measurementOffset,
+    measurementOffset = _props$measurementOff === void 0 ? 0 : _props$measurementOff,
+    multiline = props.multiline,
+    _props$overflowAlign = props.overflowAlign,
+    overflowAlign = _props$overflowAlign === void 0 ? 'bottom' : _props$overflowAlign,
+    overflowClassName = props.overflowClassName,
+    _props$overflowType = props.overflowType,
+    overflowType = _props$overflowType === void 0 ? 'default' : _props$overflowType,
+    onOverflowTagChange = props.onOverflowTagChange,
+    showAllTagsLabel = props.showAllTagsLabel,
+    tagComponent = props.tagComponent,
+    rest = _objectWithoutProperties(props, _excluded);
   var localContainerRef = useRef(null);
   var containerRef = ref || localContainerRef;
   var itemRefs = useRef(null);
@@ -100,7 +85,9 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
   var handleResize = function handleResize() {
-    setContainerWidth(resizeElm.current.offsetWidth);
+    if (typeof resizeElm !== 'function' && resizeElm.current) {
+      setContainerWidth(resizeElm.current.offsetWidth);
+    }
   };
   useResizeObserver(resizeElm, handleResize);
   var getMap = function getMap() {
@@ -116,7 +103,6 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   var getVisibleItems = useCallback(function () {
-    var _overflowRef$current;
     if (!itemRefs.current) {
       return items;
     }
@@ -128,13 +114,13 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
     var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
     var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : containerWidth;
-    var overflowContainerWidth = ((_overflowRef$current = overflowRef.current) === null || _overflowRef$current === void 0 ? void 0 : _overflowRef$current.offsetWidth) > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
+    var overflowContainerWidth = overflowRef && overflowRef.current && overflowRef.current.offsetWidth > overflowIndicatorWidth ? overflowRef.current.offsetWidth : overflowIndicatorWidth;
     var maxWidth = spaceAvailable - overflowContainerWidth;
     var childrenWidth = 0;
     var maxReached = false;
     return items.reduce(function (prev, cur) {
       if (!maxReached) {
-        var itemWidth = map.get(cur.id) + itemOffset;
+        var itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset;
         var fits = itemWidth + childrenWidth < maxWidth;
         if (fits) {
           childrenWidth += itemWidth;
@@ -145,12 +131,13 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
       return prev;
     }, []);
-  }, [itemRefs, overflowRef, containerWidth, items, multiline, maxVisible, containingElementRef, measurementOffset]);
-  var getCustomComponent = function getCustomComponent(item) {
+  }, [containerWidth, containingElementRef, items, maxVisible, measurementOffset, multiline]);
+  var getCustomComponent = function getCustomComponent(item, tagComponent) {
     var className = item.className,
       id = item.id,
       other = _objectWithoutProperties(item, _excluded2);
-    return /*#__PURE__*/React__default.createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
+    return /*#__PURE__*/createElement(tagComponent, _objectSpread2(_objectSpread2({}, other), {}, {
+      key: id,
       className: cx("".concat(blockClass, "__item"), className),
       ref: function ref(node) {
         return itemRefHandler(id, node);
@@ -164,9 +151,9 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       visibleItemsArr = (_visibleItemsArr = visibleItemsArr) === null || _visibleItemsArr === void 0 ? void 0 : _visibleItemsArr.slice(0, maxVisible);
     }
     var hiddenItems = items === null || items === void 0 ? void 0 : items.slice(visibleItemsArr.length);
-    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
-      var tagType = _ref2.tagType,
-        other = _objectWithoutProperties(_ref2, _excluded3);
+    var overflowItemsArr = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref) {
+      var tagType = _ref.tagType,
+        other = _objectWithoutProperties(_ref, _excluded3);
       return _objectSpread2({
         type: tagType
       }, other);
@@ -174,10 +161,10 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     setVisibleItems(visibleItemsArr);
     setOverflowItems(overflowItemsArr);
     onOverflowTagChange === null || onOverflowTagChange === void 0 || onOverflowTagChange(overflowItemsArr);
-  }, [containerWidth, items, maxVisible, getVisibleItems, onOverflowTagChange]);
+  }, [getVisibleItems, items, maxVisible, onOverflowTagChange]);
   var handleTagOnClose = useCallback(function (onClose, index) {
     onClose === null || onClose === void 0 || onClose();
-    if (index <= visibleItems.length - 1) {
+    if (index <= (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) - 1) {
       setPopoverOpen(false);
     }
   }, [visibleItems]);
@@ -185,10 +172,10 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: cx(blockClass, className, "".concat(blockClass, "--align-").concat(align), _defineProperty({}, "".concat(blockClass, "--multiline"), multiline)),
     ref: containerRef,
     role: "main"
-  }, getDevtoolsProps(componentName)), visibleItems.length > 0 && visibleItems.map(function (item, index) {
+  }, getDevtoolsProps(componentName)), (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) > 0 && visibleItems.map(function (item, index) {
     // Render custom components
     if (tagComponent) {
-      return getCustomComponent(item);
+      return getCustomComponent(item, tagComponent);
     } else {
       var id = item.id,
         label = item.label,
@@ -215,7 +202,7 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(blockClass, "__indicator"),
     ref: overflowRef
-  }, overflowItems.length > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
+  }, (overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagOverflowPopover, {
     allTagsModalSearchThreshold: allTagsModalSearchThreshold,
     className: overflowClassName,
     onShowAllClick: handleShowAllClick,
@@ -226,7 +213,8 @@ var TagOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     key: "tag-overflow-popover",
     ref: overflowRef,
     popoverOpen: popoverOpen,
-    setPopoverOpen: setPopoverOpen
+    setPopoverOpen: setPopoverOpen,
+    autoAlign: autoAlign
   }), /*#__PURE__*/React__default.createElement(TagOverflowModal, {
     allTags: items,
     open: showAllModalOpen,
@@ -251,9 +239,9 @@ var tagTypes = Object.keys(TYPES);
  * The strings shown in the showAllModal are only shown if we have more than allTagsModalSearchLThreshold
  * @returns null if no problems
  */
-var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref3) {
-  var items = _ref3.items;
-  return items && items.length > allTagsModalSearchThreshold;
+var string_required_if_more_than_10_tags = isRequiredIf(PropTypes.string, function (_ref2) {
+  var items = _ref2.items;
+  return (items === null || items === void 0 ? void 0 : items.length) > allTagsModalSearchThreshold;
 });
 
 // The types and DocGen commentary for the component props,
@@ -281,14 +269,13 @@ TagOverflow.propTypes = {
    */
   allTagsModalTitle: string_required_if_more_than_10_tags,
   /**
-   * Provide an optional class to be applied to the containing node.
+   * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
-  className: PropTypes.string,
+  autoAlign: PropTypes.bool,
   /**
-   * Optional ref for custom resize container to measure available space
-   * Default will measure the available space of the TagSet container itself.
+   * Provide an optional class to be applied to the containing node.
    */
-  containingElementRef: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The items to be shown in the TagOverflow. Each item is specified as an object with properties:
    * **label**\* (required) to supply the content,
@@ -299,6 +286,7 @@ TagOverflow.propTypes = {
    * If you want to render a custom component, pass it as tagComponent prop and
    * then pass the props required for your custom component as the properties of item object
    */
+  //@ts-ignore
   items: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
@@ -342,6 +330,7 @@ TagOverflow.propTypes = {
   /** Component definition of the items to be rendered inside TagOverflow.
    * If this is not passed, items will be rendered as Tag component
    */
+  //@ts-ignore
   tagComponent: PropTypes.elementType
 };
 

package/es/components/TagOverflow/TagOverflowModal.js

@@ -14,8 +14,7 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 
-var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"],
-  _excluded2 = ["label", "id", "filter"];
+var _excluded = ["allTags", "className", "title", "onClose", "open", "overflowType", "portalTarget", "searchLabel", "searchPlaceholder"];
 var componentName = 'TagOverflowModal';
 var blockClass = "".concat(pkg.prefix, "--tag-overflow-modal");
 
@@ -77,13 +76,12 @@ var TagOverflowModal = function TagOverflowModal(_ref) {
   }, getFilteredItems().map(function (_ref2) {
     var label = _ref2.label,
       id = _ref2.id,
-      filter = _ref2.filter,
-      other = _objectWithoutProperties(_ref2, _excluded2);
+      filter = _ref2.filter;
     var isFilterable = overflowType === 'tag' ? filter : false;
-    return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+    return /*#__PURE__*/React__default.createElement(Tag, {
       key: id,
       filter: isFilterable
-    }), label);
+    }, label);
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__fade")
   })));

package/es/components/TagOverflow/TagOverflowPopover.d.ts

@@ -1,2 +1,15 @@
-export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { TagOverflowItem } from './TagOverflow';
+export interface Props {
+    allTagsModalSearchThreshold?: number;
+    autoAlign?: boolean;
+    className?: string;
+    onShowAllClick: () => void;
+    overflowAlign?: string;
+    overflowTags: TagOverflowItem[];
+    overflowType?: string;
+    popoverOpen?: boolean;
+    setPopoverOpen?: (x: boolean) => void;
+    showAllTagsLabel?: string;
+}
+export declare const TagOverflowPopover: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;