@carbon/react 1.58.0 → 1.59.0-rc.0

package/lib/components/ContainedList/index.js

@@ -9,10 +9,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
 var ContainedList = require('./ContainedList.js');
 var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
 
 ContainedList["default"].ContainedListItem = ContainedListItem["default"];
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject.deprecateFieldOnObject(ContainedList["default"], 'ContainedListItem', ContainedListItem["default"]);
+}
 
 exports.ContainedList = ContainedList["default"];
 exports["default"] = ContainedList["default"];

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -28,7 +28,7 @@ function useIsTruncated(ref) {
     const {
       offsetWidth,
       scrollWidth
-    } = element.lastElementChild?.lastElementChild || element;
+    } = element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/lib/components/RadioTile/RadioTile.d.ts

@@ -22,6 +22,11 @@ export interface RadioTileProps {
      * Specify whether the `RadioTile` should be disabled.
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * Provide a unique id for the underlying `<input>`.
      */
@@ -42,6 +47,10 @@ export interface RadioTileProps {
      * the underlying `<input>` changes.
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: React.ReactNode;
     /**
      * Specify the tab index of the underlying `<input>`.
      */

package/lib/components/RadioTile/RadioTile.js

@@ -43,15 +43,19 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     id,
     onChange = noopFn.noopFn,
     tabIndex = 0,
+    hasRoundedCorners,
+    slug,
     required,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const inputId = useId.useFallbackId(id);
-  const className = cx__default["default"](customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, {
+  const className = cx__default["default"](customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
     [`${prefix}--tile--is-selected`]: checked,
     [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
+    [`${prefix}--tile--disabled`]: disabled,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
   });
   const v12TileRadioIcons = index.useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -74,6 +78,14 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
       onChange(value, name, evt);
     }
   }
+
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
+      size: 'xs'
+    });
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,
@@ -94,7 +106,7 @@ const RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: `${prefix}--tile-content`
-  }, children)));
+  }, children), normalizedSlug));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -114,6 +126,11 @@ RadioTile.propTypes = {
    * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes__default["default"].bool,
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -136,6 +153,10 @@ RadioTile.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes__default["default"].node,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/lib/components/Tag/DismissibleTag.js

@@ -20,6 +20,7 @@ var iconsReact = require('@carbon/icons-react');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -45,18 +46,14 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagLabelRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagLabelRef]);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -80,6 +77,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagLabelRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/lib/components/Tag/OperationalTag.js

@@ -19,6 +19,7 @@ var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,18 +54,14 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -79,9 +76,10 @@ const OperationalTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false,
+      onMouseEnter: () => false,
       closeOnActivation: true
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: tagRef,
       type: type,
       size: size,
       renderIcon: renderIcon,
@@ -94,6 +92,7 @@ const OperationalTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagRef,
     type: type,
     size: size,
     renderIcon: renderIcon,

package/lib/components/Tag/SelectableTag.js

@@ -19,6 +19,7 @@ var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,21 +42,17 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
   const tagId = id || `tag-${getInstanceId()}`;
   const [selectedTag, setSelectedTag] = React.useState(selected);
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag
   });
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   let normalizedSlug;
   if (slug && slug['type']?.displayName === 'Slug') {
     normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
@@ -77,8 +74,9 @@ const SelectableTag = _ref => {
       align: "bottom",
       className: tooltipClasses,
       leaveDelayMs: 0,
-      onMouseEnter: false
+      onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+      ref: tagRef,
       slug: slug,
       size: size,
       renderIcon: renderIcon,
@@ -92,6 +90,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: tagRef,
     slug: slug,
     size: size,
     renderIcon: renderIcon,

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

@@ -4,7 +4,6 @@
  * 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 React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
@@ -40,7 +39,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -48,7 +47,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -66,7 +65,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -75,61 +74,6 @@ export interface TagBaseProps {
     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, slug, ...other }: TagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * wrapping element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Provide content to be rendered inside of a `Tag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `Tag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Determine if `Tag` is a filter/chip
-         */
-        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: (props: any, propName: any, componentName: any, ...rest: 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 `Tag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Text to show on clear filters
-         */
-        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;

package/lib/components/Tag/Tag.js

@@ -20,6 +20,8 @@ require('../Text/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
+var isEllipsisActive = require('./isEllipsisActive.js');
+var react = require('@floating-ui/react');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -49,7 +51,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = _ref => {
+const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref, forwardRef) {
   let {
     children,
     className,
@@ -69,17 +71,14 @@ const Tag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const tagRef = React.useRef();
+  const ref = react.useMergeRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${getInstanceId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   React.useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
   const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx__default["default"](`${prefix}--tag`, className, {
@@ -132,6 +131,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type && !isInteractiveTag
   });
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
     disabled: disabled,
     className: tagClasses,
     id: tagId
@@ -148,7 +148,7 @@ const Tag = _ref => {
     title: children !== null && children !== undefined ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
-};
+});
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -170,7 +170,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: deprecate["default"](PropTypes__default["default"].bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  filter: deprecate["default"](PropTypes__default["default"].bool, 'The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -178,7 +178,7 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: deprecate["default"](PropTypes__default["default"].func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  onClose: deprecate["default"](PropTypes__default["default"].func, 'The `onClose` prop has been 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
@@ -196,7 +196,7 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: deprecate["default"](PropTypes__default["default"].string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  title: deprecate["default"](PropTypes__default["default"].string, 'The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const isEllipsisActive: (element: any) => boolean;

package/lib/components/Tag/isEllipsisActive.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isEllipsisActive = element => {
+  if (element) {
+    return element?.offsetWidth < element?.scrollWidth;
+  }
+  return false;
+};
+
+exports.isEllipsisActive = isEllipsisActive;

package/lib/components/Tooltip/Tooltip.js

@@ -18,6 +18,7 @@ var useDelayedState = require('../../internal/useDelayedState.js');
 var useId = require('../../internal/useId.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -84,7 +85,7 @@ function Tooltip(_ref) {
   } else {
     triggerProps['aria-describedby'] = id;
   }
-  function onKeyDown(event) {
+  const onKeyDown = React.useCallback(event => {
     if (open && match.match(event, keys.Escape)) {
       event.stopPropagation();
       setOpen(false);
@@ -92,10 +93,24 @@ function Tooltip(_ref) {
     if (open && closeOnActivation && (match.match(event, keys.Enter) || match.match(event, keys.Space))) {
       setOpen(false);
     }
-  }
+  }, [closeOnActivation, open, setOpen]);
+  useIsomorphicEffect["default"](() => {
+    if (!open) {
+      return undefined;
+    }
+    function handleKeyDown(event) {
+      if (match.match(event, keys.Escape)) {
+        onKeyDown(event);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onKeyDown]);
   function onMouseEnter() {
     // Interactive Tags should not support onMouseEnter
-    if (!rest?.onMouseEnter?.()) {
+    if (!rest?.onMouseEnter) {
       setIsPointerIntersecting(true);
       setOpen(true, enterDelayMs);
     }
@@ -143,25 +158,30 @@ function Tooltip(_ref) {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
-    align: align,
-    className: cx__default["default"](`${prefix}--tooltip`, customClassName),
-    dropShadow: false,
-    highContrast: true,
-    onKeyDown: onKeyDown,
-    onMouseLeave: onMouseLeave,
-    open: open
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
-    ...triggerProps,
-    ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
-    "aria-hidden": open ? 'false' : 'true',
-    className: `${prefix}--tooltip-content`,
-    id: id,
-    role: "tooltip"
-  }, label || description));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore-error Popover throws a TS error everytime is imported
+    React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
+      align: align,
+      className: cx__default["default"](`${prefix}--tooltip`, customClassName),
+      dropShadow: false,
+      highContrast: true,
+      onKeyDown: onKeyDown,
+      onMouseLeave: onMouseLeave,
+      open: open
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: `${prefix}--tooltip-trigger__wrapper`
+    }, child !== undefined ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+      ...triggerProps,
+      ...getChildEventHandlers(child.props)
+    }) : null), /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, {
+      "aria-hidden": open ? 'false' : 'true',
+      className: `${prefix}--tooltip-content`,
+      id: id,
+      onMouseEnter: onMouseEnter,
+      role: "tooltip"
+    }, label || description))
+  );
 }
 Tooltip.propTypes = {
   /**

package/lib/components/UIShell/Content.d.ts

@@ -29,7 +29,7 @@ declare const Content: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -43,7 +43,7 @@ declare const Content: {
         style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "no" | "yes" | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
         about?: string | undefined;
@@ -93,7 +93,7 @@ declare const Content: {
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

package/lib/components/UIShell/SwitcherItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -43,6 +43,10 @@ interface BaseSwitcherItemProps {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Specify where to open the link.
+     */
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/lib/components/UIShell/SwitcherItem.js

@@ -38,6 +38,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     href,
+    target,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -75,6 +76,7 @@ const SwitcherItem = /*#__PURE__*/React.forwardRef(function SwitcherItem(props,
       onKeyDown(evt);
     },
     href: href,
+    target: target,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -115,7 +117,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify the tab index of the Link
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: PropTypes__default["default"].number,
+  /**
+   * Specify where to open the link.
+   */
+  target: PropTypes__default["default"].string
 };
 
 exports["default"] = SwitcherItem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.58.0",
+  "version": "1.59.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,7 @@
     "@carbon/feature-flags": "^0.20.0",
     "@carbon/icons-react": "^11.42.0",
     "@carbon/layout": "^11.22.0",
-    "@carbon/styles": "^1.58.0",
+    "@carbon/styles": "^1.59.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "574070ef9eef05d6e1e5899354bbadc77ba5f3ee"
+  "gitHead": "6269fa19f0ce2930b21a2fda05974a597126ec6b"
 }