@carbon/ibm-products 2.36.0-alpha.27 → 2.37.0

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, Children, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, Children, useCallback, useEffect, isValidElement } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -51,7 +51,6 @@ var defaults = {
   skipButtonLabel: '',
   startButtonLabel: 'Get started'
 };
-
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -106,7 +105,7 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
   var childArray = Children.toArray(children);
   var isMultiStep = childArray.length > 1;
   var mediaIsDefined = (media === null || media === void 0 ? void 0 : media.render) || (media === null || media === void 0 ? void 0 : media.filePaths);
-  var bodyScrollRef = useRef();
+  var bodyScrollRef = useRef(null);
   var mediaBreakpoints = {
     xlg: (media === null || media === void 0 || (_media$breakpoints = media.breakpoints) === null || _media$breakpoints === void 0 ? void 0 : _media$breakpoints.xlg) || 0,
     lg: (media === null || media === void 0 || (_media$breakpoints2 = media.breakpoints) === null || _media$breakpoints2 === void 0 ? void 0 : _media$breakpoints2.lg) || 0,
@@ -127,7 +126,8 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onClose();
   }, [onClose]);
   var scrollBodyToTop = function scrollBodyToTop() {
-    bodyScrollRef.current.scroll({
+    var _bodyScrollRef$curren;
+    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || _bodyScrollRef$curren.scroll({
       top: 0,
       behavior: 'smooth'
     });
@@ -197,10 +197,12 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default.createElement(ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/isValidElement(child)) {
+        return /*#__PURE__*/React__default.createElement(ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), /*#__PURE__*/React__default.createElement(ModalBody, {
       className: bodyBlockClass
     }, childElements), /*#__PURE__*/React__default.createElement(ModalFooter, null, renderFooter()));
@@ -226,10 +228,12 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       vertical: false,
       currentIndex: progStep
     }, childArray.map(function (child, idx) {
-      return /*#__PURE__*/React__default.createElement(ProgressStep, {
-        key: idx,
-        label: child.props.stepTitle
-      });
+      if ( /*#__PURE__*/isValidElement(child)) {
+        return /*#__PURE__*/React__default.createElement(ProgressStep, {
+          key: idx,
+          label: child.props.stepTitle
+        });
+      }
     })))), childElements, renderFooter()));
   };
   var renderBody = function renderBody() {
@@ -252,7 +256,10 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default.createElement(Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : childArray[0])), mediaIsDefined && /*#__PURE__*/React__default.createElement(Column, {
       xlg: mediaBreakpoints.xlg,
       lg: mediaBreakpoints.lg,
@@ -271,7 +278,10 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (_ref,
       className: "".concat(blockClass, "__carousel")
     }, /*#__PURE__*/React__default.createElement(Carousel, {
       disableArrowScroll: true,
-      ref: scrollRef
+      ref: scrollRef,
+      onScroll: function onScroll(scrollPercent) {
+        scrollPercent === 0 && setProgStep(0);
+      }
     }, children)) : /*#__PURE__*/React__default.createElement("div", null, childArray[0])));
   };
   var renderFooter = function renderFooter() {
@@ -379,6 +389,7 @@ InterstitialScreen.propTypes = {
    * Medium and small breakpoints will be set to 0 internally to focus on the main content area.
    * @see {@link MEDIA_PROP_TYPE}.
    */
+  /**@ts-ignore */
   media: PropTypes.oneOfType([PropTypes.shape({
     render: PropTypes.func,
     breakpoints: PropTypes.shape({

package/es/components/Nav/NavItem.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import NavItemLink from './NavItemLink.js';
-import { Launch } from '../../node_modules/@carbon/icons-react/es/generated/bucket-8.js';
+import { Launch } from '../../node_modules/@carbon/icons-react/es/generated/bucket-9.js';
 
 var _excluded = ["activeHref", "children", "className", "current", "disabled", "element", "href", "id", "label", "onClick", "tabIndex"];
 

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -13,6 +13,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { timeAgo } from './utils.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
+import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { Button, Toggle, Link, IconButton } from '@carbon/react';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
@@ -153,9 +154,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   var previousState = usePreviousValue({
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var reducedMotion = usePrefersReducedMotion();
   useEffect(function () {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
@@ -174,10 +173,10 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     !open && setRender(false);
   };
   useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion) {
       setRender(false);
     }
-  }, [open, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open, reducedMotion]);
   var sortChronologically = function sortChronologically(arr) {
     if (!arr || arr && !arr.length) {
       return;
@@ -317,7 +316,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     id: blockClass,
     className: cx(blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
+      animation: !reducedMotion ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef

package/es/components/PageHeader/PageHeader.js

@@ -11,7 +11,7 @@ import PropTypes from '../../node_modules/prop-types/index.js';
 import { breakpoints, spacing10, baseFontSize } from '@carbon/layout';
 import cx from 'classnames';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { FlexGrid, Row, Column, Button, Tag } from '@carbon/react';
+import { FlexGrid, Row, Column, Button, Tooltip, Tag } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
@@ -25,13 +25,14 @@ import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWith
 import { ActionBar } from '../ActionBar/ActionBar.js';
 import { ButtonSetWithOverflow } from '../ButtonSetWithOverflow/ButtonSetWithOverflow.js';
 
-var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
 
 // Default values for props
 var defaults = {
   fullWidthGrid: false,
-  narrowGrid: false
+  narrowGrid: false,
+  breadcrumbOverflowTooltipAlign: 'right'
 };
 var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _withoutBackground, _enableBreadcrumbScro;
@@ -66,6 +67,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     tags = _ref.tags,
     title = _ref.title,
     withoutBackground = _ref.withoutBackground,
+    _ref$breadcrumbOverfl = _ref.breadcrumbOverflowTooltipAlign,
+    breadcrumbOverflowTooltipAlign = _ref$breadcrumbOverfl === void 0 ? defaults.breadcrumbOverflowTooltipAlign : _ref$breadcrumbOverfl,
     rest = _objectWithoutProperties(_ref, _excluded);
   // handle deprecated props - START
   // if withoutBackground is nullish check deprecated_hasBackgroundAlways and default false
@@ -337,6 +340,8 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     noTrailingSlash: !!title,
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
+    ,
+    overflowTooltipAlign: breadcrumbOverflowTooltipAlign
   }) : null), /*#__PURE__*/React__default.createElement(Column, {
     className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -528,6 +533,10 @@ PageHeader.propTypes = _objectSpread2({
     var breadcrumbs = _ref11.breadcrumbs;
     return breadcrumbs && breadcrumbs.length > 0;
   }),
+  /**
+   * align breadcrumb overflow tooltip
+   */
+  breadcrumbOverflowTooltipAlign: Tooltip.propTypes.align,
   /**
    * Specifies the breadcrumb components to be shown in the breadcrumb area of
    * the page header. Each item is specified as an object with optional fields

package/es/components/SidePanel/SidePanel.js

@@ -151,7 +151,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+  var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
 

package/es/components/SimpleHeader/SimpleHeader.d.ts

@@ -16,7 +16,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
     breadcrumbs: any;
     className: any;
     title: any;
-    noTrailingSlash: any;
+    noTrailingSlash?: boolean | undefined;
     maxVisible: any;
     overflowAriaLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
@@ -40,9 +40,5 @@ export namespace SimpleHeader {
         export { overflowAriaLabel_required_if_breadcrumbs_exist as overflowAriaLabel };
         export let title: PropTypes.Requireable<string>;
     }
-    namespace defaultProps {
-        let noTrailingSlash_1: boolean;
-        export { noTrailingSlash_1 as noTrailingSlash };
-    }
 }
 import PropTypes from 'prop-types';

package/es/components/SimpleHeader/SimpleHeader.js

@@ -33,7 +33,8 @@ var SimpleHeader = function SimpleHeader(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     className = _ref.className,
     title = _ref.title,
-    noTrailingSlash = _ref.noTrailingSlash,
+    _ref$noTrailingSlash = _ref.noTrailingSlash,
+    noTrailingSlash = _ref$noTrailingSlash === void 0 ? true : _ref$noTrailingSlash,
     maxVisible = _ref.maxVisible,
     overflowAriaLabel = _ref.overflowAriaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -86,8 +87,5 @@ SimpleHeader.propTypes = {
   /** Header title */
   title: PropTypes.string
 };
-SimpleHeader.defaultProps = {
-  noTrailingSlash: true
-};
 
 export { SimpleHeader, overflowAriaLabel_required_if_breadcrumbs_exist };

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

@@ -8,11 +8,8 @@
 import React, { ReactNode, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonProps } from '@carbon/react';
-type closeIconDescriptionTypes = {
-    hasCloseIcon: true;
-    closeIconDescription: string;
-};
-interface TearsheetNarrowProps extends PropsWithChildren {
+import { CloseIconDescriptionTypes } from './TearsheetShell';
+interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
      * bottom of the tearsheet. Each action is specified as an object with
@@ -36,13 +33,6 @@ interface TearsheetNarrowProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
-    /**
-     * The accessibility title for the close icon (if shown).
-     *
-     * **Note:** This prop is only required if a close icon is shown, i.e. if
-     * there are a no navigation actions and/or hasCloseIcon is true.
-     */
-    closeIconDescription?: closeIconDescriptionTypes;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -89,6 +79,7 @@ interface TearsheetNarrowProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
+type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front
@@ -97,7 +88,7 @@ interface TearsheetNarrowProps extends PropsWithChildren {
  * A narrow tearsheet comprises 3 zones: a heading area including a title, the
  * main content area, and a set of action buttons.
  */
-export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<unknown>>;
+export declare let TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**

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

@@ -1,6 +1,107 @@
-export const tearsheetShellWideProps: string[];
-export function tearsheetIsPassive(actions: any): boolean;
-export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { type ButtonProps } from '@carbon/react';
+interface TearsheetShellProps extends PropsWithChildren {
+    actions?: ButtonProps[];
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * The content for the header actions area, displayed alongside the title in
+     * the header area of the tearsheet. This is typically a drop-down, or a set
+     * of small buttons, or similar. NB the headerActions is only applicable for
+     * wide tearsheets.
+     */
+    headerActions?: ReactNode;
+    /**
+     * The content for the influencer section of the tearsheet, displayed
+     * alongside the main content. This is typically a menu, or filter, or
+     * progress indicator, or similar. NB the influencer is only applicable for
+     * wide tearsheets.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet. NB the navigation is only applicable
+     * for wide tearsheets.
+     */
+    navigation?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    selectorPrimaryFocus?: string;
+    /**
+     * Specifies the width of the tearsheet, 'narrow' or 'wide'.
+     */
+    size: 'narrow' | 'wide';
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+     */
+    slug?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    verticalPosition?: 'normal' | 'lower';
+}
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+export declare const tearsheetShellWideProps: string[];
+export declare const tearsheetIsPassive: (actions: any) => boolean;
+export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
 /**
  *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
  *
@@ -8,10 +109,18 @@ export function tearsheetHasCloseIcon(actions: any, hasCloseIcon: any): any;
  *
  * See the canvas tab for the component API details.
  * */
-export const TearsheetShell: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export const portalType: PropTypes.Requireable<object>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const portalType: PropTypes.Requireable<object>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/Tearsheet/TearsheetShell.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
@@ -13,7 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
-import { usePrefix, ComposedModal, ModalHeader, Layer, Button } from '@carbon/react';
+import { Button, usePrefix, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
@@ -37,6 +37,7 @@ var maxDepth = 3;
 // The 'sizes' array contains an array of the sizes for every stacked tearsheet.
 // This is so we can opt-out of including the stacking scale effect when there
 // are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
+
 var stack = {
   open: [],
   all: [],
@@ -94,6 +95,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var _useFocus = useFocus(modalRef),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -124,7 +126,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };
@@ -152,8 +154,9 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
+        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        handler.checkFocus();
+        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -192,10 +195,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
     if (position < depth) {
-      stack.open[stack.open.length - 1].claimFocus();
+      var _stack$open$claimFocu, _stack$open;
+      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
     }
   }
   if (position <= depth) {
+    var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -216,7 +221,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       "aria-label": ariaLabel || getNodeTextContent(title),
       className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
@@ -264,7 +269,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       alwaysRender: includeActions
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right'
+      alwaysRender: !!(influencer && influencerPosition === 'right')
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
@@ -272,7 +277,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React__default.createElement(ActionSet, {
       actions: actions,
-      buttonSize: wide ? '2xl' : null,
+      buttonSize: wide ? '2xl' : undefined,
       className: "".concat(bc, "__buttons"),
       size: wide ? '2xl' : 'lg',
       "aria-hidden": !open
@@ -323,6 +328,7 @@ TearsheetShell.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
+  /**@ts-ignore*/
   actions: PropTypes.arrayOf(
   // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
@@ -347,6 +353,7 @@ TearsheetShell.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore*/
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref4) {
     var actions = _ref4.actions,
       hasCloseIcon = _ref4.hasCloseIcon;
@@ -364,6 +371,7 @@ TearsheetShell.propTypes = _objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore*/
   hasCloseIcon: PropTypes.bool,
   /**
    * The content for the header actions area, displayed alongside the title in
@@ -413,10 +421,12 @@ TearsheetShell.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore*/
   portalTarget: portalType,
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
+  /**@ts-ignore*/
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component

package/es/components/UserProfileImage/UserProfileImage.d.ts

@@ -1,5 +1,69 @@
 /**
- * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ * Copyright IBM Corp. 2021, 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.
  */
-export let UserProfileImage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/// <reference path="../../../src/custom-typings/index.d.ts" />
 import React from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
+import '../../global/js/utils/props-helper';
+import { IconButton } from '@carbon/react';
+type imageProps = {
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: string;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: string;
+} | {
+    image?: never;
+    imageDescription?: never;
+};
+type UserProfileImageBaseProps = {
+    /**
+     * The background color passed should match one of the background colors in the library documentation:
+     * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+     */
+    backgroundColor?: string;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the included ones
+     */
+    icon?: () => CarbonIconType | null;
+    /**
+     * When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
+     */
+    initials?: string;
+    /**
+     * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
+     */
+    kind?: 'user' | 'group';
+    /**
+     * Set the size of the avatar circle
+     */
+    size: 'xl' | 'lg' | 'md';
+    /**
+     * Set theme in which the component will be rendered
+     */
+    theme: 'light' | 'dark';
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: React.ComponentProps<typeof IconButton>['align'];
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
+/**
+ * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ */
+export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
+export {};