@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Coachmark/Coachmark.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { useClickOutsideElement, useWindowEvent } from './utils/hooks.js';
 import { COACHMARK_OVERLAY_KIND } from './utils/enums.js';
@@ -20,15 +20,13 @@ import { throttle } from '../../global/js/utils/throttle.js';
 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", "isOpenByDefault"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--coachmark");
-var overlayBlockClass = "".concat(blockClass, "-overlay");
-var componentName = 'Coachmark';
-var defaults = {
+const blockClass = `${pkg.prefix}--coachmark`;
+const overlayBlockClass = `${blockClass}-overlay`;
+const componentName = 'Coachmark';
+const defaults = {
   align: 'bottom',
-  onClose: function onClose() {},
+  onClose: () => {},
   overlayKind: 'tooltip',
   theme: 'light',
   isOpenByDefault: false
@@ -39,61 +37,46 @@ var defaults = {
  * user to gain understanding of the product's main value and discover new use cases.
  */
 
-var Coachmark = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
-  var isBeacon = overlayKind === COACHMARK_OVERLAY_KIND.TOOLTIP;
-  var isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
-  var _useState = useState(isStacked || isOpenByDefault),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    shouldResetPosition = _useState4[0],
-    setShouldResetPosition = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    targetRect = _useState6[0],
-    setTargetRect = _useState6[1];
-  var _useState7 = useState({
-      x: 0,
-      y: 0
-    }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    targetOffset = _useState8[0],
-    setTargetOffset = _useState8[1];
-  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');
+let Coachmark = /*#__PURE__*/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 === COACHMARK_OVERLAY_KIND.TOOLTIP;
+  const isStacked = overlayKind === COACHMARK_OVERLAY_KIND.STACKED;
+  const [isOpen, setIsOpen] = useState(isStacked || isOpenByDefault);
+  const [shouldResetPosition, setShouldResetPosition] = useState(false);
+  const [targetRect, setTargetRect] = useState();
+  const [targetOffset, setTargetOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  const overlayBackupRef = useRef(undefined);
+  const backupRef = useRef(undefined);
+  const _coachmarkRef = ref || backupRef;
+  const _overlayRef = overlayRef || overlayBackupRef;
+  const portalNode = useRef(null);
+  const popoverRef = useRef(null);
+  useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var closeOverlay = function closeOverlay() {
+  const closeOverlay = () => {
     setIsOpen(false);
   };
-  var handleClose = useCallback(function () {
+  const handleClose = useCallback(() => {
     if (isStacked) {
       // If stacked, do not unmount,
       // only call its ("parent") onClose method.
@@ -103,18 +86,18 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClose();
     }
   }, [isStacked, onClose]);
-  var escFunction = useCallback(function (event) {
+  const escFunction = useCallback(event => {
     if (event.key === 'Escape') {
       handleClose();
     }
   }, [handleClose]);
-  useEffect(function () {
+  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,
@@ -122,16 +105,14 @@ var Coachmark = /*#__PURE__*/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,
@@ -149,28 +130,28 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     positionTune: positionTune,
     isOpen: isOpen
   };
-  var handleResize = throttle(function () {
+  const handleResize = throttle(() => {
     closeOverlay();
   }, 2000);
 
   // instead of toggling on/off,
   // keep open and reset to original position
-  useEffect(function () {
+  useEffect(() => {
     if (shouldResetPosition) {
       setShouldResetPosition(false);
       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")
+  useIsomorphicEffect(() => {
+    const overlayPositionStyle = {
+      top: `${(positionTune?.y ?? 0) - 16}px`,
+      left: `${(positionTune?.x ?? 0) - 16}px`
     };
     if (popoverRef.current && popoverRef.current.style && overlayPositionStyle) {
-      var combinedStyle = _objectSpread2({
-        position: 'absolute'
-      }, overlayPositionStyle);
+      const combinedStyle = {
+        position: 'absolute',
+        ...overlayPositionStyle
+      };
       Object.assign(popoverRef.current.style, combinedStyle);
     }
   }, [popoverRef, positionTune]);
@@ -182,27 +163,26 @@ var Coachmark = /*#__PURE__*/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.
-  useEffect(function () {
-    return function () {
-      return setIsOpen(false);
-    };
+  useEffect(() => {
+    return () => setIsOpen(false);
   }, []);
   useClickOutsideElement(_coachmarkRef, _overlayRef, overlayKind, closeOverlay);
   useWindowEvent('resize', handleResize);
   return /*#__PURE__*/React__default.createElement(CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx(blockClass, "".concat(blockClass, "__").concat(theme), className),
+    className: cx(blockClass, `${blockClass}__${theme}`, className),
     ref: _coachmarkRef
-  }, 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, {
+  }, rest, getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, target, isOpen && 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 === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React__default.createElement(Popover, {
+    className: cx(overlayClassName, `${overlayBlockClass}--is-visible`)
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode?.current)) : /*#__PURE__*/React__default.createElement(Popover, {
     highContrast: true,
     caret: true,
     ref: popoverRef,
@@ -215,10 +195,12 @@ var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
-    className: cx(overlayClassName, _defineProperty({}, "".concat(overlayBlockClass, "--is-visible"), isOpen))
+    className: cx(overlayClassName, {
+      [`${overlayBlockClass}--is-visible`]: isOpen
+    })
   }, children)))));
 });
-var overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
+const overlayRefType = typeof HTMLElement === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(HTMLElement);
 

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -5,7 +5,7 @@
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,19 +15,18 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../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(pkg.prefix, "--coachmark-dragbar");
-var overlayBlockClass = "".concat(pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkDragbar';
-var defaults = {
+const blockClass = `${pkg.prefix}--coachmark-dragbar`;
+const overlayBlockClass = `${pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkDragbar';
+const defaults = {
   closeIconDescription: 'Close',
-  onDrag: function onDrag() {},
-  onClose: function onClose() {},
+  onDrag: () => {},
+  onClose: () => {},
   showCloseButton: true,
   theme: 'light'
 };
@@ -35,49 +34,40 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-var CoachmarkDragbar = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDragging = _useState2[0],
-    setIsDragging = _useState2[1];
-  useEffect(function () {
-    var handleDragStop = function handleDragStop() {
-      return setIsDragging(false);
-    };
+let CoachmarkDragbar = /*#__PURE__*/React__default.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] = useState(false);
+  useEffect(() => {
+    const handleDragStop = () => setIsDragging(false);
     window.addEventListener('mouseup', handleDragStop);
-    return function () {
+    return () => {
       window.removeEventListener('mouseup', handleDragStop);
     };
   }, []);
-  useEffect(function () {
-    var handleDrag = function handleDrag(event) {
+  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__default.createElement("header", _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
@@ -86,7 +76,7 @@ var CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: "".concat(overlayBlockClass, "__handle"),
+    className: `${overlayBlockClass}__handle`,
     onMouseDown: handleDragStart,
     onKeyDown: a11yKeyboardHandler
     // TODO: i18n
@@ -100,7 +90,7 @@ var CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     renderIcon: Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(overlayBlockClass, "--close-btn"),
+    className: `${overlayBlockClass}--close-btn`,
     onClick: onClose
   }));
 });

package/es/components/Coachmark/CoachmarkHeader.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -14,15 +14,13 @@ import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["closeIconDescription", "onClose", "showCloseButton", "theme"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--coachmark-header");
-var overlayBlockClass = "".concat(pkg.prefix, "--coachmark-overlay");
-var componentName = 'CoachmarkHeader';
-var defaults = {
+const blockClass = `${pkg.prefix}--coachmark-header`;
+const overlayBlockClass = `${pkg.prefix}--coachmark-overlay`;
+const componentName = 'CoachmarkHeader';
+const defaults = {
   closeIconDescription: 'Close',
-  onClose: function onClose() {},
+  onClose: () => {},
   showCloseButton: true,
   theme: 'light'
 };
@@ -30,28 +28,27 @@ var defaults = {
  * DO NOT USE. This component is for the exclusive use
  * of other Onboarding components.
  */
-var CoachmarkHeader = /*#__PURE__*/React__default.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 = _objectWithoutProperties(_ref, _excluded);
+let CoachmarkHeader = /*#__PURE__*/React__default.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__default.createElement("header", _extends({}, rest, {
-    className: cx(blockClass, "".concat(blockClass, "__").concat(theme)),
+    className: cx(blockClass, `${blockClass}__${theme}`),
     ref: ref
   }, getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(overlayBlockClass, "--close-btn-container")
+    className: `${overlayBlockClass}--close-btn-container`
   }, /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: Close,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(overlayBlockClass, "--close-btn"),
+    className: `${overlayBlockClass}--close-btn`,
     onClick: onClose
   })));
 });