@carbon/ibm-products 2.70.1 → 2.71.0-rc.0

package/lib/components/PageHeader/next/PageHeader.js

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

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

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

package/lib/components/SidePanel/SidePanel.js

@@ -13,7 +13,7 @@ var react = require('@carbon/react');
 var index$1 = require('../FeatureFlags/index.js');
 var React = require('react');
 var ActionSet = require('../ActionSet/ActionSet.js');
-var Resizer = require('./resizer/Resizer.js');
+var reactResizer = require('@carbon-labs/react-resizer');
 var index = require('../../_virtual/index.js');
 var constants = require('./constants.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
@@ -44,10 +44,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.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
+const SidePanelBase = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     actionToolbarButtons,
     actions,
     aiLabel,
@@ -77,9 +75,8 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     subtitle,
     title,
     launcherButtonRef,
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const [animationComplete, setAnimationComplete] = React.useState(false);
   const localRef = React.useRef(null);
   const sidePanelRef = ref || localRef;
@@ -173,14 +170,22 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     setWidth((sidePanelWidth.current ?? 0) - (placement === 'right' ? delta : -delta));
   }, [placement, sidePanelRef, sidePanelWidth]);
+  const getPanelWidthPercent = React.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 = React.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 = React.useCallback(() => {
     sidePanelWidth.current = Math.min(parseFloat(constants.SIDE_PANEL_SIZES[size]) * 16, window.innerWidth * 0.75);
     const parentEl = sidePanelRef.current?.parentElement;
@@ -475,7 +480,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: subtitleRef
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}__action-toolbar`
-    }, actionToolbarButtons.map(_ref2 => {
+    }, actionToolbarButtons.map(_ref => {
       let {
         label,
         kind,
@@ -489,7 +494,7 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         className,
         onClick,
         ...rest
-      } = _ref2;
+      } = _ref;
       return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
         key: label,
         kind: kind || 'ghost',
@@ -531,10 +536,12 @@ const SidePanelBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd: onAnimationEnd,
     onAnimationStart: onAnimationStart,
     onKeyDown: handleKeyDown
-  }), !slideIn && enableResizer && window.innerWidth > 768 && /*#__PURE__*/React.createElement(Resizer.Resizer, {
+  }), !slideIn && enableResizer && window.innerWidth > 768 && /*#__PURE__*/React.createElement(reactResizer.Resizer, {
     className: `${blockClass}__resizer`,
     orientation: "vertical",
-    "aria-valuenow": sidePanelWidth.current,
+    "aria-valuemin": getPanelWidthPercent(constants.SIDE_PANEL_SIZES['xs']),
+    "aria-valuemax": 75,
+    "aria-valuenow": getPanelWidthPercent(),
     onResize: onResize,
     onResizeEnd: onResizeEnd,
     onDoubleClick: onDoubleClick
@@ -595,9 +602,7 @@ SidePanel.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([/**@ts-ignore*/
-  ActionSet.ActionSet.validateActions(), index.default.arrayOf(index.default.shape({
-    /**@ts-ignore */
+  actions: propsHelper.allPropTypes([index.default.arrayOf(index.default.shape({
     ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     tooltipPosition: index.default.oneOf(['top', 'right', 'bottom', 'left']),
@@ -688,10 +693,10 @@ SidePanel.propTypes = {
    * This prop is required when using the `slideIn` variant of the side panel.
    */
   /**@ts-ignore*/
-  selectorPageContent: index.default.string.isRequired.if(_ref3 => {
+  selectorPageContent: index.default.string.isRequired.if(_ref2 => {
     let {
       slideIn
-    } = _ref3;
+    } = _ref2;
     return slideIn;
   }),
   /**
@@ -718,10 +723,10 @@ SidePanel.propTypes = {
    * Sets the title text
    */
   /**@ts-ignore*/
-  title: index.default.string.isRequired.if(_ref4 => {
+  title: index.default.string.isRequired.if(_ref3 => {
     let {
       labelText
-    } = _ref4;
+    } = _ref3;
     return labelText;
   }),
   ...deprecatedProps

package/lib/components/StringFormatter/StringFormatter.js

@@ -21,6 +21,7 @@ var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js'
 const blockClass = `${settings.pkg.prefix}--string-formatter`;
 const componentName = 'StringFormatter';
 const defaults = {
+  autoAlign: false,
   lines: 1,
   tooltipDirection: enums.StringFormatterAlignment.BOTTOM_START,
   truncate: false,
@@ -34,6 +35,7 @@ const defaults = {
 exports.StringFormatter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     className,
+    autoAlign = defaults.autoAlign,
     lines = defaults.lines,
     tooltipDirection = defaults.tooltipDirection,
     truncate = defaults.truncate,
@@ -85,6 +87,7 @@ exports.StringFormatter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, devtools.getDevtoolsProps(componentName)), truncate && isTextTruncated ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
     className: `${blockClass}__tooltip`,
     align: tooltipDirection,
+    autoAlign: autoAlign,
     definition: value,
     openOnHover: true
   }, stringFormatterContent) : stringFormatterContent);