@carbon/ibm-products 2.66.0 → 2.67.0

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -6,11 +6,11 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useState, useLayoutEffect, useCallback } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings.js';
-import { handleSelectAllRowData, handleOnPageSelectAllRowData } from './addons/stateReducer.js';
+import { handleOnPageSelectAllRowData, handleSelectAllRowData } from './addons/stateReducer.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const SelectAll = datagridState => {
@@ -44,14 +44,6 @@ const SelectAll = datagridState => {
     onAllRowSelect
   } = datagridState;
   const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
-  if (hideSelectAll || radio) {
-    return /*#__PURE__*/React__default.createElement("th", {
-      className: cx(`${blockClass}__head-hidden-select-all`, {
-        [`${blockClass}__select-all-sticky-left`]: /* istanbul ignore next */
-        isFirstColumnStickyLeft && Number(windowSize) > 671
-      })
-    });
-  }
   const getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   const {
     onChange,
@@ -60,7 +52,7 @@ const SelectAll = datagridState => {
   const {
     indeterminate
   } = selectProps;
-  const handleOnPageSelectAllChange = event => {
+  const handleOnPageSelectAllChange = useCallback(event => {
     handleOnPageSelectAllRowData({
       dispatch,
       rows,
@@ -70,8 +62,8 @@ const SelectAll = datagridState => {
     });
     onAllRowSelect?.(rows, event);
     return onChange?.(event);
-  };
-  const handleSelectAllChange = event => {
+  }, [dispatch, getRowId, indeterminate, onAllRowSelect, onChange, rows]);
+  const handleSelectAllChange = useCallback(event => {
     if (indeterminate) {
       handleSelectAllRowData({
         dispatch,
@@ -97,7 +89,15 @@ const SelectAll = datagridState => {
     });
     onAllRowSelect?.(rows, event);
     return onChange?.(event);
-  };
+  }, [dispatch, getRowId, indeterminate, onAllRowSelect, onChange, rows, toggleAllRowsSelected]);
+  if (hideSelectAll || radio) {
+    return /*#__PURE__*/React__default.createElement("th", {
+      className: cx(`${blockClass}__head-hidden-select-all`, {
+        [`${blockClass}__select-all-sticky-left`]: /* istanbul ignore next */
+        isFirstColumnStickyLeft && Number(windowSize) > 671
+      })
+    });
+  }
   return /*#__PURE__*/React__default.createElement(TableSelectAll, _extends({}, selectProps, {
     checked: selectProps?.checked || false,
     className: cx(`${blockClass}__head-select-all`, `${blockClass}__checkbox-cell`, {

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -220,9 +220,6 @@ const FilterFlyout = _ref => {
   useSubscribeToEventEmitter(CLEAR_FILTERS, tableId => {
     reset(tableId);
   });
-  useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
-    lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
-  }, [reactTableFiltersState, lastAppliedFilters]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${componentClass}__container`,
     ref: filterFlyoutRef

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -436,6 +436,11 @@ const useFilters = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset, savedFilters, filtersObjectArray]);
+
+  // This useEffect will update the last applied filters when the react-table filters change, this helps keeps all states in sync
+  useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
+    lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
+  }, [reactTableFiltersState, lastAppliedFilters]);
   const cancel = () => {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {

package/es/components/Datagrid/useSelectRows.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useState, useLayoutEffect, useCallback } from 'react';
 import cx from 'classnames';
 import { TableSelectRow } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll.js';
@@ -16,6 +16,8 @@ import { handleToggleRowSelected } from './Datagrid/addons/stateReducer.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const checkboxClass = `${pkg.prefix}--datagrid__checkbox-cell`;
+const renderSelectAll = gridState => /*#__PURE__*/React__default.createElement(SelectAll, gridState);
+const renderSelectCell = gridState => /*#__PURE__*/React__default.createElement(SelectRow, gridState);
 const useSelectRows = hooks => {
   useHighlightSelection(hooks);
   const useInstance = instance => {
@@ -44,8 +46,8 @@ const useSelectRows = hooks => {
     const expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
     return [...(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), {
       id: selectionColumnId,
-      Header: gridState => /*#__PURE__*/React__default.createElement(SelectAll, gridState),
-      Cell: gridState => /*#__PURE__*/React__default.createElement(SelectRow, gridState)
+      Header: renderSelectAll,
+      Cell: renderSelectCell
     }, ...newColOrder];
   });
 };
@@ -90,7 +92,20 @@ const SelectRow = datagridState => {
     window.addEventListener('resize', updateSize);
     return () => window.removeEventListener('resize', updateSize);
   }, []);
-  const onSelectHandler = async event => {
+  const selectDisabled = isFetching || row.getRowProps().disabled;
+  const {
+    onChange,
+    title,
+    ...selectProps
+  } = row.getToggleRowSelectedProps();
+  const cellProps = cell.getCellProps();
+  const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
+  const rowId = `${tableId}-${row.id}-${row.index}`;
+  const {
+    key,
+    _cellProps
+  } = cellProps;
+  const onSelectHandler = useCallback(event => {
     event.stopPropagation(); // avoid triggering onRowClick
     if (radio) {
       toggleAllRowsSelected(false);
@@ -107,24 +122,7 @@ const SelectRow = datagridState => {
       getRowId,
       selectAll: null
     });
-    // focus the radio / checkbox if lost
-    const activeElement = document?.activeElement?.id ?? '';
-    await undefined;
-    document?.getElementById(activeElement)?.focus();
-  };
-  const selectDisabled = isFetching || row.getRowProps().disabled;
-  const {
-    onChange,
-    title,
-    ...selectProps
-  } = row.getToggleRowSelectedProps();
-  const cellProps = cell.getCellProps();
-  const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
-  const rowId = `${tableId}-${row.id}-${row.index}`;
-  const {
-    key,
-    _cellProps
-  } = cellProps;
+  }, [dispatch, getRowId, onChange, onRadioSelect, onRowSelect, radio, row, toggleAllRowsSelected]);
   return /*#__PURE__*/React__default.createElement(TableSelectRow, _extends({
     key: key
   }, _cellProps, selectProps, {
@@ -135,7 +133,7 @@ const SelectRow = datagridState => {
     className: cx([checkboxClass, cellProps.className, {
       [`${checkboxClass}-sticky-left`]: isFirstColumnStickyLeft && Number(windowSize) > 671
     }]),
-    ariaLabel: title,
+    "aria-label": title,
     disabled: selectDisabled
   }));
 };

package/es/components/EmptyStates/EmptyState.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ElementType, ReactNode } from 'react';
 import '../../global/js/utils/props-helper';
-import { ButtonProps } from '@carbon/react';
+import { ButtonProps, LinkProps } from '@carbon/react';
 declare enum sizes {
     lg = "lg",
     sm = "sm"
@@ -14,12 +14,14 @@ declare enum sizes {
 export declare const defaults: {
     position: string;
     size: sizes;
-    headingAs: string;
 };
-interface EmptyStateAction extends ButtonProps<React.ElementType> {
+export interface EmptyStateAction extends ButtonProps<React.ElementType> {
     kind?: 'primary' | 'secondary' | 'tertiary';
     text?: string;
 }
+export interface CustomLink extends LinkProps<React.ElementType> {
+    text?: ReactNode;
+}
 export interface EmptyStateProps {
     /**
      * Empty state action button
@@ -45,12 +47,11 @@ export interface EmptyStateProps {
     /**
      * Empty state link object
      */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
+    link?: CustomLink;
     /**
-     * Empty state headingAs allows you to customize the type of heading element
+     * Customize the heading element.  Set to "h1" when EmptyState is full page, i.e. there is no higher header.
+     * Otherwise, you normally don't need to specify this: EmptyState will automatically pick the right heading level
+     * (h2-h6) by leveraging Section and Heading.
      */
     headingAs?: (() => ReactNode) | string | ElementType;
     /**

package/es/components/EmptyStates/EmptyState.js

@@ -16,7 +16,7 @@ import './NotificationsEmptyState/NotificationsEmptyState.js';
 import './UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -32,8 +32,7 @@ var sizes = /*#__PURE__*/function (sizes) {
 }(sizes || {}); // Default values for props
 const defaults = {
   position: 'top',
-  size: sizes.lg,
-  headingAs: 'h3'
+  size: sizes.lg
 };
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
@@ -55,7 +54,7 @@ let EmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     illustrationPosition = defaults.position,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     ...rest
@@ -126,11 +125,7 @@ EmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/EmptyStateContent.d.ts

@@ -1,22 +1,36 @@
-export function EmptyStateContent({ action, link, headingAs, size, subtitle, title, }: {
-    action: any;
-    link: any;
-    headingAs: any;
-    size: any;
-    subtitle: any;
-    title: any;
-}): React.JSX.Element;
-export namespace EmptyStateContent {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let action: any;
-        let headingAs: any;
-        let link: any;
-        let size: any;
-        let subtitle: any;
-        let title: any;
-    }
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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, { ElementType, ReactNode } from 'react';
+import { CustomLink, EmptyStateAction } from './EmptyState';
+interface EmptyStateProps {
+    /**
+     * Empty state action button
+     */
+    action?: EmptyStateAction;
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
+    /**
+     * Empty state link object
+     */
+    link?: CustomLink;
+    /**
+     * Empty state size
+     */
+    size?: 'lg' | 'sm';
+    /**
+     * Empty state subtitle
+     */
+    subtitle?: string | ReactNode;
+    /**
+     * Empty state title
+     */
+    title: string | ReactNode;
 }
-import React from 'react';
-declare const componentName: "EmptyStateContent";
+export declare const EmptyStateContent: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/EmptyStates/EmptyStateContent.js

@@ -10,24 +10,24 @@ import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
 import cx from 'classnames';
-import { Section, Button, Link } from '@carbon/react';
+import { Button, Section, Heading, Link } from '@carbon/react';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'EmptyStateContent';
-const EmptyStateContent = _ref => {
-  let {
+const EmptyStateContent = /*#__PURE__*/React__default.forwardRef(props => {
+  const {
     action,
     link,
     headingAs,
     size,
     subtitle,
     title
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("div", {
+  } = props;
+  const HeadingComponent = headingAs ?? Heading;
+  return /*#__PURE__*/React__default.createElement(Section, {
     className: `${blockClass}__content`
-  }, /*#__PURE__*/React__default.createElement(Section, {
-    as: headingAs,
+  }, /*#__PURE__*/React__default.createElement(HeadingComponent, {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
@@ -39,13 +39,13 @@ const EmptyStateContent = _ref => {
     className: `${blockClass}__action-button`,
     kind: action.kind || 'tertiary',
     onClick: action.onClick,
-    renderIcon: action.renderIcon || null,
+    renderIcon: action.renderIcon ?? undefined,
     size: 'sm'
   }), action.text), link?.text && link?.href && /*#__PURE__*/React__default.createElement(Link, _extends({}, link, {
     className: `${blockClass}__link`,
     href: link.href
   }), link.text));
-};
+});
 
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
@@ -59,10 +59,12 @@ EmptyStateContent.propTypes = {
    * Empty state action button
    */
   action: PropTypes.shape({
+    /**@ts-ignore*/
     ...Button.propTypes,
     iconDescription: PropTypes.string,
     kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
     renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    /**@ts-ignore*/
     onClick: Button.propTypes.onClick,
     text: PropTypes.string
   }),
@@ -73,11 +75,7 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state link object
    */
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
@@ -33,7 +33,7 @@ let ErrorEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     illustrationTheme,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -106,11 +106,7 @@ ErrorEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
 import { EmptyStateContent } from '../EmptyStateContent.js';
@@ -33,7 +33,7 @@ let NoDataEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -106,11 +106,7 @@ NoDataEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore */
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
 import { EmptyStateContent } from '../EmptyStateContent.js';
@@ -33,7 +33,7 @@ let NoTagsEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -106,11 +106,7 @@ NoTagsEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
 import { EmptyStateContent } from '../EmptyStateContent.js';
@@ -33,7 +33,7 @@ let NotFoundEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -106,11 +106,7 @@ NotFoundEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers
 import React__default from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
-import { Link, Button } from '@carbon/react';
+import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../../global/js/utils/devtools.js';
 import { pkg } from '../../../settings.js';
 import { EmptyStateContent } from '../EmptyStateContent.js';
@@ -33,7 +33,7 @@ let NotificationsEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref)
     illustrationDescription,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -106,11 +106,7 @@ NotificationsEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: PropTypes.shape({
-    ...Link.propTypes,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    href: PropTypes.string
-  }),
+  link: PropTypes.any,
   /**
    * Empty state size
    */

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -33,7 +33,7 @@ let UnauthorizedEmptyState = /*#__PURE__*/React__default.forwardRef((_ref, ref)
     illustrationDescription,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.

package/es/components/ImportModal/ImportModal.js

@@ -195,7 +195,7 @@ let ImportModal = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), /*#__PURE__*/React__default.createElement(Button, {
     onClick: fetchFile,
     className: `${blockClass}__import-button`,
-    size: "sm",
+    size: "md",
     disabled: importButtonDisabled,
     renderIcon: inputButtonIcon ? props => /*#__PURE__*/React__default.createElement(Add, _extends({
       size: 20

package/es/components/OptionsTile/OptionsTile.d.ts

@@ -58,9 +58,9 @@ export interface OptionsTileProps {
      */
     summary?: string;
     /**
-     * Provide the title for this OptionsTile.
+     * Provide the title for this OptionsTile. Must not contain any interactive elements.
      */
-    title: string;
+    title: ReactNode;
     /**
      * Optionally provide an id which should be used for the title.
      */

package/es/components/OptionsTile/OptionsTile.js

@@ -10,6 +10,7 @@ import * as carbonMotion from '@carbon/motion';
 import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
 import { Section, Toggle, Layer, Heading } from '@carbon/react';
 import React__default, { useState, useRef } from 'react';
+import { useNoInteractiveChildren } from '@carbon/utilities-react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -49,6 +50,8 @@ let OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const [open, setOpen] = useControllableState(userOpen ?? false, onChange);
   const detailsRef = useRef(null);
   const contentRef = useRef(null);
+  const headingRef = useRef(null);
+  useNoInteractiveChildren(headingRef);
   const titleId = userDefinedTitleId ?? `${uuidv4()}-title`;
   const isExpandable = children !== undefined;
   const isWarn = !invalid && warn;
@@ -154,6 +157,7 @@ let OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     return /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}__heading`
     }, /*#__PURE__*/React__default.createElement(Heading, {
+      ref: headingRef,
       id: titleId,
       className: `${blockClass}__title`
     }, title), text && /*#__PURE__*/React__default.createElement("span", {
@@ -269,9 +273,9 @@ OptionsTile.propTypes = {
    */
   summary: PropTypes.string,
   /**
-   * Provide the title for this OptionsTile.
+   * Provide the title for this OptionsTile. Must not contain any interactive elements.
    */
-  title: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   /**
    * Optionally provide an id which should be used for the title.
    */

package/es/components/PageHeader/PageHeader.js

@@ -206,10 +206,7 @@ let PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, [pageActions]);
   useEffect(() => {
     // Determine the location of the pageAction buttons
-    /* istanbul ignore next */
-    if (metrics?.titleRowSpaceAbove && metrics?.pageActionsSpaceAbove) {
-      setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && scrollYValue > metrics?.titleRowSpaceAbove || widthIsNarrow && scrollYValue > metrics?.pageActionsSpaceAbove);
-    }
+    setPageActionsInBreadcrumbRow(collapseTitle || hasActionBar && !!metrics?.titleRowSpaceAbove && scrollYValue > metrics?.titleRowSpaceAbove || widthIsNarrow && !!metrics?.pageActionsSpaceAbove && scrollYValue > metrics?.pageActionsSpaceAbove);
   }, [hasActionBar, metrics.breadcrumbRowSpaceBelow, metrics.titleRowSpaceAbove, metrics.pageActionsSpaceAbove, collapseTitle, scrollYValue, widthIsNarrow]);
   useEffect(() => {
     // Assesses the size of the action bar and page action area and their required
@@ -389,7 +386,8 @@ let PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       [`${blockClass}__breadcrumb-row--next-to-tabs`]: nextToTabsCheck(),
       [`${blockClass}__breadcrumb-row--has-breadcrumbs`]: breadcrumbs || breadcrumbItemForTitle,
       [`${blockClass}__breadcrumb-row--has-action-bar`]: hasActionBar || widthIsNarrow,
-      [`${blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions
+      [`${blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions,
+      [`${blockClass}__has-page-actions-with-title-collapsed`]: collapseTitle && pageActions
     })
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__breadcrumb-row--container`
@@ -424,7 +422,7 @@ let PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     overflowAriaLabel: actionBarOverflowAriaLabel,
     overflowMenuRef,
     rightAlign: true
-  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
+  })) : (widthIsNarrow || pageActions) && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React__default.createElement(Row, {
     className: cx(`${blockClass}__title-row`, {
       [`${blockClass}__title-row--no-breadcrumb-row`]: !hasBreadcrumbRow,
       [`${blockClass}__title-row--under-action-bar`]: hasActionBar || widthIsNarrow,

package/es/components/TagSet/TagSet.js

@@ -211,6 +211,8 @@ let TagSet = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   };
   const handleModalClose = () => {
     setShowAllModalOpen(false);
+    const launcherButton = overflowTag.current?.querySelector('button');
+    setTimeout(() => launcherButton?.focus(), 0);
   };
   useResizeObserver(sizingContainerRef, handleSizerTagsResize);
   const resizeOption = containingElementRef ? containingElementRef : tagSetRef;