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

package/es/global/js/hooks/useOverflowItems/useOverflowItems.js

@@ -5,85 +5,76 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useRef } from 'react';
 import { useResizeObserver } from '../useResizeObserver.js';
 
 function useOverflowItems() {
-  var _items$slice;
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var containerRef = arguments.length > 1 ? arguments[1] : undefined;
-  var offsetRef = arguments.length > 2 ? arguments[2] : undefined;
-  var maxItems = arguments.length > 3 ? arguments[3] : undefined;
-  var onChange = arguments.length > 4 ? arguments[4] : undefined;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    remainingWidth = _useState2[0],
-    setRemainingWidth = _useState2[1];
-  var offsetWidthRef = useRef(0);
-  var itemsRef = useRef(null);
-  var visibleItemCount = useRef(0);
-  var minWidthRef = useRef(0);
-  var requiredWidthRef = useRef(0);
-  var handleResize = function handleResize() {
-    if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
-      var _offsetRef$current;
-      offsetWidthRef.current = (offsetRef === null || offsetRef === void 0 || (_offsetRef$current = offsetRef.current) === null || _offsetRef$current === void 0 ? void 0 : _offsetRef$current.offsetWidth) || 0;
-      var usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
+  let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let containerRef = arguments.length > 1 ? arguments[1] : undefined;
+  let offsetRef = arguments.length > 2 ? arguments[2] : undefined;
+  let maxItems = arguments.length > 3 ? arguments[3] : undefined;
+  let onChange = arguments.length > 4 ? arguments[4] : undefined;
+  const [remainingWidth, setRemainingWidth] = useState(0);
+  const offsetWidthRef = useRef(0);
+  const itemsRef = useRef(null);
+  const visibleItemCount = useRef(0);
+  const minWidthRef = useRef(0);
+  const requiredWidthRef = useRef(0);
+  const handleResize = () => {
+    if (containerRef?.current) {
+      offsetWidthRef.current = offsetRef?.current?.offsetWidth || 0;
+      const usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
       setRemainingWidth(usableWidth);
     }
   };
-  var offsetRefHandler = function offsetRefHandler(node) {
-    if (node && containerRef !== null && containerRef !== void 0 && containerRef.current) {
+  const offsetRefHandler = node => {
+    if (node && containerRef?.current) {
       offsetWidthRef.current = node.offsetWidth;
-      var usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
+      const usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
       setRemainingWidth(usableWidth);
     }
     return node;
   };
   useResizeObserver(containerRef, handleResize);
-  var getMap = function getMap() {
+  const getMap = () => {
     if (!itemsRef.current) {
       itemsRef.current = new Map();
     }
     return itemsRef.current;
   };
-  var requiredWidth = items === null || items === void 0 || (_items$slice = items.slice(0, maxItems)) === null || _items$slice === void 0 ? void 0 : _items$slice.reduce(function (acc, item) {
-    return acc + (getMap().get(item.id) || 0);
-  }, 0);
-  var itemRefHandler = function itemRefHandler(id, node) {
-    var map = getMap();
+  const requiredWidth = items?.slice(0, maxItems)?.reduce((acc, item) => acc + (getMap().get(item.id) || 0), 0);
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
     if (node) {
-      var _getComputedStyle;
-      var style = (_getComputedStyle = getComputedStyle) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle(node);
-      var totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
       map.set(id, totalWidth);
     }
-    return function () {
+    return () => {
       map.delete(id);
     };
   };
-  var getVisibleItems = function getVisibleItems() {
+  const getVisibleItems = () => {
     if (!containerRef) {
       return items;
     }
-    var map = getMap();
-    var maxReached = false;
-    var accumulatedWidth = 0;
-    var includeOffset = false;
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    let includeOffset = false;
     if (maxItems) {
-      includeOffset = requiredWidth + (offsetWidthRef === null || offsetWidthRef === void 0 ? void 0 : offsetWidthRef.current) > requiredWidth;
+      includeOffset = requiredWidth + offsetWidthRef?.current > requiredWidth;
     } else {
-      includeOffset = requiredWidth > remainingWidth + (offsetWidthRef === null || offsetWidthRef === void 0 ? void 0 : offsetWidthRef.current);
+      includeOffset = requiredWidth > remainingWidth + offsetWidthRef?.current;
     }
-    return items.slice(0, maxItems).reduce(function (prev, cur) {
+    return items.slice(0, maxItems).reduce((prev, cur) => {
       if (maxReached) {
         return prev;
       }
-      var itemWidth = map.get(cur.id) || 0;
-      var willFit = accumulatedWidth + itemWidth <= remainingWidth;
+      const itemWidth = map.get(cur.id) || 0;
+      let willFit = accumulatedWidth + itemWidth <= remainingWidth;
       if (!includeOffset) {
-        willFit = accumulatedWidth + itemWidth <= remainingWidth + (offsetWidthRef === null || offsetWidthRef === void 0 ? void 0 : offsetWidthRef.current);
+        willFit = accumulatedWidth + itemWidth <= remainingWidth + offsetWidthRef?.current;
       }
       if (willFit) {
         accumulatedWidth += itemWidth;
@@ -94,27 +85,26 @@ function useOverflowItems() {
       return prev;
     }, []);
   };
-  var visibleItems = getVisibleItems();
-  var hiddenItems = items.slice(visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length);
+  const visibleItems = getVisibleItems();
+  const hiddenItems = items.slice(visibleItems?.length);
   // only call the change handler when the number of visible items has changed
-  if ((visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length) !== visibleItemCount.current || remainingWidth !== minWidthRef.current || requiredWidth !== requiredWidthRef.current) {
-    var _getMap, _getMap2;
-    visibleItemCount.current = visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length;
+  if (visibleItems?.length !== visibleItemCount.current || remainingWidth !== minWidthRef.current || requiredWidth !== requiredWidthRef.current) {
+    visibleItemCount.current = visibleItems?.length;
     minWidthRef.current = remainingWidth;
     requiredWidthRef.current = requiredWidth;
-    var firstItemKey = ((_getMap = getMap()) === null || _getMap === void 0 || (_getMap = _getMap.keys()) === null || _getMap === void 0 || (_getMap = _getMap.next()) === null || _getMap === void 0 ? void 0 : _getMap.value) || '';
-    var firstItemWidth = ((_getMap2 = getMap()) === null || _getMap2 === void 0 ? void 0 : _getMap2.get(firstItemKey)) || 0;
-    onChange === null || onChange === void 0 || onChange({
-      hiddenItems: hiddenItems,
+    const firstItemKey = getMap()?.keys()?.next()?.value || '';
+    const firstItemWidth = getMap()?.get(firstItemKey) || 0;
+    onChange?.({
+      hiddenItems,
       minWidth: remainingWidth,
       maxWidth: requiredWidth + firstItemWidth
     });
   }
   return {
-    visibleItems: visibleItems,
-    itemRefHandler: itemRefHandler,
-    hiddenItems: hiddenItems,
-    offsetRefHandler: offsetRefHandler
+    visibleItems,
+    itemRefHandler,
+    hiddenItems,
+    offsetRefHandler
   };
 }
 

package/es/global/js/hooks/useOverflowString.js

@@ -5,45 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useCallback, useEffect } from 'react';
 
 function useOverflowStringWidth(elementRef) {
-  var _elementRef$current;
-  var innerText = elementRef === null || elementRef === void 0 || (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.innerText;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOverflowing = _useState2[0],
-    setIsOverflowing = _useState2[1];
-  var checkWidthOverflow = useCallback(function () {
-    var _elementRef$current2, _elementRef$current3;
-    var offsetWidth = elementRef === null || elementRef === void 0 || (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.offsetWidth;
-    var scrollWidth = elementRef === null || elementRef === void 0 || (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.scrollWidth;
+  const innerText = elementRef?.current?.innerText;
+  const [isOverflowing, setIsOverflowing] = useState();
+  const checkWidthOverflow = useCallback(() => {
+    const offsetWidth = elementRef?.current?.offsetWidth;
+    const scrollWidth = elementRef?.current?.scrollWidth;
     if (offsetWidth && scrollWidth) {
       setIsOverflowing(offsetWidth < scrollWidth);
     }
   }, [elementRef]);
-  useEffect(function () {
+  useEffect(() => {
     checkWidthOverflow();
   }, [checkWidthOverflow, elementRef, innerText]);
   return isOverflowing;
 }
-var useOverflowStringHeight = function useOverflowStringHeight(elementRef) {
-  var _elementRef$current4;
-  var innerText = elementRef === null || elementRef === void 0 || (_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === void 0 ? void 0 : _elementRef$current4.innerText;
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isOverflowing = _useState4[0],
-    setIsOverflowing = _useState4[1];
-  var checkHeightOverflow = useCallback(function () {
-    var _elementRef$current5, _elementRef$current6;
-    var offsetHeight = elementRef === null || elementRef === void 0 || (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === void 0 ? void 0 : _elementRef$current5.offsetHeight;
-    var scrollHeight = elementRef === null || elementRef === void 0 || (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === void 0 ? void 0 : _elementRef$current6.scrollHeight;
+const useOverflowStringHeight = elementRef => {
+  const innerText = elementRef?.current?.innerText;
+  const [isOverflowing, setIsOverflowing] = useState();
+  const checkHeightOverflow = useCallback(() => {
+    const offsetHeight = elementRef?.current?.offsetHeight;
+    const scrollHeight = elementRef?.current?.scrollHeight;
     if (offsetHeight && scrollHeight) {
       setIsOverflowing(offsetHeight < scrollHeight);
     }
   }, [elementRef]);
-  useEffect(function () {
+  useEffect(() => {
     checkHeightOverflow();
   }, [checkHeightOverflow, elementRef, innerText]);
   return isOverflowing;

package/es/global/js/hooks/usePortalTarget.js

@@ -5,20 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import '../../../feature-flags.js';
 import { useState, useEffect, useCallback } from 'react';
 import { pkg } from '../../../settings.js';
 import { createPortal } from 'react-dom';
 import { useFeatureFlag } from '../../../components/FeatureFlags/index.js';
 
-var usePortalTarget = function usePortalTarget(portalTargetIn) {
-  var enablePortalTarget = useFeatureFlag('default-portal-target-body');
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    portalTarget = _useState2[0],
-    setPortalTarget = _useState2[1];
-  useEffect(function () {
+const usePortalTarget = portalTargetIn => {
+  const enablePortalTarget = useFeatureFlag('default-portal-target-body');
+  const [portalTarget, setPortalTarget] = useState(null);
+  useEffect(() => {
     if (portalTargetIn) {
       setPortalTarget(portalTargetIn);
     } else {
@@ -27,9 +23,7 @@ var usePortalTarget = function usePortalTarget(portalTargetIn) {
       }
     }
   }, [portalTargetIn, enablePortalTarget]);
-  var renderPortalUse = useCallback(function (children) {
-    return portalTarget ? /*#__PURE__*/createPortal(children, portalTarget) : children;
-  }, [portalTarget]);
+  const renderPortalUse = useCallback(children => portalTarget ? /*#__PURE__*/createPortal(children, portalTarget) : children, [portalTarget]);
   return renderPortalUse;
 };
 

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -5,25 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState } from 'react';
 import { useIsomorphicEffect } from './useIsomorphicEffect.js';
 
-var usePrefersReducedMotion = function usePrefersReducedMotion() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    prefersReducedMotion = _useState2[0],
-    setPrefersReducedMotion = _useState2[1];
-  useIsomorphicEffect(function () {
-    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
-    var _window$matchMedia = window.matchMedia('(prefers-reduced-motion: no-preference)'),
-      matches = _window$matchMedia.matches;
+// safety checks for remix env
+// https://remix.run/docs/en/main/guides/gotchas#typeof-window-checks
+
+const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useIsomorphicEffect(() => {
+    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
+    const {
+      matches
+    } = window.matchMedia('(prefers-reduced-motion: no-preference)');
     setPrefersReducedMotion(!matches);
-    var listener = function listener(event) {
+    const listener = event => {
       setPrefersReducedMotion(!event.matches);
     };
     mediaQueryList.addEventListener('change', listener);
-    return function () {
+    return () => {
       mediaQueryList.removeEventListener('change', listener);
     };
   }, []);

package/es/global/js/hooks/usePrefix.js

@@ -7,8 +7,6 @@
 
 import pkg from '../package-settings.js';
 
-var usePrefix = function usePrefix() {
-  return pkg.prefix;
-};
+const usePrefix = () => pkg.prefix;
 
 export { usePrefix };

package/es/global/js/hooks/usePresence.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useEffect } from 'react';
 
 /**
@@ -32,12 +31,9 @@ import { useState, useEffect } from 'react';
  * ```
  */
 function usePresence(open, ref, animationName) {
-  var _useState = useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setShouldRender = _useState2[1];
-  useEffect(function () {
-    var handleAnimationEnd = function handleAnimationEnd(event) {
+  const [shouldRender, setShouldRender] = useState(open);
+  useEffect(() => {
+    const handleAnimationEnd = event => {
       if (!open && event.animationName === animationName) {
         setShouldRender(false);
       }
@@ -45,18 +41,18 @@ function usePresence(open, ref, animationName) {
     if (open) {
       setShouldRender(true);
     }
-    if (ref !== null && ref !== void 0 && ref.current) {
-      ref === null || ref === void 0 || ref.current.addEventListener('animationend', handleAnimationEnd);
+    if (ref?.current) {
+      ref?.current.addEventListener('animationend', handleAnimationEnd);
     }
-    var animatedRef = ref === null || ref === void 0 ? void 0 : ref.current;
-    return function () {
+    const animatedRef = ref?.current;
+    return () => {
       if (animatedRef) {
         animatedRef.removeEventListener('animationend', handleAnimationEnd);
       }
     };
   }, [open, setShouldRender, ref, animationName]);
   return {
-    shouldRender: shouldRender
+    shouldRender
   };
 }
 

package/es/global/js/hooks/usePreviousValue.js

@@ -12,9 +12,9 @@ import { useRef, useEffect } from 'react';
  * @param {object} value - The current value of any type.
  * @returns {T | undefined} - The previous value of the same type, or undefined if there is none
  */
-var usePreviousValue = function usePreviousValue(value) {
-  var ref = useRef(undefined);
-  useEffect(function () {
+const usePreviousValue = value => {
+  const ref = useRef(undefined);
+  useEffect(() => {
     ref.current = value;
   });
   return ref.current;

package/es/global/js/hooks/useResetCreateComponent.js

@@ -20,19 +20,21 @@ import { getNumberOfHiddenSteps } from '../utils/getNumberOfHiddenSteps.js';
  * @param {number} useResetCreateComponent.totalSteps
  * @param {string} useResetCreateComponent.componentName
  */
-var useResetCreateComponent = function useResetCreateComponent(_ref) {
-  var firstIncludedStep = _ref.firstIncludedStep,
-    previousState = _ref.previousState,
-    open = _ref.open,
-    setCurrentStep = _ref.setCurrentStep,
-    stepData = _ref.stepData,
-    initialStep = _ref.initialStep,
-    totalSteps = _ref.totalSteps,
-    componentName = _ref.componentName;
-  useEffect(function () {
-    if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
+const useResetCreateComponent = _ref => {
+  let {
+    firstIncludedStep,
+    previousState,
+    open,
+    setCurrentStep,
+    stepData,
+    initialStep,
+    totalSteps,
+    componentName
+  } = _ref;
+  useEffect(() => {
+    if (!previousState?.open && open) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
-        var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
+        const numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
         setCurrentStep(Number(initialStep + numberOfHiddenSteps));
       } else {
         // default should be fist includedStep instead of just 1
@@ -41,7 +43,7 @@ var useResetCreateComponent = function useResetCreateComponent(_ref) {
 
       // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
       if (initialStep && totalSteps && Number(initialStep) > Number(totalSteps) || Number(initialStep) <= 0) {
-        console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
+        console.warn(`${componentName}: An invalid \`initialStep\` prop was supplied. The \`initialStep\` prop should be a number that is greater than 0 or less than or equal to the number of steps your ${componentName} has.`);
       }
     }
   }, [firstIncludedStep, open, previousState, setCurrentStep, stepData, initialStep, totalSteps, componentName]);

package/es/global/js/hooks/useResizeObserver.js

@@ -5,61 +5,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 
-var useResizeObserver = function useResizeObserver(ref, callback) {
-  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(-1),
-    _useState4 = _slicedToArray(_useState3, 2),
-    height = _useState4[0],
-    setHeight = _useState4[1];
-  var entriesToHandle = useRef(null);
-  var cb = useRef(callback);
-  useEffect(function () {
+const useResizeObserver = function (ref, callback) {
+  let deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  const [width, setWidth] = useState(-1);
+  const [height, setHeight] = useState(-1);
+  const entriesToHandle = useRef(null);
+  const cb = useRef(callback);
+  useEffect(() => {
     // ref for callback removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = callback;
   }, [callback]);
-  useEffect(function () {
-    var getInitialSize = function getInitialSize() {
+  useEffect(() => {
+    const getInitialSize = () => {
       if (ref.current) {
-        var _ref$current, _ref$current2;
-        var refComputedStyle = window.getComputedStyle(ref.current);
-        var initialWidth = (((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingRight) || 0));
-        var initialHeight = (((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.offsetHeight) || 0) - (parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingTop) || 0), parseFloat((refComputedStyle === null || refComputedStyle === void 0 ? void 0 : refComputedStyle.paddingLeft) || 0));
+        const refComputedStyle = window.getComputedStyle(ref.current);
+        const initialWidth = (ref.current?.offsetWidth || 0) - (parseFloat(refComputedStyle?.paddingLeft || 0), parseFloat(refComputedStyle?.paddingRight || 0));
+        const initialHeight = (ref.current?.offsetHeight || 0) - (parseFloat(refComputedStyle?.paddingTop || 0), parseFloat(refComputedStyle?.paddingLeft || 0));
         setWidth(initialWidth);
         setHeight(initialHeight);
       }
     };
-    if (!(ref !== null && ref !== void 0 && ref.current) || width >= 0 && height >= 0) {
+    if (!ref?.current || width >= 0 && height >= 0) {
       return;
     }
     getInitialSize();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, height, ref.current].concat(_toConsumableArray(deps)));
-  useLayoutEffect(function () {
-    if (!(ref !== null && ref !== void 0 && ref.current)) {
+  }, [width, height, ref.current, ...deps]);
+  useLayoutEffect(() => {
+    if (!ref?.current) {
       return;
     }
-    var doCallbacks = function doCallbacks() {
-      if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
+    const doCallbacks = () => {
+      if (!ref?.current || !Array.isArray(entriesToHandle?.current)) {
         return;
       }
-      var entry = entriesToHandle.current[0];
+      const entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
       cb.current && cb.current(entry.contentRect);
     };
-    var observer = new ResizeObserver(function (entries) {
+    let observer = new ResizeObserver(entries => {
       // always update entriesToHandle
       entriesToHandle.current = entries;
-      window.requestAnimationFrame(function () {
+      window.requestAnimationFrame(() => {
         // do callbacks
         doCallbacks();
       });
@@ -67,15 +59,15 @@ var useResizeObserver = function useResizeObserver(ref, callback) {
 
     // observe all refs passed
     observer.observe(ref.current);
-    return function () {
-      observer.disconnect();
+    return () => {
+      observer?.disconnect();
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current].concat(_toConsumableArray(deps)));
+  }, [ref.current, ...deps]);
   return {
-    width: width,
-    height: height
+    width,
+    height
   };
 };
 

package/es/global/js/hooks/useRetrieveFormTitles.js

@@ -5,19 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useEffect } from 'react';
 
-var useRetrieveFormTitles = function useRetrieveFormTitles(_ref) {
-  var formContext = _ref.formContext,
-    formNumber = _ref.formNumber,
-    title = _ref.title;
-  useEffect(function () {
+const useRetrieveFormTitles = _ref => {
+  let {
+    formContext,
+    formNumber,
+    title
+  } = _ref;
+  useEffect(() => {
     if (formContext) {
-      formContext.setFormTitles(function (prev) {
-        var prevTitle = prev[formNumber];
+      formContext.setFormTitles(prev => {
+        const prevTitle = prev[formNumber];
         if (prevTitle !== title) {
-          var clone = _toConsumableArray(prev);
+          const clone = [...prev];
           clone[formNumber] = title;
           return clone;
         }

package/es/global/js/hooks/useRetrieveStepData.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useEffect } from 'react';
 
 /**
@@ -20,27 +19,29 @@ import { useEffect } from 'react';
  * @param {string | undefined } useResetCreateComponent.secondaryLabel
  * @param {string | React.ReactNode} useResetCreateComponent.title
  */
-var useRetrieveStepData = function useRetrieveStepData(_ref) {
-  var stepsContext = _ref.stepsContext,
-    stepNumber = _ref.stepNumber,
-    introStep = _ref.introStep,
-    invalid = _ref.invalid,
-    shouldIncludeStep = _ref.shouldIncludeStep,
-    secondaryLabel = _ref.secondaryLabel,
-    title = _ref.title;
-  useEffect(function () {
+const useRetrieveStepData = _ref => {
+  let {
+    stepsContext,
+    stepNumber,
+    introStep,
+    invalid,
+    shouldIncludeStep,
+    secondaryLabel,
+    title
+  } = _ref;
+  useEffect(() => {
     if (stepsContext) {
-      stepsContext.setStepData(function (prev) {
-        var stepItem = {
-          title: title,
-          secondaryLabel: secondaryLabel,
-          introStep: introStep,
-          invalid: invalid,
-          shouldIncludeStep: shouldIncludeStep
+      stepsContext.setStepData(prev => {
+        const stepItem = {
+          title,
+          secondaryLabel,
+          introStep,
+          invalid,
+          shouldIncludeStep
         };
-        var previousItem = prev[stepNumber - 1];
-        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.invalid) !== stepItem.invalid) {
-          var clone = _toConsumableArray(prev);
+        const previousItem = prev[stepNumber - 1];
+        if (previousItem?.title !== stepItem.title || previousItem?.secondaryLabel !== stepItem.secondaryLabel || previousItem?.introStep !== stepItem.introStep || previousItem?.shouldIncludeStep !== stepItem.shouldIncludeStep || previousItem?.invalid !== stepItem.invalid) {
+          const clone = [...prev];
           clone[stepNumber - 1] = stepItem;
           return clone;
         }

package/es/global/js/hooks/useValidCreateStepCount.js

@@ -12,10 +12,10 @@ import { useEffect } from 'react';
  * @param {number} stepCount
  * @param {string} componentName
  */
-var useValidCreateStepCount = function useValidCreateStepCount(stepCount, componentName) {
-  useEffect(function () {
+const useValidCreateStepCount = (stepCount, componentName) => {
+  useEffect(() => {
     if (stepCount === 1) {
-      console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
+      console.warn(`${componentName}: ${componentName}s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components.`);
     }
   }, [stepCount, componentName]);
 };