@carbon/ibm-products 2.70.1 → 2.71.0

package/es/components/PageHeader/next/PageHeader.js

@@ -0,0 +1,475 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 React__default, { useRef, useState, useLayoutEffect, useMemo, useEffect, useCallback } from 'react';
+import PropTypes from '../../../_virtual/index.js';
+import cx from 'classnames';
+import { Grid, Column, DefinitionTooltip, unstable_Text, Tag, Popover, OperationalTag, PopoverContent, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
+import { breakpoints } from '@carbon/layout';
+import { blockClass } from '../PageHeaderUtils.js';
+import { createOverflowHandler } from '@carbon/utilities';
+import { useOverflowItems } from '../../../global/js/hooks/useOverflowItems/useOverflowItems.js';
+import { useId } from '../../../global/js/utils/useId.js';
+
+/**
+ * ----------
+ * PageHeader
+ * ----------
+ */
+
+const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_ref, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  const classNames = cx({
+    [`${blockClass}`]: true,
+    [`${blockClass}__next`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), children);
+});
+PageHeader.displayName = 'PageHeader';
+
+/**
+ * -----------------------
+ * PageHeaderBreadcrumbBar
+ * -----------------------
+ */
+
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
+  let {
+    border = true,
+    className,
+    children,
+    renderIcon: IconElement,
+    contentActions,
+    contentActionsFlush,
+    pageActions,
+    pageActionsFlush,
+    ...other
+  } = _ref2;
+  const classNames = cx({
+    [`${blockClass}__breadcrumb-bar`]: true,
+    [`${blockClass}__breadcrumb-bar-border`]: border,
+    [`${blockClass}__breadcrumb__actions-flush`]: pageActionsFlush
+  }, className);
+  const contentActionsClasses = cx({
+    [`${blockClass}__breadcrumb__content-actions`]: !contentActionsFlush
+  });
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__breadcrumb-container`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__breadcrumb-wrapper`
+  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__breadcrumb__icon`
+  }, /*#__PURE__*/React__default.createElement(IconElement, null)), children), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__breadcrumb__actions`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: contentActionsClasses
+  }, contentActions), pageActions)))));
+});
+PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+
+/**
+ * -----------------
+ * PageHeaderContent
+ * -----------------
+ */
+
+const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHeaderContent(_ref3, ref) {
+  let {
+    className,
+    children,
+    title,
+    renderIcon: IconElement,
+    contextualActions,
+    pageActions,
+    ...other
+  } = _ref3;
+  const classNames = cx({
+    [`${blockClass}__content`]: true
+  }, className);
+  const titleRef = useRef(null);
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
+    return element.offsetHeight < element.scrollHeight;
+  };
+  useLayoutEffect(() => {
+    titleRef.current && isEllipsisActive(titleRef.current);
+  }, [title]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__title-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__start`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__title-container`
+  }, IconElement && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__icon`
+  }, /*#__PURE__*/React__default.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    definition: title
+  }, /*#__PURE__*/React__default.createElement(unstable_Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${blockClass}__content__title`
+  }, title)) : /*#__PURE__*/React__default.createElement(unstable_Text, {
+    ref: titleRef,
+    as: "h4",
+    className: `${blockClass}__content__title`
+  }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__content__contextual-actions`
+  }, contextualActions)), pageActions), children)));
+});
+PageHeaderContent.displayName = 'PageHeaderContent';
+PageHeaderContent.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContent.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContent
+   */
+  className: PropTypes.string,
+  /**
+   * The PageHeaderContent's contextual actions
+   */
+  contextualActions: PropTypes.node,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes.node,
+  /**
+   * Provide an optional icon to render in front of the PageHeaderContent's title.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes.string,
+  /**
+   * The PageHeaderContent's title
+   */
+  title: PropTypes.string.isRequired
+};
+
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+
+const PageHeaderContentPageActions = _ref4 => {
+  let {
+    className,
+    children,
+    menuButtonLabel = 'Actions',
+    actions,
+    ...other
+  } = _ref4;
+  const classNames = cx({
+    [`${blockClass}__content__page-actions`]: true
+  }, className);
+  const containerRef = useRef(null);
+  const offsetRef = useRef(null);
+  const [menuButtonVisibility, setMenuButtonVisibility] = useState(false);
+  const [hiddenItems, setHiddenItems] = useState([]);
+
+  // need to set the grid columns width based on the menu button's width
+  // to avoid overlapping when resizing
+  useLayoutEffect(() => {
+    if (menuButtonVisibility && offsetRef.current) {
+      const width = offsetRef.current.offsetWidth;
+      document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  useEffect(() => {
+    if (!containerRef.current || !Array.isArray(actions)) {
+      return;
+    }
+    createOverflowHandler({
+      container: containerRef.current,
+      // exclude the hidden menu button from children
+      maxVisibleItems: containerRef.current.children.length - 1,
+      onChange: (visible, hidden) => {
+        setHiddenItems(actions?.slice(visible.length));
+        if (hidden.length > 0) {
+          setMenuButtonVisibility(true);
+        }
+      }
+    });
+  }, [actions]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: containerRef
+  }, other), Array.isArray(actions) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actions.map(action => /*#__PURE__*/React__default.createElement("div", {
+    key: action.id
+  }, /*#__PURE__*/React__default.cloneElement(action.body, {
+    ...action.body.props,
+    onClick: action.onClick
+  }))), /*#__PURE__*/React__default.createElement("span", {
+    "data-offset": true,
+    "data-hidden": true,
+    ref: offsetRef
+  }, /*#__PURE__*/React__default.createElement(MenuButton, {
+    menuAlignment: "bottom-end",
+    label: menuButtonLabel,
+    size: "md"
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default.createElement(MenuItem, _extends({
+    key: item.id,
+    onClick: item.onClick
+  }, item.menuItem)))))));
+};
+PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
+PageHeaderContentPageActions.propTypes = {
+  /**
+   * The PageHeaderContent's page actions
+   */
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentPageActions.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentPageActions
+   */
+  className: PropTypes.string,
+  /**
+   * The PageHeaderContent's collapsible Menu button label
+   */
+  menuButtonLabel: PropTypes.string
+};
+
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+
+const PageHeaderContentText = _ref5 => {
+  let {
+    className,
+    children,
+    subtitle,
+    ...other
+  } = _ref5;
+  const classNames = cx({
+    [`${blockClass}__content__body`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames
+  }, other), subtitle && /*#__PURE__*/React__default.createElement(unstable_Text, {
+    as: "h3",
+    className: `${blockClass}__content__subtitle`
+  }, subtitle), children);
+};
+PageHeaderContentText.displayName = 'PageHeaderContentText';
+PageHeaderContentText.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderContentText.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentText
+   */
+  className: PropTypes.string,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes.string
+};
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = _ref6 => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref6;
+  const [lgBreakpoint, setLgBreakpoint] = useState(false);
+  const classNames = cx({
+    [`${blockClass}__hero-image`]: true
+  }, className);
+  const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
+  useEffect(() => {
+    const listener = event => {
+      setLgBreakpoint(event.matches);
+    };
+    const mediaQueryList = window.matchMedia(lgMediaQuery);
+    mediaQueryList.addEventListener('change', listener);
+    setLgBreakpoint(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener('change', listener);
+    };
+  }, [lgMediaQuery]);
+  return /*#__PURE__*/React__default.createElement(AspectRatio, _extends({
+    className: classNames
+  }, other, {
+    ratio: lgBreakpoint ? '2x1' : '3x2'
+  }), children);
+};
+PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
+PageHeaderHeroImage.propTypes = {
+  /**
+   * Provide child elements to be rendered inside PageHeaderHeroImage.
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be added to your PageHeaderHeroImage
+   */
+  className: PropTypes.string
+};
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+
+const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref7, ref) {
+  let {
+    className,
+    children,
+    tags = [],
+    ...other
+  } = _ref7;
+  const classNames = cx({
+    [`${blockClass}__tab-bar`]: true
+  }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId('PageHeaderTabBar');
+  const tagsWithIds = useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [instanceId, tags]);
+  const tagsContainerRef = useRef(null);
+  const offsetRef = useRef(null);
+  // To close popover when window resizes
+  useEffect(() => {
+    const handleResize = () => {
+      // Close the popover when window resizes to prevent unwanted opens
+      setOpenPopover(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // overflow items hook
+  const {
+    visibleItems = [],
+    hiddenItems = [],
+    itemRefHandler = () => {}
+  } = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React__default.createElement(Tag, {
+    key: tag.id,
+    ref: node => itemRefHandler(tag.id, node),
+    type: tag.type,
+    size: tag.size,
+    className: `${blockClass}__tag-item`
+  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React__default.createElement(Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React__default.createElement(OperationalTag, {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React__default.createElement(Tag, {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+/**
+ * -------
+ * Exports
+ * -------
+ */
+const Root = PageHeader;
+Root.displayName = 'PageHeader.Root';
+const BreadcrumbBar = PageHeaderBreadcrumbBar;
+BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
+const Content = PageHeaderContent;
+Content.displayName = 'PageHeaderContent';
+const ContentPageActions = PageHeaderContentPageActions;
+ContentPageActions.displayName = 'PageHeaderContentPageActions';
+const ContentText = PageHeaderContentText;
+ContentText.displayName = 'PageHeaderContentText';
+const HeroImage = PageHeaderHeroImage;
+HeroImage.displayName = 'PageHeaderHeroImage';
+const TabBar = PageHeaderTabBar;
+TabBar.displayName = 'PageHeaderTabBar';
+
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };

package/es/components/PageHeader/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/es/components/ScrollGradient/ScrollGradient.js

@@ -39,10 +39,10 @@ let ScrollGradient = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     hideStartGradient = defaults.hideStartGradient,
     ...rest
   } = _ref;
-  const intersectionStartRef = useRef();
-  const intersectionEndRef = useRef();
-  const intersectionLeftRef = useRef();
-  const intersectionRightRef = useRef();
+  const intersectionStartRef = useRef(undefined);
+  const intersectionEndRef = useRef(undefined);
+  const intersectionLeftRef = useRef(undefined);
+  const intersectionRightRef = useRef(undefined);
   const carbonPrefix = usePrefix();
   const fallbackColor = `var(--${carbonPrefix}-layer-01)`;
   const scrollContainer = useRef(undefined);

package/es/components/SidePanel/SidePanel.js

@@ -11,7 +11,7 @@ import { Button, Section, IconButton, Heading } from '@carbon/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
-import { Resizer } from './resizer/Resizer.js';
+import { Resizer } from '@carbon-labs/react-resizer';
 import PropTypes from '../../_virtual/index.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
@@ -42,10 +42,8 @@ const defaults = {
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
-const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
+const SidePanelBase = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
     actionToolbarButtons,
     actions,
     aiLabel,
@@ -75,9 +73,8 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     subtitle,
     title,
     launcherButtonRef,
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const [animationComplete, setAnimationComplete] = useState(false);
   const localRef = useRef(null);
   const sidePanelRef = ref || localRef;
@@ -171,14 +168,22 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     setWidth((sidePanelWidth.current ?? 0) - (placement === 'right' ? delta : -delta));
   }, [placement, sidePanelRef, sidePanelWidth]);
+  const getPanelWidthPercent = useCallback(customWidth => {
+    if (customWidth) {
+      const remValue = parseFloat(customWidth);
+      const remInPixels = remValue * parseFloat(getComputedStyle(document.documentElement).fontSize);
+      return Math.round(remInPixels / window.innerWidth * 100);
+    }
+    return Math.round((sidePanelRef.current?.clientWidth || 0) / window.innerWidth * 100);
+  }, [sidePanelRef]);
   const onResizeEnd = useCallback((_, ref) => {
     accumulatedDeltaRef.current = 0;
     sidePanelRef.current?.style?.removeProperty('transition');
-    const percent = Math.round((sidePanelRef.current.clientWidth || 0) / window.innerWidth * 100);
     // custom a11y announcements
-    ref.current.setAttribute('aria-label', `side panel is covering ${percent}% of screen`);
+    ref.current.setAttribute('aria-label', `side panel is covering ${getPanelWidthPercent()}% of screen`);
+    ref.current.setAttribute('aria-valuenow', getPanelWidthPercent());
     sidePanelWidth.current = sidePanelRef.current?.clientWidth;
-  }, [sidePanelRef]);
+  }, [sidePanelRef, getPanelWidthPercent]);
   const onDoubleClick = useCallback(() => {
     sidePanelWidth.current = Math.min(parseFloat(SIDE_PANEL_SIZES[size]) * 16, window.innerWidth * 0.75);
     const parentEl = sidePanelRef.current?.parentElement;
@@ -473,7 +478,7 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}__action-toolbar`
-    }, actionToolbarButtons.map(_ref2 => {
+    }, actionToolbarButtons.map(_ref => {
       let {
         label,
         kind,
@@ -487,7 +492,7 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         className,
         onClick,
         ...rest
-      } = _ref2;
+      } = _ref;
       return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -532,7 +537,9 @@ const SidePanelBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }), !slideIn && enableResizer && window.innerWidth > 768 && /*#__PURE__*/React__default.createElement(Resizer, {
     className: `${blockClass}__resizer`,
     orientation: "vertical",
-    "aria-valuenow": sidePanelWidth.current,
+    "aria-valuemin": getPanelWidthPercent(SIDE_PANEL_SIZES['xs']),
+    "aria-valuemax": 75,
+    "aria-valuenow": getPanelWidthPercent(),
     onResize: onResize,
     onResizeEnd: onResizeEnd,
     onDoubleClick: onDoubleClick
@@ -593,9 +600,7 @@ SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([/**@ts-ignore*/
-  ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape({
-    /**@ts-ignore */
+  actions: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
     ...Button.propTypes,
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
@@ -686,10 +691,10 @@ SidePanel.propTypes = {
    * This prop is required when using the `slideIn` variant of the side panel.
    */
   /**@ts-ignore*/
-  selectorPageContent: PropTypes.string.isRequired.if(_ref3 => {
+  selectorPageContent: PropTypes.string.isRequired.if(_ref2 => {
     let {
       slideIn
-    } = _ref3;
+    } = _ref2;
     return slideIn;
   }),
   /**
@@ -716,10 +721,10 @@ SidePanel.propTypes = {
    * Sets the title text
    */
   /**@ts-ignore*/
-  title: PropTypes.string.isRequired.if(_ref4 => {
+  title: PropTypes.string.isRequired.if(_ref3 => {
     let {
       labelText
-    } = _ref4;
+    } = _ref3;
     return labelText;
   }),
   ...deprecatedProps

package/es/components/StringFormatter/StringFormatter.js

@@ -19,6 +19,7 @@ import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.j
 const blockClass = `${pkg.prefix}--string-formatter`;
 const componentName = 'StringFormatter';
 const defaults = {
+  autoAlign: false,
   lines: 1,
   tooltipDirection: StringFormatterAlignment.BOTTOM_START,
   truncate: false,
@@ -32,6 +33,7 @@ const defaults = {
 let StringFormatter = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
+    autoAlign = defaults.autoAlign,
     lines = defaults.lines,
     tooltipDirection = defaults.tooltipDirection,
     truncate = defaults.truncate,
@@ -83,6 +85,7 @@ let StringFormatter = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, getDevtoolsProps(componentName)), truncate && isTextTruncated ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
     className: `${blockClass}__tooltip`,
     align: tooltipDirection,
+    autoAlign: autoAlign,
     definition: value,
     openOnHover: true
   }, stringFormatterContent) : stringFormatterContent);

package/es/components/Tearsheet/Tearsheet.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Button } from '@carbon/react';
 import React__default from 'react';
 import { portalType, TearsheetShell } from './TearsheetShell.js';
-import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../_virtual/index.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -37,13 +36,13 @@ const componentName = 'Tearsheet';
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-let Tearsheet = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
+let Tearsheet = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
     influencerPosition = 'left',
     influencerWidth = 'narrow',
     children,
     ...rest
-  } = _ref;
+  } = props;
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), rest, {
     influencerPosition,
     influencerWidth,
@@ -91,9 +90,7 @@ Tearsheet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([/**@ts-ignore */
-  ActionSet.validateActions(() => '2xl'), PropTypes.arrayOf(PropTypes.shape({
-    /**@ts-ignore*/
+  actions: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
     ...Button.propTypes,
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,