@carbon/react 1.52.0 → 1.53.0-rc.0

package/es/components/Tag/Tag.js

@@ -13,6 +13,7 @@ import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -31,6 +32,11 @@ const TYPES = {
   'high-contrast': 'High-Contrast',
   outline: 'Outline'
 };
+const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg'
+};
 const Tag = _ref => {
   let {
     children,
@@ -38,10 +44,13 @@ const Tag = _ref => {
     id,
     type,
     filter,
+    // remove filter in next major release - V12
     renderIcon: CustomIconElement,
     title = 'Clear filter',
+    // remove title in next major release - V12
     disabled,
     onClose,
+    // remove onClose in next major release - V12
     size,
     as: BaseComponent,
     slug,
@@ -49,6 +58,8 @@ const Tag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
+  const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
+  const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
@@ -56,7 +67,7 @@ const Tag = _ref => {
     // TODO: V12 - Remove this class
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
-    [`${prefix}--tag--interactive`]: other.onClick && !filter
+    [`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag
   });
   const typeText = type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : '';
   const handleClose = event => {
@@ -68,7 +79,7 @@ const Tag = _ref => {
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -79,7 +90,7 @@ const Tag = _ref => {
     return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
-    }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+    }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--tag__custom-icon`
     }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
       className: `${prefix}--tag__label`,
@@ -93,16 +104,14 @@ const Tag = _ref => {
       title: title
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-  const ComponentTag = BaseComponent ?? (other.onClick ? 'button' : 'div');
+  const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
-    disabled: ComponentTag === 'button' ? disabled : null,
+    disabled: disabled,
     className: tagClasses,
     id: tagId
-  }, other), CustomIconElement ? /*#__PURE__*/React__default.createElement("div", {
+  }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__custom-icon`
-  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, {
-    title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
+  }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default.createElement(Text, null, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -125,7 +134,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: PropTypes.bool,
+  filter: deprecate(PropTypes.bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -133,17 +142,17 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: PropTypes.func,
+  onClose: deprecate(PropTypes.func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
-   * Specify the size of the Tag. Currently supports either `sm` or
-   * 'md' (default) sizes.
+   * Specify the size of the Tag. Currently supports either `sm`,
+   * `md` (default) or `lg` sizes.
    */
-  size: PropTypes.oneOf(['sm', 'md']),
+  size: PropTypes.oneOf(Object.keys(SIZES)),
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
@@ -151,12 +160,11 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: PropTypes.string,
+  title: deprecate(PropTypes.string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */
   type: PropTypes.oneOf(Object.keys(TYPES))
 };
-const types = Object.keys(TYPES);
 
-export { Tag as default, types };
+export { SIZES, TYPES, Tag as default };

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

@@ -6,6 +6,5 @@
  */
 import Tag from './Tag';
 export * from './Tag.Skeleton';
-export * from './Tag';
 export default Tag;
 export { Tag };

package/es/components/Toggle/Toggle.js

@@ -65,6 +65,7 @@ function Toggle(_ref) {
   const switchClasses = cx(`${prefix}--toggle__switch`, {
     [`${prefix}--toggle__switch--checked`]: checked
   });
+  const labelId = `${id}_label`;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -88,10 +89,11 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": id,
+      "aria-labelledby": ariaLabelledby ?? labelId,
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {
+      id: labelId,
       htmlFor: ariaLabelledby ? undefined : id,
       className: `${prefix}--toggle__label`
     }, labelText && /*#__PURE__*/React__default.createElement(Text, {

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

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type PopoverAlignment } from '../Popover';
+import { PolymorphicProps } from '../../types/common';
 type ToggletipLabelProps<E extends ElementType> = {
     as?: E | undefined;
     children?: ReactNode;
@@ -78,16 +79,17 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
     };
 }
-interface ToggletipButtonProps {
+interface ToggletipButtonBaseProps {
     children?: ReactNode;
     className?: string | undefined;
     label?: string | undefined;
 }
+export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
 /**
  * `ToggletipButton` controls the visibility of the Toggletip through mouse
  * clicks and keyboard interactions.
  */
-export declare function ToggletipButton({ children, className: customClassName, label, }: ToggletipButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggletipButton<T extends React.ElementType>({ children, className: customClassName, label, as: BaseComponent, ...rest }: ToggleTipButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToggletipButton {
     var propTypes: {
         /**

package/es/components/Toggletip/index.js

@@ -92,6 +92,9 @@ function Toggletip(_ref2) {
     },
     contentProps: {
       id
+    },
+    onClick: {
+      onClick: actions.toggle
     }
   };
   const onKeyDown = event => {
@@ -179,16 +182,24 @@ function ToggletipButton(_ref3) {
   let {
     children,
     className: customClassName,
-    label = 'Show information'
+    label = 'Show information',
+    as: BaseComponent,
+    ...rest
   } = _ref3;
   const toggletip = useToggletip();
   const prefix = usePrefix();
   const className = cx(`${prefix}--toggletip-button`, customClassName);
+  const ComponentToggle = BaseComponent ?? 'button';
+  if (ComponentToggle !== 'button') {
+    return /*#__PURE__*/React__default.createElement(ComponentToggle, _extends({}, toggletip?.onClick, {
+      className: className
+    }, rest), children);
+  }
   return /*#__PURE__*/React__default.createElement("button", _extends({}, toggletip?.buttonProps, {
     "aria-label": label,
     type: "button",
     className: className
-  }), children);
+  }, rest), children);
 }
 ToggletipButton.propTypes = {
   /**

package/es/components/Tooltip/DefinitionTooltip.js

@@ -49,6 +49,9 @@ const DefinitionTooltip = _ref => {
     onMouseEnter: () => {
       openOnHover ? setOpen(true) : null;
     },
+    onFocus: () => {
+      setOpen(true);
+    },
     open: isOpen
   }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     className: cx(`${prefix}--definition-term`, triggerClassName),

package/es/feature-flags.js

@@ -11,5 +11,6 @@ FeatureFlags.merge({
   'enable-css-custom-properties': true,
   'enable-css-grid': true,
   'enable-v11-release': true,
-  'enable-experimental-tile-contrast': false
+  'enable-experimental-tile-contrast': false,
+  'enable-v12-tile-radio-icons': false
 });

package/es/index.js

@@ -97,7 +97,7 @@ export { default as IconSwitch } from './components/Switch/IconSwitch.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
-export { default as Tag, types } from './components/Tag/Tag.js';
+export { default as Tag } from './components/Tag/Tag.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';

package/es/internal/Selection.js

@@ -6,7 +6,7 @@
  */
 
 import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
@@ -39,7 +39,16 @@ function useSelection(_ref2) {
   const savedOnChange = useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
+  const [selectedItems, setSelectedItems] = useState(isControlled ? controlledItems : uncontrolledItems);
+  useEffect(() => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: selectedItems
+    });
+  }, [isControlled, isMounted, selectedItems]);
   const onItemChange = useCallback(item => {
     if (disabled) {
       return;
@@ -50,27 +59,12 @@ function useSelection(_ref2) {
         selectedIndex = index;
       }
     });
-    let newSelectedItems;
     if (selectedIndex === undefined) {
-      newSelectedItems = selectedItems.concat(item);
-      callOnChangeHandler({
-        isControlled,
-        isMounted: isMounted.current,
-        onChangeHandlerControlled: savedOnChange.current,
-        onChangeHandlerUncontrolled: setUncontrolledItems,
-        selectedItems: newSelectedItems
-      });
+      setSelectedItems(selectedItems => selectedItems.concat(item));
       return;
     }
-    newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: newSelectedItems
-    });
-  }, [disabled, isControlled, selectedItems]);
+    setSelectedItems(selectedItems => removeAtIndex(selectedItems, selectedIndex));
+  }, [disabled, selectedItems]);
   const clearSelection = useCallback(() => {
     if (disabled) {
       return;
@@ -80,7 +74,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: []
+      selectedItems: setSelectedItems([])
     });
   }, [disabled, isControlled]);
   useEffect(() => {

package/lib/components/Accordion/AccordionItem.js

@@ -55,7 +55,7 @@ function AccordionItem(_ref) {
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--accordion__item`]: true,
-    [`${prefix}--accordion__item--active`]: isOpen,
+    [`${prefix}--accordion__item--active`]: isOpen && !disabled,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName
   });

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -36,7 +36,7 @@ const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
-const defaultMinExpandedNumberOfRows = 16;
+const defaultMinExpandedNumberOfRows = 0;
 function CodeSnippet(_ref) {
   let {
     align = 'bottom',
@@ -113,7 +113,7 @@ function CodeSnippet(_ref) {
       if (codeContentRef?.current && type === 'multi') {
         const {
           height
-        } = codeContentRef.current.getBoundingClientRect();
+        } = innerCodeRef.current.getBoundingClientRect();
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {

package/lib/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -8,6 +8,17 @@ import React from 'react';
 import { ListBoxSize } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify the size of the ListBox.
+     */
     size?: ListBoxSize;
 }
 declare const DropdownSkeleton: React.FC<DropdownSkeletonProps>;

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -27,25 +27,30 @@ const DropdownSkeleton = _ref => {
   let {
     className,
     size,
+    hideLabel,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--dropdown-v2`, `${prefix}--list-box`, `${prefix}--form-item`, {
+  const wrapperClasses = cx__default["default"](className, `${prefix}--skeleton`, `${prefix}--form-item`, {
     [`${prefix}--list-box--${size}`]: size
   });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__field`
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--list-box__label`
-  })));
+  }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--dropdown`
+  }));
 };
 DropdownSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
   className: PropTypes__default["default"].string,
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
   /**
    * Specify the size of the ListBox.
    */

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -53,7 +53,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      */
     uuid?: string;
 }
-declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): import("react/jsx-runtime").JSX.Element;
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, className, ...other }: FileUploaderItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderItem.js

@@ -41,6 +41,7 @@ function FileUploaderItem(_ref) {
     errorSubject,
     errorBody,
     size,
+    className,
     ...other
   } = _ref;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
@@ -48,7 +49,7 @@ function FileUploaderItem(_ref) {
   const {
     current: id
   } = React.useRef(uuid || uniqueId["default"]());
-  const classes = cx__default["default"](`${prefix}--file__selected-file`, {
+  const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm'

package/lib/components/Notification/Notification.d.ts

@@ -549,7 +549,7 @@ export interface StaticNotificationProps extends HTMLAttributes<HTMLDivElement>
     /**
      * Specify the subtitle
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Specify the title
      */
@@ -593,7 +593,7 @@ export declare namespace StaticNotification {
         /**
          * Specify the subtitle
          */
-        subtitle: PropTypes.Requireable<string>;
+        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Specify the title
          */

package/lib/components/Notification/Notification.js

@@ -739,6 +739,7 @@ function StaticNotification(_ref8) {
     className: `${prefix}--actionable-notification__button-wrapper`
   }, actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
+    "aria-describedby": titleId,
     inline: true
   }, actionButtonLabel)));
 }
@@ -774,7 +775,7 @@ StaticNotification.propTypes = {
   /**
    * Specify the subtitle
    */
-  subtitle: PropTypes__default["default"].string,
+  subtitle: PropTypes__default["default"].node,
   /**
    * Specify the title
    */

package/lib/components/RadioTile/RadioTile.js

@@ -19,6 +19,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -29,7 +30,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CheckmarkFilled;
+var _RadioButtonChecked, _RadioButton, _CheckmarkFilled;
 const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function RadioTile(_ref, ref) {
   let {
     children,
@@ -52,6 +53,18 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     [`${prefix}--tile--light`]: light,
     [`${prefix}--tile--disabled`]: disabled
   });
+  const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
+  function icon() {
+    if (v12TileRadioIcons) {
+      if (checked) {
+        return _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButtonChecked, null));
+      } else {
+        return _RadioButton || (_RadioButton = /*#__PURE__*/React__default["default"].createElement(iconsReact.RadioButton, null));
+      }
+    } else {
+      return _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, null));
+    }
+  }
   function handleOnChange(evt) {
     onChange(value, name, evt);
   }
@@ -78,7 +91,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: className
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--tile__checkmark`
-  }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, null))), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, icon()), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tile-content`
   }, children)));
 });

package/lib/components/Tag/DismissibleTag.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+import PropTypes, { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+import { SIZES, TYPES } from './Tag';
+export interface DismissibleTagBaseProps {
+    /**
+     * Provide content to be rendered inside of a `DismissibleTag`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className that is applied to the containing <span>
+     */
+    className?: string;
+    /**
+     * Specify if the `DismissibleTag` is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the id for the selectabletag.
+     */
+    id?: string;
+    /**
+     * Click handler for filter tag close button.
+     */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional prop to render a custom icon.
+     * Can be a React component class
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify the size of the Tag. Currently supports either `sm`,
+     * `md` (default) or `lg` sizes.
+     */
+    size?: keyof typeof SIZES;
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+     */
+    slug?: ReactNodeLike;
+    /**
+     * Text to show on clear filters
+     */
+    title?: string;
+    /**
+     * Specify the type of the `Tag`
+     */
+    type?: keyof typeof TYPES;
+}
+export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
+declare const DismissibleTag: {
+    <T extends React.ElementType<any>>({ children, className, disabled, id, renderIcon, title, onClose, slug, size, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Provide content to be rendered inside of a `DismissibleTag`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className that is applied to the containing <span>
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the `DismissibleTag` is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the id for the tag.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Click handler for filter tag close button.
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional prop to render a custom icon.
+         * Can be a React component class
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify the size of the Tag. Currently supports either `sm`,
+         * `md` (default) or `lg` sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Text to show on clear filters
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the type of the `Tag`
+         */
+        type: PropTypes.Requireable<string>;
+    };
+};
+export declare const types: string[];
+export default DismissibleTag;