@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Checklist/Checklist.js

@@ -20,11 +20,9 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
-var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--checklist");
-var componentName = 'Checklist';
+const blockClass = `${settings.pkg.prefix}--checklist`;
+const componentName = 'Checklist';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -38,11 +36,11 @@ var componentName = 'Checklist';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   checklistAriaLabel: 'Checklist',
   checklistToggleAriaLabel: 'Checklist toggle',
-  onClickViewAll: function onClickViewAll() {},
-  onToggle: function onToggle() {},
+  onClickViewAll: () => {},
+  onToggle: () => {},
   open: true,
   enableToggle: true,
   taskLists: [],
@@ -56,62 +54,49 @@ var defaults = {
  * an icon that defines the item's state as "not started", "in progress",
  * and "complete".
  */
-exports.Checklist = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var chartValue = _ref.chartValue,
-    chartLabel = _ref.chartLabel,
-    _ref$checklistAriaLab = _ref.checklistAriaLabel,
-    checklistAriaLabel = _ref$checklistAriaLab === void 0 ? defaults.checklistAriaLabel : _ref$checklistAriaLab,
-    _ref$checklistToggleA = _ref.checklistToggleAriaLabel,
-    checklistToggleAriaLabel = _ref$checklistToggleA === void 0 ? defaults.checklistToggleAriaLabel : _ref$checklistToggleA,
-    className = _ref.className,
-    _ref$onClickViewAll = _ref.onClickViewAll,
-    onClickViewAll = _ref$onClickViewAll === void 0 ? defaults.onClickViewAll : _ref$onClickViewAll,
-    _ref$onToggle = _ref.onToggle,
-    onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? defaults.open : _ref$open,
-    _ref$enableToggle = _ref.enableToggle,
-    enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
-    _ref$taskLists = _ref.taskLists,
-    taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    title = _ref.title,
-    _ref$toggleLabel = _ref.toggleLabel,
-    toggleLabel = _ref$toggleLabel === void 0 ? defaults.toggleLabel : _ref$toggleLabel,
-    _ref$toggleLabelAlign = _ref.toggleLabelAlign,
-    toggleLabelAlign = _ref$toggleLabelAlign === void 0 ? 'top' : _ref$toggleLabelAlign,
-    viewAllLabel = _ref.viewAllLabel,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(open),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var listContainerId = React.useRef(uuidv4.default()).current;
-  var chartLabelId = React.useRef(uuidv4.default()).current;
+exports.Checklist = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    chartValue,
+    chartLabel,
+    checklistAriaLabel = defaults.checklistAriaLabel,
+    checklistToggleAriaLabel = defaults.checklistToggleAriaLabel,
+    className,
+    onClickViewAll = defaults.onClickViewAll,
+    onToggle = defaults.onToggle,
+    open = defaults.open,
+    enableToggle = defaults.enableToggle,
+    taskLists = defaults.taskLists,
+    theme = defaults.theme,
+    title,
+    toggleLabel = defaults.toggleLabel,
+    toggleLabelAlign = 'top',
+    viewAllLabel,
+    ...rest
+  } = _ref;
+  const [isOpen, setIsOpen] = React.useState(open);
+  const listContainerId = React.useRef(uuidv4.default()).current;
+  const chartLabelId = React.useRef(uuidv4.default()).current;
 
   // Don't use this test: {chartValue && chartLabel && (render...)}.
   // If `chartValue` is 0 (zero) - a valid value - then it will render 0 and skip the remaining statement.
   // Use this test instead: {chartLabelAndValue && (render...)}.
   // The ChecklistChart component will validate `chartValue`.
-  var chartLabelAndValue = typeof chartValue === 'number' && chartLabel;
-  var handleClickToggle = function handleClickToggle() {
-    setIsOpen(function (prevOpen) {
-      return !prevOpen;
-    });
+  const chartLabelAndValue = typeof chartValue === 'number' && chartLabel;
+  const handleClickToggle = () => {
+    setIsOpen(prevOpen => !prevOpen);
   };
-  var handleClickViewAll = function handleClickViewAll() {
+  const handleClickViewAll = () => {
     onClickViewAll();
   };
 
   // If state changes, then trigger callback.
-  React.useEffect(function () {
+  React.useEffect(() => {
     onToggle(isOpen);
   }, [isOpen, onToggle]);
 
   // If the "open" prop is changed after initialization,
   // then update internal state.
-  React.useEffect(function () {
+  React.useEffect(() => {
     setIsOpen(open);
   }, [open]);
   return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({}, rest, {
@@ -119,76 +104,80 @@ exports.Checklist = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     as: "aside",
     className: cx(blockClass,
     // Apply the block class to the main HTML element
-    className, // Apply any supplied class names to the main HTML element.
+    className,
+    // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__closed"), !isOpen)),
+    {
+      [`${blockClass}__closed`]: !isOpen
+    }),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), (title || chartLabelAndValue) && /*#__PURE__*/React.createElement("header", {
-    className: "".concat(blockClass, "__header")
+    className: `${blockClass}__header`
   }, chartLabelAndValue && /*#__PURE__*/React.createElement(ChecklistChart.ChecklistChart, {
     "aria-labelledby": chartLabelId,
     theme: theme,
     value: chartValue
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__titles")
+    className: `${blockClass}__titles`
   }, title && /*#__PURE__*/React.createElement(react.Heading, {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), chartLabelAndValue && /*#__PURE__*/React.createElement("p", {
     id: chartLabelId,
-    className: "".concat(blockClass, "__chart-label")
+    className: `${blockClass}__chart-label`
   }, chartLabel)), enableToggle && /*#__PURE__*/React.createElement(react.IconButton, {
     align: toggleLabelAlign,
     "aria-controls": listContainerId,
     "aria-expanded": isOpen,
     "aria-label": checklistToggleAriaLabel,
-    className: "".concat(blockClass, "__toggle"),
+    className: `${blockClass}__toggle`,
     kind: "ghost",
     label: toggleLabel,
     onClick: handleClickToggle,
     size: "sm"
   }, /*#__PURE__*/React.createElement(icons.ChevronUp, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"))
+    className: cx(`${blockClass}__chevron`)
   }))), /*#__PURE__*/React.createElement("div", {
     id: listContainerId,
-    className: "".concat(blockClass, "__content-outer")
+    className: `${blockClass}__content-outer`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__content-inner")
+    className: `${blockClass}__content-inner`
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__body"))
-  }, taskLists.map(function (list, index) {
+    className: cx(`${blockClass}__body`)
+  }, taskLists.map((list, index) => {
     return /*#__PURE__*/React.createElement(react.Section, {
-      className: "".concat(blockClass, "__list-group"),
-      key: "".concat(list.title, "-").concat(index)
+      className: `${blockClass}__list-group`,
+      key: `${list.title}-${index}`
     }, list.title && /*#__PURE__*/React.createElement(react.Heading, {
       title: list.title,
-      className: "".concat(blockClass, "__list-title")
+      className: `${blockClass}__list-title`
     }, list.title), /*#__PURE__*/React.createElement("ol", {
-      className: "".concat(blockClass, "__list")
-    }, list.tasks.map(function (item, index) {
+      className: `${blockClass}__list`
+    }, list.tasks.map((item, index) => {
       return /*#__PURE__*/React.createElement("li", {
-        className: "".concat(blockClass, "__list-item"),
-        key: "".concat(item.label, "-").concat(index)
+        className: `${blockClass}__list-item`,
+        key: `${item.label}-${index}`
       }, /*#__PURE__*/React.createElement(ChecklistIcon.ChecklistIcon, {
         kind: item.kind,
         theme: theme
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React.createElement(react.Button, {
-        className: cx("".concat(blockClass, "__button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
-        onClick: function onClick() {
-          var _item$onClick;
-          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
+        className: cx(`${blockClass}__button`, {
+          [`${blockClass}__button--error`]: item.kind === 'error'
+        }),
+        onClick: () => {
+          item.onClick?.(item);
         },
         size: "sm",
         title: item.label
       }, /*#__PURE__*/React.createElement("div", null, item.label)) : /*#__PURE__*/React.createElement("div", {
-        className: cx("".concat(blockClass, "__label"), "".concat(blockClass, "__label--").concat(item.kind)),
+        className: cx(`${blockClass}__label`, `${blockClass}__label--${item.kind}`),
         title: item.label
       }, item.label));
     })));
   })), viewAllLabel && /*#__PURE__*/React.createElement("footer", {
-    className: "".concat(blockClass, "__footer")
+    className: `${blockClass}__footer`
   }, /*#__PURE__*/React.createElement(react.Button, {
-    className: cx("".concat(blockClass, "__button"), "".concat(blockClass, "__view-all")),
+    className: cx(`${blockClass}__button`, `${blockClass}__view-all`),
     onClick: handleClickViewAll,
     size: "sm"
   }, /*#__PURE__*/React.createElement("div", null, viewAllLabel))))));

package/lib/components/Checklist/Checklist.types.js

@@ -7,12 +7,12 @@
 
 'use strict';
 
-var Themes = /*#__PURE__*/function (Themes) {
+let Themes = /*#__PURE__*/function (Themes) {
   Themes["light"] = "light";
   Themes["dark"] = "dark";
   return Themes;
 }({});
-var Kinds = /*#__PURE__*/function (Kinds) {
+let Kinds = /*#__PURE__*/function (Kinds) {
   Kinds["unchecked"] = "unchecked";
   Kinds["indeterminate"] = "indeterminate";
   Kinds["checked"] = "checked";

package/lib/components/Checklist/ChecklistChart.js

@@ -17,46 +17,37 @@ var settings = require('../../settings.js');
 var Checklist_types = require('./Checklist.types.js');
 var clamp = require('../../global/js/utils/clamp.js');
 
-var _excluded = ["className", "value", "theme"];
-var blockClass = "".concat(settings.pkg.prefix, "--checklist__chart");
-var componentName = 'ChecklistChart';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--checklist__chart`;
+const componentName = 'ChecklistChart';
+const defaults = {
   theme: Checklist_types.Themes.light
 };
 
 /**
  * Custom chart component used within Checklist PLG component
  */
-var ChecklistChart = /*#__PURE__*/React.forwardRef(
+let ChecklistChart = /*#__PURE__*/React.forwardRef(
 /**
  * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
  */
-function (_ref, ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var numDegrees = clamp.clamp(value * 360, 0, 360);
-  var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
-  var progressColor = index.purple50;
-  React.useEffect(function () {
-    var ele = document.getElementsByClassName("".concat(blockClass));
-    setTimeout(function () {
-      var _iterator = _rollupPluginBabelHelpers.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%');
-          }
+(_ref, ref) => {
+  let {
+    className,
+    value,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  const numDegrees = clamp.clamp(value * 360, 0, 360);
+  const circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
+  const progressColor = index.purple50;
+  React.useEffect(() => {
+    const ele = document.getElementsByClassName(`${blockClass}`);
+    setTimeout(() => {
+      for (const el of ele) {
+        if (el instanceof HTMLElement) {
+          el.style.setProperty('background-image', `conic-gradient(${progressColor} ${numDegrees}deg, ${circleColor} ${numDegrees}deg 360deg)`);
+          el.style.setProperty('border-radius', '50%');
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     }, 0);
   });

package/lib/components/Checklist/ChecklistIcon.js

@@ -16,11 +16,9 @@ var settings = require('../../settings.js');
 var icons = require('@carbon/react/icons');
 var Checklist_types = require('./Checklist.types.js');
 
-var _excluded = ["className", "kind", "theme"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--checklist__icon");
-var componentName = 'ChecklistIcon';
+const blockClass = `${settings.pkg.prefix}--checklist__icon`;
+const componentName = 'ChecklistIcon';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -34,24 +32,25 @@ var componentName = 'ChecklistIcon';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   theme: Checklist_types.Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React.forwardRef(
+let ChecklistIcon = /*#__PURE__*/React.forwardRef(
 /**
  * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
  */
-function (_ref, ref) {
-  var className = _ref.className,
-    kind = _ref.kind,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var Icon;
+(_ref, ref) => {
+  let {
+    className,
+    kind,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  let Icon;
   switch (kind) {
     case 'error':
       Icon = icons.Warning;
@@ -68,7 +67,7 @@ function (_ref, ref) {
       break;
   }
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--").concat(kind), "".concat(blockClass, "__").concat(theme)),
+    className: cx(blockClass, className, `${blockClass}--${kind}`, `${blockClass}__${theme}`),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Icon, {
     size: 16

package/lib/components/Coachmark/Coachmark.js

@@ -22,15 +22,13 @@ var throttle = require('../../global/js/utils/throttle.js');
 var react = require('@carbon/react');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["align", "autoAlign", "children", "className", "onClose", "overlayClassName", "overlayKind", "overlayRef", "positionTune", "portalTarget", "target", "theme", "isOpenByDefault"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark");
-var overlayBlockClass = "".concat(blockClass, "-overlay");
-var componentName = 'Coachmark';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--coachmark`;
+const overlayBlockClass = `${blockClass}-overlay`;
+const componentName = 'Coachmark';
+const defaults = {
   align: 'bottom',
-  onClose: function onClose() {},
+  onClose: () => {},
   overlayKind: 'tooltip',
   theme: 'light',
   isOpenByDefault: false
@@ -41,61 +39,46 @@ var defaults = {
  * user to gain understanding of the product's main value and discover new use cases.
  */
 
-exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  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,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    overlayClassName = _ref.overlayClassName,
-    _ref$overlayKind = _ref.overlayKind,
-    overlayKind = _ref$overlayKind === void 0 ? defaults.overlayKind : _ref$overlayKind,
-    overlayRef = _ref.overlayRef,
-    positionTune = _ref.positionTune,
-    portalTarget = _ref.portalTarget,
-    target = _ref.target,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    _ref$isOpenByDefault = _ref.isOpenByDefault,
-    isOpenByDefault = _ref$isOpenByDefault === void 0 ? defaults.isOpenByDefault : _ref$isOpenByDefault,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
-  var isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
-  var _useState = React.useState(isStacked || isOpenByDefault),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    shouldResetPosition = _useState4[0],
-    setShouldResetPosition = _useState4[1];
-  var _useState5 = React.useState(),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    targetRect = _useState6[0],
-    setTargetRect = _useState6[1];
-  var _useState7 = React.useState({
-      x: 0,
-      y: 0
-    }),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    targetOffset = _useState8[0],
-    setTargetOffset = _useState8[1];
-  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');
+exports.Coachmark = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    align = defaults.align,
+    autoAlign,
+    children,
+    className,
+    onClose = defaults.onClose,
+    overlayClassName,
+    overlayKind = defaults.overlayKind,
+    overlayRef,
+    positionTune,
+    portalTarget,
+    target,
+    theme = defaults.theme,
+    isOpenByDefault = defaults.isOpenByDefault,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const isBeacon = overlayKind === enums.COACHMARK_OVERLAY_KIND.TOOLTIP;
+  const isStacked = overlayKind === enums.COACHMARK_OVERLAY_KIND.STACKED;
+  const [isOpen, setIsOpen] = React.useState(isStacked || isOpenByDefault);
+  const [shouldResetPosition, setShouldResetPosition] = React.useState(false);
+  const [targetRect, setTargetRect] = React.useState();
+  const [targetOffset, setTargetOffset] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const overlayBackupRef = React.useRef(undefined);
+  const backupRef = React.useRef(undefined);
+  const _coachmarkRef = ref || backupRef;
+  const _overlayRef = overlayRef || overlayBackupRef;
+  const portalNode = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var closeOverlay = function closeOverlay() {
+  const closeOverlay = () => {
     setIsOpen(false);
   };
-  var handleClose = React.useCallback(function () {
+  const handleClose = React.useCallback(() => {
     if (isStacked) {
       // If stacked, do not unmount,
       // only call its ("parent") onClose method.
@@ -105,18 +88,18 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClose();
     }
   }, [isStacked, onClose]);
-  var escFunction = React.useCallback(function (event) {
+  const escFunction = React.useCallback(event => {
     if (event.key === 'Escape') {
       handleClose();
     }
   }, [handleClose]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     document.addEventListener('keydown', escFunction, false);
-    return function () {
+    return () => {
       document.removeEventListener('keydown', escFunction, false);
     };
   }, [escFunction]);
-  var handleTargetClick = function handleTargetClick(e) {
+  const handleTargetClick = e => {
     setTargetRect(e.target.getBoundingClientRect());
     setTargetOffset({
       x: e.target.offsetLeft,
@@ -124,16 +107,14 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     if (isBeacon) {
       // toggle open/closed for beacons
-      setIsOpen(function (prevIsOpen) {
-        return !prevIsOpen;
-      });
+      setIsOpen(prevIsOpen => !prevIsOpen);
     } else {
       // reset position for all other kinds
       setIsOpen(false);
       setShouldResetPosition(true);
     }
   };
-  var contextValue = {
+  const contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
       tabIndex: 0,
@@ -151,28 +132,28 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     positionTune: positionTune,
     isOpen: isOpen
   };
-  var handleResize = throttle.throttle(function () {
+  const handleResize = throttle.throttle(() => {
     closeOverlay();
   }, 2000);
 
   // instead of toggling on/off,
   // keep open and reset to original position
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (shouldResetPosition) {
       setShouldResetPosition(false);
       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")
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    const overlayPositionStyle = {
+      top: `${(positionTune?.y ?? 0) - 16}px`,
+      left: `${(positionTune?.x ?? 0) - 16}px`
     };
     if (popoverRef.current && popoverRef.current.style && overlayPositionStyle) {
-      var combinedStyle = _rollupPluginBabelHelpers.objectSpread2({
-        position: 'absolute'
-      }, overlayPositionStyle);
+      const combinedStyle = {
+        position: 'absolute',
+        ...overlayPositionStyle
+      };
       Object.assign(popoverRef.current.style, combinedStyle);
     }
   }, [popoverRef, positionTune]);
@@ -184,27 +165,26 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // - DO "hide" the coachmark.
   //   - The app is doing the action for the user.
   //   - The user will have the opportunity to open it again.
-  React.useEffect(function () {
-    return function () {
-      return setIsOpen(false);
-    };
+  React.useEffect(() => {
+    return () => setIsOpen(false);
   }, []);
   hooks.useClickOutsideElement(_coachmarkRef, _overlayRef, overlayKind, closeOverlay);
   hooks.useWindowEvent('resize', handleResize);
   return /*#__PURE__*/React.createElement(context.CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
+    className: cx(blockClass, `${blockClass}__${theme}`, className),
     ref: _coachmarkRef
-  }, 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, {
+  }, rest, devtools.getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React.createElement(React.Fragment, null, target, isOpen && 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, {
+    className: cx(overlayClassName, `${overlayBlockClass}--is-visible`)
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode?.current)) : /*#__PURE__*/React.createElement(react.Popover, {
     highContrast: true,
     caret: true,
     ref: popoverRef,
@@ -217,10 +197,12 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
-    className: cx(overlayClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+    className: cx(overlayClassName, {
+      [`${overlayBlockClass}--is-visible`]: isOpen
+    })
   }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? index.default.object :
+const overlayRefType = typeof HTMLElement === 'undefined' ? index.default.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 index.default.instanceOf(HTMLElement);