@carbon/ibm-products 2.66.0 → 2.67.0-rc.0

package/es/components/Tearsheet/Tearsheet.d.ts

@@ -8,6 +8,7 @@ import { type ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 export interface TearsheetAction extends ButtonProps<'button'> {
     label?: string;
+    loading?: boolean;
 }
 export interface TearsheetProps extends PropsWithChildren {
     /**

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -4,8 +4,8 @@
  * 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 { ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
+import { TearsheetAction } from './Tearsheet';
 export interface TearsheetNarrowProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
@@ -20,7 +20,7 @@ export interface TearsheetNarrowProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps<React.ElementType>[];
+    actions?: TearsheetAction[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -46,14 +46,6 @@ const SelectAll = datagridState => {
     onAllRowSelect
   } = datagridState;
   const isFirstColumnStickyLeft = columns[0]?.sticky === 'left' && withStickyColumn;
-  if (hideSelectAll || radio) {
-    return /*#__PURE__*/React.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,
@@ -62,7 +54,7 @@ const SelectAll = datagridState => {
   const {
     indeterminate
   } = selectProps;
-  const handleOnPageSelectAllChange = event => {
+  const handleOnPageSelectAllChange = React.useCallback(event => {
     stateReducer.handleOnPageSelectAllRowData({
       dispatch,
       rows,
@@ -72,8 +64,8 @@ const SelectAll = datagridState => {
     });
     onAllRowSelect?.(rows, event);
     return onChange?.(event);
-  };
-  const handleSelectAllChange = event => {
+  }, [dispatch, getRowId, indeterminate, onAllRowSelect, onChange, rows]);
+  const handleSelectAllChange = React.useCallback(event => {
     if (indeterminate) {
       stateReducer.handleSelectAllRowData({
         dispatch,
@@ -99,7 +91,15 @@ const SelectAll = datagridState => {
     });
     onAllRowSelect?.(rows, event);
     return onChange?.(event);
-  };
+  }, [dispatch, getRowId, indeterminate, onAllRowSelect, onChange, rows, toggleAllRowsSelected]);
+  if (hideSelectAll || radio) {
+    return /*#__PURE__*/React.createElement("th", {
+      className: cx(`${blockClass}__head-hidden-select-all`, {
+        [`${blockClass}__select-all-sticky-left`]: /* istanbul ignore next */
+        isFirstColumnStickyLeft && Number(windowSize) > 671
+      })
+    });
+  }
   return /*#__PURE__*/React.createElement(react.TableSelectAll, _rollupPluginBabelHelpers.extends({}, selectProps, {
     checked: selectProps?.checked || false,
     className: cx(`${blockClass}__head-select-all`, `${blockClass}__checkbox-cell`, {

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

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

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

@@ -440,6 +440,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
+  React.useEffect(function reflectLastAppliedFiltersWhenReactTableUpdates() {
+    lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
+  }, [reactTableFiltersState, lastAppliedFilters]);
   const cancel = () => {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === constants.BATCH) {

package/lib/components/Datagrid/useSelectRows.js

@@ -20,6 +20,8 @@ var stateReducer = require('./Datagrid/addons/stateReducer.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const checkboxClass = `${settings.pkg.prefix}--datagrid__checkbox-cell`;
+const renderSelectAll = gridState => /*#__PURE__*/React.createElement(DatagridSelectAll.SelectAll, gridState);
+const renderSelectCell = gridState => /*#__PURE__*/React.createElement(SelectRow, gridState);
 const useSelectRows = hooks => {
   useHighlightSelection(hooks);
   const useInstance = instance => {
@@ -48,8 +50,8 @@ const useSelectRows = hooks => {
     const expanderCol = expanderColumnIndex > -1 ? newColOrder.splice(expanderColumnIndex, 1) : [];
     return [...(expanderColumnIndex > -1 && expanderCol && expanderCol.length ? expanderCol : []), {
       id: commonColumnIds.selectionColumnId,
-      Header: gridState => /*#__PURE__*/React.createElement(DatagridSelectAll.SelectAll, gridState),
-      Cell: gridState => /*#__PURE__*/React.createElement(SelectRow, gridState)
+      Header: renderSelectAll,
+      Cell: renderSelectCell
     }, ...newColOrder];
   });
 };
@@ -94,7 +96,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 = React.useCallback(event => {
     event.stopPropagation(); // avoid triggering onRowClick
     if (radio) {
       toggleAllRowsSelected(false);
@@ -111,24 +126,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.createElement(react.TableSelectRow, _rollupPluginBabelHelpers.extends({
     key: key
   }, _cellProps, selectProps, {
@@ -139,7 +137,7 @@ const SelectRow = datagridState => {
     className: cx([checkboxClass, cellProps.className, {
       [`${checkboxClass}-sticky-left`]: isFirstColumnStickyLeft && Number(windowSize) > 671
     }]),
-    ariaLabel: title,
+    "aria-label": title,
     disabled: selectDisabled
   }));
 };

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

@@ -34,8 +34,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.
@@ -57,7 +56,7 @@ exports.EmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationPosition = defaults.position,
     link,
     size = defaults.size,
-    headingAs = defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     ...rest
@@ -128,11 +127,7 @@ exports.EmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

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

@@ -17,19 +17,19 @@ var react = require('@carbon/react');
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${settings.pkg.prefix}--empty-state`;
 const componentName = 'EmptyStateContent';
-const EmptyStateContent = _ref => {
-  let {
+const EmptyStateContent = /*#__PURE__*/React.forwardRef(props => {
+  const {
     action,
     link,
     headingAs,
     size,
     subtitle,
     title
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
+  } = props;
+  const HeadingComponent = headingAs ?? react.Heading;
+  return /*#__PURE__*/React.createElement(react.Section, {
     className: `${blockClass}__content`
-  }, /*#__PURE__*/React.createElement(react.Section, {
-    as: headingAs,
+  }, /*#__PURE__*/React.createElement(HeadingComponent, {
     className: cx(`${blockClass}__header`, {
       [`${blockClass}__header--small`]: size === 'sm'
     })
@@ -41,13 +41,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.createElement(react.Link, _rollupPluginBabelHelpers.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.
@@ -61,10 +61,12 @@ EmptyStateContent.propTypes = {
    * Empty state action button
    */
   action: index.default.shape({
+    /**@ts-ignore*/
     ...react.Button.propTypes,
     iconDescription: index.default.string,
     kind: index.default.oneOf(['primary', 'secondary', 'tertiary']),
     renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
+    /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick,
     text: index.default.string
   }),
@@ -75,11 +77,7 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state link object
    */
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -35,7 +35,7 @@ exports.ErrorEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationTheme,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -108,11 +108,7 @@ exports.ErrorEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -35,7 +35,7 @@ exports.NoDataEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -108,11 +108,7 @@ exports.NoDataEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore */
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -35,7 +35,7 @@ exports.NoTagsEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -108,11 +108,7 @@ exports.NoTagsEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -35,7 +35,7 @@ exports.NotFoundEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -108,11 +108,7 @@ exports.NotFoundEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -35,7 +35,7 @@ exports.NotificationsEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.
@@ -108,11 +108,7 @@ exports.NotificationsEmptyState.propTypes = {
    * Empty state link object
    */
   /**@ts-ignore*/
-  link: index.default.shape({
-    ...react.Link.propTypes,
-    text: index.default.oneOfType([index.default.string, index.default.node]),
-    href: index.default.string
-  }),
+  link: index.default.any,
   /**
    * Empty state size
    */

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -35,7 +35,7 @@ exports.UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     illustrationDescription,
     link,
     size = EmptyState.defaults.size,
-    headingAs = EmptyState.defaults.headingAs,
+    headingAs,
     subtitle,
     title,
     // Collect any other property values passed in.

package/lib/components/ImportModal/ImportModal.js

@@ -197,7 +197,7 @@ exports.ImportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), /*#__PURE__*/React.createElement(react.Button, {
     onClick: fetchFile,
     className: `${blockClass}__import-button`,
-    size: "sm",
+    size: "md",
     disabled: importButtonDisabled,
     renderIcon: inputButtonIcon ? props => /*#__PURE__*/React.createElement(icons.Add, _rollupPluginBabelHelpers.extends({
       size: 20

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

@@ -12,6 +12,7 @@ var carbonMotion = require('@carbon/motion');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var React = require('react');
+var utilitiesReact = require('@carbon/utilities-react');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -70,6 +71,8 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [open, setOpen] = useControllableState.useControllableState(userOpen ?? false, onChange);
   const detailsRef = React.useRef(null);
   const contentRef = React.useRef(null);
+  const headingRef = React.useRef(null);
+  utilitiesReact.useNoInteractiveChildren(headingRef);
   const titleId = userDefinedTitleId ?? `${uuidv4.default()}-title`;
   const isExpandable = children !== undefined;
   const isWarn = !invalid && warn;
@@ -175,6 +178,7 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}__heading`
     }, /*#__PURE__*/React.createElement(react.Heading, {
+      ref: headingRef,
       id: titleId,
       className: `${blockClass}__title`
     }, title), text && /*#__PURE__*/React.createElement("span", {
@@ -290,9 +294,9 @@ exports.OptionsTile.propTypes = {
    */
   summary: index.default.string,
   /**
-   * Provide the title for this OptionsTile.
+   * Provide the title for this OptionsTile. Must not contain any interactive elements.
    */
-  title: index.default.string.isRequired,
+  title: index.default.oneOfType([index.default.string, index.default.node]).isRequired,
   /**
    * Optionally provide an id which should be used for the title.
    */

package/lib/components/PageHeader/PageHeader.js

@@ -208,10 +208,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, [pageActions]);
   React.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]);
   React.useEffect(() => {
     // Assesses the size of the action bar and page action area and their required
@@ -391,7 +388,8 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [`${PageHeaderUtils.blockClass}__breadcrumb-row--next-to-tabs`]: nextToTabsCheck(),
       [`${PageHeaderUtils.blockClass}__breadcrumb-row--has-breadcrumbs`]: breadcrumbs || breadcrumbItemForTitle,
       [`${PageHeaderUtils.blockClass}__breadcrumb-row--has-action-bar`]: hasActionBar || widthIsNarrow,
-      [`${PageHeaderUtils.blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions
+      [`${PageHeaderUtils.blockClass}__has-page-actions-without-action-bar`]: !hasActionBar && !widthIsNarrow && pageActions,
+      [`${PageHeaderUtils.blockClass}__has-page-actions-with-title-collapsed`]: collapseTitle && pageActions
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: `${PageHeaderUtils.blockClass}__breadcrumb-row--container`
@@ -426,7 +424,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     overflowAriaLabel: actionBarOverflowAriaLabel,
     overflowMenuRef,
     rightAlign: true
-  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(react.Row, {
+  })) : (widthIsNarrow || pageActions) && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(react.Row, {
     className: cx(`${PageHeaderUtils.blockClass}__title-row`, {
       [`${PageHeaderUtils.blockClass}__title-row--no-breadcrumb-row`]: !hasBreadcrumbRow,
       [`${PageHeaderUtils.blockClass}__title-row--under-action-bar`]: hasActionBar || widthIsNarrow,

package/lib/components/TagSet/TagSet.js

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

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -8,6 +8,7 @@ import { type ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 export interface TearsheetAction extends ButtonProps<'button'> {
     label?: string;
+    loading?: boolean;
 }
 export interface TearsheetProps extends PropsWithChildren {
     /**

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -4,8 +4,8 @@
  * 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 { ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
+import { TearsheetAction } from './Tearsheet';
 export interface TearsheetNarrowProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
@@ -20,7 +20,7 @@ export interface TearsheetNarrowProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions?: ButtonProps<React.ElementType>[];
+    actions?: TearsheetAction[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.