@carbon/react 1.60.2 → 1.61.0-rc.0

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -6,8 +6,8 @@
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import { ReactNode, FunctionComponent, ReactElement } from 'react';
-import { type ItemBase, type SortingPropTypes } from './MultiSelectPropTypes';
-export interface FilterableMultiSelectProps<Item extends ItemBase> extends SortingPropTypes<Item> {
+import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated
@@ -15,6 +15,12 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     'aria-label'?: string;
     /** @deprecated */
     ariaLabel?: string;
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     className?: string;
     /**
      * Specify the text that should be read for screen readers that describes total items selected
@@ -35,14 +41,14 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: UseMultipleSelectionProps<Item>;
+    downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**
      * Default sorter is assigned if not provided.
      */
-    filterItems(items: readonly Item[], extra: {
+    filterItems(items: readonly ItemType[], extra: {
         inputValue: string | null;
-        itemToString: NonNullable<UseMultipleSelectionProps<Item>['itemToString']>;
-    }): Item[];
+        itemToString: NonNullable<UseMultipleSelectionProps<ItemType>['itemToString']>;
+    }): ItemType[];
     /**
      * Specify whether the title text should be hidden or not
      */
@@ -60,7 +66,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * Allow users to pass in arbitrary items from their collection that are
      * pre-selected
      */
-    initialSelectedItems?: Item[];
+    initialSelectedItems?: ItemType[];
     /**
      * Is the current selection invalid?
      */
@@ -73,7 +79,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: FunctionComponent<Item>;
+    itemToElement?: FunctionComponent<ItemType>;
     /**
      * Helper function passed to downshift that allows the library to render
      * a given item to a string label.
@@ -81,12 +87,12 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * By default, it extracts the `label` field from a given item
      * to serve as the item label in the list.
      */
-    itemToString?(item: Item | null): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * 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: Item[];
+    items: ItemType[];
     /**
      * @deprecated `true` to use the light version.
      */
@@ -102,13 +108,13 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * consuming component what kind of internal state changes are occurring.
      */
     onChange?(changes: {
-        selectedItems: Item[];
+        selectedItems: ItemType[];
     }): void;
     /**
      * A utility for this controlled component
      * to communicate to the currently typed input.
      */
-    onInputValueChange?: UseComboboxProps<Item>['onInputValueChange'];
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
      * consuming component that the menu was opened(`true`)/closed(`false`).
@@ -133,7 +139,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     /**
      * For full control of the selected items
      */
-    selectedItems?: Item[];
+    selectedItems?: ItemType[];
     /**
      * Specify the size of the ListBox.
      * Currently, supports either `sm`, `md` or `lg` as an option.
@@ -167,7 +173,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     warnText?: ReactNode;
 }
 declare const FilterableMultiSelect: {
-    <Item extends ItemBase>(props: FilterableMultiSelectProps<Item>): ReactElement;
+    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement;
     propTypes?: any;
     contextTypes?: any;
     defaultProps?: any;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -28,6 +28,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
+var react = require('@floating-ui/react');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -65,6 +66,7 @@ const {
 } = Downshift.useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
+    autoAlign = false,
     className: containerClassName,
     clearSelectionDescription = 'Total items selected: ',
     clearSelectionText = 'To clear selection, press Delete or Backspace',
@@ -121,6 +123,42 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      crossAxis: false
+    }), react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {});
+  React.useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
   const textInput = React.useRef(null);
   const filterableMultiSelectInstanceId = useId.useId();
   const prefix = usePrefix.usePrefix();
@@ -128,6 +166,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     setIsOpen(open);
     setPrevOpen(open);
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const sortedItems = sortItems(filterItems(items, {
     itemToString: itemToString$1,
     inputValue
@@ -243,8 +283,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -428,7 +466,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         $input.setSelectionRange($value.length, $value.length);
       }
     },
-    onFocus: () => setInputFocused(true)
+    onFocus: () => setInputFocused(true),
+    onBlur: () => {
+      !isOpen && setInputFocused(false);
+      setInputValue('');
+    }
   }));
   const menuProps = getMenuProps({}, {
     suppressRefError: true
@@ -465,7 +507,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     isOpen: isOpen,
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__field`
+    className: `${prefix}--list-box__field`,
+    ref: refs.setReference
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -506,7 +549,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
+    ref: refs.setFloating
+  }), isOpen ? sortedItems.map((item, index$1) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -554,6 +599,12 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -7,50 +7,19 @@
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
+import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { InternationalProps } from '../../types/common';
-interface SharedOptions {
-    locale: string;
-}
-interface DownshiftTypedProps<ItemType> {
-    itemToString?(item: ItemType): string;
-}
-interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
-    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    selectedItems: ItemType[];
-}
-interface MultiSelectSortingProps<ItemType> {
-    /**
-     * Provide a compare function that is used to determine the ordering of
-     * options. See 'sortItems' for more control.
-     */
-    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    /**
-     * Provide a method that sorts all options in the control. Overriding this
-     * prop means that you also have to handle the sort logic for selected versus
-     * un-selected items. If you just want to control ordering, consider the
-     * `compareItems` prop instead.
-     *
-     * The return value should be a number whose sign indicates the relative order
-     * of the two elements: negative if a is less than b, positive if a is greater
-     * than b, and zero if they are equal.
-     *
-     * sortItems :
-     *   (items: Array<Item>, {
-     *     selectedItems: Array<Item>,
-     *     itemToString: Item => string,
-     *     compareItems: (itemA: string, itemB: string, {
-     *       locale: string
-     *     }) => number,
-     *     locale: string,
-     *   }) => Array<Item>
-     */
-    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
-}
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     className?: string;
     /**
      * Specify the text that should be read for screen readers that describes that all items are deleted

package/lib/components/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
+var react = require('@floating-ui/react');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -68,6 +69,7 @@ const defaultItemToString = item => {
 };
 const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
+    autoAlign = false,
     className: containerClassName,
     id,
     items,
@@ -127,6 +129,42 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      crossAxis: false
+    }), react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {});
+  React.useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
 
   // Filter out items with an object having undefined values
   const filteredItems = React.useMemo(() => {
@@ -393,7 +431,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: multiSelectFieldWrapperClasses
+    className: multiSelectFieldWrapperClasses,
+    ref: refs.setReference
   }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
@@ -416,7 +455,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
+    ref: refs.setFloating
+  }), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
@@ -455,6 +496,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...MultiSelectPropTypes.sortingPropTypes,
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts

@@ -34,29 +34,32 @@ export declare const sortingPropTypes: {
      */
     sortItems: PropTypes.Requireable<(...args: any[]) => any>;
 };
-export interface ItemBase {
-    disabled?: boolean;
+interface DownshiftTypedProps<ItemType> {
+    itemToString?(item: ItemType): string;
 }
-export interface SortingPropTypes<Item extends ItemBase> {
+interface SharedOptions {
+    locale: string;
+}
+export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    selectedItems: ItemType[];
+}
+export interface MultiSelectSortingProps<ItemType> {
     /**
-     * Provide a compare function that is used
-     * to determine the ordering of options.
+     * Provide a compare function that is used to determine the ordering of
+     * options. See 'sortItems' for more control.
      */
-    compareItems(itemA: string, itemB: string, ctx: {
-        locale: string;
-    }): number;
+    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
     /**
      * Provide a method that sorts all options in the control. Overriding this
      * prop means that you also have to handle the sort logic for selected versus
      * un-selected items. If you just want to control ordering, consider the
      * `compareItems` prop instead.
+     *
+     * The return value should be a number whose sign indicates the relative order
+     * of the two elements: negative if a is less than b, positive if a is greater
+     * than b, and zero if they are equal.
      */
-    sortItems(items: Item[], state: {
-        selectedItems: Item[];
-        itemToString(item: Item): string;
-        compareItems(itemA: string, itemB: string, ctx: {
-            locale: string;
-        }): number;
-        locale: string;
-    }): Item[];
+    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
 }
+export {};

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -138,7 +138,6 @@ class OverflowMenu extends React__default["default"].Component {
       this.setState({
         click: true
       });
-      evt.stopPropagation();
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open

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

@@ -6,6 +6,10 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 interface OverflowMenuProps {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     */
+    autoAlign?: boolean;
     /**
      * A collection of MenuItems to be rendered within this OverflowMenu.
      */

package/lib/components/OverflowMenu/next/index.js

@@ -14,9 +14,11 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
+var react = require('@floating-ui/react');
 var index = require('../../IconButton/index.js');
 var Menu = require('../../Menu/Menu.js');
 require('../../Menu/MenuItem.js');
+var mergeRefs = require('../../../tools/mergeRefs.js');
 var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
@@ -30,6 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const defaultSize = 'md';
 const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
+    autoAlign = false,
     children,
     className,
     label = 'Options',
@@ -39,6 +42,26 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     tooltipAlignment,
     ...rest
   } = _ref;
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      fallbackAxisSideDirection: 'start',
+      fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
   const id = useId.useId('overflowmenu');
   const prefix = usePrefix.usePrefix();
   const triggerRef = React.useRef(null);
@@ -50,6 +73,15 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     handleMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
+  React.useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
@@ -60,6 +92,7 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  const floatingRef = mergeRefs["default"](triggerRef, refs.setReference);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
     "aria-owns": open ? id : undefined,
@@ -71,17 +104,19 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     className: triggerClasses,
     onClick: handleTriggerClick,
     onMouseDown: handleMousedown,
-    ref: triggerRef,
+    ref: floatingRef,
     label: label,
     align: tooltipAlignment
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     containerRef: triggerRef,
+    ref: refs.setFloating,
     menuAlignment: menuAlignment,
     className: menuClasses,
     id: id,
     size: size,
+    legacyAutoalign: !autoAlign,
     open: open,
     onClose: handleClose,
     x: x,
@@ -90,6 +125,10 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   }, children));
 });
 OverflowMenu.propTypes = {
+  /**
+   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * A collection of MenuItems to be rendered within this OverflowMenu.
    */

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

@@ -6,15 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface HeaderContainerRenderProps {
+export interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     onClickSideNavExpand: () => void;
 }
-export interface HeaderContainerProps {
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
     isSideNavExpanded?: boolean;
-    render: React.ComponentType<HeaderContainerRenderProps>;
-}
-declare function HeaderContainer({ render: Children, isSideNavExpanded, }: HeaderContainerProps): import("react/jsx-runtime").JSX.Element;
+    render: React.ComponentType<P>;
+} & {
+    [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
+};
+declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
 declare namespace HeaderContainer {
     var propTypes: {
         /**
@@ -22,10 +24,10 @@ declare namespace HeaderContainer {
          */
         isSideNavExpanded: PropTypes.Requireable<boolean>;
         /**
-         * A function or component that is passed an object parameter with two
-         * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-         * component can then use those properties to within the components it
-         * returns, such as with the HeaderMenuButton and SideNav components.
+         * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+         * The function or component can then use those properties to within the components it
+         * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+         * into this component for convenience.
          */
         render: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
     };

package/lib/components/UIShell/HeaderContainer.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var useEvent = require('../../internal/useEvent.js');
@@ -23,7 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function HeaderContainer(_ref) {
   let {
     render: Children,
-    isSideNavExpanded = false
+    isSideNavExpanded = false,
+    ...rest
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
@@ -35,10 +37,10 @@ function HeaderContainer(_ref) {
   const handleHeaderMenuButtonClick = React.useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React__default["default"].createElement(Children, {
+  return /*#__PURE__*/React__default["default"].createElement(Children, _rollupPluginBabelHelpers["extends"]({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
-  });
+  }));
 }
 HeaderContainer.propTypes = {
   /**
@@ -46,10 +48,10 @@ HeaderContainer.propTypes = {
    */
   isSideNavExpanded: PropTypes__default["default"].bool,
   /**
-   * A function or component that is passed an object parameter with two
-   * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-   * component can then use those properties to within the components it
-   * returns, such as with the HeaderMenuButton and SideNav components.
+   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+   * The function or component can then use those properties to within the components it
+   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+   * into this component for convenience.
    */
   render: PropTypes__default["default"].elementType.isRequired
 };