@carbon/react 1.38.0-rc.0 → 1.39.0-rc.0

package/es/components/UIShell/SkipToContent.d.ts

@@ -6,7 +6,7 @@
  */
 import { ComponentProps } from 'react';
 import PropTypes from 'prop-types';
-type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
+export type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
     children?: string | undefined;
 };
 declare function SkipToContent({ children, className: customClassName, href, tabIndex, ...rest }: SkipToContentProps): JSX.Element;

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

@@ -6,21 +6,21 @@
  */
 export { default as Content } from './Content';
 export { default as Header } from './Header';
-export { default as HeaderContainer } from './HeaderContainer';
+export { default as HeaderContainer, type HeaderContainerProps, } from './HeaderContainer';
 export { default as HeaderGlobalAction } from './HeaderGlobalAction';
 export { default as HeaderGlobalBar } from './HeaderGlobalBar';
 export { default as HeaderMenu } from './HeaderMenu';
-export { default as HeaderMenuButton } from './HeaderMenuButton';
-export { default as HeaderMenuItem } from './HeaderMenuItem';
-export { default as HeaderName } from './HeaderName';
-export { default as HeaderNavigation } from './HeaderNavigation';
+export { default as HeaderMenuButton, type HeaderMenuButtonProps, } from './HeaderMenuButton';
+export { default as HeaderMenuItem, type HeaderMenuItemProps, } from './HeaderMenuItem';
+export { default as HeaderName, type HeaderNameProps } from './HeaderName';
+export { default as HeaderNavigation, type HeaderNavigationProps, } from './HeaderNavigation';
 export { default as HeaderPanel } from './HeaderPanel';
-export { default as HeaderSideNavItems } from './HeaderSideNavItems';
+export { default as HeaderSideNavItems, type HeaderSideNavItemsProps, } from './HeaderSideNavItems';
 export { default as Switcher } from './Switcher';
 export { default as SwitcherItem } from './SwitcherItem';
 export { default as SwitcherDivider } from './SwitcherDivider';
-export { default as SkipToContent } from './SkipToContent';
-export { default as SideNav } from './SideNav';
+export { default as SkipToContent, type SkipToContentProps, } from './SkipToContent';
+export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SideNavDetails } from './SideNavDetails';
 export { default as SideNavDivider } from './SideNavDivider';
 export { default as SideNavFooter } from './SideNavFooter';

package/es/index.js

@@ -50,6 +50,7 @@ export { Grid } from './components/Grid/Grid.js';
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { ColumnHang } from './components/Grid/ColumnHang.js';
+export { GridSettings } from './components/Grid/GridContext.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as Link } from './components/Link/Link.js';

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -39,6 +39,7 @@ const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
+    align = 'bottom',
     className,
     type,
     children,
@@ -158,6 +159,7 @@ function CodeSnippet(_ref) {
       }, children));
     }
     return /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+      align: align,
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
@@ -212,6 +214,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyButton["default"], {
+    align: align,
     size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
@@ -233,6 +236,10 @@ function CodeSnippet(_ref) {
   })));
 }
 CodeSnippet.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify a label to be read by screen readers on the containing <textbox>
    * node

package/lib/components/ComboBox/ComboBox.d.ts

@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Downshift from 'downshift';
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxType, ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
-export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null;
+}
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -35,12 +38,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: React.ComponentProps<typeof Downshift>;
+    downshiftProps?: ComponentProps<typeof Downshift<ItemType>>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help
      */
-    helperText?: string;
+    helperText?: ReactNode;
     /**
      * Specify a custom `id` for the input
      */
@@ -49,7 +52,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
      * from their collection that are pre-selected
      */
-    initialSelectedItem?: object | string | number;
+    initialSelectedItem?: ItemType;
     /**
      * Specify if the currently selected value is invalid.
      */
@@ -57,23 +60,23 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Optional function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: React.ComponentType | null;
+    itemToElement?: ComponentType<ItemType> | null;
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list
      */
-    itemToString?: (item: unknown) => string;
+    itemToString?: ItemToStringHandler<ItemType>;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer
      */
-    items: (object | string | number)[];
+    items: ItemType[];
     /**
      * @deprecated
      * should use "light theme" (white background)?
@@ -85,9 +88,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * `({ selectedItem }) => void`
     //  * @param {{ selectedItem }}
      */
-    onChange: (data: {
-        selectedItem: any;
-    }) => void;
+    onChange: (data: OnChangeData<ItemType>) => void;
     /**
      * Callback function to notify consumer when the text input changes.
      * This provides support to change available items based on the text.
@@ -95,18 +96,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * @param {string} inputText
      */
     onInputChange?: (inputText: string) => void;
-    /**
-     * Helper function passed to Downshift that allows the user to observe internal
-     * state changes
-     * `(changes, stateAndHelpers) => void`
-     */
-    onStateChange?: (changes: object, stateAndHelpers: object) => void;
     /**
      * Callback function that fires when the combobox menu toggle is clicked
      * `(evt) => void`
      * @param {MouseEvent} event
      */
-    onToggleClick?: (evt: MouseEvent) => void;
+    onToggleClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Used to provide a placeholder text node before a user enters any input.
      * This is only present if the control has no items selected
@@ -119,13 +114,17 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * For full control of the selection
      */
-    selectedItem?: object | string | number;
+    selectedItem?: ItemType | null;
     /**
      * Specify your own filtering logic by passing in a `shouldFilterItem`
      * function that takes in the current input and an item and passes back
      * whether or not the item should be filtered.
      */
-    shouldFilterItem?: (input: any) => boolean;
+    shouldFilterItem?: (input: {
+        item: ItemType;
+        itemToString?: ItemToStringHandler<ItemType>;
+        inputValue: string | null;
+    }) => boolean;
     /**
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
@@ -134,12 +133,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.
      */
-    titleText?: ReactNodeLike;
+    titleText?: ReactNode;
     /**
      * Specify a custom translation function that takes in a message identifier
      * and returns the localized string for the message
      */
-    translateWithId?: (id: any) => string;
+    translateWithId?: (id: string) => string;
     /**
      * Currently supports either the default type, or an inline variant
      */
@@ -151,7 +150,11 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
+}
+type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+interface ComboBoxComponent {
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
-declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<unknown>>;
-export default ComboBox;
+declare const _default: ComboBoxComponent;
+export default _default;

package/lib/components/ComboBox/ComboBox.js

@@ -49,7 +49,13 @@ const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-  return item && item.label;
+  if (typeof item === 'number') {
+    return `${item}`;
+  }
+  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
+    return item['label'];
+  }
+  return '';
 };
 const defaultShouldFilterItem = () => true;
 const getInputValue = _ref => {
@@ -85,10 +91,10 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   return -1;
 };
 const getInstanceId = setupGetInstanceId["default"]();
-const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _Text;
   const {
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     direction,
@@ -101,7 +107,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     invalidText,
     items,
     itemToElement,
-    itemToString,
+    itemToString = defaultItemToString,
     light,
     onChange,
     onInputChange,
@@ -109,14 +115,13 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     placeholder,
     readOnly,
     selectedItem,
-    shouldFilterItem,
+    shouldFilterItem = defaultShouldFilterItem,
     size,
     titleText,
     translateWithId,
     type: _type,
     warn,
     warnText,
-    onStateChange: _onStateChange,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -179,7 +184,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       const {
         inputValue
       } = changes;
-      const filteredItems = filterItems(items, itemToString, inputValue);
+      const filteredItems = filterItems(items, itemToString, inputValue || null);
       const indexToHighlight = findHighlightedIndex({
         ...props,
         items: filteredItems
@@ -187,7 +192,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       setHighlightedIndex(indexToHighlight);
       return indexToHighlight;
     }
-    return highlightedIndex;
+    return highlightedIndex || 0;
   };
   const handleOnStateChange = (changes, _ref3) => {
     let {
@@ -362,7 +367,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       disabled: disabled,
       className: inputClasses,
       type: "text",
-      tabIndex: "0",
+      tabIndex: 0,
       "aria-autocomplete": "list",
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
@@ -389,24 +394,24 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+      const isObject = item !== null && typeof item === 'object';
+      const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
+      const disabled = isObject && 'disabled' in item ? !!item.disabled : undefined;
       const itemProps = getItemProps({
         item,
         index: index$1,
         ['aria-current']: selectedItem === item ? 'true' : 'false',
         ['aria-selected']: highlightedIndex === index$1 ? 'true' : 'false',
-        disabled: item.disabled
+        disabled
       });
       return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
         isHighlighted: highlightedIndex === index$1,
-        title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
-      }, itemProps), itemToElement ?
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+        title: title
+      }, itemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id
-      }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
+      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
         className: `${prefix}--list-box__menu-item__selected-icon`
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -450,7 +455,7 @@ ComboBox.propTypes = {
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText: PropTypes__default["default"].string,
+  helperText: PropTypes__default["default"].node,
   /**
    * Specify a custom `id` for the input
    */
@@ -502,12 +507,6 @@ ComboBox.propTypes = {
    * @param {string} inputText
    */
   onInputChange: PropTypes__default["default"].func,
-  /**
-   * Helper function passed to Downshift that allows the user to observe internal
-   * state changes
-   * `(changes, stateAndHelpers) => void`
-   */
-  onStateChange: PropTypes__default["default"].func,
   /**
    * Callback function that fires when the combobox menu toggle is clicked
    * `(evt) => void`

package/lib/components/Copy/Copy.js

@@ -27,6 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function Copy(_ref) {
   let {
+    align = 'bottom',
     children,
     className,
     feedback,
@@ -60,7 +61,7 @@ function Copy(_ref) {
   const initialLabel = other['aria-label'] ?? '';
   return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
     closeOnActivation: false,
-    align: "bottom",
+    align: align,
     className: classNames,
     label: animation ? feedback : initialLabel,
     onClick: events.composeEventHandlers([onClick, handleClick]),
@@ -70,6 +71,10 @@ function Copy(_ref) {
   }), children);
 }
 Copy.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

package/lib/components/CopyButton/CopyButton.js

@@ -26,6 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function CopyButton(_ref) {
   let {
+    align = 'bottom',
     iconDescription,
     className,
     ...other
@@ -37,6 +38,7 @@ function CopyButton(_ref) {
       max: 'lg'
     }
   }, /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({
+    align: align,
     className: cx__default["default"](className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Copy, {
@@ -44,6 +46,10 @@ function CopyButton(_ref) {
   })));
 }
 CopyButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/lib/components/DataTable/DataTable.js

@@ -271,7 +271,7 @@ class DataTable extends React__default["default"].Component {
           checked: row.isSelected,
           onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${row.id}`,
+          name: `select-row`,
           ariaLabel: t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio || null

package/lib/components/FileUploader/FileUploader.js

@@ -38,7 +38,7 @@ class FileUploader extends React__default["default"].Component {
       evt.stopPropagation();
       const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
       this.setState({
-        filenames: this.props.multiple ? this.state.filenames.concat(filenames) : filenames
+        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
       });
       if (this.props.onChange) {
         this.props.onChange(evt);

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

@@ -9,3 +9,4 @@ export { Grid } from './Grid';
 export { default as Row } from './Row';
 export { default as Column } from './Column';
 export { ColumnHang } from './ColumnHang';
+export { GridSettings } from './GridContext';

package/lib/components/Link/Link.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

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

@@ -4,6 +4,6 @@
  * 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 Link from './Link';
+import Link, { type LinkProps } from './Link';
 export default Link;
-export { Link };
+export { Link, type LinkProps };

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -24,10 +24,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 function useIsTruncated(ref) {
   const [isTruncated, setIsTruncated] = React.useState(false);
   React.useEffect(() => {
+    const element = ref.current;
     const {
       offsetWidth,
       scrollWidth
-    } = ref.current;
+    } = element.lastElementChild?.lastElementChild || element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/lib/components/Notification/Notification.js

@@ -520,6 +520,7 @@ function ActionableNotification(_ref6) {
   const [isOpen, setIsOpen] = React.useState(true);
   const prefix = usePrefix.usePrefix();
   const id = useId.useId('actionable-notification');
+  const subtitleId = useId.useId('actionable-notification-subtitle');
   const containerClassName = cx__default["default"](className, {
     [`${prefix}--actionable-notification`]: true,
     [`${prefix}--actionable-notification--toast`]: !inline,
@@ -550,7 +551,7 @@ function ActionableNotification(_ref6) {
     ref: ref,
     role: role,
     className: containerClassName,
-    "aria-labelledby": title ? id : undefined
+    "aria-labelledby": title ? id : subtitleId
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
   }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
@@ -565,7 +566,8 @@ function ActionableNotification(_ref6) {
     className: `${prefix}--actionable-notification__title`,
     id: id
   }, title), subtitle && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--actionable-notification__subtitle`
+    className: `${prefix}--actionable-notification__subtitle`,
+    id: subtitleId
   }, subtitle), children))), actionButtonLabel && /*#__PURE__*/React__default["default"].createElement(NotificationActionButton, {
     onClick: onActionButtonClick,
     inline: inline

package/lib/components/Popover/index.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 WeakValidationMap, type ElementType } from 'react';
+import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
 export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
 interface PopoverBaseProps {
@@ -52,10 +52,14 @@ interface PopoverBaseProps {
     open: boolean;
 }
 export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
-export declare const Popover: (<E extends React.ElementType<any> = "span">(props: PopoverProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: WeakValidationMap<PopoverProps<any>> | undefined;
-};
+export interface PopoverComponent {
+    <E extends ElementType = 'span'>(props: PopoverProps<E> & {
+        forwardRef?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<PopoverProps<any>>;
+}
+export declare const Popover: PopoverComponent;
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/lib/components/Popover/index.js

@@ -29,7 +29,7 @@ const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
     current: null
   }
 });
-function PopoverRenderFunction(_ref, forwardRef) {
+const Popover = /*#__PURE__*/React__default["default"].forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
     align = isTabTip ? 'bottom-left' : 'bottom',
@@ -189,8 +189,7 @@ function PopoverRenderFunction(_ref, forwardRef) {
     className: className,
     ref: ref
   }), isTabTip ? mappedChildren : children));
-}
-const Popover = /*#__PURE__*/React__default["default"].forwardRef(PopoverRenderFunction);
+});
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component

package/lib/components/UIShell/HeaderContainer.d.ts

@@ -10,7 +10,7 @@ interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     onClickSideNavExpand: () => void;
 }
-interface HeaderContainerProps {
+export interface HeaderContainerProps {
     isSideNavExpanded?: boolean;
     render: React.ComponentType<HeaderContainerRenderProps>;
 }

package/lib/components/UIShell/HeaderMenuButton.d.ts

@@ -7,7 +7,7 @@
 import { type ComponentProps } from 'react';
 import PropTypes from 'prop-types';
 type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
-interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
+export interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     className?: string;
@@ -74,7 +74,9 @@ declare namespace HeaderMenuButton {
         fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
         copyWithin(target: number, start: number, end?: number | undefined): [key: string];
         entries(): IterableIterator<[number, string]>;
-        keys(): IterableIterator<number>;
+        keys(): IterableIterator<number>; /**
+         * Specify whether the menu button is collapsible.
+         */
         values(): IterableIterator<string>;
         includes(searchElement: string, fromIndex?: number | undefined): boolean;
         flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];

package/lib/components/UIShell/HeaderMenuItem.d.ts

@@ -4,9 +4,9 @@
  * 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 ComponentProps, type ReactNode, ElementType } from 'react';
+import { type ComponentProps, type ForwardedRef, type ReactNode, ElementType, WeakValidationMap } from 'react';
 import { LinkProps } from './Link';
-type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
+export type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
     className?: string | undefined;
     isActive?: boolean | undefined;
     isCurrentPage?: boolean | undefined;
@@ -15,8 +15,12 @@ type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
     role?: ComponentProps<'li'>['role'];
     tabIndex?: number | undefined;
 };
-declare const HeaderMenuItem: (<E extends React.ElementType<any> = "a">(props: HeaderMenuItemProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: React.WeakValidationMap<HeaderMenuItemProps<any>> | undefined;
-};
+export interface HeaderMenuItemComponent {
+    <E extends ElementType = 'a'>(props: HeaderMenuItemProps<E> & {
+        ref?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<HeaderMenuItemProps<any>>;
+}
+declare const HeaderMenuItem: HeaderMenuItemComponent;
 export default HeaderMenuItem;

package/lib/components/UIShell/HeaderMenuItem.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function HeaderMenuItemRenderFunction(_ref, ref) {
+const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItemRenderFunction(_ref, ref) {
   let {
     className,
     isActive,
@@ -55,8 +55,7 @@ function HeaderMenuItemRenderFunction(_ref, ref) {
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-truncate--end`
   }, children)));
-}
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(HeaderMenuItemRenderFunction);
+});
 HeaderMenuItem.displayName = 'HeaderMenuItem';
 HeaderMenuItem.propTypes = {
   /**

package/lib/components/UIShell/HeaderName.d.ts

@@ -7,7 +7,7 @@
 import { type ElementType } from 'react';
 import PropTypes from 'prop-types';
 import { type LinkProps } from './Link';
-type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
+export type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
     prefix?: string | undefined;
 };
 declare function HeaderName<E extends ElementType = 'a'>({ children, className: customClassName, prefix, ...rest }: HeaderNameProps<E>): JSX.Element;