@carbon/react 1.81.0-rc.0 → 1.81.0

package/lib/components/ComboBox/ComboBox.js

@@ -48,7 +48,9 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave
+  MenuMouseLeave,
+  ItemClick,
+  FunctionSelectItem
 } = Downshift.useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -219,6 +221,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       prevInputLengthRef.current = inputValue.length;
     }
   }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
+  const isManualClearingRef = React.useRef(false);
+  const [isClearing, setIsClearing] = React.useState(false);
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -228,6 +232,14 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const prevInputValue = React.useRef(inputValue);
   const prevSelectedItemProp = React.useRef(selectedItemProp);
+  React.useEffect(() => {
+    isManualClearingRef.current = isClearing;
+
+    // Reset flag after render cycle
+    if (isClearing) {
+      setIsClearing(false);
+    }
+  }, [isClearing]);
 
   // fully controlled combobox: handle changes to selectedItemProp
   React.useEffect(() => {
@@ -313,31 +325,38 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       case InputKeyDownEnter:
         if (!allowCustomValue) {
-          const highlightedIndex = indexToHighlight(inputValue);
-          const matchingItem = items[highlightedIndex];
-          if (matchingItem) {
-            // Prevent matching items that are marked as `disabled` from
-            // being selected.
-            if (matchingItem.disabled) {
-              return state;
+          if (state.highlightedIndex !== -1) {
+            const filteredList = filterItems(items, itemToString, inputValue);
+            const highlightedItem = filteredList[state.highlightedIndex];
+            if (highlightedItem && !highlightedItem.disabled) {
+              return {
+                ...changes,
+                selectedItem: highlightedItem,
+                inputValue: itemToString(highlightedItem)
+              };
+            }
+          } else {
+            const autoIndex = indexToHighlight(inputValue);
+            if (autoIndex !== -1) {
+              const matchingItem = items[autoIndex];
+              if (matchingItem && !matchingItem.disabled) {
+                return {
+                  ...changes,
+                  selectedItem: matchingItem,
+                  inputValue: itemToString(matchingItem)
+                };
+              }
             }
 
-            // Select the matching item.
-            return {
-              ...changes,
-              selectedItem: matchingItem,
-              inputValue: itemToString(matchingItem)
-            };
-          }
-
-          // If no matching item is found and there is an existing
-          // selection, clear the selection.
-          if (state.selectedItem !== null) {
-            return {
-              ...changes,
-              selectedItem: null,
-              inputValue
-            };
+            // If no matching item is found and there is an existing
+            // selection, clear the selection.
+            if (state.selectedItem !== null) {
+              return {
+                ...changes,
+                selectedItem: null,
+                inputValue
+              };
+            }
           }
         }
 
@@ -502,13 +521,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         type,
         selectedItem: newSelectedItem
       });
-      if (type === Downshift.useCombobox.stateChangeTypes.ItemClick && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
-        onChange({
-          selectedItem: newSelectedItem
-        });
+      if (isManualClearingRef.current) {
+        return;
       }
-      if ((type === Downshift.useCombobox.stateChangeTypes.FunctionSelectItem || type === Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter) && !isEqual__default["default"](selectedItemProp, newSelectedItem) // Only fire if there's an actual change
-      ) {
+      if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== 'undefined' && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
         });
@@ -701,7 +717,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
     clearSelection: () => {
+      setIsClearing(true); // This updates the state which syncs to the ref
+      setInputValue('');
+      onChange({
+        selectedItem: null
+      });
       selectItem(null);
+      handleSelectionClear();
     },
     translateWithId: translateWithId,
     disabled: disabled || readOnly,

package/lib/components/DataTable/TableCell.js

@@ -13,20 +13,23 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-  let {
+const frFn = React.forwardRef;
+const TableCell = frFn((props, ref) => {
+  const {
     children,
     className,
     hasAILabelHeader,
     colSpan,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const tableCellClassNames = cx__default["default"](className, {
     [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
@@ -38,5 +41,27 @@ const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   }, rest), children);
 });
 TableCell.displayName = 'TableCell';
+TableCell.propTypes = {
+  /**
+   * Pass in children that will be embedded in the table header label
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: PropTypes__default["default"].number,
+  /**
+   * Specify if the table cell is in an AI column
+   */
+  hasAILabelHeader: PropTypes__default["default"].bool,
+  /**
+   * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+   */
+  headers: PropTypes__default["default"].string
+};
 
 exports["default"] = TableCell;

package/lib/components/DataTable/tools/cells.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * Generates a unique cell ID by combining the row ID and header.
+ *
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
+ */
+export declare const getCellId: (rowId: string, header: string) => string;

package/lib/components/DataTable/tools/cells.js

@@ -10,13 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Generic helper used to consolidate all call sites for getting a cell id into
- * one method. The strategy currently is that a "cellId" is just the combination
- * of the row id and the header key used to access this field in a row.
+ * Generates a unique cell ID by combining the row ID and header.
  *
- * @param {string} rowId
- * @param {string} header
- * @returns {string}
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
  */
 const getCellId = (rowId, header) => `${rowId}:${header}`;
 

package/lib/components/DataTable/tools/filter.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+/**
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
+ */
+export declare const defaultFilterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
+    /** Table row IDs. */
+    rowIds: string[];
+    /** Table headers. */
+    headers: {
+        key: string;
+    }[];
+    /** Mapping of cell IDs to their corresponding cells. */
+    cellsById: Record<string, {
+        value: unknown;
+    }>;
+    /** Input value to search for. */
+    inputValue: string;
+    /** Function that returns a cell ID given a row ID and a header. */
+    getCellId: (rowId: string, header: string) => string;
+}) => string[];

package/lib/components/DataTable/tools/filter.js

@@ -10,18 +10,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Default implementation of how we filter rows internally. The idea behind this
- * implementation is to use the given list of row ids and headers to get the
- * individual cell values for a row. Then, we go through each cell value and see
- * if any of them includes the given inputValue.
- *
- * @param {object} config
- * @param {Array<string>} config.rowIds array of all the row ids in the table
- * @param {Array<object>} config.headers
- * @param {object} config.cellsById object containing a map of cell id to cell
- * @param {string} config.inputValue the current input value in the Table Search
- * @param {Function} config.getCellId
- * @returns {Array<string>} rowIds
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
  */
 const defaultFilterRows = _ref => {
   let {
@@ -31,15 +21,16 @@ const defaultFilterRows = _ref => {
     inputValue,
     getCellId
   } = _ref;
+  const normalizedInput = inputValue.trim().toLowerCase();
+  if (!normalizedInput) return rowIds;
   return rowIds.filter(rowId => headers.some(_ref2 => {
     let {
       key
     } = _ref2;
-    const id = getCellId(rowId, key);
-    if (typeof cellsById[id].value === 'boolean') {
-      return false;
-    }
-    return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
+    const cellId = getCellId(rowId, key);
+    const cell = cellsById[cellId];
+    if (typeof cell.value === 'boolean') return false;
+    return String(cell.value).toLowerCase().includes(normalizedInput);
   }));
 };
 

package/lib/components/DatePicker/DatePicker.js

@@ -473,7 +473,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()

package/lib/components/Dropdown/Dropdown.js

@@ -256,9 +256,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
 
   // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
-  const toggleButtonProps = React.useMemo(() => getToggleButtonProps({
+  const toggleButtonProps = getToggleButtonProps({
     'aria-label': ariaLabel || deprecatedAriaLabel
-  }), [getToggleButtonProps, ariaLabel, deprecatedAriaLabel, isOpen]);
+  });
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperClasses
@@ -330,7 +330,10 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
   }, [slug, decorator]);
-  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -377,9 +380,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       item,
       index
     });
-    if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
-      itemProps.id = item['id'];
-    }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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.

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -18,17 +18,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePickerInput(_ref, ref) {
-  let {
-    ...other
-  } = _ref;
+const frFn = React.forwardRef;
+const FluidDatePickerInput = frFn((props, ref) => {
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
     }
   }, /*#__PURE__*/React__default["default"].createElement(DatePickerInput["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref
-  }, other)));
+  }, props)));
 });
+FluidDatePickerInput.propTypes = DatePickerInput["default"].propTypes;
 
 exports["default"] = FluidDatePickerInput;

package/lib/components/Menu/Menu.js

@@ -111,18 +111,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
       }
     }
   }
-  function handleClose(e) {
-    if (/^key/.test(e.type)) {
-      window.addEventListener('keyup', returnFocus, {
-        once: true
-      });
-    } else if (e.type === 'click' && menu.current) {
-      menu.current.addEventListener('focusout', returnFocus, {
-        once: true
-      });
-    } else {
-      returnFocus();
-    }
+  function handleClose() {
+    returnFocus();
     if (onClose) {
       onClose();
     }
@@ -133,7 +123,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     // if the user presses escape or this is a submenu
     // and the user presses ArrowLeft, close it
     if ((match.match(e, keys.Escape) || !isRoot && match.match(e, keys.ArrowLeft)) && onClose) {
-      handleClose(e);
+      handleClose();
     } else {
       focusItem(e);
     }
@@ -168,7 +158,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
   }
   function handleBlur(e) {
     if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
-      handleClose(e);
+      handleClose();
     }
   }
   function fitValue(range, axis) {

package/lib/components/Menu/MenuItem.js

@@ -108,18 +108,28 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       }
     }
   }
+
+  // Avoid stray keyup event from MenuButton affecting MenuItem, and vice versa.
+  // Keyboard click is handled differently for <button> vs. <li> and for Enter vs. Space.  See
+  // https://www.stefanjudis.com/today-i-learned/keyboard-button-clicks-with-space-and-enter-behave-differently/.
+  const pendingKeyboardClick = React.useRef(false);
+  const keyboardClickEvent = e => match.match(e, keys.Enter) || match.match(e, keys.Space);
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-    if (match.match(e, keys.Enter) || match.match(e, keys.Space)) {
-      handleClick(e);
-    }
+    pendingKeyboardClick.current = keyboardClickEvent(e);
     if (rest.onKeyDown) {
       rest.onKeyDown(e);
     }
   }
+  function handleKeyUp(e) {
+    if (pendingKeyboardClick.current && keyboardClickEvent(e)) {
+      handleClick(e);
+    }
+    pendingKeyboardClick.current = false;
+  }
   const classNames = cx__default["default"](className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
@@ -172,7 +182,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   }, getReferenceProps()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
   }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, null)))), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/MultiSelect/MultiSelect.js

@@ -435,7 +435,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
-  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   const getSelectionStats = React.useCallback((selectedItems, filteredItems) => {
     const hasIndividualSelections = selectedItems.some(selected => !selected.isSelectAll);
     const nonSelectAllSelectedCount = selectedItems.filter(selected => !selected.isSelectAll).length;

package/lib/components/OverflowMenu/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import type { OverflowMenuProps } from './OverflowMenu';
+import { type OverflowMenuProps } from './OverflowMenu';
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/lib/components/OverflowMenu/index.js

@@ -14,22 +14,21 @@ var React = require('react');
 var index = require('../FeatureFlags/index.js');
 var index$1 = require('./next/index.js');
 var OverflowMenu$1 = require('./OverflowMenu.js');
-var createClassWrapper = require('../../internal/createClassWrapper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const OverflowMenuV11 = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
 const OverflowMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const enableV12OverflowMenu = index.useFeatureFlag('enable-v12-overflowmenu');
   return enableV12OverflowMenu ? /*#__PURE__*/React__default["default"].createElement(index$1.OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref
-  })) : /*#__PURE__*/React__default["default"].createElement(OverflowMenuV11, _rollupPluginBabelHelpers["extends"]({}, props, {
+  })) : /*#__PURE__*/React__default["default"].createElement(OverflowMenu$1.OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref
   }));
 });
 OverflowMenu.displayName = 'OverflowMenu';
+OverflowMenu.propTypes = OverflowMenu$1.OverflowMenu.propTypes;
 
 exports.OverflowMenu = OverflowMenu;
 exports["default"] = OverflowMenu;

package/lib/components/PageHeader/PageHeader.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+import { Tabs as BaseTabs } from '../Tabs/Tabs';
 /**
  * ----------
  * PageHeader
@@ -87,6 +88,11 @@ interface PageHeaderTabBarProps {
     className?: string;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -97,5 +103,6 @@ declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrum
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
+declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, HeroImage, TabBar, Tabs, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };

package/lib/components/PageHeader/PageHeader.js

@@ -20,6 +20,7 @@ require('../Text/index.js');
 var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
+var Tabs$1 = require('../Tabs/Tabs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +29,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _p, _p2, _p3;
+var _p, _p2;
 
 /**
  * ----------
@@ -228,9 +229,18 @@ const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(funct
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), _p3 || (_p3 = /*#__PURE__*/React__default["default"].createElement("p", null, "page header tab bar")), children);
+  }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
+const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs(_ref6, ref) {
+  let {
+    className,
+    children,
+    ...other
+  } = _ref6;
+  return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, children);
+});
+PageHeaderTabs.displayName = 'PageHeaderTabs';
 
 /**
  * -------
@@ -247,6 +257,8 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
+const Tabs = PageHeaderTabs;
+Tabs.displayName = 'PageHeader.Tabs';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Content = Content;
@@ -256,5 +268,7 @@ exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar;
 exports.PageHeaderContent = PageHeaderContent;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeaderTabBar;
+exports.PageHeaderTabs = PageHeaderTabs;
 exports.Root = Root;
 exports.TabBar = TabBar;
+exports.Tabs = Tabs;

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, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';
+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';

package/lib/components/PageHeader/index.js

@@ -21,5 +21,7 @@ exports.PageHeaderBreadcrumbBar = PageHeader.PageHeaderBreadcrumbBar;
 exports.PageHeaderContent = PageHeader.PageHeaderContent;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
+exports.PageHeaderTabs = PageHeader.PageHeaderTabs;
 exports.Root = PageHeader.Root;
 exports.TabBar = PageHeader.TabBar;
+exports.Tabs = PageHeader.Tabs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.81.0-rc.0",
+  "version": "1.81.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.26.0",
-    "@carbon/icons-react": "^11.59.0-rc.0",
-    "@carbon/layout": "^11.33.0-rc.0",
-    "@carbon/styles": "^1.80.0-rc.0",
+    "@carbon/icons-react": "^11.59.0",
+    "@carbon/layout": "^11.33.0",
+    "@carbon/styles": "^1.80.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,9 +79,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.36.0-rc.0",
-    "@carbon/themes": "^11.51.0-rc.0",
-    "@figma/code-connect": "^1.2.4",
+    "@carbon/test-utils": "^10.36.0",
+    "@carbon/themes": "^11.51.0",
+    "@figma/code-connect": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -147,5 +147,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "679420306589ea6cb50db59d208c7039020ebb4f"
+  "gitHead": "01b2d2b1c2d901921c615dcbdb85e0a2340b67e6"
 }