@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/CoachmarkFixed/CoachmarkFixed.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, { useRef, useState, useCallback, useEffect } from 'react';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
 import { CoachmarkContext } from '../Coachmark/utils/context.js';
@@ -19,18 +19,16 @@ import { pkg } from '../../settings.js';
 import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["children", "className", "onClose", "portalTarget", "tagline", "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 coachmarkClass = "".concat(pkg.prefix, "--coachmark");
-var blockClass = "".concat(coachmarkClass, "-fixed");
-var overlayBlockClass = "".concat(coachmarkClass, "-overlay");
-var componentName = 'CoachmarkFixed';
-var defaults = {
-  onClose: function onClose() {},
+const coachmarkClass = `${pkg.prefix}--coachmark`;
+const blockClass = `${coachmarkClass}-fixed`;
+const overlayBlockClass = `${coachmarkClass}-overlay`;
+const componentName = 'CoachmarkFixed';
+const defaults = {
+  onClose: () => {},
   theme: 'light',
   tagline: ''
 };
@@ -41,61 +39,45 @@ var defaults = {
  * user to gain understanding of the product's main value and discover new use cases.
  * This variant allows the a coachmark overlay to be displayed by interacting with the tagline.
  */
-var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
-    portalTarget = _ref.portalTarget,
-    _ref$tagline = _ref.tagline,
-    tagline = _ref$tagline === void 0 ? defaults.tagline : _ref$tagline,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var overlayRef = useRef(null);
-  var portalNode = useRef(null);
-  var _useState = useState(false),
-    _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 _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    fixedIsVisible = _useState10[0],
-    setFixedIsVisible = _useState10[1];
-  var shouldReduceMotion = usePrefersReducedMotion();
-  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 CoachmarkFixed = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    onClose = defaults.onClose,
+    portalTarget,
+    tagline = defaults.tagline,
+    theme = defaults.theme,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const overlayRef = useRef(null);
+  const portalNode = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [shouldResetPosition, setShouldResetPosition] = useState(false);
+  const [targetRect, setTargetRect] = useState();
+  const [targetOffset, setTargetOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  const [fixedIsVisible, setFixedIsVisible] = useState(false);
+  const shouldReduceMotion = usePrefersReducedMotion();
+  useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var handleClose = useCallback(function () {
+  const handleClose = useCallback(() => {
     if (shouldReduceMotion) {
       setIsOpen(false);
     } else {
       setFixedIsVisible(false);
     }
   }, [shouldReduceMotion]);
-  var handleTransitionEnd = function handleTransitionEnd(e) {
+  const handleTransitionEnd = e => {
     if (e.propertyName === 'transform' && !fixedIsVisible) {
       setIsOpen(false);
       onClose();
     }
   };
-  var handleTargetClick = function handleTargetClick(e) {
+  const handleTargetClick = e => {
     setTargetRect(e.target.getBoundingClientRect());
     setTargetOffset({
       x: e.target.offsetLeft,
@@ -105,18 +87,18 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setIsOpen(false);
     setShouldResetPosition(true);
   };
-  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 contextValue = {
+  const contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
       tabIndex: 0,
@@ -136,13 +118,13 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // instead of toggling on/off,
   // keep open and reset to original position
-  useEffect(function () {
+  useEffect(() => {
     if (shouldResetPosition) {
       setShouldResetPosition(false);
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
-  useEffect(function () {
+  useEffect(() => {
     setFixedIsVisible(isOpen);
   }, [isOpen]);
 
@@ -153,31 +135,31 @@ var CoachmarkFixed = /*#__PURE__*/React__default.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);
   }, []);
   return /*#__PURE__*/React__default.createElement(CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
-    "".concat(blockClass, "__").concat(theme), className // Apply any supplied class names to the main HTML element.
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    `${blockClass}__${theme}`, className // Apply any supplied class names to the main HTML element.
     ),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }), isOpen && portalNode?.current && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: COACHMARK_OVERLAY_KIND.FIXED,
     onClose: handleClose,
     onTransitionEnd: handleTransitionEnd,
     theme: theme,
-    className: cx(fixedIsVisible && "".concat(overlayBlockClass, "--is-visible"), overlayBlockClass)
-  }, children), // Default to `document.body` when `portalNode` is `null`
-  portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)));
+    className: cx(fixedIsVisible && `${overlayBlockClass}--is-visible`, overlayBlockClass)
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode?.current)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -5,29 +5,30 @@
  * 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';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["button", "className", "description", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-element");
-var componentName = 'CoachmarkOverlayElement';
+const blockClass = `${pkg.prefix}--coachmark-overlay-element`;
+const componentName = 'CoachmarkOverlayElement';
 /**
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay
  * in a carousel fashion.
  */
-var CoachmarkOverlayElement = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var button = _ref.button,
-    className = _ref.className,
-    description = _ref.description,
-    title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let CoachmarkOverlayElement = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    button,
+    className,
+    description,
+    title,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -40,13 +41,13 @@ var CoachmarkOverlayElement = /*#__PURE__*/React__default.forwardRef(function (_
     }),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content")
+    className: `${blockClass}__content`
   }, title && /*#__PURE__*/React__default.createElement("h2", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), description && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, description)), button && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__button")
+    className: `${blockClass}__button`
   }, button));
 });
 

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.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 { Button } from '@carbon/react';
 import React__default, { useRef, useState, Children, useMemo, useEffect } from 'react';
 import { Carousel } from '../Carousel/Carousel.js';
@@ -19,11 +19,9 @@ import { pkg } from '../../settings.js';
 import '../Coachmark/Coachmark.js';
 import { useCoachmark } from '../Coachmark/utils/context.js';
 
-var _excluded = ["className", "children", "isVisible", "renderMedia", "currentStep", "nextButtonText", "previousButtonLabel", "closeButtonLabel", "onNext", "onBack"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-elements");
-var componentName = 'CoachmarkOverlayElements';
+const blockClass = `${pkg.prefix}--coachmark-overlay-elements`;
+const componentName = 'CoachmarkOverlayElements';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 // Default values can be included here and then assigned to the prop params,
@@ -36,7 +34,7 @@ var componentName = 'CoachmarkOverlayElements';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   isVisible: false,
   nextButtonText: 'Next',
   previousButtonLabel: 'Back',
@@ -49,78 +47,64 @@ var defaults = {
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
  */
-var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
-    renderMedia = _ref.renderMedia,
-    _ref$currentStep = _ref.currentStep,
-    currentStep = _ref$currentStep === void 0 ? defaults.currentStep : _ref$currentStep,
-    _ref$nextButtonText = _ref.nextButtonText,
-    nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
-    _ref$previousButtonLa = _ref.previousButtonLabel,
-    previousButtonLabel = _ref$previousButtonLa === void 0 ? defaults.previousButtonLabel : _ref$previousButtonLa,
-    _ref$closeButtonLabel = _ref.closeButtonLabel,
-    closeButtonLabel = _ref$closeButtonLabel === void 0 ? defaults.closeButtonLabel : _ref$closeButtonLabel,
-    _ref$onNext = _ref.onNext,
-    onNext = _ref$onNext === void 0 ? defaults.onNext : _ref$onNext,
-    _ref$onBack = _ref.onBack,
-    onBack = _ref$onBack === void 0 ? defaults.onBack : _ref$onBack,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = useRef(undefined);
-  var scrollRef = useRef(undefined);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    scrollPosition = _useState2[0],
-    setScrollPosition = _useState2[1];
-  var _useState3 = useState(currentStep),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentProgStep = _useState4[0],
-    _setCurrentProgStep = _useState4[1];
-  var coachmark = useCoachmark();
-  var setCurrentProgStep = function setCurrentProgStep(value) {
+let CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    isVisible = defaults.isVisible,
+    renderMedia,
+    currentStep = defaults.currentStep,
+    nextButtonText = defaults.nextButtonText,
+    previousButtonLabel = defaults.previousButtonLabel,
+    closeButtonLabel = defaults.closeButtonLabel,
+    onNext = defaults.onNext,
+    onBack = defaults.onBack,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const buttonFocusRef = useRef(undefined);
+  const scrollRef = useRef(undefined);
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [currentProgStep, _setCurrentProgStep] = useState(currentStep);
+  const coachmark = useCoachmark();
+  const setCurrentProgStep = value => {
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
-      setTimeout(function () {
-        var _buttonFocusRef$curre;
-        (_buttonFocusRef$curre = buttonFocusRef.current) === null || _buttonFocusRef$curre === void 0 || _buttonFocusRef$curre.focus();
+      setTimeout(() => {
+        buttonFocusRef.current?.focus();
       }, 1000);
     }
     _setCurrentProgStep(value);
   };
-  var numProgSteps = Children.count(children);
-  var progStepFloor = 0;
-  var progStepCeil = numProgSteps - 1;
-  var renderMediaContent = useMemo(function () {
-    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
-      playStep: currentProgStep
-    });
-  }, [currentProgStep, renderMedia]);
-  useEffect(function () {
-    var _scrollRef$current, _scrollRef$current$sc;
+  const numProgSteps = Children.count(children);
+  const progStepFloor = 0;
+  const progStepCeil = numProgSteps - 1;
+  const renderMediaContent = useMemo(() => renderMedia?.({
+    playStep: currentProgStep
+  }), [currentProgStep, renderMedia]);
+  useEffect(() => {
     // When current step is set by props
     // scroll to the appropriate view on the carrousel
-    var targetStep = clamp(currentStep, progStepFloor, progStepCeil);
-    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || (_scrollRef$current$sc = _scrollRef$current.scrollToView) === null || _scrollRef$current$sc === void 0 || _scrollRef$current$sc.call(_scrollRef$current, targetStep);
+    const targetStep = clamp(currentStep, progStepFloor, progStepCeil);
+    scrollRef?.current?.scrollToView?.(targetStep);
     // Avoid circular call to this hook
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep]);
-  useEffect(function () {
+  useEffect(() => {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
     if (buttonFocusRef.current) {
       buttonFocusRef.current.focus();
     }
   }, []);
-  useEffect(function () {
-    setTimeout(function () {
+  useEffect(() => {
+    setTimeout(() => {
       if (buttonFocusRef.current && isVisible) {
         buttonFocusRef.current.focus();
       }
     }, 100);
   }, [isVisible]);
   if (!coachmark) {
-    return pconsole.warn("The ".concat(componentName, " is a composable container element which should be used only within the scope of a Coachmark or a CoachmarkFixed component."));
+    return pconsole.warn(`The ${componentName} is a composable container element which should be used only within the scope of a Coachmark or a CoachmarkFixed component.`);
   }
   return /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
     className: cx(blockClass,
@@ -134,45 +118,43 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     }),
     ref: ref
   }, getDevtoolsProps(componentName)), renderMedia && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__element-stepped-media")
+    className: `${blockClass}__element-stepped-media`
   }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
+    className: cx(`${blockClass}__footer`, 'coachmark-carousel-controls')
   }, /*#__PURE__*/React__default.createElement(Button, _extends({
     size: "sm"
   }, coachmark.closeButtonProps, {
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Carousel, {
     ref: scrollRef,
-    onScroll: function onScroll(scrollPercent) {
+    onScroll: scrollPercent => {
       setScrollPosition(scrollPercent);
     }
   }, children), /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__footer"))
+    className: cx(`${blockClass}__footer`)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "--controls-progress")
-  }, "".concat(currentProgStep + 1, " / ").concat(numProgSteps)), scrollPosition > 0 && /*#__PURE__*/React__default.createElement(Button, {
+    className: `${blockClass}--controls-progress`
+  }, `${currentProgStep + 1} / ${numProgSteps}`), scrollPosition > 0 && /*#__PURE__*/React__default.createElement(Button, {
     size: "sm",
     kind: "ghost",
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
-    onClick: function onClick() {
-      var _scrollRef$current2, _scrollRef$current2$s;
-      var targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 || (_scrollRef$current2$s = _scrollRef$current2.scrollToView) === null || _scrollRef$current2$s === void 0 || _scrollRef$current2$s.call(_scrollRef$current2, targetStep);
+    onClick: () => {
+      const targetStep = clamp(currentProgStep - 1, progStepFloor, progStepCeil);
+      scrollRef?.current?.scrollToView?.(targetStep);
       setCurrentProgStep(targetStep);
-      onBack === null || onBack === void 0 || onBack();
+      onBack?.();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React__default.createElement(Button, {
     size: "sm",
     ref: buttonFocusRef,
     title: nextButtonText,
     disabled: scrollPosition === 1,
-    onClick: function onClick() {
-      var _scrollRef$current3, _scrollRef$current3$s;
-      var targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
-      scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 || (_scrollRef$current3$s = _scrollRef$current3.scrollToView) === null || _scrollRef$current3$s === void 0 || _scrollRef$current3$s.call(_scrollRef$current3, targetStep);
+    onClick: () => {
+      const targetStep = clamp(currentProgStep + 1, progStepFloor, progStepCeil);
+      scrollRef?.current?.scrollToView?.(targetStep);
       setCurrentProgStep(targetStep);
-      onNext === null || onNext === void 0 || onNext();
+      onNext?.();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React__default.createElement(Button, _extends({
     size: "sm",