@carbon/react 1.34.0 → 1.35.0-rc.0

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -1,4 +1,4 @@
-import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode } from 'react';
+import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
@@ -43,6 +43,10 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Modal content should have any inner padding.
      */
     isFullWidth?: boolean;
+    /**
+     * Provide a ref to return focus to once the modal is closed.
+     */
+    launcherButtonRef?: RefObject<HTMLButtonElement>;
     /**
      * Specify an optional handler for closing modal.
      * Returning `false` here prevents closing modal.

package/es/components/ComposedModal/ComposedModal.js

@@ -81,6 +81,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     selectorPrimaryFocus,
     selectorsFloatingMenus,
     size,
+    launcherButtonRef,
     ...rest
   } = _ref2;
   const prefix = usePrefix();
@@ -176,6 +177,13 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
         return child;
     }
   });
+  useEffect(() => {
+    if (!open && launcherButtonRef) {
+      setTimeout(() => {
+        launcherButtonRef?.current?.focus();
+      });
+    }
+  }, [open, launcherButtonRef]);
   useEffect(() => {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
@@ -252,6 +260,13 @@ ComposedModal.propTypes = {
    * Specify whether the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes.bool,
+  /**
+   * Provide a ref to return focus to once the modal is closed.
+   */
+  // @ts-expect-error: Invalid derived type
+  launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   /**
    * Specify an optional handler for closing modal.
    * Returning `false` here prevents closing modal.

package/es/components/DataTable/DataTable.d.ts

@@ -46,9 +46,9 @@ declare const dataTableDefaultProps: {
     translateWithId: (id: any) => string;
 };
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface DataTableCell {
+export interface DataTableCell<T> {
     id: string;
-    value: unknown;
+    value: T;
     isEditable: boolean;
     isEditing: boolean;
     isValid: boolean;
@@ -57,9 +57,12 @@ export interface DataTableCell {
         header: string;
     };
 }
-export interface DataTableRow {
+type DataTableCells<T extends any[]> = {
+    [K in keyof T]: DataTableCell<T[K]>;
+};
+export interface DataTableRow<ColTypes extends any[]> {
     id: string;
-    cells: Array<DataTableCell>;
+    cells: DataTableCells<ColTypes>;
     disabled?: boolean;
     isExpanded?: boolean;
     isSelected?: boolean;
@@ -68,14 +71,14 @@ export interface DataTableHeader {
     key: string;
     header: React.ReactNode;
 }
-export interface DataTableRenderProps {
+export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     headers: Array<DataTableHeader>;
-    rows: Array<DataTableRow>;
-    selectedRows: Array<DataTableRow>;
+    rows: Array<DataTableRow<ColTypes> & RowType>;
+    selectedRows: Array<DataTableRow<ColTypes> & RowType>;
     getHeaderProps: (getHeaderPropsArgs: {
         header: DataTableHeader;
         isSortable?: boolean;
-        onClick?: (e: MouseEvent, sortState: {
+        onClick?: (e: React.MouseEvent, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void;
@@ -102,7 +105,7 @@ export interface DataTableRenderProps {
     };
     getRowProps: (getRowPropsArgs: {
         onClick?: (e: MouseEvent) => void;
-        row: DataTableRow;
+        row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
@@ -115,7 +118,7 @@ export interface DataTableRenderProps {
     };
     getSelectionProps: (getSelectionPropsArgs: {
         onClick?: (e: MouseEvent) => void;
-        row: DataTableRow;
+        row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
@@ -155,7 +158,7 @@ export interface DataTableRenderProps {
         stickyHeader?: boolean;
         useStaticWidth?: boolean;
     };
-    onInputChange: (e: Event, defaultValue?: string) => void;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
     sortBy: (headerKey: string) => void;
     selectAll: () => void;
     selectRow: (rowId: string) => void;
@@ -163,11 +166,11 @@ export interface DataTableRenderProps {
     expandAll: () => void;
     radio: boolean | undefined;
 }
-export interface DataTableProps {
-    children?: (renderProps: DataTableRenderProps) => React.ReactElement;
+export interface DataTableProps<RowType, ColTypes extends any[]> {
+    children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
-        cellsById: Record<string, DataTableCell>;
+        cellsById: Record<string, DataTableCell<RowType>>;
         getCellId: (rowId: string, header: string) => string;
         headers: Array<DataTableHeader>;
         inputValue: string;
@@ -178,10 +181,10 @@ export interface DataTableProps {
     locale?: string;
     overflowMenuOnHover?: boolean;
     radio?: boolean;
-    render?: (renderProps: DataTableRenderProps) => React.ReactElement;
-    rows: Array<Omit<DataTableRow, 'cells'>>;
+    render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
+    rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
     size?: DataTableSize;
-    sortRow?: (cellA: DataTableCell, cellB: DataTableCell, sortRowOptions: {
+    sortRow?: (cellA: DataTableCell<any>, cellB: DataTableCell<any>, sortRowOptions: {
         sortDirection: DataTableSortState;
         sortStates: Record<DataTableSortState, DataTableSortState>;
         locale: string;
@@ -191,13 +194,13 @@ export interface DataTableProps {
     useStaticWidth?: boolean;
     useZebraStyles?: boolean;
 }
-interface DataTableState {
-    cellsById: Record<string, DataTableCell>;
+interface DataTableState<ColTypes extends any[]> {
+    cellsById: Record<string, DataTableCell<ColTypes>>;
     filterInputValue: string | null;
     initialRowOrder: Array<string>;
     isExpandedAll: boolean;
     rowIds: Array<string>;
-    rowsById: Record<string, DataTableRow>;
+    rowsById: Record<string, DataTableRow<ColTypes>>;
     shouldShowBatchActions: boolean;
     sortDirection: DataTableSortState;
     sortHeaderKey: string | null;
@@ -212,7 +215,7 @@ interface DataTableState {
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-declare class DataTable extends React.Component<DataTableProps & typeof dataTableDefaultProps, DataTableState> {
+declare class DataTable<RowType, ColTypes extends any[]> extends React.Component<DataTableProps<RowType, ColTypes> & typeof dataTableDefaultProps, DataTableState<ColTypes>> {
     instanceId: number;
     static defaultProps: {
         filterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
@@ -344,7 +347,7 @@ declare class DataTable extends React.Component<DataTableProps & typeof dataTabl
     getHeaderProps: ({ header, onClick, isSortable, ...rest }: {
         [key: string]: unknown;
         header: DataTableHeader;
-        onClick?: ((e: MouseEvent, sortState: {
+        onClick?: ((e: React.MouseEvent, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void) | undefined;
@@ -402,7 +405,7 @@ declare class DataTable extends React.Component<DataTableProps & typeof dataTabl
     getRowProps: ({ row, onClick, ...rest }: {
         [key: string]: unknown;
         onClick?: ((e: MouseEvent) => void) | undefined;
-        row: DataTableRow;
+        row: DataTableRow<ColTypes>;
     }) => {
         key: string;
         onExpand: any;
@@ -424,7 +427,7 @@ declare class DataTable extends React.Component<DataTableProps & typeof dataTabl
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
         onClick?: ((e: MouseEvent) => void) | undefined;
-        row: DataTableRow;
+        row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
         onSelect: any;

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -4,13 +4,12 @@
  * 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 PropTypes from 'prop-types';
-import { TableHTMLAttributes } from 'react';
+import React, { type FunctionComponent, TableHTMLAttributes } from 'react';
 export interface DataTableSkeletonHeader {
     /**
-     * Optionally specify header label
+     * Specify header label
      */
-    header?: string;
+    header: React.ReactNode;
     /**
      * Optionally specify header key
      */
@@ -47,62 +46,5 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
      */
     zebra?: boolean;
 }
-declare const DataTableSkeleton: {
-    ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, ...rest }: {
-        [x: string]: any;
-        headers: any;
-        rowCount: any;
-        columnCount: any;
-        zebra: any;
-        compact: any;
-        className: any;
-        showHeader: any;
-        showToolbar: any;
-    }): JSX.Element;
-    propTypes: {
-        /**
-         * Specify an optional className to add.
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify the number of columns that you want to render in the skeleton state
-         */
-        columnCount: PropTypes.Requireable<number>;
-        /**
-         * Optionally specify whether you want the Skeleton to be rendered as a
-         * compact DataTable
-         */
-        compact: PropTypes.Requireable<boolean>;
-        /**
-         * Optionally specify the displayed headers
-         */
-        headers: PropTypes.Requireable<NonNullable<any[] | PropTypes.InferProps<{
-            key: PropTypes.Requireable<string>;
-        }> | null | undefined>>;
-        /**
-         * Specify the number of rows that you want to render in the skeleton state
-         */
-        rowCount: PropTypes.Requireable<number>;
-        /**
-         * Specify if the table header should be rendered as part of the skeleton.
-         */
-        showHeader: PropTypes.Requireable<boolean>;
-        /**
-         * Specify if the table toolbar should be rendered as part of the skeleton.
-         */
-        showToolbar: PropTypes.Requireable<boolean>;
-        /**
-         * Optionally specify whether you want the DataTable to be zebra striped
-         */
-        zebra: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        rowCount: number;
-        columnCount: number;
-        zebra: boolean;
-        compact: boolean;
-        showHeader: boolean;
-        showToolbar: boolean;
-    };
-};
+declare const DataTableSkeleton: FunctionComponent<DataTableSkeletonProps>;
 export default DataTableSkeleton;

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -15,13 +15,13 @@ var _span, _span2;
 const DataTableSkeleton = _ref => {
   let {
     headers,
-    rowCount,
-    columnCount,
-    zebra,
-    compact,
+    rowCount = 5,
+    columnCount = 5,
+    zebra = false,
+    compact = false,
     className,
-    showHeader,
-    showToolbar,
+    showHeader = true,
+    showToolbar = true,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -83,9 +83,9 @@ DataTableSkeleton.propTypes = {
   /**
    * Optionally specify the displayed headers
    */
-  headers: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
-    key: PropTypes.string
-  })]),
+  headers: PropTypes.arrayOf(PropTypes.shape({
+    header: PropTypes.node.isRequired
+  }).isRequired),
   /**
    * Specify the number of rows that you want to render in the skeleton state
    */
@@ -103,13 +103,5 @@ DataTableSkeleton.propTypes = {
    */
   zebra: PropTypes.bool
 };
-DataTableSkeleton.defaultProps = {
-  rowCount: 5,
-  columnCount: 5,
-  zebra: false,
-  compact: false,
-  showHeader: true,
-  showToolbar: true
-};
 
 export { DataTableSkeleton as default };

package/es/components/Modal/Modal.js

@@ -53,6 +53,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     preventCloseOnClickOutside,
     // eslint-disable-line
     isFullWidth,
+    launcherButtonRef,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -150,6 +151,13 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   useEffect(() => {
     toggleClass(document.body, `${prefix}--body--with-modal-open`, open);
   }, [open, prefix]);
+  useEffect(() => {
+    if (!open && launcherButtonRef) {
+      setTimeout(() => {
+        launcherButtonRef?.current?.focus();
+      });
+    }
+  }, [open, launcherButtonRef]);
   useEffect(() => {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
@@ -282,6 +290,12 @@ Modal.propTypes = {
    * Specify whether or not the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes.bool,
+  /**
+   * Provide a ref to return focus to once the modal is closed.
+   */
+  launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   /**
    * Specify a label to be read by screen readers on the modal root node
    */

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -32,8 +32,6 @@ import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/key
 
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     compareItems,
     direction,
@@ -312,9 +310,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             setInputValue('');
           }
         });
-        const menuProps = getMenuProps({
-          'aria-label': ariaLabel
-        }, {
+        const menuProps = getMenuProps({}, {
           suppressRefError: true
         });
         const handleFocus = evt => {
@@ -329,7 +325,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
-          "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -419,14 +414,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 });
 FilterableMultiSelect.propTypes = {
   /**
+   * Deprecated, aria-label is no longer needed
    * Specify a label to be read by screen readers on the container node
    */
-  ['aria-label']: PropTypes.string,
+  ['aria-label']: deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
-  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  ariaLabel: deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -539,7 +535,6 @@ FilterableMultiSelect.propTypes = {
   warnText: PropTypes.node
 };
 FilterableMultiSelect.defaultProps = {
-  ['aria-label']: 'Choose an item',
   compareItems: defaultCompareItems,
   direction: 'bottom',
   disabled: false,

package/es/components/Tabs/Tabs.d.ts

@@ -115,7 +115,7 @@ export interface TabListProps extends DivAttributes {
     /**
      * Provide the props that describe the left overflow button
      */
-    leftOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    leftOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
     /**
      * Specify whether to use the light component variant
      */
@@ -123,7 +123,7 @@ export interface TabListProps extends DivAttributes {
     /**
      * Provide the props that describe the right overflow button
      */
-    rightOverflowButtonProps: HTMLAttributes<HTMLButtonElement>;
+    rightOverflowButtonProps?: HTMLAttributes<HTMLButtonElement>;
     /**
      * Optionally provide a delay (in milliseconds) passed to the lodash
      * debounce of the onScroll handler. This will impact the responsiveness
@@ -299,7 +299,7 @@ export interface TabPanelsProps {
      */
     children?: ReactNode;
 }
-declare function TabPanels({ children }: TabPanelsProps): JSX.Element[] | null | undefined;
+declare function TabPanels({ children }: TabPanelsProps): JSX.Element;
 declare namespace TabPanels {
     var propTypes: {
         /**

package/es/components/Tabs/Tabs.js

@@ -791,11 +791,11 @@ function TabPanels(_ref8) {
   let {
     children
   } = _ref8;
-  return React__default.Children.map(children, (child, index) => {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, React__default.Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default.createElement(TabPanelContext.Provider, {
       value: index
     }, child);
-  });
+  }));
 }
 TabPanels.propTypes = {
   /**

package/es/components/Tile/Tile.js

@@ -15,9 +15,10 @@ import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
-import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
+import { getInteractiveContent, getRoleContent } from '../../internal/useNoInteractiveChildren.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { useId } from '../../internal/useId.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -375,10 +376,10 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     if (!aboveTheFold.current || !belowTheFold.current) {
       return;
     }
-    if (!getInteractiveContent(belowTheFold.current)) {
-      setInteractive(false);
-      return;
-    } else if (!getInteractiveContent(aboveTheFold.current)) {
+
+    // Interactive elements or elements that are given a role should be treated
+    // the same because elements with a role can not be rendered inside a `button`
+    if (!getInteractiveContent(belowTheFold.current) && !getRoleContent(belowTheFold.current) && !getInteractiveContent(aboveTheFold.current) && !getRoleContent(aboveTheFold.current)) {
       setInteractive(false);
     }
   }, []);
@@ -403,11 +404,11 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
   }, []);
+  const belowTheFoldId = useId('expandable-tile-interactive');
   return interactive ? /*#__PURE__*/React__default.createElement("div", _extends({
     // @ts-expect-error: Needlesly strict & deep typing for the element type
     ref: ref,
-    className: interactiveClassNames,
-    "aria-expanded": isExpanded
+    className: interactiveClassNames
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     ref: tileContent
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -416,13 +417,15 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
   }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     "aria-expanded": isExpanded,
+    "aria-controls": belowTheFoldId,
     onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
     onClick: composeEventHandlers([onClick, handleClick]),
     "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
     className: chevronInteractiveClassNames
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement("div", {
     ref: belowTheFold,
-    className: `${prefix}--tile-content`
+    className: `${prefix}--tile-content`,
+    id: belowTheFoldId
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button"
     // @ts-expect-error: Needlesly strict & deep typing for the element type

package/es/components/Tooltip/Tooltip.js

@@ -100,7 +100,7 @@ function Tooltip(_ref) {
     ...triggerProps,
     ...getChildEventHandlers(child.props)
   }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    "aria-hidden": "true",
+    "aria-hidden": open ? 'false' : 'true',
     className: `${prefix}--tooltip-content`,
     id: id,
     ref: tooltipRef,

package/es/components/UIShell/HeaderMenu.js

@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { composeEventHandlers } from '../../tools/events.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 
@@ -142,6 +143,9 @@ class HeaderMenu extends React__default.Component {
       menuLinkName,
       focusRef,
       // eslint-disable-line no-unused-vars
+      onBlur,
+      onClick,
+      onKeyDown,
       ...rest
     } = this.props;
     const hasActiveChildren = React__default.Children.toArray(children).some(child => child.props.isActive || child.props.isCurrentPage);
@@ -171,9 +175,9 @@ class HeaderMenu extends React__default.Component {
     // - href can be set to javascript:void(0), ideally this will be a button
     return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
       className: itemClassName,
-      onKeyDown: this.handleMenuClose,
-      onClick: this.handleOnClick,
-      onBlur: this.handleOnBlur
+      onKeyDown: composeEventHandlers([onKeyDown, this.handleMenuClose]),
+      onClick: composeEventHandlers([onClick, this.handleOnClick]),
+      onBlur: composeEventHandlers([onBlur, this.handleOnBlur])
     }), /*#__PURE__*/React__default.createElement("a", _extends({
       // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
       "aria-haspopup": "menu" // eslint-disable-line jsx-a11y/aria-proptypes
@@ -218,6 +222,21 @@ _defineProperty(HeaderMenu, "propTypes", {
    * Provide a label for the link text
    */
   menuLinkName: PropTypes.string.isRequired,
+  /**
+   * Optionally provide an onBlur handler that is called when the underlying
+   * button fires it's onblur event
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Optionally provide an onClick handler that is called when the underlying
+   * button fires it's onclick event
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optionally provide an onKeyDown handler that is called when the underlying
+   * button fires it's onkeydown event
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Optional component to render instead of string
    */

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

@@ -19,6 +19,11 @@ interface SideNavProps extends ComponentProps<'nav'> {
     onOverlayClick?: MouseEventHandler<HTMLDivElement> | undefined;
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
+    inert?: boolean;
 }
-declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur"> & React.RefAttributes<HTMLElement>>;
+interface SideNavContextData {
+    isRail?: boolean | undefined;
+}
+export declare const SideNavContext: React.Context<SideNavContextData>;
+declare const SideNav: React.ForwardRefExoticComponent<Pick<SideNavProps, "children" | "slot" | "style" | "title" | "className" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "onToggle" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | "expanded" | "enterDelayMs" | "defaultExpanded" | "addFocusListeners" | "isChildOfHeader" | "isFixedNav" | "isRail" | "isPersistent" | "addMouseListeners" | "onOverlayClick" | "onSideNavBlur" | "inert"> & React.RefAttributes<HTMLElement>>;
 export default SideNav;