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

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -17,29 +17,29 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 var _div, _circle;
-var _excluded = ["label", "className", "kind"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-beacon");
-var componentName = 'CoachmarkBeacon';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--coachmark-beacon`;
+const componentName = 'CoachmarkBeacon';
+const defaults = {
   kind: 'default'
 };
 /**
  * Use beacon for the target prop of a Coachmark component.
  */
-exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var label = _ref.label,
-    className = _ref.className,
-    _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var coachmark = context.useCoachmark();
+exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    label,
+    className,
+    kind = defaults.kind,
+    ...rest
+  } = _ref;
+  const coachmark = context.useCoachmark();
   if (!coachmark) {
     return _div || (_div = /*#__PURE__*/React.createElement("div", null, "CoachmarkBeacon is to be use exclusively within the target prop of Coachmark"));
   }
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, "".concat(blockClass, "-").concat(kind), className),
+    className: cx(blockClass, `${blockClass}-${kind}`, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName), {
     role: "tooltip"
@@ -47,9 +47,9 @@ exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tabIndex: 0,
     type: "button"
   }, coachmark.buttonProps, {
-    className: "".concat(blockClass, "__target")
+    className: `${blockClass}__target`
   }), /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(blockClass, "__center"),
+    className: `${blockClass}__center`,
     "aria-label": label
   }, /*#__PURE__*/React.createElement("title", null, label), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
     r: 1,

package/lib/components/CoachmarkButton/CoachmarkButton.js

@@ -18,14 +18,13 @@ require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
 
 var _div;
-var _excluded = ["className", "label"];
 
 // 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-button");
-var componentName = 'CoachmarkButton';
+const blockClass = `${settings.pkg.prefix}--coachmark-button`;
+const componentName = 'CoachmarkButton';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -46,11 +45,13 @@ var componentName = 'CoachmarkButton';
 /**
  * Use CoachmarkButton for the target prop of a Coachmark component.
  */
-exports.CoachmarkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    label = _ref.label,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var coachmark = context.useCoachmark();
+exports.CoachmarkButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    label,
+    ...rest
+  } = _ref;
+  const coachmark = context.useCoachmark();
   if (!coachmark) {
     return _div || (_div = /*#__PURE__*/React.createElement("div", null, "CoachmarkButton is to be use exclusively within the target prop of Coachmark"));
   }

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -21,18 +21,16 @@ var settings = require('../../settings.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var useIsomorphicEffect = require('../../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(settings.pkg.prefix, "--coachmark");
-var blockClass = "".concat(coachmarkClass, "-fixed");
-var overlayBlockClass = "".concat(coachmarkClass, "-overlay");
-var componentName = 'CoachmarkFixed';
-var defaults = {
-  onClose: function onClose() {},
+const coachmarkClass = `${settings.pkg.prefix}--coachmark`;
+const blockClass = `${coachmarkClass}-fixed`;
+const overlayBlockClass = `${coachmarkClass}-overlay`;
+const componentName = 'CoachmarkFixed';
+const defaults = {
+  onClose: () => {},
   theme: 'light',
   tagline: ''
 };
@@ -43,61 +41,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.
  */
-exports.CoachmarkFixed = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var overlayRef = React.useRef(null);
-  var portalNode = React.useRef(null);
-  var _useState = React.useState(false),
-    _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 _useState9 = React.useState(false),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    fixedIsVisible = _useState10[0],
-    setFixedIsVisible = _useState10[1];
-  var shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
-  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.CoachmarkFixed = /*#__PURE__*/React.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 = React.useRef(null);
+  const portalNode = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [shouldResetPosition, setShouldResetPosition] = React.useState(false);
+  const [targetRect, setTargetRect] = React.useState();
+  const [targetOffset, setTargetOffset] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const [fixedIsVisible, setFixedIsVisible] = React.useState(false);
+  const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
-  var handleClose = React.useCallback(function () {
+  const handleClose = React.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,
@@ -107,18 +89,18 @@ exports.CoachmarkFixed = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setIsOpen(false);
     setShouldResetPosition(true);
   };
-  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 contextValue = {
+  const contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
       tabIndex: 0,
@@ -138,13 +120,13 @@ exports.CoachmarkFixed = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // instead of toggling on/off,
   // keep open and reset to original position
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (shouldResetPosition) {
       setShouldResetPosition(false);
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     setFixedIsVisible(isOpen);
   }, [isOpen]);
 
@@ -155,31 +137,31 @@ exports.CoachmarkFixed = /*#__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);
   }, []);
   return /*#__PURE__*/React.createElement(context.CoachmarkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.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
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkTagline.CoachmarkTagline, {
     title: tagline,
     onClose: onClose
-  }), isOpen && (portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }), isOpen && portalNode?.current && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: overlayRef,
     fixedIsVisible: fixedIsVisible,
     kind: enums.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/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -14,22 +14,23 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["button", "className", "description", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-element");
-var componentName = 'CoachmarkOverlayElement';
+const blockClass = `${settings.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.
  */
-exports.CoachmarkOverlayElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var button = _ref.button,
-    className = _ref.className,
-    description = _ref.description,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.CoachmarkOverlayElement = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    button,
+    className,
+    description,
+    title,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -42,13 +43,13 @@ exports.CoachmarkOverlayElement = /*#__PURE__*/React.forwardRef(function (_ref,
     }),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__content")
+    className: `${blockClass}__content`
   }, title && /*#__PURE__*/React.createElement("h2", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, description)), button && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__button")
+    className: `${blockClass}__button`
   }, button));
 });
 

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -21,11 +21,9 @@ var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../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(settings.pkg.prefix, "--coachmark-overlay-elements");
-var componentName = 'CoachmarkOverlayElements';
+const blockClass = `${settings.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,
@@ -38,7 +36,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',
@@ -51,78 +49,64 @@ var defaults = {
  * Composable container to allow for the displaying of CoachmarkOverlayElement
  * components in a carousel fashion.
  */
-exports.CoachmarkOverlayElements = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var buttonFocusRef = React.useRef(undefined);
-  var scrollRef = React.useRef(undefined);
-  var _useState = React.useState(0),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    scrollPosition = _useState2[0],
-    setScrollPosition = _useState2[1];
-  var _useState3 = React.useState(currentStep),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    currentProgStep = _useState4[0],
-    _setCurrentProgStep = _useState4[1];
-  var coachmark = context.useCoachmark();
-  var setCurrentProgStep = function setCurrentProgStep(value) {
+exports.CoachmarkOverlayElements = /*#__PURE__*/React.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 = React.useRef(undefined);
+  const scrollRef = React.useRef(undefined);
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const [currentProgStep, _setCurrentProgStep] = React.useState(currentStep);
+  const coachmark = context.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 = React.Children.count(children);
-  var progStepFloor = 0;
-  var progStepCeil = numProgSteps - 1;
-  var renderMediaContent = React.useMemo(function () {
-    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
-      playStep: currentProgStep
-    });
-  }, [currentProgStep, renderMedia]);
-  React.useEffect(function () {
-    var _scrollRef$current, _scrollRef$current$sc;
+  const numProgSteps = React.Children.count(children);
+  const progStepFloor = 0;
+  const progStepCeil = numProgSteps - 1;
+  const renderMediaContent = React.useMemo(() => renderMedia?.({
+    playStep: currentProgStep
+  }), [currentProgStep, renderMedia]);
+  React.useEffect(() => {
     // When current step is set by props
     // scroll to the appropriate view on the carrousel
-    var targetStep = clamp.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.clamp(currentStep, progStepFloor, progStepCeil);
+    scrollRef?.current?.scrollToView?.(targetStep);
     // Avoid circular call to this hook
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStep]);
-  React.useEffect(function () {
+  React.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();
     }
   }, []);
-  React.useEffect(function () {
-    setTimeout(function () {
+  React.useEffect(() => {
+    setTimeout(() => {
       if (buttonFocusRef.current && isVisible) {
         buttonFocusRef.current.focus();
       }
     }, 100);
   }, [isVisible]);
   if (!coachmark) {
-    return pconsole.default.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.default.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.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass,
@@ -136,45 +120,43 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     }),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), renderMedia && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__element-stepped-media")
+    className: `${blockClass}__element-stepped-media`
   }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
+    className: cx(`${blockClass}__footer`, 'coachmark-carousel-controls')
   }, /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm"
   }, coachmark.closeButtonProps, {
     ref: buttonFocusRef
   }), closeButtonLabel))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Carousel.Carousel, {
     ref: scrollRef,
-    onScroll: function onScroll(scrollPercent) {
+    onScroll: scrollPercent => {
       setScrollPosition(scrollPercent);
     }
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__footer"))
+    className: cx(`${blockClass}__footer`)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "--controls-progress")
-  }, "".concat(currentProgStep + 1, " / ").concat(numProgSteps)), scrollPosition > 0 && /*#__PURE__*/React.createElement(react.Button, {
+    className: `${blockClass}--controls-progress`
+  }, `${currentProgStep + 1} / ${numProgSteps}`), scrollPosition > 0 && /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
     kind: "ghost",
     title: previousButtonLabel,
     disabled: scrollPosition === 0,
-    onClick: function onClick() {
-      var _scrollRef$current2, _scrollRef$current2$s;
-      var targetStep = clamp.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.clamp(currentProgStep - 1, progStepFloor, progStepCeil);
+      scrollRef?.current?.scrollToView?.(targetStep);
       setCurrentProgStep(targetStep);
-      onBack === null || onBack === void 0 || onBack();
+      onBack?.();
     }
   }, previousButtonLabel), currentProgStep < progStepCeil ? /*#__PURE__*/React.createElement(react.Button, {
     size: "sm",
     ref: buttonFocusRef,
     title: nextButtonText,
     disabled: scrollPosition === 1,
-    onClick: function onClick() {
-      var _scrollRef$current3, _scrollRef$current3$s;
-      var targetStep = clamp.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.clamp(currentProgStep + 1, progStepFloor, progStepCeil);
+      scrollRef?.current?.scrollToView?.(targetStep);
       setCurrentProgStep(targetStep);
-      onNext === null || onNext === void 0 || onNext();
+      onNext?.();
     }
   }, nextButtonText) : closeButtonLabel && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm",