@telus-uds/components-base 1.84.0 → 1.85.1

package/lib-module/CardGroup/CardGroup.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { a11yProps, focusHandlerProps, containUniqueFields, selectSystemProps, useMultipleInputValues, useInputValue, useCopy, viewProps, variantProp, getTokensPropType, copyPropTypes } from '../utils';
+import defaultDictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import StackView, { StackWrap } from '../StackView';
+import Card from '../Card';
+import Fieldset from '../Fieldset';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const uniqueFields = ['id'];
+const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens = {},
+    variant = {},
+    items = [],
+    validation,
+    feedback,
+    initialCheckedIds,
+    checkedIds,
+    onChange,
+    role = 'radiogroup',
+    isInactive,
+    name: inputGroupName,
+    dictionary = defaultDictionary,
+    ...rest
+  } = _ref;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const viewport = useViewport();
+  const cardGroupTokens = useThemeTokens('CardGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    space,
+    fieldSpace,
+    direction,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  } = cardGroupTokens;
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
+  const singleSelection = role === 'radiogroup';
+  const inputControl = {
+    value: checkedIds,
+    initialValue: initialCheckedIds,
+    onChange,
+    readOnly: isInactive
+  };
+  const singleInputValue = useInputValue(inputControl);
+  const multipleInputValues = useMultipleInputValues(inputControl);
+  const StackContainer = direction === 'row' ? StackWrap : StackView;
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+  const handleChange = React.useCallback((checked, event, cardId, itemOnChange) => {
+    if (checked && singleSelection) {
+      singleInputValue.setValue(cardId, event);
+    } else {
+      multipleInputValues.toggleOneValue(cardId, event);
+    }
+    return itemOnChange === null || itemOnChange === void 0 ? void 0 : itemOnChange(checked, event);
+  }, [singleInputValue, multipleInputValues, singleSelection]);
+  return /*#__PURE__*/_jsx(Fieldset, {
+    copy: copy,
+    ref: ref,
+    name: inputGroupName,
+    space: fieldSpace,
+    feedback: feedback,
+    validation: validation,
+    tokens: borderTokens,
+    inactive: isInactive,
+    showErrorBorder: true,
+    showIcon: showIcon,
+    accessibilityRole: role,
+    ...selectProps(rest),
+    children: props => /*#__PURE__*/_jsx(StackContainer, {
+      space: space,
+      children: items.map((_ref2, index) => {
+        let {
+          id,
+          interactiveCard,
+          card,
+          onPress: itemOnChange,
+          ...itemRest
+        } = _ref2;
+        const cardId = id || `${getCopy('prefixId')}[${index}]`;
+        const itemHandleChange = (checked, event) => handleChange(checked, event, cardId, itemOnChange);
+        return /*#__PURE__*/_jsx(Card, {
+          id: cardId,
+          onPress: itemHandleChange,
+          interactiveCard: {
+            ...interactiveCard,
+            tokens: {
+              paddingTop,
+              paddingBottom,
+              paddingLeft,
+              paddingRight,
+              ...(interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens)
+            },
+            variant: {
+              isControl: true,
+              selected: singleSelection ? singleInputValue.currentValue === cardId : multipleInputValues.currentValues.includes(cardId),
+              inactive: isInactive
+            },
+            selectionType: role
+          },
+          ...selectItemProps(itemRest),
+          ...props,
+          children: card === null || card === void 0 ? void 0 : card.body
+        }, cardId);
+      })
+    })
+  });
+});
+CardGroup.displayName = 'CardGroup';
+const dictionaryContentShape = PropTypes.shape({
+  prefixId: PropTypes.string.isRequired
+});
+CardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Optional theme token overrides for the outer RadioCardGroup component
+   */
+  tokens: getTokensPropType('CardGroup'),
+  /**
+   * Theme variants, shared between both RadioCardGroup and RadioCard
+   */
+  variant: variantProp.propType,
+  /**
+   * Array of objects containing specifics for each Card to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(PropTypes.exact({
+    ...selectedItemPropTypes,
+    id: PropTypes.string,
+    interactiveCard: PropTypes.object,
+    card: PropTypes.object,
+    onPress: PropTypes.func
+  })),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: PropTypes.string,
+  /**
+   * If provided, the card with this id is selected on first render.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  initialCheckedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * If not undefined, the card with this id is selected (or none is selected if `null`), and the
+   * element's selection state will be controlled by its parent using the `onChange` function.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  checkedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * Function to call on change in selection state. Is required if the selection state is controlled
+   * by a parent using checkedId and the input is not readOnly.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Renders the card group like a radio card group or a checkbox card group
+   */
+  role: PropTypes.oneOf(['radiogroup', 'checkbox']),
+  /**
+   * If true, the card cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  isInactive: PropTypes.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset and each input.
+   */
+  name: PropTypes.string
+};
+export default CardGroup;

package/lib-module/CardGroup/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    prefixId: 'Card'
+  },
+  fr: {
+    prefixId: 'Carte'
+  }
+};

package/lib-module/CardGroup/index.js

@@ -0,0 +1,2 @@
+import CardGroup from './CardGroup';
+export default CardGroup;

package/lib-module/Carousel/Carousel.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import Animated from "react-native-web/dist/exports/Animated";
 import PanResponder from "react-native-web/dist/exports/PanResponder";
@@ -157,7 +157,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -216,45 +216,45 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
-  const [activeIndex, setActiveIndex] = useState(0);
-  const activeIndexRef = useRef(activeIndex);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const activeIndexRef = React.useRef(activeIndex);
   const {
     reduceMotionEnabled
   } = useA11yInfo();
-  const reduceMotionRef = useRef(reduceMotionEnabled);
+  const reduceMotionRef = React.useRef(reduceMotionEnabled);
   const [containerLayout, setContainerLayout] = React.useState({
     x: 0,
     y: 0,
     width: 0
   });
-  const containerLayoutRef = useRef(containerLayout);
-  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = useState(0);
-  const firstFocusRef = useRef(null);
-  const pan = useRef(new Animated.ValueXY()).current;
-  const animatedX = useRef(0);
-  const animatedY = useRef(0);
-  const [isAnimating, setIsAnimating] = useState(false);
+  const containerLayoutRef = React.useRef(containerLayout);
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
+  const firstFocusRef = React.useRef(null);
+  const pan = React.useRef(new Animated.ValueXY()).current;
+  const animatedX = React.useRef(0);
+  const animatedY = React.useRef(0);
+  const [isAnimating, setIsAnimating] = React.useState(false);
   /**
    * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
    *
    * `isAutoPlayEnabled` is a state to determine if the autoplay feature is enabled or disabled
    * `isCarouselPlaying` is a state to determine if the carousel is currently playing or paused
    */
-  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = useState(autoPlayFeatureEnabled);
-  const [isCarouselPlaying, setisCarouselPlaying] = useState(autoPlayFeatureEnabled);
-  const isSwiping = useRef(false);
-  const autoPlayRef = useRef(null);
+  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = React.useState(autoPlayFeatureEnabled);
+  const [isCarouselPlaying, setisCarouselPlaying] = React.useState(autoPlayFeatureEnabled);
+  const isSwiping = React.useRef(false);
+  const autoPlayRef = React.useRef(null);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= childrenArray.length;
-  const handleAnimationStart = useCallback(function () {
+  const handleAnimationStart = React.useCallback(function () {
     if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
     setIsAnimating(true);
   }, [onAnimationStart]);
-  const handleAnimationEnd = useCallback(function () {
+  const handleAnimationEnd = React.useCallback(function () {
     if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
     setIsAnimating(false);
   }, [onAnimationEnd]);
-  const updateOffset = useCallback(() => {
+  const updateOffset = React.useCallback(() => {
     animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
     animatedY.current = 0;
     pan.setOffset({
@@ -266,7 +266,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       y: 0
     });
   }, [pan, animatedX]);
-  const animate = useCallback((toValue, toIndex) => {
+  const animate = React.useCallback((toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -294,12 +294,21 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       }).start(handleAnimationEndToIndex);
     }
   }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]);
-  const stopAutoplay = useCallback(() => {
+  const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
     }
   }, []);
-  const updateIndex = useCallback(function () {
+  const triggerRefocus = React.useCallback(() => {
+    if (refocus && Platform.OS === 'web') {
+      var _firstFocusRef$curren;
+      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus({
+        preventScroll: true,
+        focusVisible: false
+      });
+    }
+  }, [refocus, firstFocusRef]);
+  const updateIndex = React.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     let transitionMode = arguments.length > 1 ? arguments[1] : undefined;
     const toValue = {
@@ -330,51 +339,48 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
         setisCarouselPlaying(false);
       } else if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
-          var _firstFocusRef$curren;
           updateOffset();
           handleAnimationStart(activeIndexRef.current);
           updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-          if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
+          triggerRefocus();
         }, Math.abs(slideDuration) * 1000);
       }
     }
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
-  }, [handleAnimationStart, refocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
-  const startAutoplay = useCallback(() => {
+  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
+  const startAutoplay = React.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
       autoPlayRef.current = setTimeout(() => {
-        var _firstFocusRef$curren2;
         updateOffset();
         handleAnimationStart(activeIndexRef.current);
         updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-        if (refocus && Platform.OS === 'web') (_firstFocusRef$curren2 = firstFocusRef.current) === null || _firstFocusRef$curren2 === void 0 ? void 0 : _firstFocusRef$curren2.focus();
+        triggerRefocus();
       }, Math.abs(slideDuration) * 1000);
     }
-  }, [handleAnimationStart, refocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
-  const fixOffsetAndGo = useCallback((delta, transitionMode) => {
-    var _firstFocusRef$curren3;
+  }, [handleAnimationStart, triggerRefocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
+  const fixOffsetAndGo = React.useCallback((delta, transitionMode) => {
     updateOffset();
     handleAnimationStart(activeIndexRef.current);
     updateIndex(delta, transitionMode);
-    if (refocus && Platform.OS === 'web') (_firstFocusRef$curren3 = firstFocusRef.current) === null || _firstFocusRef$curren3 === void 0 ? void 0 : _firstFocusRef$curren3.focus();
-  }, [updateIndex, updateOffset, handleAnimationStart, refocus]);
-  const goToNeighboring = useCallback(function () {
+    triggerRefocus();
+  }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
+  const goToNeighboring = React.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
-  useEffect(() => {
+  React.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
-  useEffect(() => {
+  React.useEffect(() => {
     reduceMotionRef.current = reduceMotionEnabled;
   }, [reduceMotionEnabled]);
-  useEffect(() => {
+  React.useEffect(() => {
     containerLayoutRef.current = containerLayout;
   }, [containerLayout]);
-  useEffect(() => {
+  React.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
         value
@@ -396,7 +402,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       pan.y.removeAllListeners();
     };
   }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  useEffect(() => {
+  React.useEffect(() => {
     const subscription = Dimensions.addEventListener('change', () => {
       updateOffset();
     });
@@ -408,10 +414,10 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       }
     };
   }, [updateOffset]);
-  useEffect(() => {
+  React.useEffect(() => {
     setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1);
   }, [autoPlay, slideDuration, transitionDuration, childrenArray.length]);
-  useEffect(() => {
+  React.useEffect(() => {
     return () => {
       stopAutoplay();
     };
@@ -443,7 +449,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     } = _ref7;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const isSwipeAllowed = useCallback(() => {
+  const isSwipeAllowed = React.useCallback(() => {
     if (childrenArray.length === 1) {
       return false;
     }
@@ -452,7 +458,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     }
     return true;
   }, [viewport, childrenArray.length]);
-  const panResponder = useMemo(() => PanResponder.create({
+  const panResponder = React.useMemo(() => PanResponder.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
@@ -492,13 +498,13 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       isSwiping.current = false;
     }
   }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  const goToNext = useCallback(() => {
+  const goToNext = React.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
-  const goToPrev = useCallback(() => {
+  const goToPrev = React.useCallback(() => {
     goToNeighboring(true);
   }, [goToNeighboring]);
-  const goTo = useCallback(function () {
+  const goTo = React.useCallback(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndexRef.current;
     if (delta) {
@@ -514,7 +520,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
     inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
-  const getCopyWithPlaceholders = useCallback(copyKey => {
+  const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length);
 
     // First word might be a lowercase placeholder: capitalize the first letter
@@ -559,7 +565,7 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
       focusable: true
     })
   };
-  const onAnimationControlButtonPress = useCallback(() => {
+  const onAnimationControlButtonPress = React.useCallback(() => {
     if (isCarouselPlaying) {
       stopAutoplay();
     } else {
@@ -578,7 +584,13 @@ const Carousel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     refocus: refocus,
     width: containerLayout.width,
     children: [/*#__PURE__*/_jsxs(View, {
-      style: staticStyles.root,
+      style: [staticStyles.root, {
+        ...Platform.select({
+          web: {
+            outline: 'none'
+          }
+        })
+      }],
       onLayout: onContainerLayout,
       ref: ref,
       ...systemProps,
@@ -712,7 +724,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = useCallback((changedIndex, currentActiveIndex) => {
+   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -721,7 +733,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onIndexChanged: PropTypes.func,
   /**
@@ -763,7 +775,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the current slide index before animation starts
    * Use it as follows:
    * ```js
-   *    const onAnimationStartCallback = useCallback((currentIndex) => {
+   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
    *      console.log(currentIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -772,7 +784,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationStart: PropTypes.func,
   /**
@@ -780,7 +792,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the updated slide index after animation ends
    * Use it as follows:
    * ```js
-   *    const onAnimationEndCallback = useCallback((changedIndex) => {
+   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -789,7 +801,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationEnd: PropTypes.func,
   /**

package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -12,7 +12,7 @@ import { useCarousel } from '../CarouselContext';
  * @TODO rework this after integrating with SkipLink when available.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselFirstFocus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -11,7 +11,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = _ref => {
+const CarouselItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     elementIndex,
@@ -39,9 +39,10 @@ const CarouselItem = _ref => {
     style: style,
     ...selectedProps,
     ...focusabilityProps,
+    ref: ref,
     children: children
   });
-};
+});
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -4,7 +4,7 @@ import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
 import { variantProp } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselStepTracker = _ref => {
+const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -33,6 +33,7 @@ const CarouselStepTracker = _ref => {
   return /*#__PURE__*/_jsx(StackView, {
     direction: "row",
     tokens: stackViewTokens,
+    ref: ref,
     children: /*#__PURE__*/_jsx(StepTracker, {
       current: activeIndex,
       steps: steps,
@@ -45,7 +46,8 @@ const CarouselStepTracker = _ref => {
       variant: variant
     })
   });
-};
+});
+CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
   variant: variantProp.propType
 };

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,5 +1,5 @@
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
 import Carousel from '../Carousel';
@@ -8,7 +8,7 @@ import Carousel from '../Carousel';
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items,
     refocus = true,

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import StackView from '../../StackView';
@@ -9,7 +9,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
+const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -17,13 +17,13 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
     activeIndex,
     goTo
   } = useCarousel();
-  const nextFocusRef = useRef();
-  const firstTabRef = useRef();
-  const [isInverse, setIsInverse] = useState(false);
+  const nextFocusRef = React.useRef();
+  const firstTabRef = React.useRef();
+  const [isInverse, setIsInverse] = React.useState(false);
   const lastTabSelected = activeIndex === items.length - 1;
 
   // Get current select tab style
-  useEffect(() => {
+  React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
   }, [items, activeIndex]);

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
@@ -60,7 +60,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -73,7 +73,7 @@ const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
   // Don't allow disabled to be set while focus is true else focus state gets locked `true`
   // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const disabled = (inactive || selected) && !isFocused;
   const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
   const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {