@telus-uds/components-base 4.0.0-alpha.0 → 4.0.0-alpha.2

package/lib/cjs/QuickLinks/QuickLinks.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.QuickLinks = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _useViewport = require("../ViewportProvider/useViewport");
 var _tokens = require("../utils/props/tokens");
 var _variantProp = require("../utils/props/variantProp");
+var _semantics = require("../utils/a11y/semantics");
 var _List = require("../List/List");
 var _StackWrap = require("../StackView/StackWrap");
 var _QuickLinksCard = require("./QuickLinksCard");
@@ -42,6 +44,10 @@ const QuickLinks = exports.QuickLinks = /*#__PURE__*/_react.default.forwardRef((
   } = (0, _useThemeTokens.useThemeTokens)('QuickLinks', tokens, variant, {
     viewport
   });
+  const itemAccessibilityRole = _Platform.default.select({
+    web: ['ul', 'ol'].includes(tag) ? _semantics.tagsToRoles.li : undefined,
+    default: undefined
+  });
   const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.List, {
     ref: ref,
     tokens: listTokens,
@@ -56,6 +62,7 @@ const QuickLinks = exports.QuickLinks = /*#__PURE__*/_react.default.forwardRef((
       justifyContent: stackJustify
     },
     tag: tag,
+    itemAccessibilityRole: itemAccessibilityRole,
     ...rest,
     children: children
   });

package/lib/cjs/Scroll/Scroll.js

@@ -0,0 +1,472 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scroll = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _useUniqueId = require("../utils/useUniqueId");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _A11yText = require("../A11yText/A11yText");
+var _ScrollViewEnd = require("../HorizontalScroll/ScrollViewEnd");
+var _dictionary = require("./dictionary");
+var _ScrollProgress = require("./ScrollProgress");
+var _ScrollContext = require("./ScrollContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const SCROLL_DESCRIPTION_PREFIX = 'scroll-description';
+const KEY_ARROW_RIGHT = 'ArrowRight';
+const KEY_ARROW_LEFT = 'ArrowLeft';
+const KEY_SPACE = ' ';
+const MAX_PERCENTAGE = 100;
+const MIN_BAR_PERCENTAGE = 1;
+const ROLE_REGION = 'region';
+const ROLE_NONE = 'none';
+const COMPONENT_NAME = 'Scroll';
+const SCROLL_ITEM_SELECTOR = '[data-scroll-item]';
+const TAB_INDEX = 0;
+const INITIAL_DIMENSION = 0;
+const HALF_DIVISOR = 2;
+const selectPressableStyles = _ref => {
+  let {
+    progressHitAreaHeight,
+    progressSpacing
+  } = _ref;
+  return {
+    height: progressHitAreaHeight,
+    marginTop: progressSpacing
+  };
+};
+const selectThumbWrapperStyles = _ref2 => {
+  let {
+    thumbWidthPercent,
+    thumbPositionPercent
+  } = _ref2;
+  return {
+    width: `${thumbWidthPercent}%`,
+    marginLeft: `${thumbPositionPercent}%`
+  };
+};
+const selectContainerA11yProps = _ref3 => {
+  let {
+    accessibilityLabel,
+    descriptionId,
+    handleKeyDown
+  } = _ref3;
+  return _Platform.default.OS === 'web' ? {
+    role: ROLE_REGION,
+    'aria-label': accessibilityLabel,
+    'aria-describedby': descriptionId,
+    tabIndex: TAB_INDEX,
+    onKeyDown: handleKeyDown
+  } : {
+    accessibilityRole: ROLE_NONE,
+    accessibilityLabel
+  };
+};
+const selectScrollContentStyle = itemGap => ({
+  columnGap: itemGap
+});
+const calculateThumbWidth = _ref4 => {
+  let {
+    containerWidth,
+    contentWidth
+  } = _ref4;
+  if (contentWidth <= INITIAL_DIMENSION) return MAX_PERCENTAGE;
+  return Math.max(MIN_BAR_PERCENTAGE, Math.min(MAX_PERCENTAGE, containerWidth / contentWidth * MAX_PERCENTAGE));
+};
+const calculateThumbPosition = _ref5 => {
+  let {
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  } = _ref5;
+  if (scrollMax <= INITIAL_DIMENSION) return INITIAL_DIMENSION;
+  return scrollOffset / scrollMax * (MAX_PERCENTAGE - thumbWidthPercent);
+};
+const getScrollableNode = ref => ref.current?.getScrollableNode?.() ?? null;
+
+/**
+ * The `Scroll` component provides a continuous horizontal scrollable container with a progress
+ * bar indicator. Items are displayed in a flow layout where all items share the width of the
+ * widest item and the height of the tallest item.
+ *
+ * ## Props
+ *
+ * - Use `children` to pass `ScrollItem` components
+ * - Use `accessibilityLabel` to provide a meaningful label for the scrollable region
+ * - Use `copy` to select English or French for accessible labels
+ * - Use `dictionary` to override the default translations
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The scroll container is keyboard-focusable with `tabIndex="0"`
+ * - Each `ScrollItem` is individually focusable via Tab navigation
+ * - Use left and right arrow keys to scroll by one item width
+ * - Press Space bar to scroll right
+ * - When tabbing through items, the scroll follows focus to keep the active item visible
+ * - Screen readers announce the component as a region with a descriptive label
+ * - Touch and swipe gestures are supported on mobile and mobile web
+ *
+ */
+const Scroll = exports.Scroll = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    dictionary: customDictionary = _dictionary.dictionary,
+    accessibilityLabel,
+    ...rest
+  } = _ref6;
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: customDictionary,
+    copy
+  });
+  const resolvedAccessibilityLabel = accessibilityLabel || getCopy('accessibilityLabel');
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)(COMPONENT_NAME, tokens, variant);
+  const defaultTokens = _react.default.useMemo(() => getTokens(), [getTokens]);
+  const descriptionId = (0, _useUniqueId.useUniqueId)(SCROLL_DESCRIPTION_PREFIX);
+  const scrollRef = _react.default.useRef(null);
+  const pressableRef = _react.default.useRef(null);
+  const scrollContainerRef = _react.default.useRef(null);
+  const scrollMaxRef = _react.default.useRef(INITIAL_DIMENSION);
+  const scrollOffsetRef = _react.default.useRef(INITIAL_DIMENSION);
+  const thumbWidthPercentRef = _react.default.useRef(MAX_PERCENTAGE);
+  const thumbRef = _react.default.useRef(null);
+  const isDraggingRef = _react.default.useRef(false);
+  const dragStartRef = _react.default.useRef({
+    mouseX: INITIAL_DIMENSION,
+    scrollOffset: INITIAL_DIMENSION
+  });
+  const [scrollOffset, setScrollOffset] = _react.default.useState(INITIAL_DIMENSION);
+  const [containerWidth, setContainerWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [contentWidth, setContentWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [itemWidth, setItemWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [itemHeight, setItemHeight] = _react.default.useState(INITIAL_DIMENSION);
+  const {
+    itemGap
+  } = defaultTokens;
+  const scrollMax = Math.max(INITIAL_DIMENSION, contentWidth - containerWidth);
+  _react.default.useEffect(() => {
+    scrollMaxRef.current = scrollMax;
+  }, [scrollMax]);
+  const thumbWidthPercent = calculateThumbWidth({
+    containerWidth,
+    contentWidth
+  });
+  thumbWidthPercentRef.current = thumbWidthPercent;
+  const thumbPositionPercent = calculateThumbPosition({
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  });
+  const thumbWrapperStyle = _react.default.useMemo(() => [staticStyles.thumbWrapper, selectThumbWrapperStyles({
+    thumbWidthPercent,
+    thumbPositionPercent
+  }), _Platform.default.OS === 'web' ? staticStyles.thumbCursor : null], [thumbWidthPercent, thumbPositionPercent]);
+  const handleScroll = _react.default.useCallback(_ref7 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
+      }
+    } = _ref7;
+    scrollOffsetRef.current = x;
+    setScrollOffset(x);
+  }, []);
+  const handleContainerLayout = _react.default.useCallback(_ref8 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref8;
+    setContainerWidth(width);
+  }, []);
+  const handleContentWidth = _react.default.useCallback(width => {
+    setContentWidth(width);
+  }, []);
+  const handleItemLayout = _react.default.useCallback((width, height) => {
+    setItemWidth(prev => Math.max(prev, width));
+    setItemHeight(prev => Math.max(prev, height));
+  }, []);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web') return undefined;
+    const element = scrollContainerRef.current;
+    if (!element) return undefined;
+    const handleWheel = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      const isHorizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
+      const delta = isHorizontal ? event.deltaX : event.deltaY;
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (scrollableNode) {
+        const maxScroll = scrollMaxRef.current;
+        const newScrollLeft = Math.max(INITIAL_DIMENSION, Math.min(maxScroll, scrollableNode.scrollLeft + delta));
+        scrollableNode.scrollLeft = newScrollLeft;
+        scrollOffsetRef.current = newScrollLeft;
+        setScrollOffset(newScrollLeft);
+      }
+    };
+    element.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return () => element.removeEventListener('wheel', handleWheel);
+  }, []);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web') return undefined;
+    const element = scrollContainerRef.current;
+    if (!element) return undefined;
+    const handleFocusIn = event => {
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (!scrollableNode) return;
+      const focusedItem = event.target.closest(SCROLL_ITEM_SELECTOR);
+      if (!focusedItem) return;
+      const itemLeft = focusedItem.offsetLeft;
+      const itemRight = itemLeft + focusedItem.offsetWidth;
+      const visibleLeft = scrollableNode.scrollLeft;
+      const currentContainerWidth = containerWidth;
+      const visibleRight = visibleLeft + currentContainerWidth;
+      if (itemRight > visibleRight) {
+        scrollRef.current.scrollTo({
+          x: itemRight - currentContainerWidth,
+          animated: true
+        });
+      } else if (itemLeft < visibleLeft) {
+        scrollRef.current.scrollTo({
+          x: itemLeft,
+          animated: true
+        });
+      }
+    };
+    element.addEventListener('focusin', handleFocusIn);
+    return () => element.removeEventListener('focusin', handleFocusIn);
+  }, [containerWidth]);
+  const hasScrollbar = scrollMax > INITIAL_DIMENSION;
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web' || !hasScrollbar) return undefined;
+    const thumbElement = thumbRef.current;
+    if (!thumbElement) return undefined;
+    const handleMouseDown = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      isDraggingRef.current = true;
+      dragStartRef.current = {
+        mouseX: event.clientX,
+        scrollOffset: getScrollableNode(scrollRef)?.scrollLeft ?? INITIAL_DIMENSION
+      };
+      thumbElement.style.cursor = 'grabbing';
+      document.body.style.cursor = 'grabbing';
+      document.body.style.userSelect = 'none';
+    };
+    const handleMouseMove = event => {
+      if (!isDraggingRef.current) return;
+      const trackElement = pressableRef.current;
+      if (!trackElement) return;
+      const trackWidth = trackElement.offsetWidth;
+      const thumbPixelWidth = thumbWidthPercentRef.current / MAX_PERCENTAGE * trackWidth;
+      const availableTrackPixels = trackWidth - thumbPixelWidth;
+      if (availableTrackPixels <= INITIAL_DIMENSION) return;
+      const mouseDelta = event.clientX - dragStartRef.current.mouseX;
+      const scrollDelta = mouseDelta / availableTrackPixels * scrollMaxRef.current;
+      const targetScroll = Math.max(INITIAL_DIMENSION, Math.min(scrollMaxRef.current, dragStartRef.current.scrollOffset + scrollDelta));
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (scrollableNode) {
+        scrollableNode.scrollLeft = targetScroll;
+        scrollOffsetRef.current = targetScroll;
+        setScrollOffset(targetScroll);
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      thumbElement.style.cursor = '';
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    thumbElement.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      thumbElement.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [hasScrollbar]);
+  const handleKeyDown = _react.default.useCallback(event => {
+    if (event.key === KEY_ARROW_RIGHT || event.key === KEY_SPACE) {
+      event.preventDefault();
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: scrollOffsetRef.current + itemWidth,
+          animated: true
+        });
+      }
+    } else if (event.key === KEY_ARROW_LEFT) {
+      event.preventDefault();
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: Math.max(INITIAL_DIMENSION, scrollOffsetRef.current - itemWidth),
+          animated: true
+        });
+      }
+    }
+  }, [itemWidth]);
+  const handleProgressPress = _react.default.useCallback(event => {
+    if (scrollMax <= INITIAL_DIMENSION || isDraggingRef.current) return;
+    if (_Platform.default.OS === 'web' && pressableRef.current) {
+      const {
+        offsetX
+      } = event.nativeEvent;
+      const {
+        offsetWidth
+      } = pressableRef.current;
+      const thumbPixelWidth = thumbWidthPercent / MAX_PERCENTAGE * offsetWidth;
+      const availableTrack = offsetWidth - thumbPixelWidth;
+      if (availableTrack <= INITIAL_DIMENSION) return;
+      const clickPosition = Math.max(INITIAL_DIMENSION, Math.min(availableTrack, offsetX - thumbPixelWidth / HALF_DIVISOR));
+      const targetX = clickPosition / availableTrack * scrollMax;
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: targetX,
+          animated: true
+        });
+      }
+    } else if (pressableRef.current) {
+      const {
+        locationX
+      } = event.nativeEvent;
+      pressableRef.current.measure((_x, _y, width) => {
+        const thumbPixelWidth = thumbWidthPercent / MAX_PERCENTAGE * width;
+        const availableTrack = width - thumbPixelWidth;
+        if (availableTrack <= INITIAL_DIMENSION) return;
+        const clickPosition = Math.max(INITIAL_DIMENSION, Math.min(availableTrack, locationX - thumbPixelWidth / HALF_DIVISOR));
+        const targetX = clickPosition / availableTrack * scrollMax;
+        if (scrollRef.current) {
+          scrollRef.current.scrollTo({
+            x: targetX,
+            animated: true
+          });
+        }
+      });
+    }
+  }, [scrollMax, thumbWidthPercent]);
+  const handleContainerRef = _react.default.useCallback(node => {
+    scrollContainerRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) Object.assign(ref, {
+      current: node
+    });
+  }, [ref]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: handleContainerRef,
+    style: staticStyles.container,
+    ...selectContainerA11yProps({
+      accessibilityLabel: resolvedAccessibilityLabel,
+      descriptionId,
+      handleKeyDown
+    }),
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.A11yText, {
+      text: getCopy('instructionText'),
+      nativeID: descriptionId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.scrollContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.ScrollViewEnd, {
+        ref: scrollRef,
+        horizontal: true,
+        onScrollEnd: handleScroll,
+        onScroll: handleScroll,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [staticStyles.scrollContent, selectScrollContentStyle(itemGap)],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollContext.ScrollProvider, {
+          itemWidth: itemWidth,
+          itemHeight: itemHeight,
+          onItemLayout: handleItemLayout,
+          children: children
+        })
+      })
+    }), scrollMax > INITIAL_DIMENSION && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      ref: pressableRef,
+      style: [staticStyles.pressable, selectPressableStyles(defaultTokens)],
+      onPress: handleProgressPress,
+      children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollProgress.ScrollProgress, {
+        ref: thumbRef,
+        pressableState: pressableState,
+        getTokens: getTokens,
+        thumbWrapperStyle: thumbWrapperStyle,
+        getCopy: getCopy
+      })
+    })]
+  });
+});
+Scroll.displayName = 'Scroll';
+Scroll.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Scroll items to display. Should be `ScrollItem` components.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Theme tokens for customizing the Scroll appearance
+   */
+  tokens: (0, _tokens.getTokensPropType)('Scroll'),
+  /**
+   * Variant for the Scroll component
+   */
+  variant: _variantProp.variantProp.propType,
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy: _copyPropTypes.copyPropTypes,
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.object,
+    fr: _propTypes.default.object
+  }),
+  /**
+   * Accessibility label for the scrollable region
+   */
+  accessibilityLabel: _propTypes.default.string
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    width: '100%'
+  },
+  scrollContainer: {
+    width: '100%'
+  },
+  pressable: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  scrollContent: {
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  thumbWrapper: {
+    height: '100%'
+  },
+  thumbCursor: {
+    cursor: 'grab'
+  }
+});

package/lib/cjs/Scroll/ScrollContext.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollProvider = void 0;
+exports.useScroll = useScroll;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScrollContext = /*#__PURE__*/_react.default.createContext();
+const ScrollProvider = _ref => {
+  let {
+    children,
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = _ref;
+  const value = _react.default.useMemo(() => ({
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  }), [itemWidth, itemHeight, onItemLayout]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.ScrollProvider = ScrollProvider;
+function useScroll() {
+  const context = _react.default.useContext(ScrollContext);
+  if (context === undefined) {
+    throw new Error(`'useScroll' must be used within a 'ScrollProvider'`);
+  }
+  return context;
+}
+ScrollProvider.propTypes = {
+  /**
+   * Content to be rendered within the scroll context provider.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Width of each scroll item in pixels.
+   */
+  itemWidth: _propTypes.default.number.isRequired,
+  /**
+   * Height of each scroll item in pixels.
+   */
+  itemHeight: _propTypes.default.number.isRequired,
+  /**
+   * Callback invoked when a scroll item layout is measured.
+   */
+  onItemLayout: _propTypes.default.func.isRequired
+};

package/lib/cjs/Scroll/ScrollItem.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
+var _semantics = require("../utils/a11y/semantics");
+var _ScrollContext = require("./ScrollContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const DEFAULT_TAG = 'li';
+const DATA_SCROLL_ITEM = 'scrollItem';
+const INITIAL_DIMENSION = 0;
+const TAB_INDEX = 0;
+const selectContainerStyle = _ref => {
+  let {
+    itemWidth,
+    itemHeight
+  } = _ref;
+  const style = {};
+  if (itemWidth > INITIAL_DIMENSION) {
+    style.width = itemWidth;
+  }
+  if (itemHeight > INITIAL_DIMENSION) {
+    style.height = itemHeight;
+  }
+  return style;
+};
+
+/**
+ * The `ScrollItem` component wraps individual items within a `Scroll` container. Each item
+ * is individually focusable and reports its natural dimensions so the parent can apply uniform
+ * sizing across all items.
+ *
+ * ## Props
+ *
+ * - Use `children` to provide the content of the scroll item
+ * - Use `tag` to set the HTML tag of the outer container (defaults to `'li'`)
+ *
+ */
+const ScrollItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tag = DEFAULT_TAG,
+    ...rest
+  } = _ref2;
+  const {
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = (0, _ScrollContext.useScroll)();
+  const handleLayout = _react.default.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref3;
+    onItemLayout?.(width, height);
+  }, [onItemLayout]);
+  const selectedProps = selectProps({
+    ...rest,
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: selectContainerStyle({
+      itemWidth,
+      itemHeight
+    }),
+    onLayout: handleLayout,
+    dataSet: {
+      [DATA_SCROLL_ITEM]: true
+    },
+    ...(_Platform.default.OS === 'web' ? {
+      tabIndex: TAB_INDEX
+    } : {
+      focusable: true
+    }),
+    ...selectedProps,
+    children: children
+  });
+});
+ScrollItem.displayName = 'ScrollItem';
+ScrollItem.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content of the scroll item
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag: _propTypes.default.oneOf(_semantics.layoutTags)
+};
+const MemoizedScrollItem = exports.ScrollItem = /*#__PURE__*/_react.default.memo(ScrollItem);