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

package/lib/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/lib/components/ComposedModal/ComposedModal.js

@@ -91,6 +91,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     selectorsFloatingMenus,
     size,
     launcherButtonRef,
+    slug,
     ...rest
   } = _ref2;
   const prefix = usePrefix.usePrefix();
@@ -159,7 +160,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       setIsOpen(false);
     }
   }
-  const modalClass = cx__default["default"](`${prefix}--modal`, isOpen && 'is-visible', danger && `${prefix}--modal--danger`, customClassName);
+  const modalClass = cx__default["default"](`${prefix}--modal`, {
+    'is-visible': isOpen,
+    [`${prefix}--modal--danger`]: danger,
+    [`${prefix}--modal--slug`]: slug
+  }, customClassName);
   const containerClass = cx__default["default"](`${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)
@@ -212,6 +217,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, isOpen]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     role: "presentation",
     ref: ref,
@@ -233,7 +246,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -303,7 +316,11 @@ ComposedModal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])
+  size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `ComposedModal` component
+   */
+  slug: PropTypes__default["default"].node
 };
 
 exports.ModalBody = ModalBody;

package/lib/components/ContentSwitcher/ContentSwitcher.js

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

package/lib/components/DatePickerInput/DatePickerInput.js

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

package/lib/components/Dropdown/Dropdown.js

@@ -238,7 +238,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, 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'
     });

package/lib/components/Grid/Column.js

@@ -254,10 +254,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/lib/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/lib/components/Modal/Modal.js

@@ -69,6 +69,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     loadingDescription,
     loadingIconDescription,
     onLoadingSuccess = noopFn.noopFn,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -134,7 +135,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const modalClasses = cx__default["default"](`${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__default["default"](`${prefix}--modal-container`, {
     [`${prefix}--modal-container--${size}`]: size,
@@ -201,6 +203,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
+
+  // Slug is always size `lg`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'lg'
+    });
+  }
   const modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
     className: modalCloseButtonClass,
     type: "button",
@@ -232,7 +242,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     id: modalBodyId,
     className: contentClasses
   }, hasScrollingContentProps), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -442,7 +452,11 @@ Modal.propTypes = {
   /**
    * Specify the size variant.
    */
-  size: PropTypes__default["default"].oneOf(ModalSizes)
+  size: PropTypes__default["default"].oneOf(ModalSizes),
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
+   */
+  slug: PropTypes__default["default"].node
 };
 
 exports.ModalSizes = ModalSizes;

package/lib/components/MultiSelect/FilterableMultiSelect.js

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

package/lib/components/MultiSelect/MultiSelect.js

@@ -248,6 +248,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
         if (changes.selectedItem === undefined) {
           break;
         }
+        if (Array.isArray(changes.selectedItem)) {
+          break;
+        }
         onItemChange(changes.selectedItem);
         return {
           ...changes,
@@ -309,7 +312,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, 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'
     });

package/lib/components/NumberInput/NumberInput.js

@@ -182,7 +182,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug) {
+  if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
       size: 'mini'
     });
@@ -190,7 +190,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
 
   // 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;
   }
   React.useEffect(() => {

package/lib/components/PaginationNav/PaginationNav.js

@@ -113,9 +113,28 @@ function PaginationOverflow(_ref3) {
     fromIndex,
     count,
     onSelect,
+    // eslint-disable-next-line react/prop-types
+    disableOverflow,
     translateWithId: t = translateWithId
   } = _ref3;
   const prefix = usePrefix.usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: `${prefix}--pagination-nav__list-item`
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--pagination-nav__select`
+    }, /*#__PURE__*/React__default["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["default"].createElement("div", {
+      className: `${prefix}--pagination-nav__select-icon-wrapper`
+    }, /*#__PURE__*/React__default["default"].createElement(iconsReact.OverflowMenuHorizontal, {
+      className: `${prefix}--pagination-nav__select-icon`
+    }))));
+  }
   if (count > 1) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: `${prefix}--pagination-nav__list-item`
@@ -157,6 +176,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -168,6 +188,7 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   const [cuts, setCuts] = React.useState(getCuts(currentPage, totalItems, itemsThatFit));
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix.usePrefix();
+  const [isOverflowDisabled, setIsOverFlowDisabled] = React.useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -226,6 +247,9 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  React.useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
   const classNames = cx__default["default"](`${prefix}--pagination-nav`, className);
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
@@ -255,7 +279,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   }), /*#__PURE__*/React__default["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["default"].createElement(PaginationItem, {
@@ -269,7 +294,8 @@ const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function
   })), /*#__PURE__*/React__default["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["default"].createElement(PaginationItem, {
@@ -352,6 +378,13 @@ PaginationNav.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].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__default["default"].bool,
+  // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

package/lib/components/ProgressIndicator/ProgressIndicator.js

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

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -114,7 +114,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
 
   // 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/Select/Select.js

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

package/lib/components/Slug/index.js

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

package/lib/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/lib/components/Tag/Tag.js

@@ -54,6 +54,7 @@ const Tag = _ref => {
     onClose,
     size,
     as: BaseComponent,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -74,15 +75,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["default"].cloneElement(slug, {
+      size: 'sm',
+      kind: 'inline'
+    });
+  }
   if (filter) {
     const ComponentTag = BaseComponent ?? 'div';
     return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
       id: tagId
-    }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--tag__custom-icon`
+    }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
       className: `${prefix}--tag__label`,
       title: typeof children === 'string' ? children : undefined
-    }, children !== null && children !== undefined ? children : typeText), /*#__PURE__*/React__default["default"].createElement("button", {
+    }, children !== null && children !== undefined ? children : typeText), normalizedSlug, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
@@ -100,7 +112,7 @@ const Tag = _ref => {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     title: typeof children === 'string' ? children : undefined
-  }, children !== null && children !== undefined ? children : typeText));
+  }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 };
 Tag.propTypes = {
   /**
@@ -109,7 +121,7 @@ Tag.propTypes = {
    */
   as: PropTypes__default["default"].elementType,
   /**
-   * Provide content to be rendered inside of a <Tag>
+   * Provide content to be rendered inside of a `Tag`
    */
   children: PropTypes__default["default"].node,
   /**
@@ -117,11 +129,11 @@ Tag.propTypes = {
    */
   className: PropTypes__default["default"].string,
   /**
-   * Specify if the <Tag> is disabled
+   * Specify if the `Tag` is disabled
    */
   disabled: PropTypes__default["default"].bool,
   /**
-   * Determine if <Tag> is a filter/chip
+   * Determine if `Tag` is a filter/chip
    */
   filter: PropTypes__default["default"].bool,
   /**
@@ -142,12 +154,16 @@ Tag.propTypes = {
    * 'md' (default) sizes.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md']),
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Text to show on clear filters
    */
   title: PropTypes__default["default"].string,
   /**
-   * Specify the type of the <Tag>
+   * Specify the type of the `Tag`
    */
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };

package/lib/components/TextArea/TextArea.js

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

package/lib/components/TextInput/TextInput.js

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

package/lib/components/Tile/Tile.js

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

package/lib/components/UIShell/Switcher.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.45.0-rc.0",
+  "version": "1.46.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,8 @@
     "icons/index.esm.js",
     "icons/index.d.ts",
     "icons/package.json",
-    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json",
+    "telemetry.yml"
   ],
   "keywords": [
     "ibm",
@@ -36,7 +37,7 @@
   "scripts": {
     "build": "yarn clean && node tasks/build-styles.js && node tasks/build.js",
     "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
-    "postinstall": "carbon-telemetry collect --install",
+    "postinstall": "npx -y @ibm/telemetry-js --config=telemetry.yml",
     "storybook": "storybook dev -p 3000",
     "storybook:build": "storybook build"
   },
@@ -48,10 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/icons-react": "^11.32.0-rc.0",
+    "@carbon/icons-react": "^11.33.0-rc.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.45.0-rc.0",
-    "@carbon/telemetry": "0.1.0",
+    "@carbon/styles": "^1.46.0-rc.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
     "downshift": "8.2.3",
@@ -137,5 +137,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "451ce652bb9e0fcd30fc28a41ddee1a1daedfd34"
+  "gitHead": "89fe49b63bf2b4b5902d30f3bfeff2face55897e"
 }