@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/Card/CardHeader.js

@@ -5,49 +5,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
-import { usePrefix, Button } from '@carbon/react';
+import { usePrefix, Heading, Button } from '@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 = usePrefix();
-  var blockClass = "".concat(pkg.prefix, "--card");
-  var headerClass = "".concat(blockClass, "__header");
-  var headerClasses = cx(headerClass, _defineProperty(_defineProperty(_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, _defineProperty({}, "".concat(actionGhostButton, "--only"), noActionIcons));
-  var hollowAiIcon = /*#__PURE__*/React__default.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 = usePrefix();
+  const blockClass = `${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__default.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",
@@ -63,12 +68,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__default.cloneElement(element, {
         size: label && title || title && titleSize === 'large' ? 'sm' : 'xs'
       });
@@ -77,17 +82,25 @@ var CardHeader = function CardHeader(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx(["".concat(headerClass, "-container"), _defineProperty({}, "".concat(headerClass, "-container--has-slug"), !!slug), _defineProperty({}, "".concat(headerClass, "-container--has-decorator"), !!decorator), _defineProperty({}, "".concat(headerClass, "-container--has-actions"), !!hasActions), _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__default.createElement("div", {
-    className: "".concat(blockClass, "__title-container")
+    className: `${blockClass}__title-container`
   }, label && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__label")
-  }, label), title && /*#__PURE__*/React__default.createElement("h6", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__label`
+  }, label), title && /*#__PURE__*/React__default.createElement(Heading, {
+    className: `${blockClass}__title`
   }, title), description && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__description")
+    className: `${blockClass}__description`
   }, description)), hasActions && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
+    className: `${blockClass}__actions ${blockClass}__actions-header`
   }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     onClick: onSecondaryButtonClick,
@@ -104,7 +117,7 @@ var CardHeader = function CardHeader(_ref) {
     className: actionGhostButtonClass,
     disabled: primaryButtonDisabled
   }, primaryButtonText)), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header__inner-wrapper--decorator")
+    className: `${blockClass}__header__inner-wrapper--decorator`
   }, normalizedDecorator) : ''));
 };
 /**@ts-ignore */

package/es/components/Carousel/Carousel.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { CarouselItem } from './CarouselItem.js';
@@ -14,16 +14,15 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { useIsomorphicEffect } from '../../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(pkg.prefix, "--carousel");
-var componentName = 'Carousel';
+const blockClass = `${pkg.prefix}--carousel`;
+const componentName = 'Carousel';
 
 // Default values for props
-var defaults = {
+const defaults = {
   disableArrowScroll: false,
-  onScroll: function onScroll() {},
-  onChangeIsScrollable: function onChangeIsScrollable() {}
+  onScroll: () => {},
+  onChangeIsScrollable: () => {}
 };
 
 /**
@@ -42,44 +41,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__default.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 = _objectWithoutProperties(props, _excluded);
-  var carouselRef = useRef(null);
-  var scrollRef = useRef(null);
-  var leftFadedEdgeRef = useRef(null);
-  var rightFadedEdgeRef = useRef(null);
+const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    disableArrowScroll = defaults.disableArrowScroll,
+    fadedEdgeColor,
+    onChangeIsScrollable = defaults.onChangeIsScrollable,
+    onScroll = defaults.onScroll,
+    ...rest
+  } = props;
+  const carouselRef = useRef(null);
+  const scrollRef = useRef(null);
+  const leftFadedEdgeRef = useRef(null);
+  const rightFadedEdgeRef = useRef(null);
   // Array of refs used to reference this component's children DOM elements
-  var childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
-  var leftFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
-  var rightFadedEdgeColor = _typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right : fadedEdgeColor;
+  const childElementsRef = useRef(Array(React__default.Children.count(children)).fill(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 = useCallback(function () {
-    var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+  const handleOnScroll = 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);
@@ -89,74 +86,67 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }, [onChangeIsScrollable, onScroll]);
 
   // Check if an individual child element is visible in the container
-  var getElementInView = useCallback(function (containerRect, elementRect) {
+  const getElementInView = 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 = 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 = 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 = useCallback(function () {
-    var _scrollRef$current5;
+  const getContainerAndChildRectData = 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 = useCallback(function () {
+  const handleScrollNext = 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 = useCallback(function () {
-    var _containerRect$width, _containerRect$left;
+  const handleScrollPrev = 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 = useCallback(function () {
+  const handleScrollReset = useCallback(() => {
     if (!scrollRef.current) {
       return;
     }
@@ -165,17 +155,17 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     // ...so trigger a callback manually.
     handleOnScroll();
   }, [handleOnScroll]);
-  var handleScrollToView = useCallback(function (itemNumber) {
+  const handleScrollToView = useCallback(itemNumber => {
     childElementsRef.current[itemNumber].scrollIntoView();
   }, []);
 
   // Trigger a callback after first render (and applied CSS).
-  useEffect(function () {
+  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();
@@ -184,8 +174,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }, []);
 
   // On window.resize, reset carousel to zero.
-  useEffect(function () {
-    var handleWindowResize = function handleWindowResize() {
+  useEffect(() => {
+    const handleWindowResize = () => {
       if (!scrollRef.current) {
         return;
       }
@@ -193,25 +183,21 @@ var Carousel = /*#__PURE__*/React__default.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.
-  useEffect(function () {
-    var handleScrollend = function handleScrollend() {
+  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
-  useEffect(function () {
+  useEffect(() => {
     function handleWheel(event) {
       // update the scroll position
       if (event.shiftKey) {
@@ -220,61 +206,59 @@ var Carousel = /*#__PURE__*/React__default.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
-  useEffect(function () {
+  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
-  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(function () {
-    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
-      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+  useImperativeHandle(ref, () => ({
+    scrollNext() {
+      handleScrollNext();
+    },
+    scrollPrev() {
+      handleScrollPrev();
+    },
+    scrollReset() {
+      handleScrollReset();
+    },
+    scrollToView(itemNumber) {
+      handleScrollToView(itemNumber);
+    }
+  }), [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
+  useIsomorphicEffect(() => {
+    if (leftFadedEdgeRef?.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = `linear-gradient(90deg, ${leftFadedEdgeColor}, transparent)`;
     }
   }, [leftFadedEdgeRef, leftFadedEdgeColor]);
-  useIsomorphicEffect(function () {
-    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
-      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+  useIsomorphicEffect(() => {
+    if (rightFadedEdgeRef?.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = `linear-gradient(270deg, ${rightFadedEdgeColor}, transparent)`;
     }
   }, [rightFadedEdgeRef, rightFadedEdgeColor]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
@@ -282,23 +266,23 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     className: cx(blockClass, className),
     ref: carouselRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__elements-container"))
+    className: cx(`${blockClass}__elements-container`)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__elements"),
+    className: `${blockClass}__elements`,
     ref: scrollRef
-  }, React__default.Children.map(children, function (child, index) {
+  }, React__default.Children.map(children, (child, index) => {
     return /*#__PURE__*/React__default.createElement(CarouselItem, {
       key: index,
-      ref: function ref(element) {
+      ref: element => {
         childElementsRef.current[index] = element;
       }
     }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
     ref: leftFadedEdgeRef,
-    className: "".concat(blockClass, "__elements-container--scrolled")
+    className: `${blockClass}__elements-container--scrolled`
   }), rightFadedEdgeColor && /*#__PURE__*/React__default.createElement("div", {
     ref: rightFadedEdgeRef,
-    className: "".concat(blockClass, "__elements-container--scroll-max")
+    className: `${blockClass}__elements-container--scroll-max`
   })));
 });
 Carousel.displayName = componentName;

package/es/components/Carousel/CarouselItem.js

@@ -5,28 +5,29 @@
  * 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 = ["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(pkg.prefix, "--carousel__item");
-var componentName = 'CarouselItem';
+const blockClass = `${pkg.prefix}--carousel__item`;
+const componentName = 'CarouselItem';
 
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
+const CarouselItem = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className)
   }, getDevtoolsProps(componentName), {