@carbon/ibm-products 2.43.2-canary.3 → 2.43.2-canary.300

package/es/components/Card/CardHeader.d.ts

@@ -1,51 +1,69 @@
-export function CardHeader({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: {
-    actions: any;
-    noActionIcons: any;
-    onPrimaryButtonClick: any;
-    onSecondaryButtonClick: any;
-    primaryButtonIcon: any;
-    primaryButtonPlacement: any;
-    primaryButtonText: any;
-    primaryButtonDisabled: any;
-    description: any;
-    hasActions?: boolean | undefined;
-    inClickableCard: any;
-    label: any;
-    secondaryButtonDisabled: any;
-    secondaryButtonHref: any;
-    secondaryButtonIcon: any;
-    secondaryButtonPlacement: any;
-    secondaryButtonText: any;
-    slug: any;
-    title: any;
-    titleSize?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace CardHeader {
-    export namespace propTypes {
-        let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
-        let description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        let hasActions: PropTypes.Requireable<boolean>;
-        let inClickableCard: PropTypes.Requireable<boolean>;
-        let label: PropTypes.Requireable<string>;
-        let noActionIcons: PropTypes.Requireable<boolean>;
-        let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
-        let primaryButtonDisabled: PropTypes.Requireable<boolean>;
-        let primaryButtonIcon: PropTypes.Requireable<object>;
-        let primaryButtonPlacement: PropTypes.Requireable<string>;
-        let primaryButtonText: PropTypes.Requireable<string>;
-        let secondaryButtonDisabled: PropTypes.Requireable<boolean>;
-        let secondaryButtonHref: PropTypes.Requireable<string>;
-        let secondaryButtonIcon: PropTypes.Requireable<object>;
-        let secondaryButtonKind: PropTypes.Requireable<string>;
-        let secondaryButtonPlacement: PropTypes.Requireable<string>;
-        let secondaryButtonText: PropTypes.Requireable<string>;
-        let slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        let title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        let titleSize: PropTypes.Requireable<string>;
-    }
-    export { componentName as displayName };
-}
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
-declare const componentName: "CardHeader";
+interface CardHeaderProps {
+    actions?: ReactNode[] | ReactNode;
+    description?: ReactNode;
+    hasActions?: boolean;
+    /**
+     * is the host card clickable
+     */
+    inClickableCard?: boolean;
+    label?: ReactNode;
+    noActionIcons?: boolean;
+    onPrimaryButtonClick?: () => void;
+    onSecondaryButtonClick?: () => void;
+    primaryButtonDisabled?: boolean;
+    primaryButtonIcon?: React.ElementType;
+    primaryButtonPlacement?: 'top' | 'bottom';
+    primaryButtonText?: string;
+    secondaryButtonDisabled?: boolean;
+    secondaryButtonHref?: string;
+    secondaryButtonIcon?: React.ElementType;
+    secondaryButtonKind?: 'secondary' | 'ghost';
+    secondaryButtonPlacement?: 'top' | 'bottom';
+    secondaryButtonText?: string;
+    /**
+     * **Experimental:** For all cases a `Slug` component can be provided.
+     * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     */
+    slug?: ReactNode;
+    title?: ReactNode;
+    titleSize?: 'default' | 'large';
+}
+export declare const CardHeader: {
+    ({ actions, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    /**@ts-ignore */
+    propTypes: {
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        hasActions: PropTypes.Requireable<boolean>;
+        /**
+         * is the host card clickable
+         */
+        inClickableCard: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        noActionIcons: PropTypes.Requireable<boolean>;
+        onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onSecondaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        primaryButtonDisabled: PropTypes.Requireable<boolean>;
+        primaryButtonIcon: PropTypes.Requireable<object>;
+        primaryButtonPlacement: PropTypes.Requireable<string>;
+        primaryButtonText: PropTypes.Requireable<string>;
+        secondaryButtonDisabled: PropTypes.Requireable<boolean>;
+        secondaryButtonHref: PropTypes.Requireable<string>;
+        secondaryButtonIcon: PropTypes.Requireable<object>;
+        secondaryButtonKind: PropTypes.Requireable<string>;
+        secondaryButtonPlacement: PropTypes.Requireable<string>;
+        secondaryButtonText: PropTypes.Requireable<string>;
+        /**
+         * **Experimental:** For all cases a `Slug` component can be provided.
+         * Clickable tiles only accept a boolean value of true and display a hollow slug.
+         */
+        slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        titleSize: PropTypes.Requireable<string>;
+    };
+    /**@ts-ignore */
+    displayName: string;
+};
 export {};

package/es/components/Card/CardHeader.js

@@ -8,7 +8,7 @@
 import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
 import { usePrefix, Button } from '@carbon/react';
 
@@ -40,7 +40,7 @@ var CardHeader = function CardHeader(_ref) {
     slug = _ref.slug,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
-    titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
+    titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize;
   var carbonPrefix = usePrefix();
   var blockClass = "".concat(pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
@@ -63,7 +63,7 @@ var CardHeader = function CardHeader(_ref) {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
   })));
-  var normalizedSlug;
+  var normalizedSlug = null;
   if (slug) {
     if (inClickableCard || typeof slug === 'boolean') {
       normalizedSlug = hollowSlugIcon;
@@ -104,6 +104,7 @@ var CardHeader = function CardHeader(_ref) {
     disabled: primaryButtonDisabled
   }, primaryButtonText)), normalizedSlug));
 };
+/**@ts-ignore */
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
@@ -134,6 +135,7 @@ CardHeader.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   titleSize: PropTypes.oneOf(['default', 'large'])
 };
+/**@ts-ignore */
 CardHeader.displayName = componentName;
 
 export { CardHeader };

package/es/components/Carousel/Carousel.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import { CarouselItem } from './CarouselItem.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -267,8 +267,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
-    ref: carouselRef,
-    role: "main"
+    ref: carouselRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__elements-container"))
   }, /*#__PURE__*/React__default.createElement("div", {

package/es/components/Carousel/CarouselItem.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/Carousel/index.d.ts

@@ -1,2 +1,9 @@
-export { Carousel } from "./Carousel";
-export { CarouselItem } from "./CarouselItem";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { Carousel } from './Carousel';
+export { CarouselItem } from './CarouselItem';
+export type { CarouselProps } from './Carousel';

package/es/components/Cascade/Cascade.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-interface CascadeProps {
+export interface CascadeProps {
     children: ReactNode;
     /**
      * Specify an optional className to be applied to
@@ -25,4 +25,3 @@ page as that will distract the user.
 export declare let Cascade: React.ForwardRefExoticComponent<CascadeProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/Cascade/Cascade.js

@@ -8,10 +8,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import { Grid } from '@carbon/react';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import PropTypes from '../../node_modules/prop-types/index.js';
-import { pkg } from '../../settings.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
 
 var _excluded = ["children", "className", "grid"];
 var blockClass = "".concat(pkg.prefix, "--cascade");

package/es/components/Cascade/index.d.ts

@@ -1 +1,2 @@
-export { Cascade } from "./Cascade";
+export { Cascade } from './Cascade';
+export type { CascadeProps } from './Cascade';

package/es/components/Checklist/Checklist.d.ts

@@ -11,9 +11,9 @@
  *   ModifiedTabs (ModifiedTabLabelNew, ModifiedTabLabelWithClose)
  *   PageHeader (PageHeaderTitle, PageHeaderUtils)
  */
-import React, { ReactNode } from 'react';
 import { IconButton } from '@carbon/react';
 import { Kind, Theme } from './Checklist.types';
+import React, { ReactNode } from 'react';
 type Task = {
     kind: Kind;
     label: string;
@@ -23,7 +23,7 @@ type TaskList = {
     title?: string;
     tasks: Array<Task>;
 };
-interface ChecklistProps {
+export interface ChecklistProps {
     /**
      * Define both `chartLabel` and `chartValue` to show the chart and its label together.
      */

package/es/components/Checklist/Checklist.js

@@ -6,17 +6,17 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { IconButton, Button } from '@carbon/react';
+import { Themes, Kinds } from './Checklist.types.js';
 import React__default, { useState, useRef, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import { ChecklistChart } from './ChecklistChart.js';
+import { ChecklistIcon } from './ChecklistIcon.js';
+import { ChevronUp } from '@carbon/react/icons';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { pkg } from '../../settings.js';
-import { IconButton, Button } from '@carbon/react';
-import { ChevronUp } from '@carbon/react/icons';
-import { ChecklistIcon } from './ChecklistIcon.js';
-import { ChecklistChart } from './ChecklistChart.js';
-import { Themes, Kinds } from './Checklist.types.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 

package/es/components/Checklist/ChecklistChart.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import clamp from 'lodash/clamp';
 import { gray20, gray70, purple50 } from '../../node_modules/@carbon/colors/es/index.js';

package/es/components/Checklist/ChecklistIcon.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';

package/es/components/Checklist/index.d.ts

@@ -1 +1,8 @@
-export { Checklist } from "./Checklist";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { Checklist } from './Checklist';
+export type { ChecklistProps } from './Checklist';

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

@@ -5,13 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { MutableRefObject, ReactNode } from 'react';
-interface CoachmarkProps {
+export 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';
+    /**
+     * Auto aligns the coachmark based on screen boundaries
+     * Applies only to Tooltip Coachmarks.
+     */
+    autoAlign?: boolean;
     /**
      * Coachmark should use a single CoachmarkOverlayElements component as a child.
      * @see CoachmarkOverlayElements
@@ -51,7 +56,7 @@ interface CoachmarkProps {
     positionTune?: {
         x: number;
         y: number;
-    } | object;
+    };
     /**
      * The optional button or beacon that the user will click to show the Coachmark.
      */
@@ -67,4 +72,3 @@ interface CoachmarkProps {
  * user to gain understanding of the product's main value and discover new use cases.
  */
 export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
-export {};

package/es/components/Coachmark/Coachmark.js

@@ -5,20 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import cx from 'classnames';
-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';
-import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
 import { useClickOutsideElement, useWindowEvent } from './utils/hooks.js';
+import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
+import { CoachmarkContext } from './utils/context.js';
+import { CoachmarkOverlay } from './CoachmarkOverlay.js';
+import PropTypes from '../../_virtual/index.js';
+import { createPortal } from 'react-dom';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { throttle } from 'lodash';
+import { Popover, PopoverContent } from '@carbon/react';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
+
+var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme"];
 
-var _excluded = ["align", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "portalTarget", "positionTune", "target", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark");
 var overlayBlockClass = "".concat(blockClass, "-overlay");
@@ -36,9 +39,10 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
+  var _positionTune$y, _positionTune$x;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
+    autoAlign = _ref.autoAlign,
     children = _ref.children,
     className = _ref.className,
     _ref$onClose = _ref.onClose,
@@ -47,15 +51,14 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$overlayKind = _ref.overlayKind,
     overlayKind = _ref$overlayKind === void 0 ? defaults.overlayKind : _ref$overlayKind,
     overlayRef = _ref.overlayRef,
-    portalTarget = _ref.portalTarget,
     positionTune = _ref.positionTune,
+    portalTarget = _ref.portalTarget,
     target = _ref.target,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
-  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
   var _useState = useState(isStacked),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -79,6 +82,11 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var backupRef = useRef();
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = useRef(null);
+  useIsomorphicEffect(function () {
+    var _document$querySelect, _document, _document2, _document3;
+    portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
+  }, [portalTarget]);
   var closeOverlay = function closeOverlay() {
     setIsOpen(false);
   };
@@ -120,6 +128,10 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setShouldResetPosition(true);
     }
   };
+  var overlayPositionStyle = {
+    top: ((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16,
+    left: ((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16
+  };
   var contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
@@ -135,7 +147,8 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     targetRect: targetRect,
     targetOffset: targetOffset,
     align: align,
-    positionTune: positionTune
+    positionTune: positionTune,
+    isOpen: isOpen
   };
   var handleResize = throttle(function () {
     closeOverlay();
@@ -169,18 +182,35 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }, rest, getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
     className: cx(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+  }, children), // Default to `document.body` when `portalNode` is `null`
+  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React__default.createElement(Popover, {
+    highContrast: true,
+    caret: true,
+    style: _objectSpread2({
+      position: 'absolute'
+    }, overlayPositionStyle),
+    align: align,
+    autoAlign: autoAlign,
+    open: isOpen
+  }, target, /*#__PURE__*/React__default.createElement(PopoverContent, null, isOpen && /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+    ref: _overlayRef,
+    fixedIsVisible: false,
+    kind: overlayKind,
+    onClose: handleClose,
+    theme: theme,
+    className: cx(overlayClassName, _defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+  }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object : PropTypes.instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+PropTypes.instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 Coachmark = pkg.checkComponentEnabled(Coachmark, componentName);
@@ -199,6 +229,11 @@ Coachmark.propTypes = {
    * @see COACHMARK_ALIGNMENT
    */
   align: PropTypes.oneOf(['bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'top', 'top-left', 'top-right']),
+  /**
+   * Auto aligns the coachmark based on screen boundaries
+   * Applies only to Tooltip Coachmarks.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Coachmark should use a single CoachmarkOverlayElements component as a child.
    * @see CoachmarkOverlayElements
@@ -237,6 +272,7 @@ Coachmark.propTypes = {
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
+  // @ts-ignore
   positionTune: PropTypes.shape({
     x: PropTypes.number,
     y: PropTypes.number

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Draggable, Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
@@ -84,7 +84,6 @@ var CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef(function (_ref, re
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(overlayBlockClass, "__handle"),

package/es/components/Coachmark/CoachmarkHeader.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
@@ -43,7 +43,6 @@ var CoachmarkHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "__").concat(theme)),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(overlayBlockClass, "--close-btn-container")
   }, /*#__PURE__*/React__default.createElement(Button, {

package/es/components/Coachmark/CoachmarkOverlay.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, useEffect } from 'react';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
@@ -55,7 +55,7 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var coachmark = useCoachmark();
   var isBeacon = kind === COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === COACHMARK_OVERLAY_KIND.FLOATING;
-  var isVisible = className && className.includes('is-visible');
+  var isVisible = className === null || className === void 0 ? void 0 : className.includes('is-visible');
   var handleKeyPress = function handleKeyPress(event) {
     var shiftKey = event.shiftKey,
       key = event.key;
@@ -163,9 +163,7 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default.cloneElement(child, {
       isVisible: isVisible
     });
-  })), isBeacon && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__caret")
-  }));
+  })));
 });
 function getWindowDimensions() {
   var _window = window,

package/es/components/Coachmark/CoachmarkTagline.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from '../../node_modules/prop-types/index.js';
+import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Idea, Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';

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

@@ -1,3 +1,10 @@
-export { Coachmark } from "./Coachmark";
-export { useCoachmark } from "./utils/context";
-export { BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT } from "./utils/enums";
+/**
+ * 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 { Coachmark } from './Coachmark';
+export { BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT, } from './utils/enums';
+export { useCoachmark } from './utils/context';
+export type { CoachmarkProps } from './Coachmark';

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

@@ -1,3 +1,9 @@
+/**
+ * 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.
+ */
 /**
  * Reserved for future expansion, i.e. "RING".
  */

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

@@ -7,6 +7,7 @@
 
 /* eslint-disable max-len */
 
+
 /**
  * Describes the style and behavior of a Coachmark.
  * @param TOOLTIP includes a caret pointing to the animated beacon.

package/es/components/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -4,9 +4,9 @@
  * 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';
 import { BEACON_KIND } from '../Coachmark';
-interface CoachmarkBeaconProps {
+import React from 'react';
+export interface CoachmarkBeaconProps {
     /**
      * Optional class name for this component.
      */
@@ -26,4 +26,3 @@ interface CoachmarkBeaconProps {
  * Use beacon for the target prop of a Coachmark component.
  */
 export declare let CoachmarkBeacon: React.ForwardRefExoticComponent<CoachmarkBeaconProps & React.RefAttributes<HTMLDivElement>>;
-export {};