@carbon/react 1.81.0 → 1.82.0

package/es/components/PageHeader/PageHeader.js

@@ -6,16 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
 import '../Text/index.js';
+import { MenuButton } from '../MenuButton/index.js';
+import '../Menu/Menu.js';
+import { MenuItem } from '../Menu/MenuItem.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
+import { createOverflowHandler } from '@carbon/utilities';
 import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
 import { Text } from '../Text/Text.js';
 
@@ -78,7 +82,6 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
     className,
     children,
     title,
-    subtitle,
     renderIcon: IconElement,
     contextualActions,
     pageActions,
@@ -120,16 +123,7 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
     className: `${prefix}--page-header__content__title`
   }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--page-header__content__end`
-  }, pageActions && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--page-header__content__page-actions`
-  }, pageActions))), subtitle && /*#__PURE__*/React__default.createElement(Text, {
-    as: "h3",
-    className: `${prefix}--page-header__content__subtitle`
-  }, subtitle), children && /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--page-header__content__body`
-  }, children));
+  }, contextualActions)), pageActions), children);
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -144,7 +138,6 @@ PageHeaderContent.propTypes = {
   /**
    * Provide an optional icon to render in front of the PageHeaderContent's title.
    */
-
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The PageHeaderContent's title
@@ -166,17 +159,142 @@ PageHeaderContent.propTypes = {
 
 /**
  * ----------------
- * PageHeaderHeroImage
+ * PageHeaderContentPageActions
  * ----------------
  */
 
-const PageHeaderHeroImage = /*#__PURE__*/React__default.forwardRef(function PageHeaderHeroImage(_ref4, ref) {
+const PageHeaderContentPageActions = _ref4 => {
   let {
     className,
     children,
+    menuButtonLabel = 'Actions',
+    pageActions,
     ...other
   } = _ref4;
   const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__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('--pageheader-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  useEffect(() => {
+    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    createOverflowHandler({
+      container: containerRef.current,
+      // exclude the hidden menu button from children
+      maxVisibleItems: containerRef.current.children.length - 1,
+      onChange: (visible, hidden) => {
+        setHiddenItems(pageActions?.slice(visible.length));
+        if (hidden.length > 0) {
+          setMenuButtonVisibility(true);
+        }
+      }
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: containerRef
+  }, other), pageActions && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pageActions.map(action => /*#__PURE__*/React__default.createElement("div", {
+    key: action.id,
+    className: "action"
+  }, action.body)), /*#__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, {
+    key: item.id,
+    label: item.label,
+    onClick: item.onClick
+  })))))));
+};
+PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
+PageHeaderContentPageActions.propTypes = {
+  /**
+   * 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,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
+};
+
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+
+const PageHeaderContentText = _ref5 => {
+  let {
+    className,
+    children,
+    subtitle,
+    ...other
+  } = _ref5;
+  const prefix = usePrefix();
+  const classNames = cx({
+    [`${prefix}--page-header__content__body`]: true
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames
+  }, other), subtitle && /*#__PURE__*/React__default.createElement(Text, {
+    as: "h3",
+    className: `${prefix}--page-header__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 prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__hero-image`]: true
   }, className);
@@ -187,7 +305,7 @@ const PageHeaderHeroImage = /*#__PURE__*/React__default.forwardRef(function Page
   }, other, {
     ratio: isLg ? '2x1' : '3x2'
   }), children);
-});
+};
 PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
 PageHeaderHeroImage.propTypes = {
   /**
@@ -206,12 +324,12 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref5, ref) {
+const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref7, ref) {
   let {
     className,
     children,
     ...other
-  } = _ref5;
+  } = _ref7;
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
@@ -222,12 +340,12 @@ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHea
   }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabs(_ref6, ref) {
+const PageHeaderTabs = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabs(_ref8, ref) {
   let {
     className,
     children,
     ...other
-  } = _ref6;
+  } = _ref8;
   return /*#__PURE__*/React__default.createElement(Tabs$1, other, children);
 });
 PageHeaderTabs.displayName = 'PageHeaderTabs';
@@ -243,6 +361,10 @@ const BreadcrumbBar = PageHeaderBreadcrumbBar;
 BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 const Content = PageHeaderContent;
 Content.displayName = 'PageHeaderContent';
+const ContentPageActions = PageHeaderContentPageActions;
+Content.displayName = 'PageHeaderContentPageActions';
+const ContentText = PageHeaderContentText;
+Content.displayName = 'PageHeaderContentText';
 const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
@@ -250,4 +372,4 @@ TabBar.displayName = 'PageHeaderTabBar';
 const Tabs = PageHeaderTabs;
 Tabs.displayName = 'PageHeader.Tabs';
 
-export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };

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

@@ -4,5 +4,5 @@
  * 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, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, TabBar, HeroImage, Tabs, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';

package/es/components/PageHeader/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';

package/es/components/Popover/index.js

@@ -14,7 +14,7 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
-import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
+import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { useFloating, offset, flip, arrow, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 
@@ -33,19 +33,6 @@ const PopoverContext = /*#__PURE__*/React__default.createContext({
  * @deprecated Use NewPopoverAlignment instead.
  */
 
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref,
 //this is a workaround, have to come back and fix this.
 forwardRef) {
@@ -70,7 +57,7 @@ forwardRef) {
   const caretRef = useRef(null);
   const popover = useRef(null);
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  let align = mapPopoverAlignProp(initialAlign);
+  let align = mapPopoverAlign(initialAlign);
 
   // If the `Popover` is the last focusable item in the tab order, it should also close when the browser window loses focus  (#12922)
   useWindowEvent('blur', () => {
@@ -137,7 +124,7 @@ forwardRef) {
       alignmentAxis: alignmentAxisOffset,
       mainAxis: popoverDimensions?.current?.offset
     } : 0), autoAlign && flip({
-      fallbackPlacements: align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
+      fallbackPlacements: isTabTip ? align.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end'] : align.includes('bottom') ? ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'] : ['top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'],
       fallbackStrategy: 'initialPlacement',
       fallbackAxisSideDirection: 'start',
       boundary: autoAlignBoundary
@@ -297,11 +284,7 @@ Popover.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.

package/es/components/Search/Search.d.ts

@@ -4,7 +4,7 @@
  * 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, { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ComponentType, type FunctionComponent, type MouseEvent } from 'react';
+import React, { type ChangeEvent, type ComponentType, type FunctionComponent, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
 export interface SearchProps extends InputPropsBase {
     /**
@@ -43,10 +43,7 @@ export interface SearchProps extends InputPropsBase {
     /**
      * Optional callback called when the search value changes.
      */
-    onChange?(e: {
-        target: HTMLInputElement;
-        type: 'change';
-    }): void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Optional callback called when the search value is cleared.
      */

package/es/components/Search/Search.js

@@ -19,6 +19,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { noopFn } from '../../internal/noopFn.js';
 
 var _Close;
 const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
@@ -79,14 +80,29 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     if (!value && inputRef.current) {
       inputRef.current.value = '';
     }
-    const inputTarget = Object.assign({}, inputRef.current, {
-      value: ''
-    });
-    const clearedEvt = {
-      target: inputTarget,
-      type: 'change'
-    };
-    onChange(clearedEvt);
+    if (inputRef.current) {
+      const inputTarget = Object.assign({}, inputRef.current, {
+        value: ''
+      });
+      const syntheticEvent = {
+        bubbles: false,
+        cancelable: false,
+        currentTarget: inputRef.current,
+        defaultPrevented: false,
+        eventPhase: 0,
+        isDefaultPrevented: () => false,
+        isPropagationStopped: () => false,
+        isTrusted: false,
+        nativeEvent: new Event('change'),
+        persist: noopFn,
+        preventDefault: noopFn,
+        stopPropagation: noopFn,
+        target: inputTarget,
+        timeStamp: 0,
+        type: 'change'
+      };
+      onChange(syntheticEvent);
+    }
     onClear();
     setHasContent(false);
     inputRef.current?.focus();

package/es/components/Stack/HStack.d.ts

@@ -1,10 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 React from 'react';
 import { StackProps } from './Stack';
-declare const HStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
-export { HStack };
+export declare const HStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/es/components/Stack/HStack.js

@@ -6,18 +6,15 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { Stack } from './Stack.js';
 
-const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
+const HStack = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
     orientation: "horizontal"
-  }), children);
+  }));
 });
+HStack.propTypes = Stack.propTypes;
 
 export { HStack };

package/es/components/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
@@ -7,7 +7,6 @@
 import React from 'react';
 /**
  * The steps in the spacing scale
- * @type {Array<number>}
  */
 declare const SPACING_STEPS: number[];
 export interface StackProps extends React.HTMLAttributes<HTMLElement> {
@@ -54,5 +53,5 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement> {
  * - https://paste.twilio.design/layout/stack/
  * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
  */
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
-export { Stack };
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/Stack/Stack.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { spacing } from '@carbon/layout';
@@ -14,13 +14,10 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 /**
  * The steps in the spacing scale
- * @type {Array<number>}
  */
 const SPACING_STEPS = Array.from({
   length: spacing.length - 1
-}).map((_, step) => {
-  return step + 1;
-});
+}, (_, step) => step + 1);
 /**
  * The Stack component is a useful layout utility in a component-based model.
  * This allows components to not use margin and instead delegate the
@@ -38,7 +35,7 @@ const SPACING_STEPS = Array.from({
  * - https://paste.twilio.design/layout/stack/
  * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
  */
-const Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref) {
+const Stack = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     as: BaseComponent = 'div',
     children,

package/es/components/Stack/VStack.d.ts

@@ -1,10 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 React from 'react';
 import { StackProps } from './Stack';
-declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
-export { VStack };
+export declare const VStack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/es/components/Stack/VStack.js

@@ -6,14 +6,15 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { Stack } from './Stack.js';
 
-const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
+const VStack = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
     orientation: "vertical"
   }));
 });
+VStack.propTypes = Stack.propTypes;
 
 export { VStack };

package/es/components/Stack/index.d.ts

@@ -1,9 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 { HStack } from './HStack';
-export { VStack } from './VStack';
-export { Stack, type StackProps } from './Stack';
+export * from './HStack';
+export * from './Stack';
+export * from './VStack';

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useEffect, forwardRef } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
@@ -22,10 +22,8 @@ import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-// TODO: This type was added to prevent the formatter from changing the
-// indentation of this entire function. Delete it in a future pull request.
-
-const TextArea = /*#__PURE__*/forwardRef((props, forwardRef) => {
+const frFn = forwardRef;
+const TextArea = frFn((props, forwardRef) => {
   const {
     className,
     decorator,

package/es/components/TimePicker/TimePicker.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 React from 'react';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'value';
 export interface TimePickerProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -99,6 +99,5 @@ export interface TimePickerProps extends Omit<ReactAttr<HTMLInputElement>, Exclu
      */
     value?: string;
 }
-export type TimePickerComponent = ForwardRefReturn<HTMLInputElement, TimePickerProps>;
-declare const TimePicker: TimePickerComponent;
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
 export default TimePicker;

package/es/components/TimePicker/TimePicker.js

@@ -8,13 +8,14 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 
-const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_ref, ref) {
-  let {
+const frFn = forwardRef;
+const TimePicker = frFn((props, ref) => {
+  const {
     children,
     className,
     disabled = false,
@@ -37,7 +38,7 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
     type = 'text',
     value,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   const [isValue, setValue] = React__default.useState(value);
   const [prevValue, setPrevValue] = React__default.useState(value);

package/es/components/TimePickerSelect/TimePickerSelect.d.ts

@@ -1,11 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 React from 'react';
-import { ForwardRefReturn } from '../../types/common';
 export type TimePickerSelectProps = {
     /**
      * Provide the contents of your TimePickerSelect
@@ -28,6 +27,26 @@ export type TimePickerSelectProps = {
      */
     id: string;
 } & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement>;
-type TimePickerSelectComponent = ForwardRefReturn<HTMLSelectElement, TimePickerSelectProps>;
-declare const TimePickerSelect: TimePickerSelectComponent;
+declare const TimePickerSelect: React.ForwardRefExoticComponent<{
+    /**
+     * Provide the contents of your TimePickerSelect
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+} & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>>;
 export default TimePickerSelect;