@carbon/ibm-products 2.70.0 → 2.71.0-rc.0

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -10,7 +10,6 @@ import { Button } from '@carbon/react';
 import { portalType, TearsheetShell, tearsheetShellWideProps } from './TearsheetShell.js';
 import React__default from 'react';
 import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper.js';
-import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
@@ -84,9 +83,7 @@ TearsheetNarrow.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([/**@ts-ignore */
-  ActionSet.validateActions(() => 'lg'), PropTypes.arrayOf(PropTypes.shape({
-    /**@ts-ignore*/
+  actions: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
     ...Button.propTypes,
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,

package/es/components/Tearsheet/TearsheetShell.js

@@ -150,7 +150,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     if (prevOpen && !open && launcherButtonRef?.current) {
       setTimeout(() => {
         launcherButtonRef?.current.focus();
-      }, 0);
+      }, 10);
     }
   }, [open, prevOpen, launcherButtonRef]);
   useEffect(() => {

package/es/components/UserAvatar/UserAvatar.js

@@ -29,9 +29,8 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-let UserAvatar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
+let UserAvatar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
     backgroundColor = 'order-1-cyan',
     className,
     image,
@@ -42,9 +41,8 @@ let UserAvatar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size = 'md',
     tooltipText,
     tooltipAlignment = 'bottom',
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const carbonPrefix = usePrefix();
   const iconSize = {
     sm: 16,
@@ -137,10 +135,10 @@ UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: PropTypes.string.isRequired.if(_ref2 => {
+  imageDescription: PropTypes.string.isRequired.if(_ref => {
     let {
       image
-    } = _ref2;
+    } = _ref;
     return !!image;
   }),
   /**

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

@@ -63,6 +63,7 @@ type UserProfileImageBaseProps = {
 export 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.
+ * @deprecated This component is deprecated.
  */
 export declare let UserProfileImage: React.ForwardRefExoticComponent<UserProfileImageProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/es/components/UserProfileImage/UserProfileImage.js

@@ -24,10 +24,11 @@ const componentName = 'UserProfileImage';
 
 /**
  * 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.
+ * @deprecated This component is deprecated.
  */
-let UserProfileImage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+let UserProfileImage = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   var _FillItem;
-  let {
+  const {
     backgroundColor,
     className,
     kind,
@@ -39,9 +40,8 @@ let UserProfileImage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     theme,
     tooltipText,
     tooltipAlignment = 'bottom',
-    // Collect any other property values passed in.
     ...rest
-  } = _ref;
+  } = props;
   const carbonPrefix = usePrefix();
   const icons = {
     user: {
@@ -109,6 +109,12 @@ let UserProfileImage = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
+/**@ts-ignore*/
+UserProfileImage.deprecated = {
+  level: 'warn',
+  details: `Please replace ${componentName} with UserAvatar`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 UserProfileImage = pkg.checkComponentEnabled(UserProfileImage, componentName);
 UserProfileImage.displayName = componentName;
@@ -135,10 +141,10 @@ UserProfileImage.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: PropTypes.string.isRequired.if(_ref2 => {
+  imageDescription: PropTypes.string.isRequired.if(_ref => {
     let {
       image
-    } = _ref2;
+    } = _ref;
     return !!image;
   }),
   /**

package/es/components/index.d.ts

@@ -68,4 +68,5 @@ export { ActionBar } from './ActionBar';
 export * from './FilterPanel';
 export * from './ConditionBuilder';
 export * from './GetStartedCard';
+export * as unstable__PageHeader from './PageHeader/next/PageHeader';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './FeatureFlags';

package/es/global/js/package-settings.js

@@ -126,7 +126,7 @@ const defaults = {
     InlineTip: false,
     InlineTipButton: false,
     InlineTipLink: false,
-    InterstitialScreen: false,
+    InterstitialScreen: true,
     NonLinearReading: false
   },
   // feature level flags

package/es/index.js

@@ -80,6 +80,7 @@ export { EditFullPage } from './components/EditFullPage/EditFullPage.js';
 export { EditUpdateCards } from './components/EditUpdateCards/EditUpdateCards.js';
 export { Checklist } from './components/Checklist/Checklist.js';
 export { Coachmark } from './components/Coachmark/Coachmark.js';
+import 'react';
 import './components/Coachmark/CoachmarkTagline.js';
 export { CoachmarkBeacon } from './components/CoachmarkBeacon/CoachmarkBeacon.js';
 export { CoachmarkButton } from './components/CoachmarkButton/CoachmarkButton.js';
@@ -102,6 +103,8 @@ export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
+import * as PageHeader from './components/PageHeader/next/PageHeader.js';
+export { PageHeader as unstable__PageHeader };
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { usePrefix } from './global/js/hooks/usePrefix.js';

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
+import { getAttributes } from '../../icon-helpers/es/index.js';
 import PropTypes from '../../../../_virtual/index.js';
 import React__default from 'react';
 

package/es/node_modules/prop-types/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { __module as propTypes } from '../../_virtual/index3.js';
+import { __module as propTypes } from '../../_virtual/index2.js';
 import require$$0 from 'react-is';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.js';

package/lib/_virtual/_commonjsHelpers.js

@@ -7,11 +7,8 @@
 
 'use strict';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/lib/_virtual/index2.js

@@ -7,12 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var propTypes = {exports: {}};
 
-var _commonjsHelpers = require('./_commonjsHelpers.js');
-var index = require('../node_modules/lodash.debounce/index.js');
-
-var lodash_debounceExports = index.__require();
-var debounce = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_debounceExports);
-
-exports.default = debounce;
+exports.__module = propTypes;

package/lib/components/APIKeyModal/APIKeyDownloader.d.ts

@@ -1,22 +1,64 @@
-export function APIKeyDownloader({ apiKey, body, fileName, fileType, linkText, downloadLinkLabel, }: {
-    apiKey: any;
-    body: any;
-    fileName: any;
-    fileType: any;
-    linkText: any;
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * 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 from 'react';
+interface APIKeyDownloaderProps {
+    /**
+     * the api key that's displayed to the user when a request to create is fulfilled.
+     */
+    apiKey?: string;
+    /**
+     * the content that appears that indicates the key is downloadable
+     */
+    body?: string;
+    /**
+     * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
+     */
+    fileName?: string;
+    /**
+     * designates the file type for the downloadable key
+     */
+    fileType: 'txt' | 'json';
+    /**
+     * anchor text for the download link
+     */
+    linkText: string;
+    /**
+     * Aria-label for the download link
+     */
     downloadLinkLabel: any;
-}): React.JSX.Element;
-export namespace APIKeyDownloader {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let apiKey: any;
-        let body: any;
-        let downloadLinkLabel: any;
-        let fileName: any;
-        let fileType: any;
-        let linkText: any;
-    }
 }
-import React from 'react';
-declare const componentName: "APIKeyDownloader";
+export declare const APIKeyDownloader: {
+    (props: APIKeyDownloaderProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * the api key that's displayed to the user when a request to create is fulfilled.
+         */
+        apiKey: any;
+        /**
+         * body content for the downloader
+         */
+        body: any;
+        /**
+         * aria-label for the download link
+         */
+        downloadLinkLabel: any;
+        /**
+         * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
+         */
+        fileName: any;
+        /**
+         * designates the file type for the downloadable key
+         */
+        fileType: any;
+        /**
+         * anchor text for the download link
+         */
+        linkText: any;
+    };
+};
 export {};

package/lib/components/APIKeyModal/APIKeyDownloader.js

@@ -13,15 +13,15 @@ var index = require('../../_virtual/index.js');
 var settings = require('../../settings.js');
 
 const componentName = 'APIKeyDownloader';
-const APIKeyDownloader = _ref => {
-  let {
+const APIKeyDownloader = props => {
+  const {
     apiKey,
     body,
     fileName,
     fileType,
     linkText,
     downloadLinkLabel
-  } = _ref;
+  } = props;
   const [linkProps, setLinkProps] = React.useState({});
   React.useEffect(() => {
     const generateLinkProps = async () => {

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -125,7 +125,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   React.useEffect(() => {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      claimFocus();
+      setTimeout(() => claimFocus(), 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modalRef, open, firstElement]);

package/lib/components/ActionSet/ActionSet.d.ts

@@ -33,6 +33,10 @@ export interface ActionSetProps {
      */
     size?: ButtonSize;
 }
+export declare const validateActionSetProps: ({ actions, size }: {
+    actions: any;
+    size: any;
+}) => any;
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'

package/lib/components/ActionSet/ActionSet.js

@@ -14,6 +14,7 @@ var propsHelper = require('../../global/js/utils/props-helper.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
+var pconsole = require('../../global/js/utils/pconsole.js');
 
 var _InlineLoading;
 const blockClass = `${settings.pkg.prefix}--action-set`;
@@ -56,6 +57,41 @@ const willStack = (size, numberOfActions) => size === 'sm' || size === 'md' && n
 const defaults = {
   size: 'md'
 };
+const validateActionSetProps = _ref2 => {
+  let {
+    actions,
+    size
+  } = _ref2;
+  if (actions && actions.length) {
+    const problems = [];
+    const stacking = willStack(size, actions.length);
+    const countActions = kind => actions.filter(action => (action.kind || defaultKind) === kind).length;
+    const primaryActions = countActions('primary');
+    const secondaryActions = countActions('secondary');
+    const dangerActions = countActions('danger');
+    const ghostActions = countActions('ghost') + countActions('danger--ghost');
+    if (stacking && actions.length > 3) {
+      problems.push(`you cannot have more than three actions in this size of ${componentName}`);
+    }
+    if (actions.length > 4) {
+      problems.push(`you cannot have more than four actions in a ${componentName}`);
+    }
+    if (primaryActions > 1) {
+      problems.push(`you cannot have more than one 'primary' action in a ${componentName}`);
+    }
+    if (ghostActions > 1) {
+      problems.push(`you cannot have more than one 'ghost' action in a ${componentName}`);
+    }
+    if (stacking && actions.length > 1 && ghostActions > 0) {
+      problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
+    }
+    if (actions.length > primaryActions + secondaryActions + dangerActions + ghostActions) {
+      problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
+    }
+    return problems.length > 0 ? pconsole.default.error(`Invalid prop \`actions\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
+  }
+};
+
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'
@@ -68,17 +104,18 @@ const defaults = {
  * it appears at the left side. If there is a primary button it appears at the
  * right.
  */
-const ActionSet = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
+const ActionSet = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     actions,
     buttonSize,
     className,
     size = defaults.size,
-    // Collect any other property values passed in.
     ...rest
-  } = _ref2;
+  } = props;
+  validateActionSetProps({
+    actions,
+    size
+  });
   const buttons = actions && actions.slice?.(0) || [];
 
   // We stack the buttons in a sm set, or if there are three or more in a md set.
@@ -131,41 +168,7 @@ ActionSet.displayName = componentName;
  * @returns null if the actions meet the requirements, or an Error object with
  * an explanatory message.
  */
-/**@ts-ignore*/
-ActionSet.validateActions = sizeFn => (props, propName, componentName, location, propFullName) => {
-  const name = propFullName || propName;
-  const prop = props[name];
-  const actions = prop && prop?.length;
-  const problems = [];
-  if (actions > 0) {
-    const size = sizeFn ? sizeFn(props) : props.size || defaults.size;
-    const stacking = willStack(size, actions);
-    const countActions = kind => prop.filter(action => (action.kind || defaultKind) === kind).length;
-    const primaryActions = countActions('primary');
-    const secondaryActions = countActions('secondary');
-    const dangerActions = countActions('danger');
-    const ghostActions = countActions('ghost') + countActions('danger--ghost');
-    if (stacking && actions > 3) {
-      problems.push(`you cannot have more than three actions in this size of ${componentName}`);
-    }
-    if (actions > 4) {
-      problems.push(`you cannot have more than four actions in a ${componentName}`);
-    }
-    if (primaryActions > 1) {
-      problems.push(`you cannot have more than one 'primary' action in a ${componentName}`);
-    }
-    if (ghostActions > 1) {
-      problems.push(`you cannot have more than one 'ghost' action in a ${componentName}`);
-    }
-    if (stacking && actions > 1 && ghostActions > 0) {
-      problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
-    }
-    if (actions > primaryActions + secondaryActions + dangerActions + ghostActions) {
-      problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
-    }
-  }
-  return problems.length > 0 ? new Error(`Invalid ${location} \`${name}\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
-};
+
 ActionSet.propTypes = {
   /**
    * The action buttons to show. Each action is specified as an
@@ -179,8 +182,7 @@ ActionSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([/**@ts-ignore*/
-  ActionSet.validateActions(), index.default.arrayOf(index.default.shape({
+  actions: propsHelper.allPropTypes([index.default.arrayOf(index.default.shape({
     /**@ts-ignore*/
     ...react.Button.propTypes,
     kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -210,3 +212,4 @@ ActionSet.propTypes = {
 };
 
 exports.ActionSet = ActionSet;
+exports.validateActionSetProps = validateActionSetProps;

package/lib/components/AddSelect/AddSelectBody.js

@@ -360,6 +360,6 @@ AddSelectBody.propTypes = {
   title: index.default.string,
   useNormalizedItems: index.default.bool
 };
-AddSelectBreadcrumbs.AddSelectBreadcrumbs.displayName = componentName;
+AddSelectBody.displayName = componentName;
 
 exports.AddSelectBody = AddSelectBody;

package/lib/components/Card/Card.d.ts

@@ -3,6 +3,7 @@ interface Metadata {
     id?: string;
     icon?: () => ReactNode;
     iconDescription?: string;
+    [key: `data-${string}`]: string;
 }
 type LinkType = {
     href: string;

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -35,8 +35,8 @@ const defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     children,
     onClose,
     fixedIsVisible,
@@ -44,7 +44,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     kind = defaults.kind,
     theme = defaults.theme,
     ...rest
-  } = _ref;
+  } = props;
   const {
     winHeight,
     winWidth
@@ -84,7 +84,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const styledTune = React.useMemo(() => {
     const style = {};
     if (isBeacon || isDraggable) {
-      if (coachmark.targetRect) {
+      if (coachmark?.targetRect) {
         style.left = coachmark.targetRect.x + window.scrollX;
         style.top = coachmark.targetRect.y + window.scrollY;
       }
@@ -154,7 +154,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }, [styledTune, overlayRef]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, `${blockClass}--${kind}`, `${blockClass}__${theme}`, (isBeacon || isDraggable) && `${blockClass}--${coachmark.align}`, fixedIsVisible && `${blockClass}--is-visible`, a11yDragMode && `${blockClass}--is-dragmode`, className),
+    className: cx(blockClass, `${blockClass}--${kind}`, `${blockClass}__${theme}`, (isBeacon || isDraggable) && coachmark?.align && `${blockClass}--${coachmark.align}`, fixedIsVisible && `${blockClass}--is-visible`, a11yDragMode && `${blockClass}--is-dragmode`, className),
     ref: overlayRef,
     "aria-labelledby": contentId,
     tabIndex: -1

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -41,13 +41,13 @@ exports.CoachmarkTagline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const coachmark = context.useCoachmark();
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, `${blockClass}__${theme}`, coachmark.isOpen && `${blockClass}--is-open`),
+    className: cx(blockClass, `${blockClass}__${theme}`, coachmark?.isOpen && `${blockClass}--is-open`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     // {...rest}
     className: `${blockClass}__cta`,
     type: "button"
-  }, coachmark.buttonProps), /*#__PURE__*/React.createElement("div", {
+  }, coachmark?.buttonProps), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__idea`
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
     size: 16

package/lib/components/Coachmark/utils/context.d.ts

@@ -1,2 +1,28 @@
-export const CoachmarkContext: import("react").Context<any>;
-export function useCoachmark(): any;
+/**
+ * Copyright IBM Corp. 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.
+ */
+import { PopoverAlignment } from '@carbon/react';
+import { ButtonProps } from '@carbon/react';
+interface CoachmarkContextType {
+    buttonProps: ButtonProps<React.ElementType>;
+    closeButtonProps: {
+        onClick: () => void;
+    };
+    targetRect?: DOMRect;
+    targetOffset?: {
+        x: number;
+        y: number;
+    };
+    align?: PopoverAlignment;
+    positionTune?: {
+        x: number;
+        y: number;
+    };
+    isOpen: boolean;
+}
+export declare const CoachmarkContext: import("react").Context<CoachmarkContextType | null>;
+export declare const useCoachmark: () => CoachmarkContextType | null;
+export {};

package/lib/components/Coachmark/utils/context.js

@@ -9,7 +9,7 @@
 
 var React = require('react');
 
-const CoachmarkContext = /*#__PURE__*/React.createContext();
+const CoachmarkContext = /*#__PURE__*/React.createContext(null);
 const useCoachmark = () => {
   return React.useContext(CoachmarkContext);
 };

package/lib/components/CoachmarkStack/CoachmarkStack.js

@@ -143,16 +143,15 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       mountedRef.current = false;
     };
   }, []);
-  React.useEffect(() => {
-    setTimeout(() => {
-      if (stackHomeRef.current) {
-        setParentHeight(stackHomeRef.current.clientHeight + 16);
-      }
-    }, 0);
-  }, [stackHomeRef]);
   React.useEffect(() => {
     const targetSelectedItem = selectedItemNumber - 1;
     if (!parentHeight) {
+      if (stackHomeRef.current) {
+        const height = stackHomeRef.current.clientHeight;
+        if (height > 0) {
+          setParentHeight(height);
+        }
+      }
       return;
     }
     if (stackHomeRef.current) {
@@ -160,14 +159,18 @@ exports.CoachmarkStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     if (!isOpen || targetSelectedItem < 0) {
       if (stackHomeRef.current) {
+        stackHomeRef.current.classList.remove(`${blockClass}--scaled-home`);
+        stackHomeRef.current.classList.add(`${blockClass}--unscaled-home`);
         stackHomeRef.current.focus();
       }
       return;
     }
     const targetHomeHeight = stackedCoachmarkRefs.current[targetSelectedItem].clientHeight;
     if (stackHomeRef.current) {
-      stackHomeRef.current.style.height = `${targetHomeHeight}px`;
+      stackHomeRef.current.style.height = `calc(${targetHomeHeight}px + 3rem)`;
       stackedCoachmarkRefs.current[targetSelectedItem].focus();
+      stackHomeRef.current.classList.remove(`${blockClass}--unscaled-home`);
+      stackHomeRef.current.classList.add(`${blockClass}--scaled-home`);
     }
   }, [selectedItemNumber, isOpen, parentHeight]);
   const wrappedChildren = React.Children.map(childArray, (child, idx) => {