@carbon/react 1.45.0-rc.0 → 1.46.0-rc.0

package/README.md

@@ -113,3 +113,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect metrics data. By installing this
+package as a dependency you are agreeing to telemetry collection. To opt out,
+see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -47,7 +47,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/ComboBox/ComboBox.js

@@ -257,7 +257,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -1,4 +1,5 @@
 import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { ReactNodeLike } from 'prop-types';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
@@ -69,6 +70,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the CSS selectors that match the floating menus. */
     selectorsFloatingMenus?: Array<string | null | undefined>;
     size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const ComposedModal: React.ForwardRefExoticComponent<ComposedModalProps & React.RefAttributes<HTMLDivElement>>;
 export default ComposedModal;

package/es/components/ComposedModal/ComposedModal.js

@@ -81,6 +81,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     selectorsFloatingMenus,
     size,
     launcherButtonRef,
+    slug,
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -149,7 +150,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       setIsOpen(false);
     }
   }
-  const modalClass = cx(`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const modalClass = cx(`${prefix}--modal`, {
+    'is-visible': isOpen,
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
+  }, customClassName);
   const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
 
   // Generate aria-label based on Modal Header label if one is not provided (L253)
@@ -202,6 +207,14 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, isOpen]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     role: "presentation",
     ref: ref,
@@ -223,7 +236,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -293,7 +306,11 @@ ComposedModal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+   */
+  slug: PropTypes.node
 };
 
 export { ModalBody, ComposedModal as default };

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -130,7 +130,7 @@ class ContentSwitcher extends React__default.Component {
       className: classes,
       role: "tablist",
       onChange: undefined
-    }), children && React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    }), children && React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
       index,
       onClick: composeEventHandlers([this.handleChildChange, child.props.onClick]),
       onKeyDown: this.handleChildChange,

package/es/components/DatePickerInput/DatePickerInput.js

@@ -98,7 +98,7 @@ const DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePick
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Dropdown/Dropdown.js

@@ -228,7 +228,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Grid/Column.js

@@ -225,10 +225,10 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    // If our breakpoint is a string, the user has specified a percent
+    // If our breakpoint is a string, the user might have specified a percent
     // they'd like this column to span.
     if (typeof breakpoint === 'string') {
-      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace('%', '')}`);
       continue;
     }
 

package/es/components/Modal/Modal.d.ts

@@ -4,6 +4,7 @@
  * 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 { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
@@ -150,6 +151,10 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
      * Specify the size variant.
      */
     size?: ModalSize;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+     */
+    slug?: ReactNodeLike;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/components/Modal/Modal.js

@@ -59,6 +59,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     loadingDescription,
     loadingIconDescription,
     onLoadingSuccess = noopFn,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -124,7 +125,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   const modalClasses = cx(`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
     'is-visible': open,
-    [`${prefix}--modal--danger`]: danger
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
   }, className);
   const containerClasses = cx(`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -191,6 +193,14 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   const modalButton = /*#__PURE__*/React__default.createElement("button", {
     className: modalCloseButtonClass,
     type: "button",
@@ -222,7 +232,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
     id: modalBodyId,
     className: contentClasses
   }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
@@ -432,7 +442,11 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes.oneOf(ModalSizes)
+  size: PropTypes.oneOf(ModalSizes),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+   */
+  slug: PropTypes.node
 };
 
 export { ModalSizes, Modal as default };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -193,7 +193,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/MultiSelect/MultiSelect.js

@@ -237,6 +237,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -298,7 +301,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/NumberInput/NumberInput.js

@@ -172,7 +172,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -180,7 +180,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   useEffect(() => {

package/es/components/PaginationNav/PaginationNav.js

@@ -103,9 +103,28 @@ function PaginationOverflow(_ref3) {
     fromIndex,
     count,
     onSelect,
+    // eslint-disable-next-line react/prop-types
+    disableOverflow,
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: `${prefix}--pagination-nav__list-item`
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--pagination-nav__select`
+    }, /*#__PURE__*/React__default.createElement("select", {
+      className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
+      "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
+      disabled: true
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--pagination-nav__select-icon-wrapper`
+    }, /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
+      className: `${prefix}--pagination-nav__select-icon`
+    }))));
+  }
   if (count > 1) {
     return /*#__PURE__*/React__default.createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -147,6 +166,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -158,6 +178,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   const [cuts, setCuts] = useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
+  const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -216,6 +237,9 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
   const classNames = cx(`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
@@ -245,7 +269,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
     fromIndex: startOffset,
     count: cuts.front,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render items between overflows
   [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default.createElement(PaginationItem, {
@@ -259,7 +284,8 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   })), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
-    onSelect: jumpToItem
+    onSelect: jumpToItem,
+    disableOverflow: isOverflowDisabled
   }),
   // render last item unless there is only one in total
   totalItems > 1 && /*#__PURE__*/React__default.createElement(PaginationItem, {
@@ -342,6 +368,13 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes.string,
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes.bool,
+  // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -51,6 +51,10 @@ function ProgressIndicator(_ref) {
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     className: className
   }, rest), React__default.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/React__default.isValidElement(child)) {
+      return null;
+    }
+
     // only setup click handlers if onChange event is passed
     const onClick = onChange ? () => onChange(index) : undefined;
     if (index === currentIndex) {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -104,7 +104,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/Select/Select.js

@@ -128,7 +128,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Slug/index.js

@@ -125,6 +125,7 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     className: `${prefix}--slug__additional-text`
   }, aiTextLabel)), children));
 });
+Slug.displayName = 'Slug';
 Slug.propTypes = {
   /**
    * Specify the correct translation of the AI text

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

@@ -4,7 +4,7 @@
  * 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 from 'prop-types';
+import PropTypes, { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 declare const TYPES: {
@@ -23,7 +23,7 @@ declare const TYPES: {
 };
 export interface TagBaseProps {
     /**
-     * Provide content to be rendered inside of a <Tag>
+     * Provide content to be rendered inside of a `Tag`
      */
     children?: React.ReactNode;
     /**
@@ -31,11 +31,11 @@ export interface TagBaseProps {
      */
     className?: string;
     /**
-     * Specify if the <Tag> is disabled
+     * Specify if the `Tag` is disabled
      */
     disabled?: boolean;
     /**
-     * Determine if <Tag> is a filter/chip
+     * Determine if `Tag` is a filter/chip
      */
     filter?: boolean;
     /**
@@ -56,18 +56,22 @@ export interface TagBaseProps {
      * 'md' (default) sizes.
      */
     size?: 'sm' | 'md';
+    /**
+     * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Text to show on clear filters
      */
     title?: string;
     /**
-     * Specify the type of the <Tag>
+     * Specify the type of the `Tag`
      */
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
 declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, ...other }: TagProps<T>): JSX.Element;
+    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): JSX.Element;
     propTypes: {
         /**
          * Provide an alternative tag or component to use instead of the default
@@ -75,7 +79,7 @@ declare const Tag: {
          */
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         /**
-         * Provide content to be rendered inside of a <Tag>
+         * Provide content to be rendered inside of a `Tag`
          */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
@@ -83,11 +87,11 @@ declare const Tag: {
          */
         className: PropTypes.Requireable<string>;
         /**
-         * Specify if the <Tag> is disabled
+         * Specify if the `Tag` is disabled
          */
         disabled: PropTypes.Requireable<boolean>;
         /**
-         * Determine if <Tag> is a filter/chip
+         * Determine if `Tag` is a filter/chip
          */
         filter: PropTypes.Requireable<boolean>;
         /**
@@ -108,12 +112,16 @@ declare const Tag: {
          * 'md' (default) sizes.
          */
         size: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+         */
+        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * Text to show on clear filters
          */
         title: PropTypes.Requireable<string>;
         /**
-         * Specify the type of the <Tag>
+         * Specify the type of the `Tag`
          */
         type: PropTypes.Requireable<string>;
     };

package/es/components/Tag/Tag.js

@@ -44,6 +44,7 @@ const Tag = _ref => {
     onClose,
     size,
     as: BaseComponent,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -64,15 +65,26 @@ const Tag = _ref => {
       onClose(event);
     }
   };
+
+  // Slug is always size `md` and `inline`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
   if (filter) {
     const ComponentTag = BaseComponent ?? 'div';
     return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
       className: tagClasses,
       id: tagId
-    }, other), /*#__PURE__*/React__default.createElement(Text, {
+    }, other), CustomIconElement ? /*#__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`,
       title: typeof children === 'string' ? children : undefined
-    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default.createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -90,7 +102,7 @@ const Tag = _ref => {
     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));
+  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -99,7 +111,7 @@ Tag.propTypes = {
    */
   as: PropTypes.elementType,
   /**
-   * Provide content to be rendered inside of a <Tag>
+   * Provide content to be rendered inside of a `Tag`
    */
   children: PropTypes.node,
   /**
@@ -107,11 +119,11 @@ Tag.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Specify if the <Tag> is disabled
+   * Specify if the `Tag` is disabled
    */
   disabled: PropTypes.bool,
   /**
-   * Determine if <Tag> is a filter/chip
+   * Determine if `Tag` is a filter/chip
    */
   filter: PropTypes.bool,
   /**
@@ -132,12 +144,16 @@ Tag.propTypes = {
    * 'md' (default) sizes.
    */
   size: PropTypes.oneOf(['sm', 'md']),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+   */
+  slug: PropTypes.node,
   /**
    * Text to show on clear filters
    */
   title: PropTypes.string,
   /**
-   * Specify the type of the <Tag>
+   * Specify the type of the `Tag`
    */
   type: PropTypes.oneOf(Object.keys(TYPES))
 };

package/es/components/TextArea/TextArea.js

@@ -226,7 +226,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/TextInput/TextInput.js

@@ -157,7 +157,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Tile/Tile.js

@@ -269,7 +269,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   // Slug is always size `xs`
   const slugRef = useRef(null);
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs',
       ref: slugRef
@@ -494,7 +494,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs'
     });

package/es/components/UIShell/Switcher.js

@@ -60,7 +60,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       switcherItem.focus();
     }
   };
-  const childrenWithProps = React__default.Children.map(children, (child, index) => {
+  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
     if ( /*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
       return /*#__PURE__*/React__default.cloneElement(child, {

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -57,7 +57,7 @@ function CheckboxGroup(_ref) {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/lib/components/ComboBox/ComboBox.js

@@ -268,7 +268,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });