@carbon/react 1.54.0-rc.0 → 1.55.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -31,9 +31,11 @@ const {
   keyDownArrowUp,
   keyDownEscape,
   clickButton,
+  clickItem,
   blurButton,
   changeInput,
-  blurInput
+  blurInput,
+  unknown
 } = Downshift.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -195,15 +197,16 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     switch (type) {
       case keyDownArrowDown:
       case keyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
+        if (changes.isOpen) {
+          updateHighlightedIndex(getHighlightedIndex(changes));
+        } else {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
         break;
       case blurButton:
       case keyDownEscape:
         setHighlightedIndex(changes.highlightedIndex);
         break;
-      case clickButton:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
       case changeInput:
         updateHighlightedIndex(getHighlightedIndex(changes));
         break;
@@ -218,6 +221,11 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           }
         }
         break;
+      case clickButton:
+      case clickItem:
+      case unknown:
+        setHighlightedIndex(getHighlightedIndex(changes));
+        break;
     }
   };
   const handleToggleClick = isOpen => event => {

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

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 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 React from 'react';
+import { IconButton } from '../IconButton';
+import Button from '../Button';
+import { Menu } from '../Menu';
+interface ComboButtonProps {
+    /**
+     * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
+     */
+    children: React.ComponentProps<typeof Menu>['children'];
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the `ComboButton` should be disabled, or not.
+     */
+    disabled?: boolean;
+    /**
+     * Provide the label to be rendered on the primary action button.
+     */
+    label: React.ComponentProps<typeof Button>['title'];
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    /**
+     * Provide an optional function to be called when the primary action element is clicked.
+     */
+    onClick?: React.ComponentProps<typeof Button>['onClick'];
+    /**
+     * Specify the size of the buttons and menu.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
+    /**
+     * Optional method that takes in a message `id` and returns an
+     * internationalized string.
+     */
+    translateWithId?: (id: string) => string;
+}
+declare const ComboButton: React.ForwardRefExoticComponent<ComboButtonProps & React.RefAttributes<HTMLDivElement>>;
+export { ComboButton, type ComboButtonProps };

package/es/components/ComboButton/index.js

@@ -70,10 +70,12 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     }
   }
   function handleOpen() {
-    menuRef.current.style.inlineSize = `${width}px`;
-    menuRef.current.style.minInlineSize = `${width}px`;
-    if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-      menuRef.current.style.inlineSize = `fit-content`;
+    if (menuRef.current) {
+      menuRef.current.style.inlineSize = `${width}px`;
+      menuRef.current.style.minInlineSize = `${width}px`;
+      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
+        menuRef.current.style.inlineSize = `fit-content`;
+      }
     }
   }
   const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
@@ -85,7 +87,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
     ref: ref,
-    "aria-owns": open ? id : null
+    "aria-owns": open ? id : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -103,7 +105,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     "aria-expanded": open,
     onClick: handleTriggerClick,
     onMouseDown: handleTriggerMousedown,
-    "aria-controls": open ? id : null
+    "aria-controls": open ? id : undefined
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement(Menu, {
     containerRef: containerRef,
     menuAlignment: menuAlignment,
@@ -134,7 +136,7 @@ ComboButton.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Provide the label to be renderd on the primary action button.
+   * Provide the label to be rendered on the primary action button.
    */
   label: PropTypes.string.isRequired,
   /**

package/es/components/ComposedModal/ComposedModal.js

@@ -242,11 +242,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     }
   }, [open, selectorPrimaryFocus, isOpen]);
 
-  // Slug is always size `lg`
+  // Slug is always size `sm`
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'lg'
+      size: 'sm'
     });
   }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {

package/es/components/DataTable/TableBatchAction.d.ts

@@ -22,11 +22,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
     renderIcon?: React.ElementType;
 }
 declare const TableBatchAction: {
-    ({ renderIcon, iconDescription, ...props }: {
-        [x: string]: any;
-        renderIcon?: import("@carbon/icons-react").CarbonIconType | undefined;
-        iconDescription?: string | undefined;
-    }): import("react/jsx-runtime").JSX.Element;
+    ({ renderIcon, iconDescription, ...props }: TableBatchActionProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify if the button is an icon-only button

package/es/components/Dropdown/Dropdown.js

@@ -26,7 +26,8 @@ const {
   ToggleButtonKeyDownArrowUp,
   ToggleButtonKeyDownHome,
   ToggleButtonKeyDownEnd,
-  ItemMouseMove
+  ItemMouseMove,
+  MenuMouseLeave
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -111,6 +112,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         }
         return changes;
       case ItemMouseMove:
+      case MenuMouseLeave:
         return {
           ...changes,
           highlightedIndex: state.highlightedIndex

package/es/components/IconButton/index.js

@@ -8,12 +8,11 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import Button from '../Button/Button.js';
-import '../Button/Button.Skeleton.js';
 import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import ButtonBase from '../Button/ButtonBase.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
@@ -45,7 +44,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
+  }, /*#__PURE__*/React__default.createElement(ButtonBase, _extends({}, rest, {
     disabled: disabled,
     kind: kind,
     ref: ref,

package/es/components/Menu/Menu.js

@@ -32,6 +32,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     onOpen,
     open,
     size = 'sm',
+    // TODO: #16004
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     target = document.body,
     x = 0,
     y = 0,

package/es/components/Modal/Modal.js

@@ -226,11 +226,11 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     };
   }, []);
 
-  // Slug is always size `lg`
+  // Slug is always size `sm`
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
-      size: 'lg'
+      size: 'sm'
     });
   }
   const modalButton = /*#__PURE__*/React__default.createElement("div", {

package/es/components/ModalWrapper/ModalWrapper.d.ts

@@ -59,7 +59,7 @@ export default class ModalWrapper extends React.Component<ModalWrapperProps, Mod
         shouldCloseAfterSubmit: PropTypes.Requireable<boolean>;
         status: PropTypes.Requireable<string>;
         triggerButtonIconDescription: PropTypes.Requireable<string>;
-        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "ghost" | "tertiary" | "danger" | "danger--primary" | "danger--ghost" | "danger--tertiary">;
+        triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
         withHeader: PropTypes.Requireable<boolean>;
     };
     triggerButton: React.RefObject<HTMLButtonElement>;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -137,6 +137,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
+    if (!isOpen) {
+      setHighlightedIndex(0);
+    }
   }
   function handleOnOuterClick() {
     handleOnMenuChange(false);
@@ -160,6 +163,34 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         break;
       case stateChangeTypes.keyDownEscape:
         handleOnMenuChange(false);
+        setHighlightedIndex(0);
+        break;
+      case stateChangeTypes.changeInput:
+        setHighlightedIndex(0);
+        break;
+      case stateChangeTypes.keyDownEnter:
+        if (!isOpen) {
+          setHighlightedIndex(0);
+        }
+        break;
+      case stateChangeTypes.clickItem:
+        if (isOpen) {
+          const sortedItems = sortItems(filterItems(items, {
+            itemToString,
+            inputValue
+          }), {
+            selectedItems: {
+              top: changes.selectedItems,
+              fixed: [],
+              'top-after-reopen': topItems
+            }[selectionFeedback],
+            itemToString,
+            compareItems,
+            locale
+          });
+          const sortedSelectedIndex = sortedItems.indexOf(changes.selectedItem);
+          setHighlightedIndex(sortedSelectedIndex);
+        }
         break;
     }
   }

package/es/components/MultiSelect/MultiSelect.js

@@ -37,9 +37,11 @@ const {
   ToggleButtonKeyDownEscape,
   ToggleButtonKeyDownSpaceButton,
   ItemMouseMove,
+  MenuMouseLeave,
   ToggleButtonClick,
-  ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownEnd
+  ToggleButtonKeyDownPageDown,
+  ToggleButtonKeyDownPageUp,
+  FunctionSetHighlightedIndex
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -135,7 +137,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     getMenuProps,
     getItemProps,
     selectedItem,
-    highlightedIndex
+    highlightedIndex,
+    setHighlightedIndex
   } = useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
@@ -154,6 +157,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           setItemsCleared(true);
         }
         if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setHighlightedIndex(0);
           setItemsCleared(false);
           setIsOpenWrapper(true);
         }
@@ -237,7 +241,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       setTopItems(controlledSelectedItems);
     }
     switch (type) {
-      case ItemClick:
       case ToggleButtonKeyDownSpaceButton:
       case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
@@ -257,11 +260,38 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        break;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
+      case ItemClick:
+        setHighlightedIndex(changes.selectedItem);
+        onItemChange(changes.selectedItem);
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case MenuMouseLeave:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case FunctionSetHighlightedIndex:
+        if (!isOpen) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        } else {
+          return {
+            ...changes,
+            highlightedIndex: props.items.indexOf(highlightedIndex)
+          };
+        }
       case ToggleButtonKeyDownArrowDown:
       case ToggleButtonKeyDownArrowUp:
-      case ToggleButtonKeyDownHome:
-      case ToggleButtonKeyDownEnd:
+      case ToggleButtonKeyDownPageDown:
+      case ToggleButtonKeyDownPageUp:
         if (highlightedIndex > -1) {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
           props.scrollIntoView(itemArray[highlightedIndex]);

package/es/components/Slider/Slider.Skeleton.js

@@ -7,9 +7,10 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { LowerHandle, UpperHandle } from './SliderHandles.js';
 
 var _LowerHandle, _UpperHandle, _UpperHandle2, _LowerHandle2;
@@ -21,7 +22,10 @@ const SliderSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const isRtl = document?.dir === 'rtl';
+  const [isRtl, setIsRtl] = useState(false);
+  useIsomorphicEffect(() => {
+    setIsRtl(document ? document.dir === 'rtl' : false);
+  }, []);
   const containerClasses = cx(`${prefix}--slider-container`, `${prefix}--skeleton`, {
     [`${prefix}--slider-container--two-handles`]: twoHandles,
     [`${prefix}--slider-container--rtl`]: isRtl

package/es/components/Slug/index.js

@@ -138,26 +138,21 @@ Slug.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'top-left',
   // deprecated use top-start instead
-  'top-right',
+  'top-start', 'top-right',
   // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
+  'top-end', 'bottom', 'bottom-left',
   // deprecated use bottom-start instead
-  'bottom-right',
+  'bottom-start', 'bottom-right',
   // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
+  'bottom-end', 'left', 'left-bottom',
   // deprecated use left-end instead
-  'left-top',
+  'left-end', 'left-top',
   // deprecated use left-start instead
-
-  'right', 'right-bottom',
+  'left-start', 'right', 'right-bottom',
   // deprecated use right-end instead
-  'right-top',
+  'right-end', 'right-top',
   // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
+  'right-start']),
   /**
    * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
    */

package/es/components/StructuredList/StructuredList.d.ts

@@ -144,6 +144,10 @@ export interface StructuredListRowProps extends DivAttrs {
      * Provide a handler that is invoked on the key down event for the control
      */
     onKeyDown?(event: KeyboardEvent): void;
+    /**
+     * Mark if this row should be selectable
+     */
+    selection?: boolean;
 }
 export declare function StructuredListRow(props: StructuredListRowProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StructuredListRow {
@@ -172,6 +176,10 @@ export declare namespace StructuredListRow {
          * Provide a handler that is invoked on the key down event for the control,
          */
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Mark if this row should be selectable
+         */
+        selection: PropTypes.Requireable<boolean>;
     };
 }
 export interface StructuredListInputProps extends DivAttrs {

package/es/components/StructuredList/StructuredList.js

@@ -6,15 +6,18 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
+import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
+import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import { Text } from '../Text/Text.js';
 
+var _StructuredListCell, _RadioButtonChecked, _RadioButton;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
@@ -137,6 +140,7 @@ function StructuredListRow(props) {
     className,
     head,
     onClick,
+    selection,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
@@ -149,25 +153,35 @@ function StructuredListRow(props) {
   };
   const classes = cx(`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
     [`${prefix}--structured-list-row--selected`]: selectedRow === id
   }, className);
+  const itemRef = useRef(null);
+  const handleClick = () => {
+    setHasFocusWithin(false);
+  };
+  useOutsideClick(itemRef, handleClick);
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
-    className: classes,
-    "aria-busy": "true"
-  }), children) :
+    className: classes
+  }), selection && (_StructuredListCell || (_StructuredListCell = /*#__PURE__*/React__default.createElement(StructuredListCell, {
+    head: true
+  }))), children) :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-  React__default.createElement("div", _extends({
-    "aria-busy": "true"
-  }, other, {
+  React__default.createElement("div", _extends({}, other, {
     role: "row",
     className: classes,
+    ref: itemRef,
     onClick: event => {
       setSelectedRow?.(id);
       onClick && onClick(event);
+      if (selection) {
+        // focus items only when selection is enabled
+        setHasFocusWithin(true);
+      }
     },
     onFocus: () => {
       setHasFocusWithin(true);
@@ -178,7 +192,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
     value: value
-  }, children));
+  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default.createElement(RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default.createElement(RadioButton, null))), children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -204,7 +218,11 @@ StructuredListRow.propTypes = {
   /**
    * Provide a handler that is invoked on the key down event for the control,
    */
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  /**
+   * Mark if this row should be selectable
+   */
+  selection: PropTypes.bool
 };
 function StructuredListInput(props) {
   const defaultId = useId('structureListInput');

package/es/components/Tag/DismissibleTag.js

@@ -0,0 +1,119 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import Tag, { SIZES, TYPES } from './Tag.js';
+import { Close } from '@carbon/icons-react';
+
+var _Close;
+const getInstanceId = setupGetInstanceId();
+const DismissibleTag = _ref => {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    renderIcon,
+    title = 'Clear filter',
+    onClose,
+    slug,
+    size,
+    type,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx(`${prefix}--tag--filter`, className);
+  const handleClose = event => {
+    if (onClose) {
+      event.stopPropagation();
+      onClose(event);
+    }
+  };
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
+
+  // Removing onClick from the spread operator
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {
+    onClick,
+    ...otherProps
+  } = other;
+  return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    type: type,
+    size: size,
+    renderIcon: renderIcon,
+    disabled: disabled,
+    className: tagClasses,
+    id: tagId
+  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--interactive--tag-children`
+  }, children, normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: `${prefix}--tag__close-icon`,
+    onClick: handleClose,
+    disabled: disabled,
+    "aria-label": title,
+    title: title
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))));
+};
+DismissibleTag.propTypes = {
+  /**
+   * Provide content to be rendered inside of a `DismissibleTag`
+   */
+  children: PropTypes.node,
+  /**
+   * Provide a custom className that is applied to the containing <span>
+   */
+  className: PropTypes.string,
+  /**
+   * Specify if the `DismissibleTag` is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Specify the id for the tag.
+   */
+  id: PropTypes.string,
+  /**
+   * Click handler for filter tag close button.
+   */
+  onClose: PropTypes.func,
+  /**
+   * 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`,
+   * `md` (default) or `lg` sizes.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+   */
+  slug: PropTypes.node,
+  /**
+   * Text to show on clear filters
+   */
+  title: PropTypes.string,
+  /**
+   * Specify the type of the `Tag`
+   */
+  type: PropTypes.oneOf(Object.keys(TYPES))
+};
+
+export { DismissibleTag as default };