@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/es/components/Checklist/ChecklistIcon.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { CircleDash, CheckmarkOutline, Incomplete, Warning } from '@carbon/react/icons';
+import { Themes, Kinds } from './Checklist.types.js';
 
 var _excluded = ["className", "kind", "theme"];
 
@@ -32,13 +33,17 @@ var componentName = 'ChecklistIcon';
 
 // Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var ChecklistIcon = /*#__PURE__*/React__default.forwardRef(
+/**
+ * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
+ */
+function (_ref, ref) {
   var className = _ref.className,
     kind = _ref.kind,
     _ref$theme = _ref.theme,
@@ -86,11 +91,11 @@ ChecklistIcon.propTypes = {
   /**
    * The icon to be displayed.
    */
-  kind: PropTypes.oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']),
+  kind: PropTypes.oneOf([Kinds.unchecked, Kinds.indeterminate, Kinds.checked, Kinds.disabled, Kinds.error]),
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark'])
+  theme: PropTypes.oneOf([Themes.light, Themes.dark])
 };
 
 export { ChecklistIcon };

package/es/components/Coachmark/Coachmark.d.ts

@@ -1,7 +1,70 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { MutableRefObject, ReactNode } from 'react';
+interface CoachmarkProps {
+    /**
+     * Where to render the Coachmark relative to its target.
+     * Applies only to Floating and Tooltip Coachmarks.
+     * @see COACHMARK_ALIGNMENT
+     */
+    align?: 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'top' | 'top-left' | 'top-right';
+    /**
+     * Coachmark should use a single CoachmarkOverlayElements component as a child.
+     * @see CoachmarkOverlayElements
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * Optional class name for the Coachmark Overlay component.
+     */
+    overlayClassName?: string;
+    /**
+     * What kind or style of Coachmark to render.
+     */
+    overlayKind?: 'tooltip' | 'floating' | 'stacked';
+    overlayRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * Fine tune the position of the target in pixels. Applies only to Beacons.
+     */
+    positionTune?: {
+        x: number;
+        y: number;
+    } | object;
+    /**
+     * The optional button or beacon that the user will click to show the Coachmark.
+     */
+    target: React.ReactNode;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  */
-export let Coachmark: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/Coachmark/Coachmark.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import cx from 'classnames';
-import PropTypes, { p as propTypesExports } from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../node_modules/prop-types/index.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkOverlay } from './CoachmarkOverlay.js';
 import { CoachmarkContext } from './utils/context.js';
@@ -29,7 +29,6 @@ var defaults = {
   overlayKind: 'tooltip',
   theme: 'light'
 };
-
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
@@ -177,7 +176,9 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClose: handleClose,
     theme: theme,
     className: cx(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -218,13 +219,9 @@ Coachmark.propTypes = {
    * What kind or style of Coachmark to render.
    */
   overlayKind: PropTypes.oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: PropTypes.oneOfType([
-  // Either a function
-  PropTypes.func,
-  // Or the instance of a DOM native element (see the note about SSR)
-  PropTypes.shape({
-    current: PropTypes.instanceOf(propTypesExports.Component)
-  })]),
+  overlayRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  }),
   /**
    * By default, the Coachmark will be appended to the end of `document.body`.
    * The Coachmark will remain persistent as the user navigates the app until

package/es/components/Coachmark/CoachmarkDragbar.d.ts

@@ -1,6 +1,44 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React from 'react';
+interface CoachmarkDragbarProps {
+    /**
+     * Handler to manage keyboard interactions with the dragbar.
+     */
+    a11yKeyboardHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Function to call when the user clicks and drags the Coachmark.
+     * For internal use only by the parent CoachmarkOverlay.
+     */
+    onDrag?: (movementX: number, movementY: number) => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkDragbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -31,7 +31,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -91,6 +90,9 @@ var CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     className: "".concat(overlayBlockClass, "__handle"),
     onMouseDown: handleDragStart,
     onKeyDown: a11yKeyboardHandler
+    // TODO: i18n
+    ,
+    title: "Drag Handle"
   }, _Draggable || (_Draggable = /*#__PURE__*/React__default.createElement(Draggable, {
     size: "16"
   }))), showCloseButton && /*#__PURE__*/React__default.createElement(Button, {

package/es/components/Coachmark/CoachmarkHeader.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React from 'react';
+interface CoachmarkHeaderProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/Coachmark/CoachmarkHeader.js

@@ -26,7 +26,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.

package/es/components/Coachmark/CoachmarkOverlay.d.ts

@@ -1,6 +1,46 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+import { COACHMARK_OVERLAY_KIND } from './utils/enums';
+interface CoachmarkOverlayProps {
+    /**
+     * The CoachmarkOverlayElements child components.
+     * Validation is handled in the parent Coachmark component.
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The visibility of CoachmarkOverlay is
+     * managed in the parent Coachmark component.
+     */
+    fixedIsVisible: boolean;
+    /**
+     * What kind or style of Coachmark to render.
+     */
+    kind?: COACHMARK_OVERLAY_KIND;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose: () => void;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkOverlay: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlay: React.ForwardRefExoticComponent<Omit<CoachmarkOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/Coachmark/CoachmarkOverlay.js

@@ -30,7 +30,6 @@ var defaults = {
   kind: COACHMARK_OVERLAY_KIND.FLOATING,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -52,7 +51,7 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     a11yDragMode = _useState2[0],
     setA11yDragMode = _useState2[1];
-  var overlayRef = useRef();
+  var overlayRef = useRef(null);
   var coachmark = useCoachmark();
   var isBeacon = kind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === COACHMARK_OVERLAY_KIND.FLOATING;
@@ -85,20 +84,21 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var styledTune = {};
   if (isBeacon || isDraggable) {
     if (coachmark.targetRect) {
-      styledTune = {
-        left: coachmark.targetRect.x + window.scrollX,
-        top: coachmark.targetRect.y + window.scrollY
-      };
+      styledTune.left = coachmark.targetRect.x + window.scrollX;
+      styledTune.top = coachmark.targetRect.y + window.scrollY;
     }
-    if (isBeacon) {
-      // Compensate for radius of beacon
-      styledTune.left += 16;
-      styledTune.top += 16;
-    } else if (isDraggable) {
-      // Compensate for width and height of target element
-      var offsetTune = getOffsetTune(coachmark, kind);
-      styledTune.left += offsetTune.left;
-      styledTune.top += offsetTune.top;
+    if (styledTune.left && styledTune.top) {
+      if (isBeacon) {
+        // Compensate for radius of beacon
+        styledTune.left += 16;
+        styledTune.top += 16;
+      }
+      if (isDraggable) {
+        // Compensate for width and height of target element
+        var offsetTune = getOffsetTune(coachmark, kind);
+        styledTune.left += offsetTune.left;
+        styledTune.top += offsetTune.top;
+      }
     }
   }
   function handleDragBounds(x, y) {
@@ -123,6 +123,9 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   function handleDrag(movementX, movementY) {
     var overlay = overlayRef.current;
+    if (!overlay) {
+      return;
+    }
     var _overlay$getBoundingC = overlay.getBoundingClientRect(),
       x = _overlay$getBoundingC.x,
       y = _overlay$getBoundingC.y;

package/es/components/Coachmark/CoachmarkTagline.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React from 'react';
+interface CoachmarkTaglineProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * The title of the tagline.
+     */
+    title: string;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkTagline: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkTagline: React.ForwardRefExoticComponent<CoachmarkTaglineProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/Coachmark/CoachmarkTagline.js

@@ -26,7 +26,6 @@ var defaults = {
   onClose: function onClose() {},
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.

package/es/components/Coachmark/utils/enums.d.ts

@@ -11,27 +11,27 @@ export declare enum BEACON_KIND {
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-export declare const COACHMARK_OVERLAY_KIND: {
-    TOOLTIP: string;
-    FLOATING: string;
-    FIXED: string;
-    STACKED: string;
-};
+export declare enum COACHMARK_OVERLAY_KIND {
+    TOOLTIP = "tooltip",
+    FLOATING = "floating",
+    FIXED = "fixed",
+    STACKED = "stacked"
+}
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-export declare const COACHMARK_ALIGNMENT: {
-    BOTTOM: string;
-    BOTTOM_LEFT: string;
-    BOTTOM_RIGHT: string;
-    LEFT: string;
-    LEFT_TOP: string;
-    LEFT_BOTTOM: string;
-    RIGHT: string;
-    RIGHT_TOP: string;
-    RIGHT_BOTTOM: string;
-    TOP: string;
-    TOP_LEFT: string;
-    TOP_RIGHT: string;
-};
+export declare enum COACHMARK_ALIGNMENT {
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    LEFT = "left",
+    LEFT_TOP = "left-top",
+    LEFT_BOTTOM = "left-bottom",
+    RIGHT = "right",
+    RIGHT_TOP = "right-top",
+    RIGHT_BOTTOM = "right-bottom",
+    TOP = "top",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right"
+}

package/es/components/Coachmark/utils/enums.js

@@ -14,29 +14,31 @@
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-var COACHMARK_OVERLAY_KIND = {
-  TOOLTIP: 'tooltip',
-  FLOATING: 'floating',
-  FIXED: 'fixed',
-  STACKED: 'stacked'
-};
+var COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
+  COACHMARK_OVERLAY_KIND["TOOLTIP"] = "tooltip";
+  COACHMARK_OVERLAY_KIND["FLOATING"] = "floating";
+  COACHMARK_OVERLAY_KIND["FIXED"] = "fixed";
+  COACHMARK_OVERLAY_KIND["STACKED"] = "stacked";
+  return COACHMARK_OVERLAY_KIND;
+}({});
 /**
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-var COACHMARK_ALIGNMENT = {
-  BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  LEFT: 'left',
-  LEFT_TOP: 'left-top',
-  LEFT_BOTTOM: 'left-bottom',
-  RIGHT: 'right',
-  RIGHT_TOP: 'right-top',
-  RIGHT_BOTTOM: 'right-bottom',
-  TOP: 'top',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right'
-};
+var COACHMARK_ALIGNMENT = /*#__PURE__*/function (COACHMARK_ALIGNMENT) {
+  COACHMARK_ALIGNMENT["BOTTOM"] = "bottom";
+  COACHMARK_ALIGNMENT["BOTTOM_LEFT"] = "bottom-left";
+  COACHMARK_ALIGNMENT["BOTTOM_RIGHT"] = "bottom-right";
+  COACHMARK_ALIGNMENT["LEFT"] = "left";
+  COACHMARK_ALIGNMENT["LEFT_TOP"] = "left-top";
+  COACHMARK_ALIGNMENT["LEFT_BOTTOM"] = "left-bottom";
+  COACHMARK_ALIGNMENT["RIGHT"] = "right";
+  COACHMARK_ALIGNMENT["RIGHT_TOP"] = "right-top";
+  COACHMARK_ALIGNMENT["RIGHT_BOTTOM"] = "right-bottom";
+  COACHMARK_ALIGNMENT["TOP"] = "top";
+  COACHMARK_ALIGNMENT["TOP_LEFT"] = "top-left";
+  COACHMARK_ALIGNMENT["TOP_RIGHT"] = "top-right";
+  return COACHMARK_ALIGNMENT;
+}({});
 
 export { COACHMARK_ALIGNMENT, COACHMARK_OVERLAY_KIND };

package/es/components/CoachmarkButton/CoachmarkButton.d.ts

@@ -1,5 +1,22 @@
 /**
- * Use CoachmarkButton for the target prop of a Coachmark component.
+ * Copyright IBM Corp. 2023, 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.
  */
-export let CoachmarkButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface CoachmarkButtonProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The aria label.
+     */
+    label: string;
+}
+/**
+ * Use CoachmarkButton for the target prop of a Coachmark component.
+ */
+export declare let CoachmarkButton: React.ForwardRefExoticComponent<CoachmarkButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/es/components/CoachmarkFixed/CoachmarkFixed.d.ts

@@ -1,8 +1,48 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+interface CoachmarkFixedProps {
+    /**
+     * CoachmarkFixed should use a single CoachmarkOverlayElements component as a child.
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * The tagline title which will be fixed to the bottom right of the window and will serve as the display trigger.
+     */
+    tagline: string;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Fixed coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
-export let CoachmarkFixed: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkFixed: React.ForwardRefExoticComponent<CoachmarkFixedProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -50,7 +50,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var overlayRef = useRef();
+  var overlayRef = useRef(null);
   var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -172,7 +172,9 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
     className: cx(fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag