@carbon/react 1.81.0 → 1.82.0-rc.0

package/lib/components/PageHeader/PageHeader.js

@@ -17,9 +17,13 @@ var usePrefix = require('../../internal/usePrefix.js');
 var layout = require('@carbon/layout');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
+var index = require('../MenuButton/index.js');
+require('../Menu/Menu.js');
+var MenuItem = require('../Menu/MenuItem.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
+var utilities = require('@carbon/utilities');
 var Tabs$1 = require('../Tabs/Tabs.js');
 var Text = require('../Text/Text.js');
 
@@ -88,7 +92,6 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
     className,
     children,
     title,
-    subtitle,
     renderIcon: IconElement,
     contextualActions,
     pageActions,
@@ -130,16 +133,7 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
     className: `${prefix}--page-header__content__title`
   }, title)), contextualActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__end`
-  }, pageActions && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__page-actions`
-  }, pageActions))), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h3",
-    className: `${prefix}--page-header__content__subtitle`
-  }, subtitle), children && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--page-header__content__body`
-  }, children));
+  }, contextualActions)), pageActions), children);
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -154,7 +148,6 @@ PageHeaderContent.propTypes = {
   /**
    * Provide an optional icon to render in front of the PageHeaderContent's title.
    */
-
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * The PageHeaderContent's title
@@ -176,17 +169,142 @@ PageHeaderContent.propTypes = {
 
 /**
  * ----------------
- * PageHeaderHeroImage
+ * PageHeaderContentPageActions
  * ----------------
  */
 
-const PageHeaderHeroImage = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderHeroImage(_ref4, ref) {
+const PageHeaderContentPageActions = _ref4 => {
   let {
     className,
     children,
+    menuButtonLabel = 'Actions',
+    pageActions,
     ...other
   } = _ref4;
   const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__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('--pageheader-title-grid-width', `${width}px`);
+    }
+  }, [menuButtonVisibility]);
+  React.useEffect(() => {
+    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    utilities.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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: containerRef
+  }, other), pageActions && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pageActions.map(action => /*#__PURE__*/React__default["default"].createElement("div", {
+    key: action.id,
+    className: "action"
+  }, action.body)), /*#__PURE__*/React__default["default"].createElement("span", {
+    "data-offset": true,
+    "data-hidden": true,
+    ref: offsetRef
+  }, /*#__PURE__*/React__default["default"].createElement(index.MenuButton, {
+    menuAlignment: "bottom-end",
+    label: menuButtonLabel,
+    size: "md"
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default["default"].createElement(MenuItem.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__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentPageActions
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's collapsible Menu button label
+   */
+  menuButtonLabel: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's page actions
+   */
+  pageActions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].array])
+};
+
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+
+const PageHeaderContentText = _ref5 => {
+  let {
+    className,
+    children,
+    subtitle,
+    ...other
+  } = _ref5;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"]({
+    [`${prefix}--page-header__content__body`]: true
+  }, className);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), subtitle && /*#__PURE__*/React__default["default"].createElement(Text.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__default["default"].node,
+  /**
+   * Specify an optional className to be added to your PageHeaderContentText
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The PageHeaderContent's subtitle
+   */
+  subtitle: PropTypes__default["default"].string
+};
+
+/**
+ * ----------------
+ * PageHeaderHeroImage
+ * ----------------
+ */
+
+const PageHeaderHeroImage = _ref6 => {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref6;
+  const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__hero-image`]: true
   }, className);
@@ -197,7 +315,7 @@ const PageHeaderHeroImage = /*#__PURE__*/React__default["default"].forwardRef(fu
   }, other, {
     ratio: isLg ? '2x1' : '3x2'
   }), children);
-});
+};
 PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
 PageHeaderHeroImage.propTypes = {
   /**
@@ -216,12 +334,12 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref5, ref) {
+const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref7, ref) {
   let {
     className,
     children,
     ...other
-  } = _ref5;
+  } = _ref7;
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
@@ -232,12 +350,12 @@ const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(funct
   }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs(_ref6, ref) {
+const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs(_ref8, ref) {
   let {
     className,
     children,
     ...other
-  } = _ref6;
+  } = _ref8;
   return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, children);
 });
 PageHeaderTabs.displayName = 'PageHeaderTabs';
@@ -253,6 +371,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;
@@ -262,10 +384,14 @@ Tabs.displayName = 'PageHeader.Tabs';
 
 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.PageHeaderTabs = PageHeaderTabs;

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

@@ -15,10 +15,14 @@ var PageHeader = require('./PageHeader.js');
 
 exports.BreadcrumbBar = PageHeader.BreadcrumbBar;
 exports.Content = PageHeader.Content;
+exports.ContentPageActions = PageHeader.ContentPageActions;
+exports.ContentText = PageHeader.ContentText;
 exports.HeroImage = PageHeader.HeroImage;
 exports.PageHeader = PageHeader.PageHeader;
 exports.PageHeaderBreadcrumbBar = PageHeader.PageHeaderBreadcrumbBar;
 exports.PageHeaderContent = PageHeader.PageHeaderContent;
+exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
+exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
 exports.PageHeaderTabs = PageHeader.PageHeaderTabs;

package/lib/components/Popover/index.js

@@ -18,7 +18,7 @@ var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useEvent = require('../../internal/useEvent.js');
-var createPropAdapter = require('../../tools/createPropAdapter.js');
+var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
 
@@ -43,19 +43,6 @@ const PopoverContext = /*#__PURE__*/React__default["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["default"].forwardRef(function PopoverRenderFunction(_ref,
 //this is a workaround, have to come back and fix this.
 forwardRef) {
@@ -80,7 +67,7 @@ forwardRef) {
   const caretRef = React.useRef(null);
   const popover = React.useRef(null);
   const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
-  let align = createPropAdapter.mapPopoverAlignProp(initialAlign);
+  let align = mapPopoverAlign.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)
   useEvent.useWindowEvent('blur', () => {
@@ -147,7 +134,7 @@ forwardRef) {
       alignmentAxis: alignmentAxisOffset,
       mainAxis: popoverDimensions?.current?.offset
     } : 0), autoAlign && react.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
@@ -307,11 +294,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.mapPopoverAlign),
   /**
    * Provide a custom element or component to render the top-level node for the
    * component.

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

@@ -23,6 +23,7 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -89,14 +90,29 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     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.noopFn,
+        preventDefault: noopFn.noopFn,
+        stopPropagation: noopFn.noopFn,
+        target: inputTarget,
+        timeStamp: 0,
+        type: 'change'
+      };
+      onChange(syntheticEvent);
+    }
     onClear();
     setHasContent(false);
     inputRef.current?.focus();

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

@@ -17,15 +17,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const HStack = /*#__PURE__*/React__default["default"].forwardRef(function HStack(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
+const HStack = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
     orientation: "horizontal"
-  }), children);
+  }));
 });
+HStack.propTypes = Stack.Stack.propTypes;
 
 exports.HStack = HStack;

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

@@ -24,13 +24,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 /**
  * The steps in the spacing scale
- * @type {Array<number>}
  */
 const SPACING_STEPS = Array.from({
   length: layout.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
@@ -48,7 +45,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["default"].forwardRef(function Stack(props, ref) {
+const Stack = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     as: BaseComponent = 'div',
     children,

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

@@ -17,11 +17,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const VStack = /*#__PURE__*/React__default["default"].forwardRef(function VStack(props, ref) {
+const VStack = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
     orientation: "vertical"
   }));
 });
+VStack.propTypes = Stack.Stack.propTypes;
 
 exports.VStack = VStack;

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

@@ -32,10 +32,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-// 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__*/React.forwardRef((props, forwardRef) => {
+const frFn = React.forwardRef;
+const TextArea = frFn((props, forwardRef) => {
   const {
     className,
     decorator,

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

@@ -23,8 +23,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function TimePicker(_ref, ref) {
-  let {
+const frFn = React.forwardRef;
+const TimePicker = frFn((props, ref) => {
+  const {
     children,
     className,
     disabled = false,
@@ -47,7 +48,7 @@ const TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function Ti
     type = 'text',
     value,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const [isValue, setValue] = React__default["default"].useState(value);
   const [prevValue, setPrevValue] = React__default["default"].useState(value);

package/lib/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;

package/lib/components/TimePickerSelect/TimePickerSelect.js

@@ -22,15 +22,16 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function TimePickerSelect(_ref, ref) {
-  let {
+const frFn = React.forwardRef;
+const TimePickerSelect = frFn((props, ref) => {
+  const {
     ['aria-label']: ariaLabel = 'open list of options',
     children,
     id,
     disabled = false,
     className,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const selectClasses = cx__default["default"]({
     [`${prefix}--select`]: true,