@carbon/react 1.34.1 → 1.35.0-rc.0

package/es/components/UIShell/SideNav.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, isValidElement } from 'react';
+import React__default, { createContext, useRef, isValidElement } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
@@ -20,6 +20,7 @@ import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
+const SideNavContext = /*#__PURE__*/createContext({});
 function SideNavRenderFunction(_ref, ref) {
   let {
     expanded: expandedProp,
@@ -88,27 +89,25 @@ function SideNavRenderFunction(_ref, ref) {
   });
   let childrenToRender = children;
 
-  // if a rail, pass the expansion state as a prop, so children can update themselves to match
-  if (isRail) {
-    childrenToRender = React__default.Children.map(children, child => {
-      // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
-      const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
-      if ( /*#__PURE__*/isValidElement(child)) {
-        const childJsxElement = child;
-        // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-        return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
-          ...(CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
-            isSideNavExpanded: currentExpansionState
-          } : {})
-        });
-      }
-      return child;
-    });
-  }
+  // Pass the expansion state as a prop, so children can update themselves to match
+  childrenToRender = React__default.Children.map(children, child => {
+    // if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
+    const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
+    if ( /*#__PURE__*/isValidElement(child)) {
+      const childJsxElement = child;
+      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+      return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
+        ...(CARBON_SIDENAV_ITEMS.includes(childJsxElement.type?.displayName ?? childJsxElement.type?.name) ? {
+          isSideNavExpanded: currentExpansionState
+        } : {})
+      });
+    }
+    return child;
+  });
   const eventHandlers = {};
   if (addFocusListeners) {
     eventHandlers.onFocus = event => {
-      if (!event.currentTarget.contains(event.relatedTarget)) {
+      if (!event.currentTarget.contains(event.relatedTarget) && isRail) {
         handleToggle(event, true);
       }
     };
@@ -116,7 +115,7 @@ function SideNavRenderFunction(_ref, ref) {
       if (!event.currentTarget.contains(event.relatedTarget)) {
         handleToggle(event, false);
       }
-      if (!event.currentTarget.contains(event.relatedTarget) && expanded) {
+      if (!event.currentTarget.contains(event.relatedTarget) && expanded && !isFixedNav) {
         if (onSideNavBlur) {
           onSideNavBlur();
         }
@@ -153,7 +152,11 @@ function SideNavRenderFunction(_ref, ref) {
       sideNavRef.current.focus();
     }
   });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFixedNav ? null :
+  return /*#__PURE__*/React__default.createElement(SideNavContext.Provider, {
+    value: {
+      isRail
+    }
+  }, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React__default.createElement("div", {
@@ -162,7 +165,8 @@ function SideNavRenderFunction(_ref, ref) {
   }), /*#__PURE__*/React__default.createElement("nav", _extends({
     tabIndex: -1,
     ref: navRef,
-    className: `${prefix}--side-nav__navigation ${className}`
+    className: `${prefix}--side-nav__navigation ${className}`,
+    inert: !isRail && (expanded ? undefined : -1)
   }, accessibilityLabel, eventHandlers, other), childrenToRender));
 }
 const SideNav = /*#__PURE__*/React__default.forwardRef(SideNavRenderFunction);
@@ -249,4 +253,4 @@ SideNav.propTypes = {
 
 var SideNav$1 = SideNav;
 
-export { SideNav$1 as default };
+export { SideNavContext, SideNav$1 as default };

package/es/components/UIShell/SideNavLink.js

@@ -8,12 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import Link, { LinkPropTypes } from './Link.js';
 import SideNavIcon from './SideNavIcon.js';
 import SideNavItem from './SideNavItem.js';
 import SideNavLinkText from './SideNavLinkText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { SideNavContext } from './SideNav.js';
 
 const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink(_ref, ref) {
   let {
@@ -21,9 +22,12 @@ const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink(
     className: customClassName,
     renderIcon: IconElement,
     isActive,
+    isSideNavExpanded,
     large = false,
+    tabIndex,
     ...rest
   } = _ref;
+  const isRail = useContext(SideNavContext);
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__link`]: true,
@@ -34,7 +38,8 @@ const SideNavLink = /*#__PURE__*/React__default.forwardRef(function SideNavLink(
     large: large
   }, /*#__PURE__*/React__default.createElement(Link, _extends({}, rest, {
     className: className,
-    ref: ref
+    ref: ref,
+    tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
   }), IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, {
     small: true
   }, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
@@ -54,6 +59,11 @@ SideNavLink.propTypes = {
    * Specify whether the link is the current page
    */
   isActive: PropTypes.bool,
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes.bool,
   /**
    * Specify if this is a large variation of the SideNavLink
    */
@@ -61,7 +71,11 @@ SideNavLink.propTypes = {
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+   */
+  tabIndex: PropTypes.number
 };
 var SideNavLink$1 = SideNavLink;
 

package/es/components/UIShell/SideNavMenu.js

@@ -8,9 +8,10 @@
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
+import React__default, { useContext, useState } from 'react';
 import SideNavIcon from './SideNavIcon.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { SideNavContext } from './SideNav.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
@@ -24,8 +25,10 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     large = false,
     renderIcon: IconElement,
     isSideNavExpanded,
+    tabIndex,
     title
   } = props;
+  const isRail = useContext(SideNavContext);
   const prefix = usePrefix();
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const [prevExpanded, setPrevExpanded] = useState(defaultExpanded);
@@ -60,7 +63,8 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
         setIsExpanded(!isExpanded);
       },
       ref: ref,
-      type: "button"
+      type: "button",
+      tabIndex: tabIndex === undefined ? !isSideNavExpanded && !isRail ? -1 : 0 : tabIndex
     }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
       className: `${prefix}--side-nav__submenu-title`,
       title: title
@@ -108,6 +112,10 @@ SideNavMenu.propTypes = {
    * Pass in a custom icon to render next to the `SideNavMenu` title
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
+   */
+  tabIndex: PropTypes.number,
   /**
    * Provide the text for the overall menu name
    */

package/es/components/UIShell/_utils.js

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const CARBON_SIDENAV_ITEMS = ['SideNavFooter', 'SideNavHeader', 'SideNavItems', 'SideNavMenu'];
+const CARBON_SIDENAV_ITEMS = ['SideNavFooter', 'SideNavHeader', 'SideNavItems', 'SideNavMenu', 'SideNavLink'];
 
 export { CARBON_SIDENAV_ITEMS };

package/es/internal/useNoInteractiveChildren.js

@@ -43,6 +43,29 @@ function getInteractiveContent(node) {
   return null;
 }
 
+/**
+ * Determines if a given DOM node has a role, or has itself a role.
+ * It returns the node with a role if one is found
+ *
+ * @param {HTMLElement} node
+ * @returns {HTMLElement}
+ */
+function getRoleContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+  if (node?.getAttribute?.('role') && node.getAttribute('role') !== '') {
+    return node;
+  }
+  for (const childNode of node.childNodes) {
+    const roleNode = getRoleContent(childNode);
+    if (roleNode) {
+      return roleNode;
+    }
+  }
+  return null;
+}
+
 /**
  * Determines if the given element is focusable, or not
  *
@@ -71,4 +94,4 @@ function isFocusable(element) {
   }
 }
 
-export { getInteractiveContent, useNoInteractiveChildren };
+export { getInteractiveContent, getRoleContent, useNoInteractiveChildren };

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

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

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

@@ -25,13 +25,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.usePrefix();
@@ -93,9 +93,9 @@ DataTableSkeleton.propTypes = {
   /**
    * Optionally specify the displayed headers
    */
-  headers: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].shape({
-    key: PropTypes__default["default"].string
-  })]),
+  headers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    header: PropTypes__default["default"].node.isRequired
+  }).isRequired),
   /**
    * Specify the number of rows that you want to render in the skeleton state
    */
@@ -113,13 +113,5 @@ DataTableSkeleton.propTypes = {
    */
   zebra: PropTypes__default["default"].bool
 };
-DataTableSkeleton.defaultProps = {
-  rowCount: 5,
-  columnCount: 5,
-  zebra: false,
-  compact: false,
-  showHeader: true,
-  showToolbar: true
-};
 
 exports["default"] = DataTableSkeleton;

package/lib/components/Modal/Modal.js

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

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -44,8 +44,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     compareItems,
     direction,
@@ -324,9 +322,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setInputValue('');
           }
         });
-        const menuProps = getMenuProps({
-          'aria-label': ariaLabel
-        }, {
+        const menuProps = getMenuProps({}, {
           suppressRefError: true
         });
         const handleFocus = evt => {
@@ -341,7 +337,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
-          "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -431,14 +426,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
 });
 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__default["default"].string,
+  ['aria-label']: deprecate["default"](PropTypes__default["default"].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["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -551,7 +547,6 @@ FilterableMultiSelect.propTypes = {
   warnText: PropTypes__default["default"].node
 };
 FilterableMultiSelect.defaultProps = {
-  ['aria-label']: 'Choose an item',
   compareItems: sorting.defaultCompareItems,
   direction: 'bottom',
   disabled: false,