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

package/lib/esm/Scroll/ScrollContext.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScrollContext = /*#__PURE__*/React.createContext();
+export 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
+  });
+};
+export 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
+};

package/lib/esm/Scroll/ScrollItem.js

@@ -0,0 +1,100 @@
+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 { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { viewProps } from '../utils/props/viewProps';
+import { layoutTags, getA11yPropsFromHtmlTag } from '../utils/a11y/semantics';
+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)
+};
+const MemoizedScrollItem = /*#__PURE__*/React.memo(ScrollItem);
+export { MemoizedScrollItem as ScrollItem };

package/lib/esm/Scroll/ScrollProgress.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { resolvePressableState } from '../utils/pressability';
+import { useAnimatedValue } from '../utils/animation/useAnimatedValue';
+import { Progress } from '../Progress/Progress';
+import { ProgressBar } from '../Progress/ProgressBar';
+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
+  };
+};
+export 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(ProgressBar, {
+        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
+};

package/lib/esm/Scroll/dictionary.js

@@ -0,0 +1,12 @@
+export const dictionary = {
+  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'
+  }
+};

package/lib/esm/StackView/StackWrapBox.js

@@ -51,6 +51,7 @@ export const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -77,7 +78,8 @@ export const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const content = getStackedContent(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -113,6 +115,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: PropTypes.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/esm/StackView/StackWrapGap.js

@@ -33,6 +33,7 @@ export const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = useViewport();
@@ -52,7 +53,8 @@ export const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   };
   const content = getStackedContent(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib/esm/StackView/getStackedContent.js

@@ -36,7 +36,8 @@ export const getStackedContent = (children, _ref) => {
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -48,15 +49,24 @@ export const getStackedContent = (children, _ref) => {
   const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    _createElement(Box, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/_createElement(Box, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/React.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/esm/index.js

@@ -73,6 +73,8 @@ export { RadioGroup } from './Radio/RadioGroup';
 export { RadioCard } from './RadioCard/RadioCard';
 export { RadioCardGroup } from './RadioCard/RadioCardGroup';
 export { Responsive } from './Responsive/Responsive';
+export { Scroll } from './Scroll/Scroll';
+export { ScrollItem } from './Scroll/ScrollItem';
 export { Search } from './Search/Search';
 export { Select } from './Select/Select';
 export { SelectItem } from './Select/SelectItem';

package/lib/esm/utils/animation/useAnimatedValue.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+export const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = React.useState(targetValue);
+  const animatedValue = React.useRef(new Animated.Value(targetValue)).current;
+  React.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  React.useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};

package/lib/esm/utils/children.js

@@ -47,7 +47,8 @@ export const unpackFragment = child => {
 };
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === A11yText || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
     "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.2",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.11.4",
     "@telus-uds/system-constants": "^4.0.0-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^14.0.8",
     "expo-linear-gradient": "^15.0.8",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.2",
   "types": "types/index.d.ts"
 }

package/src/ActionCard/ActionCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Animated, View, StyleSheet, Text } from 'react-native'
+import { Animated, View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { a11yProps } from '../utils/props/a11yProps'
@@ -200,14 +200,16 @@ export const ActionCard = React.forwardRef(
                 <View style={staticStyles.content}>
                   <View style={staticStyles.header}>
                     <View style={[selectTitleStyles(themeTokens), staticStyles.title]}>
-                      <Text>
-                        {wrapStringsInText(title, { style: selectTitleTextStyles(themeTokens) })}
+                      <View style={staticStyles.titleRow}>
+                        {wrapStringsInText(title, {
+                          style: [selectTitleTextStyles(themeTokens), staticStyles.titleText]
+                        })}
                         {themeTokens.statusIcon && (
                           <View style={staticStyles.statusIcon}>
                             <Icon {...selectStatusIconProps(themeTokens)} />
                           </View>
                         )}
-                      </Text>
+                      </View>
                     </View>
                     <View style={staticStyles.icons}>
                       {direction && (
@@ -297,6 +299,13 @@ const staticStyles = StyleSheet.create({
   title: {
     flexShrink: 1
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  titleText: {
+    flexShrink: 1
+  },
   statusIcon: {
     marginLeft: 4
   }

package/src/Card/Card.jsx

@@ -67,10 +67,10 @@ const getInputProps = ({
  *
  * ## Component API
  *
- * ### Background
+ * ### Style
  *
- * In order to control the background of a card, the following tokens are currently
- * supported:
+ * In order to control the style of a card, use the `style` variant.
+ * The following tokens are supported:
  *
  * - `backgroundColor`
  *

package/src/Carousel/Carousel.jsx

@@ -1400,9 +1400,14 @@ Carousel.propTypes = {
    */
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
+      /** Accessibility label for the thumbnail image, used by assistive technologies. */
       accessibilityLabel: PropTypes.string,
+      /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
       alt: PropTypes.string,
-      src: PropTypes.string
+      /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+      isVideo: PropTypes.bool,
+      /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+      src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     })
   ),
   /**