@carbon/ibm-products 2.43.2-canary.32 → 2.43.2-canary.321

package/lib/components/Coachmark/Coachmark.js

@@ -7,27 +7,23 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
-var reactDom = require('react-dom');
-var CoachmarkOverlay = require('./CoachmarkOverlay.js');
-var context = require('./utils/context.js');
-var enums = require('./utils/enums.js');
 var hooks = require('./utils/hooks.js');
+var enums = require('./utils/enums.js');
+var context = require('./utils/context.js');
+var CoachmarkOverlay = require('./CoachmarkOverlay.js');
+var index = require('../../_virtual/index.js');
+var reactDom = require('react-dom');
+var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var lodash = require('lodash');
+var react = require('@carbon/react');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+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(settings.pkg.prefix, "--coachmark");
 var overlayBlockClass = "".concat(blockClass, "-overlay");
@@ -45,9 +41,9 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.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,
@@ -56,15 +52,14 @@ exports.Coachmark = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isStacked = overlayKind === enums.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 = React.useState(isStacked),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -84,10 +79,16 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
     targetOffset = _useState8[0],
     setTargetOffset = _useState8[1];
-  var overlayBackupRef = React.useRef();
-  var backupRef = React.useRef();
+  var overlayBackupRef = React.useRef(undefined);
+  var backupRef = React.useRef(undefined);
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
+  var portalNode = React.useRef(null);
+  var popoverRef = React.useRef(null);
+  useIsomorphicEffect.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);
   };
@@ -144,7 +145,8 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     targetRect: targetRect,
     targetOffset: targetOffset,
     align: align,
-    positionTune: positionTune
+    positionTune: positionTune,
+    isOpen: isOpen
   };
   var handleResize = lodash.throttle(function () {
     closeOverlay();
@@ -158,6 +160,19 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
+  useIsomorphicEffect.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 = _rollupPluginBabelHelpers.objectSpread2({
+        position: 'absolute'
+      }, overlayPositionStyle);
+      Object.assign(popoverRef.current.style, combinedStyle);
+    }
+  }, [popoverRef, positionTune]);
 
   // On unmount:
   // - DO NOT "Close()" the coachmark.
@@ -173,23 +188,38 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, []);
   hooks.useClickOutsideElement(_coachmarkRef, _overlayRef, overlayKind, closeOverlay);
   hooks.useWindowEvent('resize', handleResize);
-  return /*#__PURE__*/React__default["default"].createElement(context.CoachmarkContext.Provider, {
+  return /*#__PURE__*/React.createElement(context.CoachmarkContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme), className),
+  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
     ref: _coachmarkRef
-  }, rest, devtools.getDevtoolsProps(componentName)), target, isOpen && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }, rest, devtools.getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React.createElement(React.Fragment, null, target, isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(CoachmarkOverlay.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 === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React.createElement(react.Popover, {
+    highContrast: true,
+    caret: true,
+    ref: popoverRef,
+    align: align,
+    autoAlign: autoAlign,
+    open: isOpen
+  }, target, /*#__PURE__*/React.createElement(react.PopoverContent, null, isOpen && /*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
-    className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children),
-  // Default to `document.body` when `portalNode` is `null`
-  portalNode || document.body)));
+    className: cx(overlayClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+  }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? index["default"].object : index["default"].instanceOf(HTMLElement);
+var overlayRefType = typeof HTMLElement === 'undefined' ? index.default.object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index.default.instanceOf(HTMLElement);
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.Coachmark = settings.pkg.checkComponentEnabled(exports.Coachmark, componentName);
@@ -207,29 +237,34 @@ exports.Coachmark.propTypes = {
    * Applies only to Floating and Tooltip Coachmarks.
    * @see COACHMARK_ALIGNMENT
    */
-  align: index["default"].oneOf(['bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'top', 'top-left', 'top-right']),
+  align: index.default.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: index.default.bool,
   /**
    * Coachmark should use a single CoachmarkOverlayElements component as a child.
    * @see CoachmarkOverlayElements
    */
-  children: index["default"].node.isRequired,
+  children: index.default.node.isRequired,
   /**
    * Optional class name for this component.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * Function to call when the Coachmark closes.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Optional class name for the Coachmark Overlay component.
    */
-  overlayClassName: index["default"].string,
+  overlayClassName: index.default.string,
   /**
    * What kind or style of Coachmark to render.
    */
-  overlayKind: index["default"].oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: index["default"].shape({
+  overlayKind: index.default.oneOf(['tooltip', 'floating', 'stacked']),
+  overlayRef: index.default.shape({
     current: overlayRefType
   }),
   /**
@@ -242,20 +277,21 @@ exports.Coachmark.propTypes = {
    * 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: index["default"].string,
+  portalTarget: index.default.string,
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
-  positionTune: index["default"].shape({
-    x: index["default"].number,
-    y: index["default"].number
+  // @ts-ignore
+  positionTune: index.default.shape({
+    x: index.default.number,
+    y: index.default.number
   }),
   /**
    * The optional button or beacon that the user will click to show the Coachmark.
    */
-  target: index["default"].node,
+  target: index.default.node,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index.default.oneOf(['light', 'dark'])
 };

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -7,22 +7,15 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _Draggable;
 var _excluded = ["a11yKeyboardHandler", "closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
 
@@ -44,7 +37,7 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var a11yKeyboardHandler = _ref.a11yKeyboardHandler,
     _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
@@ -84,8 +77,8 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
   var handleDragStart = function handleDragStart() {
     return setIsDragging(true);
   };
-  return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, // Apply the block class to the main HTML element
+  return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, // Apply the block class to the main HTML element
     "".concat(blockClass, "__").concat(theme),
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     {
@@ -93,8 +86,7 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "".concat(overlayBlockClass, "__handle"),
     onMouseDown: handleDragStart,
@@ -102,9 +94,9 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
     // TODO: i18n
     ,
     title: "Drag Handle"
-  }, _Draggable || (_Draggable = /*#__PURE__*/React__default["default"].createElement(icons.Draggable, {
+  }, _Draggable || (_Draggable = /*#__PURE__*/React.createElement(icons.Draggable, {
     size: "16"
-  }))), showCloseButton && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }))), showCloseButton && /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
@@ -129,26 +121,26 @@ exports.CoachmarkDragbar.propTypes = {
   /**
    * Handler to manage keyboard interactions with the dragbar.
    */
-  a11yKeyboardHandler: index["default"].func.isRequired,
+  a11yKeyboardHandler: index.default.func.isRequired,
   /**
    * Tooltip text and aria label for the Close button icon.
    */
-  closeIconDescription: index["default"].string,
+  closeIconDescription: index.default.string,
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Function to call when the user clicks and drags the Coachmark.
    * For internal use only by the parent CoachmarkOverlay.
    */
-  onDrag: index["default"].func,
+  onDrag: index.default.func,
   /**
    * Show/hide the "X" close button.
    */
-  showCloseButton: index["default"].bool,
+  showCloseButton: index.default.bool,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index.default.oneOf(['light', 'dark'])
 };

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -7,22 +7,15 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _excluded = ["closeIconDescription", "onClose", "showCloseButton", "theme"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -39,7 +32,7 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkHeader = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.CoachmarkHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
     _ref$onClose = _ref.onClose,
@@ -49,13 +42,12 @@ exports.CoachmarkHeader = /*#__PURE__*/React__default["default"].forwardRef(func
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("header", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme)),
+  return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, "".concat(blockClass, "__").concat(theme)),
     ref: ref
-    // role="main"
-  }, devtools.getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, devtools.getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayBlockClass, "--close-btn-container")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
@@ -80,17 +72,17 @@ exports.CoachmarkHeader.propTypes = {
   /**
    * Tooltip text and aria label for the Close button icon.
    */
-  closeIconDescription: index["default"].string,
+  closeIconDescription: index.default.string,
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Show/hide the "X" close button.
    */
-  showCloseButton: index["default"].bool,
+  showCloseButton: index.default.bool,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index.default.oneOf(['light', 'dark'])
 };

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -7,12 +7,10 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
@@ -21,11 +19,7 @@ var CoachmarkHeader = require('./CoachmarkHeader.js');
 var constants = require('./utils/constants.js');
 var context = require('./utils/context.js');
 var enums = require('./utils/enums.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
 
@@ -64,7 +58,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var coachmark = context.useCoachmark();
   var isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
   var isDraggable = kind === enums.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;
@@ -90,26 +84,27 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.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 = React.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 = constants.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 = constants.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;
@@ -147,14 +142,23 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overlay.style.top = "".concat(targetY, "px");
     overlay.style.bottom = 'auto';
   }
-  var contentId = uuidv4["default"]();
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](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),
+  var contentId = uuidv4.default();
+  useIsomorphicEffect.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.createElement("div", _rollupPluginBabelHelpers.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
-  }, devtools.getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React__default["default"].createElement(CoachmarkDragbar.CoachmarkDragbar, {
+  }, devtools.getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React.createElement(CoachmarkDragbar.CoachmarkDragbar, {
     a11yKeyboardHandler: handleKeyPress,
     onBlur: function onBlur() {
       return setA11yDragMode(false);
@@ -162,19 +166,17 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onDrag: handleDrag,
     theme: theme,
     onClose: onClose
-  }) : /*#__PURE__*/React__default["default"].createElement(CoachmarkHeader.CoachmarkHeader, {
+  }) : /*#__PURE__*/React.createElement(CoachmarkHeader.CoachmarkHeader, {
     onClose: onClose
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body"),
     ref: ref,
     id: contentId
-  }, React__default["default"].Children.map(children, function (child) {
-    return /*#__PURE__*/React__default["default"].cloneElement(child, {
+  }, React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.cloneElement(child, {
       isVisible: isVisible
     });
-  })), isBeacon && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(blockClass, "__caret")
-  }));
+  })));
 });
 function getWindowDimensions() {
   var _window = window,
@@ -217,26 +219,26 @@ exports.CoachmarkOverlay.propTypes = {
    * The CoachmarkOverlayElements child components.
    * Validation is handled in the parent Coachmark component.
    */
-  children: index["default"].node.isRequired,
+  children: index.default.node.isRequired,
   /**
    * Optional class name for this component.
    */
-  className: index["default"].string,
+  className: index.default.string,
   /**
    * The visibility of CoachmarkOverlay is
    * managed in the parent Coachmark component.
    */
-  fixedIsVisible: index["default"].bool.isRequired,
+  fixedIsVisible: index.default.bool.isRequired,
   /**
    * What kind or style of Coachmark to render.
    */
-  kind: index["default"].oneOf(Object.values(enums.COACHMARK_OVERLAY_KIND)),
+  kind: index.default.oneOf(Object.values(enums.COACHMARK_OVERLAY_KIND)),
   /**
    * Function to call when the Coachmark closes.
    */
-  onClose: index["default"].func.isRequired,
+  onClose: index.default.func.isRequired,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark'])
+  theme: index.default.oneOf(['light', 'dark'])
 };

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -7,11 +7,9 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var index = require('../../node_modules/prop-types/index.js');
+var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
@@ -19,11 +17,6 @@ var context = require('./utils/context.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 var _Idea;
 var _excluded = ["closeIconDescription", "onClose", "theme", "title"];
 
@@ -39,7 +32,7 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkTagline = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+exports.CoachmarkTagline = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
     _ref$onClose = _ref.onClose,
@@ -49,20 +42,20 @@ exports.CoachmarkTagline = /*#__PURE__*/React__default["default"].forwardRef(fun
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var coachmark = context.useCoachmark();
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, "".concat(blockClass, "__").concat(theme), coachmark.isOpen && "".concat(blockClass, "--is-open")),
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), coachmark.isOpen && "".concat(blockClass, "--is-open")),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     // {...rest}
     className: "".concat(blockClass, "__cta"),
     type: "button"
-  }, coachmark.buttonProps), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, coachmark.buttonProps), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__idea")
-  }, _Idea || (_Idea = /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
+  }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
     size: 16
-  }))), /*#__PURE__*/React__default["default"].createElement("div", null, title)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "--close-btn-container")
-  }, /*#__PURE__*/React__default["default"].createElement(react.Button, {
+  }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
@@ -87,17 +80,17 @@ exports.CoachmarkTagline.propTypes = {
   /**
    * Tooltip text and aria label for the Close button icon.
    */
-  closeIconDescription: index["default"].string,
+  closeIconDescription: index.default.string,
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: index["default"].func,
+  onClose: index.default.func,
   /**
    * Determines the theme of the component.
    */
-  theme: index["default"].oneOf(['light', 'dark']),
+  theme: index.default.oneOf(['light', 'dark']),
   /**
    * The title of the tagline.
    */
-  title: index["default"].string.isRequired
+  title: index.default.string.isRequired
 };