@telus-uds/components-base 3.29.1 → 3.30.0

package/lib/esm/Scroll/Scroll.js

@@ -0,0 +1,459 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, useUniqueId, variantProp, viewProps } from '../utils';
+import A11yText from '../A11yText';
+import ScrollViewEnd from '../HorizontalScroll/ScrollViewEnd';
+import dictionary from './dictionary';
+import ScrollProgress from './ScrollProgress';
+import { ScrollProvider } from './ScrollContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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.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 = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    dictionary: customDictionary = dictionary,
+    accessibilityLabel,
+    ...rest
+  } = _ref6;
+  const getCopy = useCopy({
+    dictionary: customDictionary,
+    copy
+  });
+  const resolvedAccessibilityLabel = accessibilityLabel || getCopy('accessibilityLabel');
+  const getTokens = useThemeTokensCallback(COMPONENT_NAME, tokens, variant);
+  const defaultTokens = React.useMemo(() => getTokens(), [getTokens]);
+  const descriptionId = useUniqueId(SCROLL_DESCRIPTION_PREFIX);
+  const scrollRef = React.useRef(null);
+  const pressableRef = React.useRef(null);
+  const scrollContainerRef = React.useRef(null);
+  const scrollMaxRef = React.useRef(INITIAL_DIMENSION);
+  const scrollOffsetRef = React.useRef(INITIAL_DIMENSION);
+  const thumbWidthPercentRef = React.useRef(MAX_PERCENTAGE);
+  const thumbRef = React.useRef(null);
+  const isDraggingRef = React.useRef(false);
+  const dragStartRef = React.useRef({
+    mouseX: INITIAL_DIMENSION,
+    scrollOffset: INITIAL_DIMENSION
+  });
+  const [scrollOffset, setScrollOffset] = React.useState(INITIAL_DIMENSION);
+  const [containerWidth, setContainerWidth] = React.useState(INITIAL_DIMENSION);
+  const [contentWidth, setContentWidth] = React.useState(INITIAL_DIMENSION);
+  const [itemWidth, setItemWidth] = React.useState(INITIAL_DIMENSION);
+  const [itemHeight, setItemHeight] = React.useState(INITIAL_DIMENSION);
+  const {
+    itemGap
+  } = defaultTokens;
+  const scrollMax = Math.max(INITIAL_DIMENSION, contentWidth - containerWidth);
+  React.useEffect(() => {
+    scrollMaxRef.current = scrollMax;
+  }, [scrollMax]);
+  const thumbWidthPercent = calculateThumbWidth({
+    containerWidth,
+    contentWidth
+  });
+  thumbWidthPercentRef.current = thumbWidthPercent;
+  const thumbPositionPercent = calculateThumbPosition({
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  });
+  const thumbWrapperStyle = React.useMemo(() => [staticStyles.thumbWrapper, selectThumbWrapperStyles({
+    thumbWidthPercent,
+    thumbPositionPercent
+  }), Platform.OS === 'web' ? staticStyles.thumbCursor : null], [thumbWidthPercent, thumbPositionPercent]);
+  const handleScroll = React.useCallback(_ref7 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
+      }
+    } = _ref7;
+    scrollOffsetRef.current = x;
+    setScrollOffset(x);
+  }, []);
+  const handleContainerLayout = React.useCallback(_ref8 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref8;
+    setContainerWidth(width);
+  }, []);
+  const handleContentWidth = React.useCallback(width => {
+    setContentWidth(width);
+  }, []);
+  const handleItemLayout = React.useCallback((width, height) => {
+    setItemWidth(prev => Math.max(prev, width));
+    setItemHeight(prev => Math.max(prev, height));
+  }, []);
+  React.useEffect(() => {
+    if (Platform.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.useEffect(() => {
+    if (Platform.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.useEffect(() => {
+    if (Platform.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.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.useCallback(event => {
+    if (scrollMax <= INITIAL_DIMENSION || isDraggingRef.current) return;
+    if (Platform.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.useCallback(node => {
+    scrollContainerRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) Object.assign(ref, {
+      current: node
+    });
+  }, [ref]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: handleContainerRef,
+    style: staticStyles.container,
+    ...selectContainerA11yProps({
+      accessibilityLabel: resolvedAccessibilityLabel,
+      descriptionId,
+      handleKeyDown
+    }),
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(A11yText, {
+      text: getCopy('instructionText'),
+      nativeID: descriptionId
+    }), /*#__PURE__*/_jsx(View, {
+      style: staticStyles.scrollContainer,
+      children: /*#__PURE__*/_jsx(ScrollViewEnd, {
+        ref: scrollRef,
+        horizontal: true,
+        onScrollEnd: handleScroll,
+        onScroll: handleScroll,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [staticStyles.scrollContent, selectScrollContentStyle(itemGap)],
+        children: /*#__PURE__*/_jsx(ScrollProvider, {
+          itemWidth: itemWidth,
+          itemHeight: itemHeight,
+          onItemLayout: handleItemLayout,
+          children: children
+        })
+      })
+    }), scrollMax > INITIAL_DIMENSION && /*#__PURE__*/_jsx(Pressable, {
+      ref: pressableRef,
+      style: [staticStyles.pressable, selectPressableStyles(defaultTokens)],
+      onPress: handleProgressPress,
+      children: pressableState => /*#__PURE__*/_jsx(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.node.isRequired,
+  /**
+   * Theme tokens for customizing the Scroll appearance
+   */
+  tokens: getTokensPropType('Scroll'),
+  /**
+   * Variant for the Scroll component
+   */
+  variant: variantProp.propType,
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.object,
+    fr: PropTypes.object
+  }),
+  /**
+   * Accessibility label for the scrollable region
+   */
+  accessibilityLabel: PropTypes.string
+};
+export default Scroll;
+const staticStyles = StyleSheet.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/esm/Scroll/ScrollContext.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScrollContext = /*#__PURE__*/React.createContext();
+const ScrollProvider = _ref => {
+  let {
+    children,
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = _ref;
+  const value = React.useMemo(() => ({
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  }), [itemWidth, itemHeight, onItemLayout]);
+  return /*#__PURE__*/_jsx(ScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+function useScroll() {
+  const context = React.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.node.isRequired,
+  /**
+   * Width of each scroll item in pixels.
+   */
+  itemWidth: PropTypes.number.isRequired,
+  /**
+   * Height of each scroll item in pixels.
+   */
+  itemHeight: PropTypes.number.isRequired,
+  /**
+   * Callback invoked when a scroll item layout is measured.
+   */
+  onItemLayout: PropTypes.func.isRequired
+};
+export { ScrollProvider, useScroll };

package/lib/esm/Scroll/ScrollItem.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { useScroll } from './ScrollContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tag = DEFAULT_TAG,
+    ...rest
+  } = _ref2;
+  const {
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = useScroll();
+  const handleLayout = React.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref3;
+    onItemLayout?.(width, height);
+  }, [onItemLayout]);
+  const selectedProps = selectProps({
+    ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: selectContainerStyle({
+      itemWidth,
+      itemHeight
+    }),
+    onLayout: handleLayout,
+    dataSet: {
+      [DATA_SCROLL_ITEM]: true
+    },
+    ...(Platform.OS === 'web' ? {
+      tabIndex: TAB_INDEX
+    } : {
+      focusable: true
+    }),
+    ...selectedProps,
+    children: children
+  });
+});
+ScrollItem.displayName = 'ScrollItem';
+ScrollItem.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content of the scroll item
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag: PropTypes.oneOf(layoutTags)
+};
+export default /*#__PURE__*/React.memo(ScrollItem);

package/lib/esm/Scroll/ScrollProgress.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { resolvePressableState, useAnimatedValue } from '../utils';
+import Progress from '../Progress';
+import { jsx as _jsx } from "react/jsx-runtime";
+const MAX_PERCENTAGE = 100;
+const BORDER_RADIUS_DIVISOR = 2;
+const staticProgressTokens = {
+  borderWidth: 0,
+  borderColor: 'transparent'
+};
+const staticProgressBarTokens = {
+  gradient: null,
+  outlineWidth: 0
+};
+const selectProgressTokens = _ref => {
+  let {
+    progressTrackHeight,
+    progressBarHeight,
+    progressTrackColor
+  } = _ref;
+  return {
+    height: progressTrackHeight,
+    barHeight: progressBarHeight,
+    backgroundColor: progressTrackColor,
+    borderRadius: progressTrackHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const selectBarTokens = _ref2 => {
+  let {
+    progressBarColor,
+    progressBarHeight
+  } = _ref2;
+  return {
+    backgroundColor: progressBarColor,
+    borderRadius: progressBarHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const ScrollProgress = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    pressableState,
+    getTokens,
+    thumbWrapperStyle,
+    getCopy
+  } = _ref3;
+  const state = resolvePressableState(pressableState);
+  const themeTokens = getTokens(state);
+  const animatedBarHeight = useAnimatedValue(themeTokens.progressBarHeight);
+  const animatedTokens = {
+    ...themeTokens,
+    progressBarHeight: animatedBarHeight
+  };
+  return /*#__PURE__*/_jsx(Progress, {
+    tokens: {
+      ...staticProgressTokens,
+      ...selectProgressTokens(animatedTokens)
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: thumbWrapperStyle,
+      children: /*#__PURE__*/_jsx(Progress.Bar, {
+        percentage: MAX_PERCENTAGE,
+        tokens: {
+          ...staticProgressBarTokens,
+          ...selectBarTokens(animatedTokens)
+        },
+        accessibilityLabel: getCopy('progressBarLabel')
+      })
+    })
+  });
+});
+ScrollProgress.displayName = 'ScrollProgress';
+ScrollProgress.propTypes = {
+  /**
+   * State object from Pressable's render callback containing hovered, pressed, and focused states
+   */
+  pressableState: PropTypes.object.isRequired,
+  /**
+   * Theme token resolver callback from useThemeTokensCallback that accepts appearance state
+   */
+  getTokens: PropTypes.func.isRequired,
+  /**
+   * Style array for the thumb wrapper containing static and dynamic position styles
+   */
+  thumbWrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+  /**
+   * Copy resolver function from useCopy for retrieving localized strings
+   */
+  getCopy: PropTypes.func.isRequired
+};
+export default ScrollProgress;

package/lib/esm/Scroll/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+};