@carbon/ibm-products 2.43.2-canary.33 → 2.43.2-canary.330

package/es/components/Carousel/Carousel.js

@@ -7,11 +7,12 @@
 
 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';
 import { pkg } from '../../settings.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -54,6 +55,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var carouselRef = useRef(null);
   var scrollRef = useRef(null);
+  var leftFadedEdgeRef = useRef(null);
+  var rightFadedEdgeRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
   var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
@@ -264,11 +267,20 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
     };
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
+  useIsomorphicEffect(function () {
+    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+    }
+  }, [leftFadedEdgeRef, leftFadedEdgeColor]);
+  useIsomorphicEffect(function () {
+    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+    }
+  }, [rightFadedEdgeRef, rightFadedEdgeColor]);
   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", {
@@ -282,15 +294,11 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       }
     }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scrolled"),
-    style: {
-      background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
-    }
+    ref: leftFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scrolled")
   }), rightFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scroll-max"),
-    style: {
-      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
-    }
+    ref: rightFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scroll-max")
   })));
 });
 Carousel.displayName = componentName;

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"];
 
@@ -45,8 +45,7 @@ var defaults = {
   enableToggle: true,
   taskLists: [],
   theme: Themes.light,
-  toggleLabel: 'Toggle',
-  toggleLabelAlign: 'top'
+  toggleLabel: 'Toggle'
 };
 
 /**
@@ -79,7 +78,7 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$toggleLabel = _ref.toggleLabel,
     toggleLabel = _ref$toggleLabel === void 0 ? defaults.toggleLabel : _ref$toggleLabel,
     _ref$toggleLabelAlign = _ref.toggleLabelAlign,
-    toggleLabelAlign = _ref$toggleLabelAlign === void 0 ? defaults.toggleLabelAlign : _ref$toggleLabelAlign,
+    toggleLabelAlign = _ref$toggleLabelAlign === void 0 ? 'top' : _ref$toggleLabelAlign,
     viewAllLabel = _ref.viewAllLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(open),

package/es/components/Checklist/ChecklistChart.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-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 { objectWithoutProperties as _objectWithoutProperties, createForOfIteratorHelper as _createForOfIteratorHelper, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useEffect } from 'react';
+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';
@@ -38,12 +38,28 @@ function (_ref, ref) {
   var numDegrees = clamp(value * 360, 0, 360);
   var circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
   var progressColor = purple50;
+  useEffect(function () {
+    var ele = document.getElementsByClassName("".concat(blockClass));
+    setTimeout(function () {
+      var _iterator = _createForOfIteratorHelper(ele),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var el = _step.value;
+          if (el instanceof HTMLElement) {
+            el.style.setProperty('background-image', "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"));
+            el.style.setProperty('border-radius', '50%');
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }, 0);
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
-    style: {
-      backgroundImage: "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"),
-      borderRadius: '50%'
-    },
     ref: ref,
     role: "img"
   }, getDevtoolsProps(componentName)));

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, objectSpread2 as _objectSpread2, extends as _extends, 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,9 @@ var defaults = {
  */
 
 var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _document$querySelect;
   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 +50,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],
@@ -75,10 +77,16 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     targetOffset = _useState8[0],
     setTargetOffset = _useState8[1];
-  var overlayBackupRef = useRef();
-  var backupRef = useRef();
+  var overlayBackupRef = useRef(undefined);
+  var backupRef = useRef(undefined);
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = useRef(null);
+  var popoverRef = 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);
   };
@@ -135,7 +143,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();
@@ -149,6 +158,19 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
+  useIsomorphicEffect(function () {
+    var _positionTune$y, _positionTune$x;
+    var overlayPositionStyle = {
+      top: "".concat(((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16, "px"),
+      left: "".concat(((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16, "px")
+    };
+    if (popoverRef.current && popoverRef.current.style && overlayPositionStyle) {
+      var combinedStyle = _objectSpread2({
+        position: 'absolute'
+      }, overlayPositionStyle);
+      Object.assign(popoverRef.current.style, combinedStyle);
+    }
+  }, [popoverRef, positionTune]);
 
   // On unmount:
   // - DO NOT "Close()" the coachmark.
@@ -169,18 +191,33 @@ 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,
+    ref: popoverRef,
+    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 +236,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 +279,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

@@ -6,9 +6,9 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import React__default, { forwardRef, useState, useRef, useMemo, 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';
@@ -17,6 +17,7 @@ import { CoachmarkHeader } from './CoachmarkHeader.js';
 import { getOffsetTune } from './utils/constants.js';
 import { useCoachmark } from './utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
 
@@ -55,7 +56,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;
@@ -81,26 +82,27 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
   };
-  var styledTune = {};
-  if (isBeacon || isDraggable) {
-    if (coachmark.targetRect) {
-      styledTune.left = coachmark.targetRect.x + window.scrollX;
-      styledTune.top = coachmark.targetRect.y + window.scrollY;
-    }
-    if (styledTune.left && styledTune.top) {
-      if (isBeacon) {
-        // Compensate for radius of beacon
-        styledTune.left += 16;
-        styledTune.top += 16;
+  var styledTune = useMemo(function () {
+    var style = {};
+    if (isBeacon || isDraggable) {
+      if (coachmark.targetRect) {
+        style.left = coachmark.targetRect.x + window.scrollX;
+        style.top = coachmark.targetRect.y + window.scrollY;
       }
-      if (isDraggable) {
-        // Compensate for width and height of target element
-        var offsetTune = getOffsetTune(coachmark, kind);
-        styledTune.left += offsetTune.left;
-        styledTune.top += offsetTune.top;
+      if (style.left && style.top) {
+        if (isBeacon) {
+          style.left = style.left + 16;
+          style.top = style.top + 16;
+        }
+        if (isDraggable) {
+          var offsetTune = getOffsetTune(coachmark, kind);
+          style.left = style.left + offsetTune.left;
+          style.top = style.top + offsetTune.top;
+        }
       }
     }
-  }
+    return style;
+  }, [isBeacon, isDraggable, coachmark, kind]);
   function handleDragBounds(x, y) {
     var xRes = x;
     var yRes = y;
@@ -139,10 +141,19 @@ var CoachmarkOverlay = /*#__PURE__*/forwardRef(function (_ref, ref) {
     overlay.style.bottom = 'auto';
   }
   var contentId = uuidv4();
+  useIsomorphicEffect(function () {
+    if (overlayRef.current) {
+      var _overlayRef$current;
+      var currentStyle = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.style;
+      Object.keys(styledTune).forEach(function (key) {
+        var value = styledTune[key];
+        currentStyle.setProperty(key, "".concat(value, "px"));
+      });
+    }
+  }, [styledTune, overlayRef]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--").concat(kind), "".concat(blockClass, "__").concat(theme), (isBeacon || isDraggable) && "".concat(blockClass, "--").concat(coachmark.align), fixedIsVisible && "".concat(blockClass, "--is-visible"), a11yDragMode && "".concat(blockClass, "--is-dragmode"), className),
     ref: overlayRef,
-    style: styledTune,
     "aria-labelledby": contentId,
     tabIndex: -1
   }, getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React__default.createElement(CoachmarkDragbar, {
@@ -163,9 +174,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.