@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

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

@@ -0,0 +1,8 @@
+/**
+ * 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/lib/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
+ */
+export let StatusIndicator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+
+var _Restart;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${settings.pkg.prefix}--status-indicator`;
+const componentName = 'StatusIndicator';
+const defaults = {
+  retryLabel: 'Retry',
+  showRetry: false
+};
+
+/**
+ * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
+ */
+exports.StatusIndicator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    onRetry,
+    retryLabel = defaults.retryLabel,
+    showRetry = defaults.showRetry,
+    title,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React.createElement("h1", {
+    className: `${blockClass}__title`
+  }, title), /*#__PURE__*/React.createElement("ul", {
+    className: `${blockClass}__list`
+  }, children), showRetry && onRetry && retryLabel && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}__button`,
+    kind: "ghost",
+    onClick: onRetry,
+    onKeyUp: onRetry,
+    renderIcon: () => _Restart || (_Restart = /*#__PURE__*/React.createElement(icons.Restart, {
+      size: 16
+    }))
+  }, retryLabel));
+});
+exports.StatusIndicator.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.StatusIndicator = settings.pkg.checkComponentEnabled(exports.StatusIndicator, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.StatusIndicator.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.
+exports.StatusIndicator.propTypes = {
+  /**
+   * Provide the contents of the StatusIndicator.
+   */
+  children: index.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * Optional callback function for the retry button.
+   */
+  onRetry: index.default.func,
+  /**
+   * The text for the retry button.
+   */
+  retryLabel: index.default.string,
+  /**
+   * Set to `true` to show the retry button.
+   *
+   * `retryLabel` and `onRetry` must also be defined.
+   */
+  showRetry: index.default.bool,
+  /**
+   * The title that appears at the top of the list.
+   */
+  title: index.default.node
+};

package/lib/components/StatusIndicator/StatusIndicatorStep.d.ts

@@ -0,0 +1,6 @@
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
+ */
+export let StatusIndicatorStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+
+var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${settings.pkg.prefix}--status-indicator-step`;
+const componentName = 'StatusIndicatorStep';
+const defaults = {
+  status: 'inactive'
+};
+
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
+ */
+exports.StatusIndicatorStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    description,
+    errorMessage,
+    status = defaults.status,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className, `${blockClass}--${status}`),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__details`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__icon`
+  }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React.createElement(icons.CircleStroke, {
+    size: 16,
+    viewBox: "1 1 14 14"
+  }))), status === 'active' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null))), status === 'error' && (_ErrorOutline || (_ErrorOutline = /*#__PURE__*/React.createElement(icons.ErrorOutline, {
+    size: 16
+  }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React.createElement(icons.CheckmarkOutline, {
+    size: 16
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__text`
+  }, description)), status === 'error' && errorMessage && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__error-message`
+  }, errorMessage));
+});
+exports.StatusIndicatorStep.deprecated = {
+  level: 'warn',
+  details: `This component is deprecated`
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.StatusIndicatorStep = settings.pkg.checkComponentEnabled(exports.StatusIndicatorStep, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.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.
+exports.StatusIndicatorStep.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * The text associated with the icon.
+   */
+  description: index.default.string.isRequired,
+  /**
+   * This message will appear below the description if the `status` is "error".
+   */
+  errorMessage: index.default.string,
+  /**
+   * Each `status` represents a different icon..
+   */
+  status: index.default.oneOf(['inactive', 'active', 'error', 'finished']).isRequired
+};

package/lib/components/StatusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export { StatusIndicatorStep } from "./StatusIndicatorStep";

package/lib/components/StepFlow/StepContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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';
+import { StepContextType } from './types';
+interface StepProviderProps {
+    children?: ReactNode;
+}
+export declare const StepProvider: React.FC<StepProviderProps>;
+export declare const useStepContext: () => StepContextType;
+export {};

package/lib/components/StepFlow/StepGroup.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 from 'react';
+export declare const StepGroup: ({ children }: {
+    children: any;
+}) => string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;

package/lib/components/StepFlow/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 { StepGroup } from './StepGroup';
+export { StepProvider, useStepContext } from './StepContext';
+export type { StepState, StepContextType } from './types';

package/lib/components/StepFlow/story-assets/SidePanel/Example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 from 'react';
+export declare const Example: () => React.JSX.Element;

package/lib/components/StepFlow/story-assets/SidePanel/StepSidePanel.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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';
+import { StepState } from '../..';
+interface Props {
+    children?: ReactNode;
+    subtitle?: ((a: StepState) => ReactNode) | null;
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    hasCloseIcon?: boolean;
+    closeIconDescription?: string;
+    selectorPrimaryFocus?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+export declare const StepSidePanel: ({ subtitle, children, open, onClose, title, selectorPrimaryFocus, size, ...rest }: Props) => React.JSX.Element;
+export {};

package/lib/components/StepFlow/story-assets/StepActions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 { ReactNode } from 'react';
+import { StepState } from '..';
+export interface StepActionsProps {
+    buttonRenderer: (stepData: StepState) => ReactNode;
+    className?: string;
+}
+/**
+ * This is an alternative approach to creating your own component and using the `useStepContext` hook.
+ * @example <StepActions buttonRenderer={(stepData) => <><Button /><Button /><Button /></>}/>
+ *
+ * In the example above, you can see how to retrieve the step data in order to update your buttons
+ * (disabled states, changing text, ie Next to Submit, etc.).
+ */
+export declare const StepActions: {
+    ({ buttonRenderer }: StepActionsProps): ReactNode;
+    displayName: string;
+};

package/lib/components/StepFlow/story-assets/Tearsheet/Example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 from 'react';
+export declare const Example: () => React.JSX.Element;

package/lib/components/StepFlow/story-assets/Tearsheet/StepTearsheet.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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';
+import { StepState } from '../../types';
+interface Props {
+    children?: ReactNode;
+    influencer?: ((a: StepState) => ReactNode) | null;
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasCloseIcon?: boolean;
+    closeIconDescription?: string;
+    selectorPrimaryFocus?: string;
+}
+export declare const StepTearsheet: ({ children, open, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, ...rest }: Props) => React.JSX.Element;
+export {};

package/lib/components/StepFlow/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 { Dispatch, SetStateAction } from 'react';
+export type StepContextType = StepState;
+interface formStateType {
+    [key: string]: any;
+}
+export interface StepState {
+    formState: formStateType;
+    setFormState: Dispatch<SetStateAction<formStateType>>;
+    totalSteps: number | undefined;
+    setTotalSteps: Dispatch<SetStateAction<number | undefined>>;
+    currentStep: number;
+    handleGoToStep: (a: number) => void;
+    handleNext: () => void;
+    handlePrevious: () => void;
+}
+export {};

package/lib/components/StringFormatter/StringFormatter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+export let StringFormatter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/StringFormatter/StringFormatter.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var enums = require('./utils/enums.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
+
+const blockClass = `${settings.pkg.prefix}--string-formatter`;
+const componentName = 'StringFormatter';
+const defaults = {
+  autoAlign: false,
+  lines: 1,
+  tooltipDirection: enums.StringFormatterAlignment.BOTTOM_START,
+  truncate: false,
+  width: null
+};
+
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+exports.StringFormatter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    autoAlign = defaults.autoAlign,
+    lines = defaults.lines,
+    tooltipDirection = defaults.tooltipDirection,
+    truncate = defaults.truncate,
+    width = defaults.width,
+    value,
+    ...rest
+  } = _ref;
+  const outerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [isTextTruncated, setIsTextTruncated] = React.useState(false);
+  const mergedRefs = node => {
+    outerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    const checkTruncation = () => {
+      const element = contentRef.current;
+      if (element) {
+        element.style.webkitLineClamp = truncate ? lines : undefined;
+        element.style.maxWidth = width;
+        const buffer = element.clientHeight / (2 * lines);
+        // add a buffer of at least half of line height/clientHeight. to get a stable outcome.
+        const isOverflowing = element.scrollHeight > element.clientHeight + buffer;
+        setIsTextTruncated(isOverflowing);
+      }
+    };
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    if (outerRef.current) {
+      resizeObserver.observe(outerRef.current);
+      checkTruncation();
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [lines, value, width, truncate]);
+  const stringFormatterContent = /*#__PURE__*/React.createElement("span", {
+    ref: contentRef,
+    className: cx(`${blockClass}--content`, {
+      [`${blockClass}--truncate`]: truncate
+    })
+  }, value);
+  return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: mergedRefs
+  }, devtools.getDevtoolsProps(componentName)), truncate && isTextTruncated ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+    className: `${blockClass}__tooltip`,
+    align: tooltipDirection,
+    autoAlign: autoAlign,
+    definition: value,
+    openOnHover: true
+  }, stringFormatterContent) : stringFormatterContent);
+});
+exports.StringFormatter = settings.pkg.checkComponentEnabled(exports.StringFormatter, componentName);
+exports.StringFormatter.displayName = componentName;
+exports.StringFormatter.validateAlignment = () => (props, propName, componentName) => {
+  const prop = props[propName];
+  const deprecatedAlignValues = Object.values(enums.deprecated_StringFormatterAlignment);
+  if (deprecatedAlignValues.includes(prop)) {
+    const mappedNewProp = enums.propMappingFunction(prop);
+    console.warn(`"${prop}" is a deprecated value for the "${propName}" prop on the "${componentName}" component. Use "${mappedNewProp}" instead. Allowable values are: ${Object.values(enums.StringFormatterAlignment).join(', ')}.`);
+  }
+};
+exports.StringFormatter.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /** Number of lines to clamp value. */
+  lines: index.default.number,
+  /** Specify the direction of the tooltip. Can be either top or bottom. */
+  tooltipDirection: propsHelper.allPropTypes([exports.StringFormatter.validateAlignment(), index.default.oneOf(Object.values(enums.deprecated_StringFormatterAlignment), Object.values(enums.StringFormatterAlignment))]),
+  /** Whether or not the value should be truncated. if it exceeds lines. */
+  truncate: index.default.bool,
+  /** Value to format. */
+  value: index.default.string.isRequired,
+  /** Maximum width of value which should include */
+  width: index.default.string
+};

package/lib/components/StringFormatter/index.d.ts

@@ -0,0 +1 @@
+export { StringFormatter } from "./StringFormatter";

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

@@ -0,0 +1,33 @@
+export namespace deprecated_StringFormatterAlignment {
+    let TOP: string;
+    let TOP_LEFT: string;
+    let TOP_RIGHT: string;
+    let BOTTOM: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+    let LEFT: string;
+    let LEFT_BOTTOM: string;
+    let LEFT_TOP: string;
+    let RIGHT: string;
+    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/lib/components/StringFormatter/utils/enums.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const deprecated_StringFormatterAlignment = {
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  LEFT: 'left',
+  LEFT_BOTTOM: 'left-bottom',
+  LEFT_TOP: 'left-top',
+  RIGHT: 'right',
+  RIGHT_BOTTOM: 'right-bottom',
+  RIGHT_TOP: 'right-top'
+};
+const 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'
+};
+const propMappingFunction = deprecatedValue => {
+  const mapping = {
+    [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];
+};
+
+exports.StringFormatterAlignment = StringFormatterAlignment;
+exports.deprecated_StringFormatterAlignment = deprecated_StringFormatterAlignment;
+exports.propMappingFunction = propMappingFunction;

package/lib/components/TagOverflow/TagOverflow.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2024, 2025
+ *
+ * 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, RefObject } from 'react';
+export interface TagOverflowItem {
+    className?: string;
+    /**
+     * @deprecated The `filter` prop is no longer going to be used. To use DismissibleTags, pass in an onClose function.
+     */
+    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';
+    allTagsModalAriaLabel?: string;
+    allTagsModalSearchLabel?: string;
+    allTagsModalSearchPlaceholderText?: string;
+    allTagsModalTarget?: ReactNode;
+    allTagsModalTitle?: string;
+    autoAlign?: boolean;
+    className?: string;
+    /**
+     * @deprecated The `containingElementRef` prop is no longer going to be used in favor of the forwarded ref.
+     */
+    containingElementRef?: RefObject<HTMLDivElement>;
+    items: TagOverflowItem[];
+    maxVisible?: number;
+    /**
+     * @deprecated The `measurementOffset` prop is no longer going to be used. This value will now be calculated automatically.
+     */
+    measurementOffset?: number;
+    /**
+     * @deprecated The `multiline` prop is no longer going to be used. This component should only be used when you need to hide overflowing items.
+     */
+    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?: (value: {
+        hiddenItems?: TagOverflowItem[];
+        minWidth?: number;
+        maxWidth?: number;
+    }) => void;
+    showAllTagsLabel?: string;
+    tagComponent?: string;
+}
+export declare const TagOverflow: React.ForwardRefExoticComponent<TagOverflowProps & React.RefAttributes<HTMLDivElement>>;