@telus-uds/components-base 3.29.1 → 3.30.0

package/src/Scroll/index.js

@@ -0,0 +1,5 @@
+import Scroll from './Scroll'
+
+export default Scroll
+export { default as ScrollItem } from './ScrollItem'
+export { ScrollProvider, useScroll } from './ScrollContext'

package/src/index.js

@@ -49,6 +49,7 @@ export { default as QuickLinksFeature } from './QuickLinksFeature'
 export { default as Radio, RadioGroup } from './Radio'
 export { default as RadioCard, RadioCardGroup } from './RadioCard'
 export { default as Responsive } from './Responsive'
+export { default as Scroll, ScrollItem } from './Scroll'
 export { default as Search } from './Search'
 export { default as Select } from './Select'
 export { default as Shortcuts, ShortcutsItem } from './Shortcuts'

package/src/utils/animation/index.js

@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export */
+export { default as useAnimatedValue } from './useAnimatedValue'
 export { default as useVerticalExpandAnimation } from './useVerticalExpandAnimation'

package/src/utils/animation/useAnimatedValue.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Animated, Easing } from 'react-native'
+
+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.
+ */
+const useAnimatedValue = (targetValue, duration = ANIMATION_DURATION) => {
+  const [currentValue, setCurrentValue] = React.useState(targetValue)
+  const animatedValue = React.useRef(new Animated.Value(targetValue)).current
+
+  React.useEffect(() => {
+    const id = animatedValue.addListener(({ value }) => 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
+}
+
+export default useAnimatedValue

package/src/utils/children.jsx

@@ -47,8 +47,11 @@ 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
+// 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?.name === 'FootnoteLink'
+  isStringOrNumber(child) ||
+  child.type === A11yText ||
+  child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink'
 const combineKeys = (childrenArray) =>
   childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '')
 

package/types/Scroll.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { SemanticTag } from './Common'
+
+export interface ScrollDictionary {
+  accessibilityLabel: string
+  instructionText: string
+  progressBarLabel: string
+}
+
+export interface ScrollProps {
+  /**
+   * Scroll items to display. Should be `ScrollItem` components.
+   */
+  children: ReactNode
+  /**
+   * Theme tokens for customizing the Scroll appearance.
+   */
+  tokens?: ScrollTokens
+  /**
+   * Variant for the Scroll component.
+   */
+  variant?: ScrollVariant
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy?: 'en' | 'fr'
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary?: {
+    en: ScrollDictionary
+    fr: ScrollDictionary
+  }
+  /**
+   * Accessibility label for the scrollable region.
+   */
+  accessibilityLabel?: string
+}
+
+export type ScrollVariant = {}
+
+export interface ScrollTokens {
+  itemGap?: number
+  progressBarColor?: string
+  progressBarHeight?: number
+  progressHitAreaHeight?: number
+  progressSpacing?: number
+  progressTrackColor?: string
+  progressTrackHeight?: number
+}
+
+export interface ScrollItemProps {
+  /**
+   * Content of the scroll item.
+   */
+  children: ReactNode
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag?: SemanticTag
+}
+
+declare const Scroll: ComponentType<ScrollProps>
+export declare const ScrollItem: ComponentType<ScrollItemProps>
+
+export default Scroll

package/types/index.d.ts

@@ -45,6 +45,15 @@ export { LinkProps, LinkSize, LinkAndTextButtonVariants, LinkTokens } from './Li
 export { default as List } from './List'
 export { ListVariants, ListTokens, ListProps, ListItemProps, ListItemTokens } from './List'
 
+export { default as Scroll, ScrollItem } from './Scroll'
+export type {
+  ScrollProps,
+  ScrollTokens,
+  ScrollVariant,
+  ScrollItemProps,
+  ScrollDictionary
+} from './Scroll'
+
 export { default as Search } from './Search'
 export { SearchTokens, SearchProps } from './Search'