@telus-uds/components-base 1.12.0 → 1.14.0

package/lib-module/Button/ButtonGroup.js

@@ -26,6 +26,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     name: inputGroupName,
@@ -77,6 +78,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     readOnly: readOnly,
@@ -208,6 +210,11 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: PropTypes.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/Button/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { variantProp, getTokensPropType } from '../utils/props';
 import A11yText from '../A11yText';
+import { iconComponentPropTypes } from '../Icon';
 export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
@@ -31,6 +32,22 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: PropTypes.func,
+
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.func,
   variant: variantProp.propType
 };
 export default buttonPropTypes;

package/lib-module/Carousel/Carousel.js

@@ -7,13 +7,15 @@ import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy } from '../utils';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment } from '../utils';
 import { useA11yInfo } from '../A11yInfoProvider';
 import { CarouselProvider } from './CarouselContext';
 import CarouselItem from './CarouselItem';
-import StepTracker from '../StepTracker';
-import StackView from '../StackView';
 import IconButton from '../IconButton';
+import SkipLink from '../SkipLink';
+import A11yText from '../A11yText';
+import CarouselStepTracker from './CarouselStepTracker';
+import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,18 +29,6 @@ const staticStyles = StyleSheet.create({
     left: 0
   }
 });
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-};
 
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
@@ -147,25 +137,32 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationStart,
     onAnimationEnd,
     onIndexChanged,
+    skipLinkHref,
+    refocus,
+    title = 'carousel',
     springConfig = undefined,
-    onRenderPanelNavigation,
+    thumbnails = undefined,
+    panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
+      thumbnails: thumbnails
+    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {}),
     tag = 'ul',
-    accessibilityRole = 'adjustable',
-    accessibilityLabel = 'carousel',
+    accessibilityRole,
+    accessibilityLabel = title,
+    accessibilityLiveRegion = 'polite',
     copy,
     ...rest
   } = _ref;
   const viewport = useViewport();
+  const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+    viewport
+  });
   const {
     previousIcon,
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
-    spaceBetweenSlideAndPreviousNextNavigation,
-    spaceBetweenSlideAndPanelNavigation
-  } = useThemeTokens('Carousel', tokens, variant, {
-    viewport
-  });
+    spaceBetweenSlideAndPreviousNextNavigation
+  } = themeTokens;
   const [activeIndex, setActiveIndex] = React.useState(0);
   const [isAnimating, setIsAnimating] = React.useState(false);
   const handleAnimationStart = React.useCallback(function () {
@@ -180,7 +177,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
-  const childrenArray = React.Children.toArray(children);
+  const childrenArray = unpackFragment(children);
   const systemProps = selectProps({ ...rest,
     accessibilityRole,
     accessibilityLabel,
@@ -199,14 +196,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width: 0
   });
   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 isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const panelNavigationTokens = { ...staticTokens.stepTracker,
-    containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-  };
 
   const onContainerLayout = _ref2 => {
     let {
@@ -301,10 +296,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return calcDelta;
   }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
   const fixOffsetAndGo = React.useCallback(delta => {
+    var _firstFocusRef$curren;
+
     updateOffset();
     handleAnimationStart(activeIndex);
     updateIndex(delta);
-  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart]);
+    if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
+  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart, refocus]);
   const goToNeighboring = React.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     fixOffsetAndGo(toPrev ? -1 : 1);
@@ -386,18 +384,21 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: previousNextIconSize,
     raised: true
   };
-
-  const getCopyWithPlaceholders = copyKey => {
-    const copyText = getCopy(copyKey).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
+  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
 
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
-  };
-
+  }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
   return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
+    goTo: goTo,
+    getCopyWithPlaceholders: getCopyWithPlaceholders,
+    itemLabel: itemLabel,
     totalItems: childrenArray.length,
+    themeTokens: themeTokens,
+    firstFocusRef: firstFocusRef,
+    refocus: refocus,
     width: containerLayout.width,
-    goTo: goTo,
     children: [/*#__PURE__*/_jsxs(View, {
       style: staticStyles.root,
       onLayout: onContainerLayout,
@@ -413,6 +414,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
+      }), Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
+        ref: firstFocusRef,
+        href: skipLinkHref,
+        children: getCopyWithPlaceholders('skipLink')
+      }), /*#__PURE__*/_jsx(A11yText // Read the current slide position to screen readers on slide.
+      // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+      , {
+        ref: !skipLinkHref && refocus ? firstFocusRef : null,
+        accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
+        focusable: !skipLinkHref && refocus,
+        text: getCopyWithPlaceholders('stepTrackerLabel')
       }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/_jsx(Animated.View, {
@@ -425,6 +437,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           }]),
           ...panResponder.panHandlers,
           ...getA11yPropsFromHtmlTag(tag),
+          // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
+          // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
+          accessibilityLiveRegion: accessibilityLiveRegion,
           children: childrenArray.map((element, index) => {
             const hidden = !isAnimating && index !== activeIndex;
             const clonedElement = /*#__PURE__*/React.cloneElement(element, {
@@ -447,23 +462,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? /*#__PURE__*/_jsx(StackView, {
-      direction: "row",
-      tokens: staticTokens.stackView,
-      children: onRenderPanelNavigation ? onRenderPanelNavigation({
-        activeIndex,
-        totalItems: childrenArray.length
-      }) : /*#__PURE__*/_jsx(StepTracker, {
-        current: activeIndex,
-        steps: childrenArray.map((_, index) => String(index)),
-        copy: {
-          // Give StepTracker copy from Carousel's language and dictionary
-          stepLabel: getCopyWithPlaceholders('stepLabel'),
-          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-        },
-        tokens: panelNavigationTokens
-      })
-    }) : null]
+    }), showPanelNavigation ? panelNavigation : null]
   });
 });
 Carousel.propTypes = { ...selectedSystemPropTypes,
@@ -500,6 +499,15 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   springConfig: PropTypes.object,
 
+  /**
+   * An array of objects containing information on the thumbnails to be rendered as navigation panel
+   */
+  thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    alt: PropTypes.string,
+    src: PropTypes.string
+  })),
+
   /**
    * Minimal part of slide width must be swiped for changing index.
    * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
@@ -530,20 +538,35 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   onIndexChanged: PropTypes.func,
 
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
+   * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
+   */
+  skipLinkHref: PropTypes.string,
+
+  /**
+   * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
+   *
+   * Pass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.
+   *
+   * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
+   */
+  refocus: PropTypes.bool,
+
+  /**
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: PropTypes.func,
+  panelNavigation: PropTypes.element,
 
   /**
    * When slide animation start

package/lib-module/Carousel/CarouselContext.js

@@ -1,22 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselContext = /*#__PURE__*/React.createContext();
 
 const CarouselProvider = _ref => {
   let {
-    children,
     activeIndex,
+    children,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus = false,
+    themeTokens,
     totalItems,
-    width,
-    goTo
+    width
   } = _ref;
   const value = React.useMemo(() => ({
     activeIndex,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus,
+    themeTokens,
     totalItems,
-    width,
-    goTo
-  }), [activeIndex, totalItems, width, goTo]);
+    width
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: value,
     children: children
@@ -36,8 +45,12 @@ function useCarousel() {
 CarouselProvider.propTypes = {
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
   activeIndex: PropTypes.number.isRequired,
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  itemLabel: PropTypes.string.isRequired,
+  refocus: PropTypes.bool,
+  themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired
+  width: PropTypes.number.isRequired
 };
 export { CarouselProvider, useCarousel };

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

@@ -0,0 +1,51 @@
+import React, { forwardRef } 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";
+import { PropTypes } from 'prop-types';
+import { useCarousel } from '../CarouselContext';
+/**
+ * Focus target so that when a new slide is shown, the user can tab into
+ * its content using the keyboard.
+ *
+ * @TODO rework this after integrating with SkipLink when available.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title
+  } = _ref;
+  const {
+    getCopyWithPlaceholders
+  } = useCarousel(); // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
+
+  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+  const accessibilityRole = Platform.select({
+    web: 'link',
+    // The focused item will ultimately be a skip link.
+    default: 'button' // 'link' role usually denotes opening browser on Native.
+
+  });
+  return /*#__PURE__*/_jsx(Pressable // TODO: integrate skip link functionality, jump focus to after Carousel
+  , {
+    onPress: undefined,
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    style: StyleSheet.absoluteFill,
+    focusable: true
+  });
+});
+CarouselFirstFocus.displayName = 'CarouselFirstFocus';
+CarouselFirstFocus.propTypes = {
+  /**
+   * Simple description of this carousel for screenreaders, to be read before
+   * "{itemLabel} {index} of {count}.
+   *
+   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
+   */
+  title: PropTypes.string
+};
+export default CarouselFirstFocus;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useCarousel } from '../CarouselContext';
+import StepTracker from '../../StepTracker';
+import StackView from '../../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const CarouselStepTracker = () => {
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens
+  } = useCarousel();
+  const stackViewTokens = {
+    justifyContent: 'center'
+  };
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  };
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
+  return /*#__PURE__*/_jsx(StackView, {
+    direction: "row",
+    tokens: stackViewTokens,
+    children: /*#__PURE__*/_jsx(StepTracker, {
+      current: activeIndex,
+      steps: steps,
+      copy: {
+        // Give StepTracker copy from Carousel's language and dictionary
+        stepLabel: getCopyWithPlaceholders('stepLabel'),
+        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+      },
+      tokens: stepTrackerTokens
+    })
+  });
+};
+
+export default CarouselStepTracker;

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

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

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

@@ -0,0 +1,50 @@
+var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useResponsiveProp } from '../../utils';
+import Carousel from '../Carousel';
+import CarouselTabsPanel from './CarouselTabsPanel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    items,
+    refocus = true,
+    ...carouselProps
+  } = _ref;
+  const panelNavigation = useResponsiveProp({
+    md: /*#__PURE__*/_jsx(CarouselTabsPanel, {
+      items: items
+    })
+  });
+  return /*#__PURE__*/_jsx(Carousel, {
+    refocus: refocus,
+    ...carouselProps,
+    ref: ref,
+    panelNavigation: panelNavigation,
+    children: items.map(_ref2 => {
+      let {
+        title,
+        content
+      } = _ref2;
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: content
+      }, title);
+    })
+  });
+});
+CarouselTabs.displayName = 'CarouselTabs';
+CarouselTabs.propTypes = {
+  /**
+   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired
+  })),
+  ...Carousel.propTypes
+}; // CarouselTabs doesn't require `children` prop, it uses `items` instead.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+
+if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
+export default CarouselTabs;

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

@@ -0,0 +1,76 @@
+import React, { forwardRef, useRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import StackView from '../../StackView';
+import { useCarousel } from '../CarouselContext';
+import CarouselTabsPanelItem from './CarouselTabsPanelItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    items
+  } = _ref;
+  const {
+    activeIndex,
+    goTo
+  } = useCarousel();
+  const nextFocusRef = useRef();
+  const firstTabRef = useRef(); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true
+  };
+  const lastTabSelected = activeIndex === items.length - 1;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      focusable: true,
+      accessible: true,
+      onFocus: event => {
+        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
+        // (shift-tab) back into the carousel content, don't interfere.
+        const previousWebFocus = event.relatedTarget;
+        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
+      }
+    }), /*#__PURE__*/_jsx(StackView, {
+      direction: "row",
+      space: 3,
+      divider: {
+        variant: dividerVariant
+      },
+      ref: ref,
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          onPress,
+          ...panelItemProps
+        } = _ref2;
+        const selected = index === activeIndex;
+        const isNext = index === activeIndex + 1; // Selected item should be always unfocusable and unpressable
+
+        const handlePress = selected ? undefined : event => {
+          if (typeof onPress === 'function') onPress(event, index);
+          goTo(index);
+        };
+        return /*#__PURE__*/_jsx(CarouselTabsPanelItem, {
+          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
+          title: title,
+          selected: selected,
+          onPress: handlePress,
+          ...panelItemProps
+        }, title);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      focusable: true,
+      accessible: true,
+      ref: lastTabSelected ? nextFocusRef : null
+    })]
+  });
+});
+CarouselTabsPanel.displayName = 'CarouselTabsPanel';
+CarouselTabsPanel.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {}))
+};
+export default CarouselTabsPanel;