@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -17,19 +17,18 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _Draggable;
-var _excluded = ["a11yKeyboardHandler", "closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-dragbar");
-var overlayBlockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkDragbar';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--coachmark-dragbar`;
+const overlayBlockClass = `${settings.pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkDragbar';
+const defaults = {
   closeIconDescription: 'Close',
-  onDrag: function onDrag() {},
-  onClose: function onClose() {},
+  onDrag: () => {},
+  onClose: () => {},
   showCloseButton: true,
   theme: 'light'
 };
@@ -37,49 +36,40 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-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,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    _ref$onDrag = _ref.onDrag,
-    onDrag = _ref$onDrag === void 0 ? defaults.onDrag : _ref$onDrag,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? defaults.showCloseButton : _ref$showCloseButton,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  React.useEffect(function () {
-    var handleDragStop = function handleDragStop() {
-      return setIsDragging(false);
-    };
+exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    a11yKeyboardHandler,
+    closeIconDescription = defaults.closeIconDescription,
+    onClose = defaults.onClose,
+    onDrag = defaults.onDrag,
+    showCloseButton = defaults.showCloseButton,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  const [isDragging, setIsDragging] = React.useState(false);
+  React.useEffect(() => {
+    const handleDragStop = () => setIsDragging(false);
     window.addEventListener('mouseup', handleDragStop);
-    return function () {
+    return () => {
       window.removeEventListener('mouseup', handleDragStop);
     };
   }, []);
-  React.useEffect(function () {
-    var handleDrag = function handleDrag(event) {
+  React.useEffect(() => {
+    const handleDrag = event => {
       onDrag(event.movementX, event.movementY);
     };
     if (isDragging) {
       window.addEventListener('mousemove', handleDrag);
     }
-    return function () {
+    return () => {
       window.removeEventListener('mousemove', handleDrag);
     };
   }, [isDragging, onDrag]);
-  var handleDragStart = function handleDragStart() {
-    return setIsDragging(true);
-  };
+  const handleDragStart = () => setIsDragging(true);
   return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
-    "".concat(blockClass, "__").concat(theme),
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    `${blockClass}__${theme}`,
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
     {
       // switched classes dependant on props or state
@@ -88,7 +78,7 @@ exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(overlayBlockClass, "__handle"),
+    className: `${overlayBlockClass}__handle`,
     onMouseDown: handleDragStart,
     onKeyDown: a11yKeyboardHandler
     // TODO: i18n
@@ -102,7 +92,7 @@ exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     renderIcon: icons.Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(overlayBlockClass, "--close-btn"),
+    className: `${overlayBlockClass}--close-btn`,
     onClick: onClose
   }));
 });

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -16,15 +16,13 @@ var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["closeIconDescription", "onClose", "showCloseButton", "theme"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-header");
-var overlayBlockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkHeader';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--coachmark-header`;
+const overlayBlockClass = `${settings.pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkHeader';
+const defaults = {
   closeIconDescription: 'Close',
-  onClose: function onClose() {},
+  onClose: () => {},
   showCloseButton: true,
   theme: 'light'
 };
@@ -32,28 +30,27 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-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,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? defaults.showCloseButton : _ref$showCloseButton,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.CoachmarkHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    closeIconDescription = defaults.closeIconDescription,
+    onClose = defaults.onClose,
+    showCloseButton = defaults.showCloseButton,
+    theme = defaults.theme,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, "".concat(blockClass, "__").concat(theme)),
+    className: cx(blockClass, `${blockClass}__${theme}`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(overlayBlockClass, "--close-btn-container")
+    className: `${overlayBlockClass}--close-btn-container`
   }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(overlayBlockClass, "--close-btn"),
+    className: `${overlayBlockClass}--close-btn`,
     onClick: onClose
   })));
 });

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -21,15 +21,13 @@ var context = require('./utils/context.js');
 var enums = require('./utils/enums.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkOverlay';
+const blockClass = `${settings.pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkOverlay';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-var defaults = {
+const defaults = {
   kind: enums.COACHMARK_OVERLAY_KIND.FLOATING,
   theme: 'light'
 };
@@ -37,38 +35,36 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    onClose = _ref.onClose,
-    fixedIsVisible = _ref.fixedIsVisible,
-    className = _ref.className,
-    _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useWindowDimensions = useWindowDimensions(),
-    winHeight = _useWindowDimensions.winHeight,
-    winWidth = _useWindowDimensions.winWidth;
-  var _useState = React.useState(false),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    a11yDragMode = _useState2[0],
-    setA11yDragMode = _useState2[1];
-  var overlayRef = React.useRef(null);
-  var coachmark = context.useCoachmark();
-  var isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
-  var isDraggable = kind === enums.COACHMARK_OVERLAY_KIND.FLOATING;
-  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;
+exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    onClose,
+    fixedIsVisible,
+    className,
+    kind = defaults.kind,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  const {
+    winHeight,
+    winWidth
+  } = useWindowDimensions();
+  const [a11yDragMode, setA11yDragMode] = React.useState(false);
+  const overlayRef = React.useRef(null);
+  const coachmark = context.useCoachmark();
+  const isBeacon = kind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
+  const isDraggable = kind === enums.COACHMARK_OVERLAY_KIND.FLOATING;
+  const isVisible = className?.includes('is-visible');
+  const handleKeyPress = event => {
+    const {
+      shiftKey,
+      key
+    } = event;
     /* istanbul ignore next */
     if (key === 'Enter' || key === ' ') {
-      setA11yDragMode(function (prevVal) {
-        return !prevVal;
-      });
+      setA11yDragMode(prevVal => !prevVal);
     } else if (a11yDragMode) {
-      var distanceToMove = shiftKey ? 128 : 32;
+      const distanceToMove = shiftKey ? 128 : 32;
       switch (key) {
         case 'ArrowLeft':
           handleDrag(distanceToMove * -1, 0);
@@ -85,8 +81,8 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   };
-  var styledTune = React.useMemo(function () {
-    var style = {};
+  const styledTune = React.useMemo(() => {
+    const style = {};
     if (isBeacon || isDraggable) {
       if (coachmark.targetRect) {
         style.left = coachmark.targetRect.x + window.scrollX;
@@ -98,7 +94,7 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           style.top = style.top + 16;
         }
         if (isDraggable) {
-          var offsetTune = constants.getOffsetTune(coachmark, kind);
+          const offsetTune = constants.getOffsetTune(coachmark, kind);
           style.left = style.left + offsetTune.left;
           style.top = style.top + offsetTune.top;
         }
@@ -109,10 +105,10 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   /* istanbul ignore next */
   function handleDragBounds(x, y) {
-    var xRes = x;
-    var yRes = y;
-    var xMax = winWidth - 288;
-    var yMax = winHeight - 150;
+    let xRes = x;
+    let yRes = y;
+    const xMax = winWidth - 288;
+    const yMax = winHeight - 150;
     if (xRes < 0) {
       xRes = 0;
     } else if (xRes > xMax) {
@@ -129,81 +125,76 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }
   function handleDrag(movementX, movementY) {
-    var overlay = overlayRef.current;
+    const overlay = overlayRef.current;
     if (!overlay) {
       return;
     }
-    var _overlay$getBoundingC = overlay.getBoundingClientRect(),
-      x = _overlay$getBoundingC.x,
-      y = _overlay$getBoundingC.y;
-    var _handleDragBounds = handleDragBounds(x + movementX, y + movementY),
-      targetX = _handleDragBounds.targetX,
-      targetY = _handleDragBounds.targetY;
+    const {
+      x,
+      y
+    } = overlay.getBoundingClientRect();
+    const {
+      targetX,
+      targetY
+    } = handleDragBounds(x + movementX, y + movementY);
     overlay.style.transform = 'none';
     overlay.style.position = 'fixed';
-    overlay.style.left = "".concat(targetX, "px");
-    overlay.style.top = "".concat(targetY, "px");
+    overlay.style.left = `${targetX}px`;
+    overlay.style.top = `${targetY}px`;
     overlay.style.bottom = 'auto';
   }
-  var contentId = uuidv4.default();
-  useIsomorphicEffect.useIsomorphicEffect(function () {
+  const contentId = uuidv4.default();
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     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"));
+      const currentStyle = overlayRef.current?.style;
+      Object.keys(styledTune).forEach(key => {
+        const value = styledTune[key];
+        currentStyle.setProperty(key, `${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),
+    className: cx(blockClass, `${blockClass}--${kind}`, `${blockClass}__${theme}`, (isBeacon || isDraggable) && `${blockClass}--${coachmark.align}`, fixedIsVisible && `${blockClass}--is-visible`, a11yDragMode && `${blockClass}--is-dragmode`, className),
     ref: overlayRef,
     "aria-labelledby": contentId,
     tabIndex: -1
   }, devtools.getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React.createElement(CoachmarkDragbar.CoachmarkDragbar, {
     a11yKeyboardHandler: handleKeyPress,
-    onBlur: function onBlur() {
-      return setA11yDragMode(false);
-    },
+    onBlur: () => setA11yDragMode(false),
     onDrag: handleDrag,
     theme: theme,
     onClose: onClose
   }) : /*#__PURE__*/React.createElement(CoachmarkHeader.CoachmarkHeader, {
     onClose: onClose
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__body"),
+    className: `${blockClass}__body`,
     ref: ref,
     id: contentId
-  }, React.Children.map(children, function (child) {
+  }, React.Children.map(children, child => {
     return /*#__PURE__*/React.cloneElement(child, {
-      isVisible: isVisible
+      isVisible
     });
   })));
 });
 function getWindowDimensions() {
-  var _window = window,
-    winWidth = _window.innerWidth,
-    winHeight = _window.innerHeight;
+  const {
+    innerWidth: winWidth,
+    innerHeight: winHeight
+  } = window;
   return {
-    winWidth: winWidth,
-    winHeight: winHeight
+    winWidth,
+    winHeight
   };
 }
-var useWindowDimensions = function useWindowDimensions() {
-  var _useState3 = React.useState(getWindowDimensions()),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    windowDimensions = _useState4[0],
-    setWindowDimensions = _useState4[1];
-  React.useEffect(function () {
+const useWindowDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());
+  React.useEffect(() => {
     /* istanbul ignore next */
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
     window.addEventListener('resize', handleResize);
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
   return windowDimensions;
 };

package/lib/components/Coachmark/CoachmarkTagline.js

@@ -18,50 +18,48 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _Idea;
-var _excluded = ["closeIconDescription", "onClose", "theme", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-tagline");
-var componentName = 'CoachmarkTagline';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--coachmark-tagline`;
+const componentName = 'CoachmarkTagline';
+const defaults = {
   closeIconDescription: 'Close',
-  onClose: function onClose() {},
+  onClose: () => {},
   theme: 'light'
 };
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-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,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var coachmark = context.useCoachmark();
+exports.CoachmarkTagline = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    closeIconDescription = defaults.closeIconDescription,
+    onClose = defaults.onClose,
+    theme = defaults.theme,
+    title,
+    ...rest
+  } = _ref;
+  const coachmark = context.useCoachmark();
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), coachmark.isOpen && "".concat(blockClass, "--is-open")),
+    className: cx(blockClass, `${blockClass}__${theme}`, coachmark.isOpen && `${blockClass}--is-open`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     // {...rest}
-    className: "".concat(blockClass, "__cta"),
+    className: `${blockClass}__cta`,
     type: "button"
   }, coachmark.buttonProps), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__idea")
+    className: `${blockClass}__idea`
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
     size: 16
   }))), /*#__PURE__*/React.createElement("div", null, title)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "--close-btn-container")
+    className: `${blockClass}--close-btn-container`
   }, /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: icons.Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(blockClass, "--close-btn"),
+    className: `${blockClass}--close-btn`,
     onClick: onClose
   })));
 });

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

@@ -17,7 +17,7 @@ var enums = require('./enums.js');
  * @returns {object} {top:number, left:number}
  */
 
-var getOffsetTune = function getOffsetTune(coachmark, kind) {
+const getOffsetTune = (coachmark, kind) => {
   // for future reference
   // const coachmarkTarget = {
   //   x: coachmark.targetOffset.x,
@@ -26,12 +26,13 @@ var getOffsetTune = function getOffsetTune(coachmark, kind) {
   //   height: coachmark.targetRect.height,
   // };
 
-  var _coachmark$targetRect = coachmark.targetRect,
-    width = _coachmark$targetRect.width,
-    height = _coachmark$targetRect.height;
-  var distanceOffset = 24; // see also _coachmark-overlay.scss > $distance-offset
-  var top = 0;
-  var left = 0;
+  const {
+    width,
+    height
+  } = coachmark.targetRect;
+  const distanceOffset = 24; // see also _coachmark-overlay.scss > $distance-offset
+  let top = 0;
+  let left = 0;
   if (kind !== enums.COACHMARK_OVERLAY_KIND.TOOLTIP) {
     switch (coachmark.align) {
       case enums.COACHMARK_ALIGNMENT.TOP:
@@ -79,8 +80,8 @@ var getOffsetTune = function getOffsetTune(coachmark, kind) {
     }
   }
   return {
-    top: top,
-    left: left
+    top,
+    left
   };
 };
 

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

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

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

@@ -18,7 +18,7 @@
  * @param FIXED is fixed to the bottom-right of the viewport.
  * @param STACKED is fixed to the bottom-right of the viewport, includes links to show more, stackable Coachmarks if included.
  */
-var COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
+let COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
   COACHMARK_OVERLAY_KIND["TOOLTIP"] = "tooltip";
   COACHMARK_OVERLAY_KIND["FLOATING"] = "floating";
   COACHMARK_OVERLAY_KIND["FIXED"] = "fixed";
@@ -29,7 +29,7 @@ var COACHMARK_OVERLAY_KIND = /*#__PURE__*/function (COACHMARK_OVERLAY_KIND) {
  * Where to render the Coachmark relative to its target.
  * Applies only to Floating and Tooltip Coachmarks.
  */
-var COACHMARK_ALIGNMENT = /*#__PURE__*/function (COACHMARK_ALIGNMENT) {
+let COACHMARK_ALIGNMENT = /*#__PURE__*/function (COACHMARK_ALIGNMENT) {
   COACHMARK_ALIGNMENT["BOTTOM"] = "bottom";
   COACHMARK_ALIGNMENT["BOTTOM_LEFT"] = "bottom-left";
   COACHMARK_ALIGNMENT["BOTTOM_RIGHT"] = "bottom-right";

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

@@ -19,15 +19,15 @@ var enums = require('./enums.js');
  */
 
 function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback) {
-  var cb = React.useRef(undefined);
-  var isTooltip = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
-  React.useLayoutEffect(function () {
+  const cb = React.useRef(undefined);
+  const isTooltip = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
+  React.useLayoutEffect(() => {
     cb.current = callback;
   }, [callback]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     function handleClickOutside(event) {
-      var isOverlayOutside = overlayRef.current && !overlayRef.current.contains(event.target);
-      var isOutsideCoachmark = coachmarkRef.current && !coachmarkRef.current.contains(event.target);
+      const isOverlayOutside = overlayRef.current && !overlayRef.current.contains(event.target);
+      const isOutsideCoachmark = coachmarkRef.current && !coachmarkRef.current.contains(event.target);
       if (isOverlayOutside && isOutsideCoachmark) {
         callCallback();
       }
@@ -38,24 +38,24 @@ function useClickOutsideElement(coachmarkRef, overlayRef, overlayKind, callback)
       }
     }
     document.addEventListener('mousedown', handleClickOutside);
-    return function () {
+    return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [coachmarkRef, overlayRef, isTooltip]);
 }
-var useWindowEvent = function useWindowEvent(eventName, callback) {
-  var savedCallback = React.useRef(null);
-  React.useEffect(function () {
+const useWindowEvent = (eventName, callback) => {
+  const savedCallback = React.useRef(null);
+  React.useEffect(() => {
     savedCallback.current = callback;
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     function handler(event) {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     }
     window.addEventListener(eventName, handler);
-    return function () {
+    return () => {
       window.removeEventListener(eventName, handler);
     };
   }, [eventName]);