@carbon/ibm-products 2.84.0 → 2.85.0

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

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 React from 'react';
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+export interface PageHeaderHeroImageProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderHeroImage.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderHeroImage
+     */
+    className?: string;
+}
+export declare const PageHeaderHeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: any;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: any;
+    };
+};

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

@@ -0,0 +1,62 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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, { useState, useEffect } from 'react';
+import PropTypes from '../../../_virtual/index.js';
+import cx from 'classnames';
+import { AspectRatio } from '@carbon/react';
+import { breakpoints } from '@carbon/layout';
+import { blockClass } from '../PageHeaderUtils.js';
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = _ref => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  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
+};
+
+export { PageHeaderHeroImage };

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 React from 'react';
+import { IconButtonProps } from '@carbon/react';
+export interface PageHeaderScrollButtonProps extends IconButtonProps {
+    collapseText?: string;
+    expandText?: string;
+}
+export declare const PageHeaderScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 from 'react';
+import cx from 'classnames';
+import { IconButton } from '@carbon/react';
+import { ChevronUp } from '@carbon/react/icons';
+import { usePageHeader } from './context.js';
+import { scrollableAncestor } from './utils.js';
+import { pkg } from '../../../settings.js';
+
+const PageHeaderScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref;
+  const {
+    refs,
+    fullyCollapsed
+  } = usePageHeader();
+  const handleScroller = isFullyCollapsed => {
+    if (!refs?.contentRef?.current) {
+      return;
+    }
+    const scrollableTarget = scrollableAncestor(refs?.contentRef.current);
+
+    // Page header content is not fully collapsed
+    if (!isFullyCollapsed) {
+      const pageHeaderContentHeight = refs?.contentRef.current.offsetHeight;
+      scrollableTarget?.scrollTo({
+        top: pageHeaderContentHeight,
+        // headerTopValue, check if breadcrumb bar is included
+        behavior: 'smooth'
+      });
+    } else {
+      // Page header content is fully collapsed
+      scrollableTarget?.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    ref: ref,
+    label: fullyCollapsed ? expandText : collapseText,
+    size: "md",
+    kind: "ghost",
+    autoAlign: true
+  }, other, {
+    onClick: event => {
+      onClick?.(event);
+      handleScroller(!!fullyCollapsed);
+    },
+    className: cx(className, `${pkg.prefix}--page-header--scroller-button`)
+  }), /*#__PURE__*/React__default.createElement(ChevronUp, {
+    className: cx(`${pkg.prefix}--page-header--scroller-button-icon`, {
+      [`${pkg.prefix}--page-header--scroller-button-icon-collapsed`]: fullyCollapsed
+    })
+  }));
+});
+PageHeaderScrollButton.displayName = 'PageHeaderScrollButton';
+
+export { PageHeaderScrollButton };

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 React from 'react';
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+export interface PageHeaderTabBarProps {
+    children?: React.ReactNode;
+    className?: string;
+    tags?: React.ReactNode;
+    scroller?: React.ReactNode;
+}
+export declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,66 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 from 'react';
+import cx from 'classnames';
+import { Grid, Column } from '@carbon/react';
+import { blockClass } from '../PageHeaderUtils.js';
+import { pkg } from '../../../settings.js';
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+
+const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref, ref) {
+  let {
+    className,
+    children,
+    tags,
+    scroller,
+    ...other
+  } = _ref;
+  const classNames = cx({
+    [`${blockClass}__tab-bar`]: true
+  }, className);
+  const renderScroller = () => scroller && /*#__PURE__*/React__default.createElement("div", {
+    className: `${pkg.prefix}--page-header--scroller-button-container`
+  }, scroller);
+
+  // Early return if no tags are provided
+  if (!tags) {
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React__default.createElement(Grid, {
+      condensed: true
+    }, /*#__PURE__*/React__default.createElement(Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children, renderScroller())));
+  }
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React__default.createElement(Grid, {
+    condensed: true
+  }, /*#__PURE__*/React__default.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__tab-bar--tablist`, {
+      [`${pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    })
+  }, children, tags, renderScroller()))));
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+export { PageHeaderTabBar };

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 React from 'react';
+export interface PageHeaderTagOverflowProps {
+    children: React.ReactNode;
+    renderOverflowTag?: (hiddenBreadcrumbs: HTMLElement[], handleOverflowClick: (event: React.MouseEvent) => void, openPopover: boolean) => React.ReactElement;
+    renderPopoverContent?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement;
+}
+export declare const PageHeaderTagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import cx from 'classnames';
+import { Popover, PopoverContent } from '@carbon/react';
+import { blockClass } from '../PageHeaderUtils.js';
+import { createOverflowHandler } from './overflowHandler.js';
+import { pkg } from '../../../settings.js';
+
+const PageHeaderTagOverflow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    renderOverflowTag,
+    renderPopoverContent,
+    children
+  } = _ref;
+  const [openPopover, setOpenPopover] = useState(false);
+  const [hiddenTags, setHiddenTags] = useState([]);
+  const localRef = useRef(null);
+  const tagsContainerRef = ref || localRef;
+  // 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);
+    };
+  }, []);
+  const handleOverflowClick = useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+  useEffect(() => {
+    createOverflowHandler({
+      container: tagsContainerRef.current,
+      onChange: (_, hidden) => {
+        setHiddenTags(hidden);
+      }
+    });
+    // Don't want ref in dependency array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: tagsContainerRef,
+    className: cx(`${pkg.prefix}--page-header--tag-overflow-container`, {
+      [`${pkg.prefix}--page-header--tag-overflow-container__has-no-hidden-items`]: !hiddenTags.length
+    })
+  }, children, /*#__PURE__*/React__default.createElement(Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false),
+    "data-fixed": true,
+    className: cx(`${pkg.prefix}--page-header--tag-overflow-popover`, {
+      [`${pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length
+    })
+  }, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__tags-popover-list`
+  }, renderPopoverContent?.(hiddenTags)))));
+});
+PageHeaderTagOverflow.displayName = 'PageHeaderTagOverflow';
+
+export { PageHeaderTagOverflow };

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 React from 'react';
+import { BreadcrumbItemProps } from '@carbon/react';
+export declare const PageHeaderTitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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, { forwardRef } from 'react';
+import cx from 'classnames';
+import { BreadcrumbItem } from '@carbon/react';
+import { usePageHeader } from './context.js';
+import { pkg } from '../../../settings.js';
+
+const PageHeaderTitleBreadcrumb = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  const {
+    titleClipped,
+    refs
+  } = usePageHeader();
+  // Show title breadcrumb when:
+  // 1. No content element exists (compact mode), OR
+  // 2. Title is clipped and titleRef exists (with content element)
+  const hasContentElement = refs?.contentRef?.current;
+  const shouldShow = !hasContentElement || titleClipped && !!refs?.titleRef;
+  return /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
+    ref: ref,
+    isCurrentPage: true
+  }, other, {
+    className: cx(className, `${pkg.prefix}--page-header-title-breadcrumb`, {
+      [`${pkg.prefix}--page-header-title-breadcrumb-show`]: shouldShow,
+      [`${pkg.prefix}--page-header-title-breadcrumb-show__with-content-element`]: hasContentElement,
+      [`${pkg.prefix}--page-header-title-breadcrumb-show__without-content-element`]: !hasContentElement
+    })
+  }), children);
+});
+PageHeaderTitleBreadcrumb.displayName = 'PageHeaderTitleBreadcrumb';
+
+export { PageHeaderTitleBreadcrumb };

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

@@ -1,8 +1,9 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * 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, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, } from './PageHeader';
+export type { PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, PageHeaderBreadcrumbOverflowProps, } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';

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

@@ -5,4 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderBreadcrumbOverflow, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderScrollButton, PageHeaderTabBar, PageHeaderTagOverflow, PageHeaderTitleBreadcrumb, Root, ScrollButton, TabBar, TagOverflow, TitleBreadcrumb } from './PageHeader.js';
+export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, Root, ScrollButton, TabBar, TagOverflow, TitleBreadcrumb } from './PageHeader.js';
+export { PageHeaderBreadcrumbBar } from './PageHeaderBreadcrumbBar.js';
+export { PageHeaderContent } from './PageHeaderContent.js';
+export { PageHeaderContentPageActions } from './PageHeaderContentPageActions.js';
+export { PageHeaderContentText } from './PageHeaderContentText.js';
+export { PageHeaderTabBar } from './PageHeaderTabBar.js';
+export { PageHeaderHeroImage } from './PageHeaderHeroImage.js';
+export { PageHeaderScrollButton } from './PageHeaderScrollButton.js';
+export { PageHeaderTitleBreadcrumb } from './PageHeaderTitleBreadcrumb.js';
+export { PageHeaderBreadcrumbOverflow } from './PageHeaderBreadcrumbOverflow.js';
+export { PageHeaderTagOverflow } from './PageHeaderTagOverflow.js';

package/es/global/js/hooks/useCreateComponentStepChange.d.ts

@@ -1,4 +1,4 @@
-export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, componentBlockClass, setCreateComponentActions, setModalIsOpen, experimentalSecondarySubmit, experimentalSecondarySubmitText, }: {
+export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedStep, stepData, onPrevious, onNext, isSubmitDisabled, setCurrentStep, setIsSubmitting, setLoadingPrevious, loadingPrevious, onClose, onRequestSubmit, componentName, currentStep, backButtonText, cancelButtonText, submitButtonText, nextButtonText, isSubmitting, secondaryButtonDisabled, componentBlockClass, setCreateComponentActions, setModalIsOpen, experimentalSecondarySubmit, experimentalSecondarySubmitText, }: {
     firstIncludedStep: any;
     lastIncludedStep: any;
     stepData: any;
@@ -18,6 +18,7 @@ export function useCreateComponentStepChange({ firstIncludedStep, lastIncludedSt
     submitButtonText: any;
     nextButtonText: any;
     isSubmitting: any;
+    secondaryButtonDisabled?: boolean | undefined;
     componentBlockClass: any;
     setCreateComponentActions: any;
     setModalIsOpen: any;

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -28,6 +28,7 @@ const useCreateComponentStepChange = _ref => {
     submitButtonText,
     nextButtonText,
     isSubmitting,
+    secondaryButtonDisabled = false,
     componentBlockClass,
     setCreateComponentActions,
     setModalIsOpen,
@@ -138,7 +139,7 @@ const useCreateComponentStepChange = _ref => {
           label: backButtonText,
           onClick: handlePrevious,
           kind: 'secondary',
-          disabled: currentStep === firstIncludedStep,
+          disabled: currentStep === firstIncludedStep || secondaryButtonDisabled,
           loading: loadingPrevious
         });
       }
@@ -168,7 +169,7 @@ const useCreateComponentStepChange = _ref => {
       });
       setCreateComponentActions(buttons);
     }
-  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious, experimentalSecondarySubmit, experimentalSecondarySubmitText]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, secondaryButtonDisabled, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setModalIsOpen, moveToPreviousStep, onPrevious, setLoadingPrevious, loadingPrevious, experimentalSecondarySubmit, experimentalSecondarySubmitText]);
 };
 
 export { useCreateComponentStepChange };

package/es/global/js/hooks/usePortalTarget.js

@@ -12,7 +12,7 @@ import { useFeatureFlag } from '../../../components/FeatureFlags/index.js';
 
 const usePortalTarget = portalTargetIn => {
   const enablePortalTarget = useFeatureFlag('default-portal-target-body');
-  const [portalTarget, setPortalTarget] = useState(null);
+  const [portalTarget, setPortalTarget] = useState(portalTargetIn ?? null);
   useEffect(() => {
     if (portalTargetIn) {
       setPortalTarget(portalTargetIn);

package/es/global/js/utils/makeDraggable/makeDraggable.js

@@ -40,15 +40,20 @@ const makeDraggable = _ref => {
   const onKeyDown = e => {
     if (e.key === 'Enter') {
       isDragging = !isDragging;
-    }
-    if (isDragging) {
-      dispatch('dragstart', {
-        keyboard: true
-      });
-    } else {
-      dispatch('dragend', {
-        keyboard: true
-      });
+      if (isDragging) {
+        // Get current transform values when starting keyboard drag
+        const style = window.getComputedStyle(el);
+        const matrix = new DOMMatrix(style.transform);
+        currentX = matrix.m41;
+        currentY = matrix.m42;
+        dispatch('dragstart', {
+          keyboard: true
+        });
+      } else {
+        dispatch('dragend', {
+          keyboard: true
+        });
+      }
     }
     if (!isDragging) {
       return;
@@ -60,16 +65,20 @@ const makeDraggable = _ref => {
         e.preventDefault();
         break;
       case 'ArrowLeft':
-        el.style.left = `${el.offsetLeft - distance}px`;
+        currentX -= distance;
+        el.style.transform = `translate(${currentX}px, ${currentY}px)`;
         break;
       case 'ArrowRight':
-        el.style.left = `${el.offsetLeft + distance}px`;
+        currentX += distance;
+        el.style.transform = `translate(${currentX}px, ${currentY}px)`;
         break;
       case 'ArrowUp':
-        el.style.top = `${el.offsetTop - distance}px`;
+        currentY -= distance;
+        el.style.transform = `translate(${currentX}px, ${currentY}px)`;
         break;
       case 'ArrowDown':
-        el.style.top = `${el.offsetTop + distance}px`;
+        currentY += distance;
+        el.style.transform = `translate(${currentX}px, ${currentY}px)`;
         break;
     }
   };

package/lib/components/Coachmark/next/Coachmark/ContentHeader.js

@@ -36,7 +36,8 @@ const ContentHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const dragRef = React.useRef(null);
   const handleRef = ref || headerRef;
   const contentHeaderBlockClass = `${context.blockClass}--content-header`;
-  const closeBubble = () => {
+  const closeBubble = e => {
+    e?.stopPropagation();
     onClose?.();
     setOpen(false);
   };

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js

@@ -192,7 +192,18 @@ const ConditionBuilderItem = _ref => {
     role: "gridcell",
     className: `${popOverClassName} ${util.blockClass}__popover`,
     ref: popoverRef,
-    onRequestClose: closePopover
+    onRequestClose: () => {
+      // Workaround: prevent closing the popover when a date is selected
+      // from the flatpickr calendar, which is rendered outside the popover DOM.
+      // The flatpickr calendar is appended outside the popover DOM, so clicks on it
+      // trigger onRequestClose. We use the global event object to check the click target.
+      // carbon issue: https://github.com/carbon-design-system/carbon/issues/21690
+      const target = event?.target;
+      if (target?.closest('.flatpickr-calendar')) {
+        return;
+      }
+      closePopover();
+    }
   }, /*#__PURE__*/React.createElement(ConditionBuilderButton.ConditionBuilderButton, _rollupPluginBabelHelpers.extends({
     label: getLabel(),
     hideLabel: !label ? true : false,

package/lib/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -13,6 +13,7 @@ export interface StepsContextType {
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;
     setOnMount: (fn: any) => void;
+    setSecondaryButtonDisabled?: Dispatch<SetStateAction<boolean>>;
     setStepData: Dispatch<SetStateAction<Step[]>>;
     stepData: Step[];
 }

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -74,6 +74,7 @@ const CreateTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const [onPrevious, setOnPrevious] = React.useState();
   const [onNext, setOnNext] = React.useState();
   const [onMount, setOnMount] = React.useState();
+  const [secondaryButtonDisabled, setSecondaryButtonDisabled] = React.useState(false);
   const [stepData, setStepData] = React.useState([]);
   const [firstIncludedStep, setFirstIncludedStep] = React.useState(1);
   const [lastIncludedStep, setLastIncludedStep] = React.useState();
@@ -139,6 +140,7 @@ const CreateTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     submitButtonText,
     nextButtonText,
     isSubmitting,
+    secondaryButtonDisabled,
     componentBlockClass: blockClass,
     experimentalSecondarySubmit,
     experimentalSecondarySubmitText: experimentalSecondarySubmit?.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
@@ -179,6 +181,7 @@ const CreateTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       setOnPrevious: fn => setOnPrevious(() => fn),
       setOnNext: fn => setOnNext(() => fn),
       setOnMount: fn => setOnMount(() => fn),
+      setSecondaryButtonDisabled,
       setStepData,
       stepData
     }

package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -89,6 +89,10 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
      * Optional function to be called when you move to the previous step.
      */
     onPrevious?: () => void;
+    /**
+     * This will conditionally disable the secondary (Back) button in the multi step Tearsheet
+     */
+    secondaryButtonDisabled?: boolean;
     /**
      * Sets the optional secondary label on the progress step component
      */

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -54,6 +54,7 @@ const CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onMount,
     onNext,
     onPrevious,
+    secondaryButtonDisabled,
     secondaryLabel,
     subtitle,
     title,
@@ -100,11 +101,12 @@ const CreateTearsheetStep = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext?.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext?.setOnPrevious(onPrevious);
+      stepsContext?.setSecondaryButtonDisabled?.(!!secondaryButtonDisabled);
 
       //Handle props for experimentalSecondarySubmit button, depending on state change
       stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
-  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
+  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, secondaryButtonDisabled, stepRef, stepRefValue, experimentalSecondarySubmit]);
   const renderDescription = () => {
     if (description) {
       if (typeof description === 'string') {
@@ -224,6 +226,10 @@ CreateTearsheetStep.propTypes = {
    * Optional function to be called when you move to the previous step.
    */
   onPrevious: index.default.func,
+  /**
+   * This will conditionally disable the secondary (Back) button in the multi step Tearsheet
+   */
+  secondaryButtonDisabled: index.default.bool,
   /**
    * Sets the optional secondary label on the progress step component
    */