@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/Card/CardHeader.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
 var index = require('../../_virtual/index.js');
@@ -15,41 +14,47 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 
 var _rect, _path;
-var componentName = 'CardHeader';
-var defaults = {
+const componentName = 'CardHeader';
+const defaults = {
   hasActions: false};
-var CardHeader = function CardHeader(_ref) {
-  var actions = _ref.actions,
-    decorator = _ref.decorator,
-    noActionIcons = _ref.noActionIcons,
-    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-    primaryButtonIcon = _ref.primaryButtonIcon,
-    primaryButtonPlacement = _ref.primaryButtonPlacement,
-    primaryButtonText = _ref.primaryButtonText,
-    primaryButtonDisabled = _ref.primaryButtonDisabled,
-    description = _ref.description,
-    _ref$hasActions = _ref.hasActions,
-    hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
-    inClickableCard = _ref.inClickableCard,
-    label = _ref.label,
-    secondaryButtonDisabled = _ref.secondaryButtonDisabled,
-    secondaryButtonHref = _ref.secondaryButtonHref,
-    secondaryButtonIcon = _ref.secondaryButtonIcon,
-    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
-    secondaryButtonText = _ref.secondaryButtonText,
-    slug = _ref.slug,
-    title = _ref.title,
-    _ref$titleSize = _ref.titleSize,
-    titleSize = _ref$titleSize === void 0 ? 'default' : _ref$titleSize;
-  var carbonPrefix = react.usePrefix();
-  var blockClass = "".concat(settings.pkg.prefix, "--card");
-  var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = cx(headerClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-label-only"), label && !title && !description), "".concat(headerClass, "-has-label"), !!label), "".concat(blockClass, "__title-lg"), titleSize === 'large'));
-  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
-  var actionGhostButtonClass = cx(actionGhostButton, _rollupPluginBabelHelpers.defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowAiIcon = /*#__PURE__*/React.createElement("svg", {
-    className: "".concat(carbonPrefix, "--slug ").concat(carbonPrefix, "--slug-icon") // NOTE: We cannot change this to ai-label until carbon changes their classnames on their end
+const CardHeader = _ref => {
+  let {
+    actions,
+    decorator,
+    noActionIcons,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonIcon,
+    primaryButtonPlacement,
+    primaryButtonText,
+    primaryButtonDisabled,
+    description,
+    hasActions = defaults.hasActions,
+    inClickableCard,
+    label,
+    secondaryButtonDisabled,
+    secondaryButtonHref,
+    secondaryButtonIcon,
+    secondaryButtonPlacement,
+    secondaryButtonText,
+    slug,
+    title,
+    titleSize = 'default'
+  } = _ref;
+  const carbonPrefix = react.usePrefix();
+  const blockClass = `${settings.pkg.prefix}--card`;
+  const headerClass = `${blockClass}__header`;
+  const headerClasses = cx(headerClass, {
+    [`${headerClass}-label-only`]: label && !title && !description,
+    [`${headerClass}-has-label`]: !!label,
+    [`${blockClass}__title-lg`]: titleSize === 'large'
+  });
+  const actionGhostButton = `${blockClass}__actions-header-ghost-button`;
+  const actionGhostButtonClass = cx(actionGhostButton, {
+    [`${actionGhostButton}--only`]: noActionIcons
+  });
+  const hollowAiIcon = /*#__PURE__*/React.createElement("svg", {
+    className: `${carbonPrefix}--slug ${carbonPrefix}--slug-icon` // NOTE: We cannot change this to ai-label until carbon changes their classnames on their end
     ,
     width: "24",
     height: "24",
@@ -65,12 +70,12 @@ var CardHeader = function CardHeader(_ref) {
     d: "M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z",
     fill: "#161616"
   })));
-  var normalizedDecorator = null;
+  let normalizedDecorator = null;
   if (decorator || slug) {
     if (inClickableCard || typeof decorator === 'boolean' || typeof slug === 'boolean') {
       normalizedDecorator = hollowAiIcon;
     } else {
-      var element = decorator || slug;
+      const element = decorator || slug;
       normalizedDecorator = /*#__PURE__*/React.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
@@ -79,17 +84,25 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-decorator"), !!decorator), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _rollupPluginBabelHelpers.defineProperty({}, "".concat(headerClass, "-container--large-tile-or-label"), title && (label || titleSize === 'large'))])
+    className: cx([`${headerClass}-container`, {
+      [`${headerClass}-container--has-slug`]: !!slug
+    }, {
+      [`${headerClass}-container--has-decorator`]: !!decorator
+    }, {
+      [`${headerClass}-container--has-actions`]: !!hasActions
+    }, {
+      [`${headerClass}-container--large-tile-or-label`]: title && (label || titleSize === 'large')
+    }])
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__title-container")
+    className: `${blockClass}__title-container`
   }, label && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__label")
-  }, label), title && /*#__PURE__*/React.createElement("h6", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__label`
+  }, label), title && /*#__PURE__*/React.createElement(react.Heading, {
+    className: `${blockClass}__title`
   }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__description")
+    className: `${blockClass}__description`
   }, description)), hasActions && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
+    className: `${blockClass}__actions ${blockClass}__actions-header`
   }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/React.createElement(react.Button, {
     kind: "ghost",
     onClick: onSecondaryButtonClick,
@@ -106,7 +119,7 @@ var CardHeader = function CardHeader(_ref) {
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
   }, primaryButtonText)), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__header__inner-wrapper--decorator")
+    className: `${blockClass}__header__inner-wrapper--decorator`
   }, normalizedDecorator) : ''));
 };
 /**@ts-ignore */

package/lib/components/Carousel/Carousel.js

@@ -16,16 +16,15 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--carousel");
-var componentName = 'Carousel';
+const blockClass = `${settings.pkg.prefix}--carousel`;
+const componentName = 'Carousel';
 
 // Default values for props
-var defaults = {
+const defaults = {
   disableArrowScroll: false,
-  onScroll: function onScroll() {},
-  onChangeIsScrollable: function onChangeIsScrollable() {}
+  onScroll: () => {},
+  onChangeIsScrollable: () => {}
 };
 
 /**
@@ -44,44 +43,42 @@ var defaults = {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    _props$disableArrowSc = props.disableArrowScroll,
-    disableArrowScroll = _props$disableArrowSc === void 0 ? defaults.disableArrowScroll : _props$disableArrowSc,
-    fadedEdgeColor = props.fadedEdgeColor,
-    _props$onChangeIsScro = props.onChangeIsScrollable,
-    onChangeIsScrollable = _props$onChangeIsScro === void 0 ? defaults.onChangeIsScrollable : _props$onChangeIsScro,
-    _props$onScroll = props.onScroll,
-    onScroll = _props$onScroll === void 0 ? defaults.onScroll : _props$onScroll,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var carouselRef = React.useRef(null);
-  var scrollRef = React.useRef(null);
-  var leftFadedEdgeRef = React.useRef(null);
-  var rightFadedEdgeRef = React.useRef(null);
+const Carousel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    disableArrowScroll = defaults.disableArrowScroll,
+    fadedEdgeColor,
+    onChangeIsScrollable = defaults.onChangeIsScrollable,
+    onScroll = defaults.onScroll,
+    ...rest
+  } = props;
+  const carouselRef = React.useRef(null);
+  const scrollRef = React.useRef(null);
+  const leftFadedEdgeRef = React.useRef(null);
+  const rightFadedEdgeRef = React.useRef(null);
   // Array of refs used to reference this component's children DOM elements
-  var childElementsRef = React.useRef(Array(React.Children.count(children)).fill(React.useRef(null)));
-  var leftFadedEdgeColor = _rollupPluginBabelHelpers.typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
-  var rightFadedEdgeColor = _rollupPluginBabelHelpers.typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
+  const childElementsRef = React.useRef(Array(React.Children.count(children)).fill(React.useRef(null)));
+  const leftFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.left : fadedEdgeColor;
+  const rightFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.right : fadedEdgeColor;
 
   // Trigger callbacks to report state of the carousel
-  var handleOnScroll = React.useCallback(function () {
-    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+  const handleOnScroll = React.useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
 
     // viewport's width
-    var clientWidth = (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth;
+    const clientWidth = scrollRef.current?.clientWidth;
     // scroll position
-    var scrollLeft = parseInt("".concat((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft), 10);
+    const scrollLeft = parseInt(`${scrollRef.current?.scrollLeft}`, 10);
     // scrollable width
-    var scrollWidth = (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth;
+    const scrollWidth = scrollRef.current?.scrollWidth;
 
     // The maximum scrollLeft achievable is the scrollable width - the viewport width.
-    var scrollLeftMax = scrollWidth - clientWidth;
+    const scrollLeftMax = scrollWidth - clientWidth;
     // if isNaN(scrollLeft / scrollLeftMax), then set to zero
-    var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
+    const scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
 
     // Callback 1: Does the carousel have enough content to enable scrolling?
     onChangeIsScrollable(scrollWidth > clientWidth);
@@ -91,74 +88,67 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onChangeIsScrollable, onScroll]);
 
   // Check if an individual child element is visible in the container
-  var getElementInView = React.useCallback(function (containerRect, elementRect) {
+  const getElementInView = React.useCallback((containerRect, elementRect) => {
     // Is the element's left greater than or equal to the containers left
-    var elementLeftIsRightOfContainerLeft = elementRect.left >= containerRect.left;
+    const elementLeftIsRightOfContainerLeft = elementRect.left >= containerRect.left;
     // Is the element's right less than or equal to the containers right
-    var elementRightIsLeftOfContainerRight = elementRect.right <= containerRect.right;
+    const elementRightIsLeftOfContainerRight = elementRect.right <= containerRect.right;
     return elementLeftIsRightOfContainerLeft && elementRightIsLeftOfContainerRight;
   }, []);
 
   // Get all elements that are visible in the container.
-  var getElementsInView = React.useCallback(function () {
-    var _scrollRef$current4;
-    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.getBoundingClientRect();
-    var inViewElements = childElementsRef.current.filter(function (el) {
-      return getElementInView(containerRect, el.getBoundingClientRect());
-    });
+  const getElementsInView = React.useCallback(() => {
+    const containerRect = scrollRef?.current?.getBoundingClientRect();
+    const inViewElements = childElementsRef.current.filter(el => getElementInView(containerRect, el.getBoundingClientRect()));
     return inViewElements;
   }, [getElementInView]);
 
   // Return container's and children's rect data
-  var getContainerAndChildRectData = React.useCallback(function () {
-    var _scrollRef$current5;
+  const getContainerAndChildRectData = React.useCallback(() => {
     // Get the rect of the container
-    var containerRect = scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.getBoundingClientRect();
+    const containerRect = scrollRef?.current?.getBoundingClientRect();
     // Get all child elements that are in view of the container, and return their bounding rects.
-    var elementRectsInView = getElementsInView().map(function (el) {
-      return el.getBoundingClientRect();
-    });
+    const elementRectsInView = getElementsInView().map(el => el.getBoundingClientRect());
 
     // What is the overall width of the visible elements in the container
     // Note: may end up being 0 if the container's width is less than the child's width
-    var visibleWidth = elementRectsInView.reduce(function (accumulator, currentValue) {
-      return accumulator + currentValue.width;
-    }, 0);
+    const visibleWidth = elementRectsInView.reduce((accumulator, currentValue) => accumulator + currentValue.width, 0);
     return {
-      containerRect: containerRect,
-      elementRectsInView: elementRectsInView,
-      visibleWidth: visibleWidth
+      containerRect,
+      elementRectsInView,
+      visibleWidth
     };
   }, [getElementsInView]);
-  var handleScrollNext = React.useCallback(function () {
+  const handleScrollNext = React.useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
-    var _getContainerAndChild = getContainerAndChildRectData(),
-      containerRect = _getContainerAndChild.containerRect,
-      visibleWidth = _getContainerAndChild.visibleWidth;
+    const {
+      containerRect,
+      visibleWidth
+    } = getContainerAndChildRectData();
     // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
-    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect === null || containerRect === void 0 ? void 0 : containerRect.width;
+    const scrollValue = visibleWidth > 0 ? visibleWidth : containerRect?.width;
     // Increment the scrollLeft of the container
     scrollRef.current.scrollLeft += scrollValue;
   }, [getContainerAndChildRectData]);
-  var handleScrollPrev = React.useCallback(function () {
-    var _containerRect$width, _containerRect$left;
+  const handleScrollPrev = React.useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
-    var _getContainerAndChild2 = getContainerAndChildRectData(),
-      containerRect = _getContainerAndChild2.containerRect,
-      elementRectsInView = _getContainerAndChild2.elementRectsInView,
-      visibleWidth = _getContainerAndChild2.visibleWidth;
+    const {
+      containerRect,
+      elementRectsInView,
+      visibleWidth
+    } = getContainerAndChildRectData();
     // Set the scrollValue to the visibleWidth minus the first child's left value,
     // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
-    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : ((_containerRect$width = containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) !== null && _containerRect$width !== void 0 ? _containerRect$width : 0) + ((_containerRect$left = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _containerRect$left !== void 0 ? _containerRect$left : 0);
+    const scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : (containerRect?.width ?? 0) + (containerRect?.left ?? 0);
 
     // Decrement the scrollLeft of the container
     scrollRef.current.scrollLeft -= scrollValue;
   }, [getContainerAndChildRectData]);
-  var handleScrollReset = React.useCallback(function () {
+  const handleScrollReset = React.useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -167,17 +157,17 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // ...so trigger a callback manually.
     handleOnScroll();
   }, [handleOnScroll]);
-  var handleScrollToView = React.useCallback(function (itemNumber) {
+  const handleScrollToView = React.useCallback(itemNumber => {
     childElementsRef.current[itemNumber].scrollIntoView();
   }, []);
 
   // Trigger a callback after first render (and applied CSS).
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Normally, we can trigger a callback "immediately after first
     // render", because we will be doing more "logical" work (update
     // a state, show / hide a feature, etc.), and the final, applied
     // CSS can "catch up" asynchronously without breaking anything.
-    setTimeout(function () {
+    setTimeout(() => {
       // But, because we are making calculations based on the final,
       // applied CSS, we must wait for one more "tick".
       handleOnScroll();
@@ -186,8 +176,8 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []);
 
   // On window.resize, reset carousel to zero.
-  React.useEffect(function () {
-    var handleWindowResize = function handleWindowResize() {
+  React.useEffect(() => {
+    const handleWindowResize = () => {
       if (!scrollRef.current) {
         return;
       }
@@ -195,25 +185,21 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleOnScroll();
     };
     window.addEventListener('resize', handleWindowResize);
-    return function () {
-      return window.removeEventListener('resize', handleWindowResize);
-    };
+    return () => window.removeEventListener('resize', handleWindowResize);
   }, [handleOnScroll]);
 
   // On scrollRef.scrollend, trigger a callback.
-  React.useEffect(function () {
-    var handleScrollend = function handleScrollend() {
+  React.useEffect(() => {
+    const handleScrollend = () => {
       handleOnScroll();
     };
-    var scrollDiv = scrollRef.current;
-    scrollDiv === null || scrollDiv === void 0 || scrollDiv.addEventListener('scrollend', handleScrollend);
-    return function () {
-      return scrollDiv === null || scrollDiv === void 0 ? void 0 : scrollDiv.removeEventListener('scrollend', handleScrollend);
-    };
+    const scrollDiv = scrollRef.current;
+    scrollDiv?.addEventListener('scrollend', handleScrollend);
+    return () => scrollDiv?.removeEventListener('scrollend', handleScrollend);
   }, [handleOnScroll]);
 
   // Disable wheel scrolling
-  React.useEffect(function () {
+  React.useEffect(() => {
     function handleWheel(event) {
       // update the scroll position
       if (event.shiftKey) {
@@ -222,61 +208,59 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
         event.cancelBubble = false;
       }
     }
-    var scrollDiv = scrollRef.current;
+    const scrollDiv = scrollRef.current;
     if (scrollDiv) {
       scrollDiv.addEventListener('wheel', handleWheel, {
         passive: false
       });
-      return function () {
+      return () => {
         scrollDiv.removeEventListener('wheel', handleWheel);
       };
     }
   }, []);
 
   // Enable arrow scrolling from within the carousel
-  React.useEffect(function () {
+  React.useEffect(() => {
     function handleKeydown(event) {
-      var key = event.key;
+      const {
+        key
+      } = event;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
         event.stopPropagation();
         event.preventDefault();
         event.cancelBubble = false;
       }
     }
-    var carouselDiv = carouselRef.current;
+    const carouselDiv = carouselRef.current;
     if (carouselDiv) {
       carouselDiv.addEventListener('keydown', handleKeydown);
-      return function () {
-        return carouselDiv.removeEventListener('keydown', handleKeydown);
-      };
+      return () => carouselDiv.removeEventListener('keydown', handleKeydown);
     }
   }, [disableArrowScroll]);
 
   // Enable external function calls
-  React.useImperativeHandle(ref, function () {
-    return {
-      scrollNext: function scrollNext() {
-        handleScrollNext();
-      },
-      scrollPrev: function scrollPrev() {
-        handleScrollPrev();
-      },
-      scrollReset: function scrollReset() {
-        handleScrollReset();
-      },
-      scrollToView: function scrollToView(itemNumber) {
-        handleScrollToView(itemNumber);
-      }
-    };
-  }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
-      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+  React.useImperativeHandle(ref, () => ({
+    scrollNext() {
+      handleScrollNext();
+    },
+    scrollPrev() {
+      handleScrollPrev();
+    },
+    scrollReset() {
+      handleScrollReset();
+    },
+    scrollToView(itemNumber) {
+      handleScrollToView(itemNumber);
+    }
+  }), [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    if (leftFadedEdgeRef?.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = `linear-gradient(90deg, ${leftFadedEdgeColor}, transparent)`;
     }
   }, [leftFadedEdgeRef, leftFadedEdgeColor]);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
-    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
-      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    if (rightFadedEdgeRef?.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = `linear-gradient(270deg, ${rightFadedEdgeColor}, transparent)`;
     }
   }, [rightFadedEdgeRef, rightFadedEdgeColor]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
@@ -284,23 +268,23 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: cx(blockClass, className),
     ref: carouselRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__elements-container"))
+    className: cx(`${blockClass}__elements-container`)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__elements"),
+    className: `${blockClass}__elements`,
     ref: scrollRef
-  }, React.Children.map(children, function (child, index) {
+  }, React.Children.map(children, (child, index) => {
     return /*#__PURE__*/React.createElement(CarouselItem.CarouselItem, {
       key: index,
-      ref: function ref(element) {
+      ref: element => {
         childElementsRef.current[index] = element;
       }
     }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
     ref: leftFadedEdgeRef,
-    className: "".concat(blockClass, "__elements-container--scrolled")
+    className: `${blockClass}__elements-container--scrolled`
   }), rightFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
     ref: rightFadedEdgeRef,
-    className: "".concat(blockClass, "__elements-container--scroll-max")
+    className: `${blockClass}__elements-container--scroll-max`
   })));
 });
 Carousel.displayName = componentName;

package/lib/components/Carousel/CarouselItem.js

@@ -14,21 +14,22 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className"];
 // 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, "--carousel__item");
-var componentName = 'CarouselItem';
+const blockClass = `${settings.pkg.prefix}--carousel__item`;
+const componentName = 'CarouselItem';
 
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+const CarouselItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className)
   }, devtools.getDevtoolsProps(componentName), {

package/lib/components/Cascade/Cascade.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../_virtual/index.js');
@@ -15,10 +14,15 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className", "grid"];
-var blockClass = "".concat(settings.pkg.prefix, "--cascade");
-var componentName = 'Cascade';
-var defaults = {
+// Copyright IBM Corp. 2021, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+const blockClass = `${settings.pkg.prefix}--cascade`;
+const componentName = 'Cascade';
+const defaults = {
   grid: false
 };
 /**
@@ -30,35 +34,36 @@ the page. It should not be used on a page if it is the secondary focus of the
 page as that will distract the user.
 
 */
-exports.Cascade = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    _props$grid = props.grid,
-    grid = _props$grid === void 0 ? defaults.grid : _props$grid,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-  var childProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+exports.Cascade = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    grid = defaults.grid,
+    ...rest
+  } = props;
+  const childProps = {
+    ...rest,
     className: cx(blockClass, className),
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName));
-  var modifyChildren = function modifyChildren(child) {
-    var className = cx(child.props.className, "".concat(blockClass, "__element"));
+    ref,
+    ...devtools.getDevtoolsProps(componentName)
+  };
+  const modifyChildren = child => {
+    const className = cx(child.props.className, `${blockClass}__element`);
     return /*#__PURE__*/React.cloneElement(child, {
-      className: className
+      className
     });
   };
-  var getModifiedChildren = function getModifiedChildren() {
-    return React.Children.map(children, function (child) {
-      return modifyChildren(child);
-    });
+  const getModifiedChildren = () => {
+    return React.Children.map(children, child => modifyChildren(child));
   };
   if (grid) {
-    var colIdx = 0;
-    var gridElm = React.Children.map(children, function (row) {
+    let colIdx = 0;
+    const gridElm = React.Children.map(children, row => {
       if (/*#__PURE__*/React.isValidElement(row)) {
-        var cols = React.Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
+        const cols = React.Children.map(row?.props.children, col => {
           if (/*#__PURE__*/React.isValidElement(col)) {
             colIdx = colIdx + 1;
-            var colClassnames = cx(col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
+            const colClassnames = cx(col.props.className, `${blockClass}__col`, `${blockClass}__col-${colIdx}`);
             return /*#__PURE__*/React.cloneElement(col, {
               className: colClassnames
             });