@carbon/ibm-products 2.84.0 → 2.85.0

package/lib/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/lib/components/PageHeader/next/PageHeaderHeroImage.js

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+'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');
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = _ref => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  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
+};
+
+exports.PageHeaderHeroImage = PageHeaderHeroImage;

package/lib/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/lib/components/PageHeader/next/PageHeaderScrollButton.js

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+var context = require('./context.js');
+var utils = require('./utils.js');
+var settings = require('../../../settings.js');
+
+const PageHeaderScrollButton = /*#__PURE__*/React.forwardRef(function PageHeaderExpander(_ref, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref;
+  const {
+    refs,
+    fullyCollapsed
+  } = context.usePageHeader();
+  const handleScroller = isFullyCollapsed => {
+    if (!refs?.contentRef?.current) {
+      return;
+    }
+    const scrollableTarget = utils.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.createElement(react.IconButton, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    label: fullyCollapsed ? expandText : collapseText,
+    size: "md",
+    kind: "ghost",
+    autoAlign: true
+  }, other, {
+    onClick: event => {
+      onClick?.(event);
+      handleScroller(!!fullyCollapsed);
+    },
+    className: cx(className, `${settings.pkg.prefix}--page-header--scroller-button`)
+  }), /*#__PURE__*/React.createElement(icons.ChevronUp, {
+    className: cx(`${settings.pkg.prefix}--page-header--scroller-button-icon`, {
+      [`${settings.pkg.prefix}--page-header--scroller-button-icon-collapsed`]: fullyCollapsed
+    })
+  }));
+});
+PageHeaderScrollButton.displayName = 'PageHeaderScrollButton';
+
+exports.PageHeaderScrollButton = PageHeaderScrollButton;

package/lib/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/lib/components/PageHeader/next/PageHeaderTabBar.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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+var settings = require('../../../settings.js');
+
+/**
+ * ----------------
+ * PageHeaderTabBar
+ * ----------------
+ */
+
+const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar(_ref, ref) {
+  let {
+    className,
+    children,
+    tags,
+    scroller,
+    ...other
+  } = _ref;
+  const classNames = cx({
+    [`${PageHeaderUtils.blockClass}__tab-bar`]: true
+  }, className);
+  const renderScroller = () => scroller && /*#__PURE__*/React.createElement("div", {
+    className: `${settings.pkg.prefix}--page-header--scroller-button-container`
+  }, scroller);
+
+  // Early return if no tags are provided
+  if (!tags) {
+    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React.createElement(react.Grid, {
+      condensed: true
+    }, /*#__PURE__*/React.createElement(react.Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children, renderScroller())));
+  }
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: classNames,
+    ref: ref
+  }, other), /*#__PURE__*/React.createElement(react.Grid, {
+    condensed: true
+  }, /*#__PURE__*/React.createElement(react.Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(`${PageHeaderUtils.blockClass}__tab-bar--tablist`, {
+      [`${settings.pkg.prefix}--page-header__tab-bar--with-scroller`]: !!scroller
+    })
+  }, children, tags, renderScroller()))));
+});
+PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+
+exports.PageHeaderTabBar = PageHeaderTabBar;

package/lib/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/lib/components/PageHeader/next/PageHeaderTagOverflow.js

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var PageHeaderUtils = require('../PageHeaderUtils.js');
+var overflowHandler = require('./overflowHandler.js');
+var settings = require('../../../settings.js');
+
+const PageHeaderTagOverflow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    renderOverflowTag,
+    renderPopoverContent,
+    children
+  } = _ref;
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const [hiddenTags, setHiddenTags] = React.useState([]);
+  const localRef = React.useRef(null);
+  const tagsContainerRef = ref || localRef;
+  // 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);
+    };
+  }, []);
+  const handleOverflowClick = React.useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+  React.useEffect(() => {
+    overflowHandler.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.createElement("div", {
+    ref: tagsContainerRef,
+    className: cx(`${settings.pkg.prefix}--page-header--tag-overflow-container`, {
+      [`${settings.pkg.prefix}--page-header--tag-overflow-container__has-no-hidden-items`]: !hiddenTags.length
+    })
+  }, children, /*#__PURE__*/React.createElement(react.Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false),
+    "data-fixed": true,
+    className: cx(`${settings.pkg.prefix}--page-header--tag-overflow-popover`, {
+      [`${settings.pkg.prefix}--page-header--tag-overflow-popover__hidden`]: !hiddenTags.length
+    })
+  }, renderOverflowTag?.(hiddenTags, handleOverflowClick, openPopover), /*#__PURE__*/React.createElement(react.PopoverContent, null, /*#__PURE__*/React.createElement("div", {
+    className: `${PageHeaderUtils.blockClass}__tags-popover-list`
+  }, renderPopoverContent?.(hiddenTags)))));
+});
+PageHeaderTagOverflow.displayName = 'PageHeaderTagOverflow';
+
+exports.PageHeaderTagOverflow = PageHeaderTagOverflow;

package/lib/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/lib/components/PageHeader/next/PageHeaderTitleBreadcrumb.js

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var react = require('@carbon/react');
+var context = require('./context.js');
+var settings = require('../../../settings.js');
+
+const PageHeaderTitleBreadcrumb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref;
+  const {
+    titleClipped,
+    refs
+  } = context.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.createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers.extends({
+    ref: ref,
+    isCurrentPage: true
+  }, other, {
+    className: cx(className, `${settings.pkg.prefix}--page-header-title-breadcrumb`, {
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show`]: shouldShow,
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show__with-content-element`]: hasContentElement,
+      [`${settings.pkg.prefix}--page-header-title-breadcrumb-show__without-content-element`]: !hasContentElement
+    })
+  }), children);
+});
+PageHeaderTitleBreadcrumb.displayName = 'PageHeaderTitleBreadcrumb';
+
+exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb;

package/lib/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/lib/components/PageHeader/next/index.js

@@ -8,6 +8,16 @@
 'use strict';
 
 var PageHeader = require('./PageHeader.js');
+var PageHeaderBreadcrumbBar = require('./PageHeaderBreadcrumbBar.js');
+var PageHeaderContent = require('./PageHeaderContent.js');
+var PageHeaderContentPageActions = require('./PageHeaderContentPageActions.js');
+var PageHeaderContentText = require('./PageHeaderContentText.js');
+var PageHeaderTabBar = require('./PageHeaderTabBar.js');
+var PageHeaderHeroImage = require('./PageHeaderHeroImage.js');
+var PageHeaderScrollButton = require('./PageHeaderScrollButton.js');
+var PageHeaderTitleBreadcrumb = require('./PageHeaderTitleBreadcrumb.js');
+var PageHeaderBreadcrumbOverflow = require('./PageHeaderBreadcrumbOverflow.js');
+var PageHeaderTagOverflow = require('./PageHeaderTagOverflow.js');
 
 
 
@@ -18,18 +28,18 @@ exports.ContentPageActions = PageHeader.ContentPageActions;
 exports.ContentText = PageHeader.ContentText;
 exports.HeroImage = PageHeader.HeroImage;
 exports.PageHeader = PageHeader.PageHeader;
-exports.PageHeaderBreadcrumbBar = PageHeader.PageHeaderBreadcrumbBar;
-exports.PageHeaderBreadcrumbOverflow = PageHeader.PageHeaderBreadcrumbOverflow;
-exports.PageHeaderContent = PageHeader.PageHeaderContent;
-exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
-exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
-exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
-exports.PageHeaderScrollButton = PageHeader.PageHeaderScrollButton;
-exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
-exports.PageHeaderTagOverflow = PageHeader.PageHeaderTagOverflow;
-exports.PageHeaderTitleBreadcrumb = PageHeader.PageHeaderTitleBreadcrumb;
 exports.Root = PageHeader.Root;
 exports.ScrollButton = PageHeader.ScrollButton;
 exports.TabBar = PageHeader.TabBar;
 exports.TagOverflow = PageHeader.TagOverflow;
 exports.TitleBreadcrumb = PageHeader.TitleBreadcrumb;
+exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar.PageHeaderBreadcrumbBar;
+exports.PageHeaderContent = PageHeaderContent.PageHeaderContent;
+exports.PageHeaderContentPageActions = PageHeaderContentPageActions.PageHeaderContentPageActions;
+exports.PageHeaderContentText = PageHeaderContentText.PageHeaderContentText;
+exports.PageHeaderTabBar = PageHeaderTabBar.PageHeaderTabBar;
+exports.PageHeaderHeroImage = PageHeaderHeroImage.PageHeaderHeroImage;
+exports.PageHeaderScrollButton = PageHeaderScrollButton.PageHeaderScrollButton;
+exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;
+exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow.PageHeaderBreadcrumbOverflow;
+exports.PageHeaderTagOverflow = PageHeaderTagOverflow.PageHeaderTagOverflow;

package/lib/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/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -30,6 +30,7 @@ const useCreateComponentStepChange = _ref => {
     submitButtonText,
     nextButtonText,
     isSubmitting,
+    secondaryButtonDisabled = false,
     componentBlockClass,
     setCreateComponentActions,
     setModalIsOpen,
@@ -140,7 +141,7 @@ const useCreateComponentStepChange = _ref => {
           label: backButtonText,
           onClick: handlePrevious,
           kind: 'secondary',
-          disabled: currentStep === firstIncludedStep,
+          disabled: currentStep === firstIncludedStep || secondaryButtonDisabled,
           loading: loadingPrevious
         });
       }
@@ -170,7 +171,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]);
 };
 
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

package/lib/global/js/hooks/usePortalTarget.js

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

package/lib/global/js/utils/makeDraggable/makeDraggable.js

@@ -42,15 +42,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;
@@ -62,16 +67,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.84.0",
+  "version": "2.85.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -68,7 +68,7 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@carbon/styles": "^1.100.0",
-    "@figma/code-connect": "^1.3.5",
+    "@figma/code-connect": "^1.4.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
     "@percy/storybook": "^10.0.0",
@@ -84,7 +84,7 @@
     "@types/react-table": "^7.7.20",
     "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.42.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.43.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -92,7 +92,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.43.0",
+    "jest-config-ibm-cloud-cognitive": "^1.44.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -104,7 +104,7 @@
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.93.2",
     "storybook": "^9.1.15",
-    "storybook-addon-accessibility-checker": ">=9.2.0-rc.0",
+    "storybook-addon-accessibility-checker": ">=9.2.0-git0",
     "typescript-config-carbon": "^0.9.0",
     "vite": "^7.0.0",
     "yargs": "^18.0.0"
@@ -113,7 +113,7 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.10.0",
     "@carbon/feature-flags": "^1.0.0",
-    "@carbon/ibm-products-styles": "^2.80.0",
+    "@carbon/ibm-products-styles": "^2.81.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.16.0",
     "@carbon/utilities-react": "0.19.0",
@@ -135,5 +135,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "7b0c5737d123755ee2ed937568fcd568e9c76b3f"
+  "gitHead": "d5645922d967cd5c602f4c111bab8a6b5f633abe"
 }