@telus-uds/components-base 3.3.0 → 3.5.0

package/lib/esm/utils/useUniqueId.js

@@ -1,11 +1,7 @@
-import { useState } from 'react';
-let id = 0;
+import { useId } from 'react';
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = useState(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
+  const id = useId();
+  return `${prefix ? `${prefix}-` : ''}${id}`;
 }
 export default useUniqueId;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.2.0",
+    "@telus-uds/system-theme-tokens": "^4.3.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -59,7 +59,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.74.5",
-    "react-native-web": "^0.19.10"
+    "react-native-web": "^0.19.10",
+    "react-native-svg": "15.7.1"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -83,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.3.0",
+  "version": "3.5.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.2.0",
+    "@telus-uds/system-theme-tokens": "^4.3.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -59,7 +59,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.74.5",
-    "react-native-web": "^0.19.10"
+    "react-native-web": "^0.19.10",
+    "react-native-svg": "15.7.1"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -83,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.3.0",
+  "version": "3.5.0",
   "types": "types/index.d.ts"
 }

package/src/ActivityIndicator/Dots.jsx

@@ -0,0 +1,200 @@
+import React from 'react'
+import {
+  DOTS_TOTAL_ANIMATION_DURATION,
+  OVERSHOOT_FACTOR,
+  UNDERSHOOT_FACTOR,
+  BOUNCY_CURVE,
+  DOTS_SPACING_X,
+  DOTS_BASE_Y_FACTOR,
+  DOTS_JUMP_HEIGHT_FACTOR,
+  DOTS_PADDING_FACTOR,
+  DOTS_FADEOUT_KEYTIMES,
+  DOTS_FADEOUT_VALUES,
+  DOT1_COLOR_KEYTIMES,
+  DOT2_COLOR_KEYTIMES,
+  DOT3_COLOR_KEYTIMES,
+  DOT1_ANIMATION_KEYTIMES,
+  DOT2_ANIMATION_KEYTIMES,
+  DOT3_ANIMATION_KEYTIMES,
+  propTypes
+} from './shared'
+import { useA11yInfo } from '../A11yInfoProvider'
+
+const CY_PROPS = {
+  attributeName: 'cy',
+  calcMode: 'spline',
+  dur: `${DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+}
+
+const FILL_PROPS = {
+  attributeName: 'fill',
+  calcMode: 'linear',
+  dur: `${DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+}
+
+const OPACITY_PROPS = {
+  attributeName: 'opacity',
+  calcMode: 'linear',
+  dur: `${DOTS_TOTAL_ANIMATION_DURATION}ms`,
+  repeatCount: 'indefinite'
+}
+
+const Dots = React.forwardRef(
+  ({ size, color, indicatorBackgroundColor, label, isStatic = false }, ref) => {
+    const { reduceMotionEnabled } = useA11yInfo()
+    const reduceMotion = reduceMotionEnabled || isStatic
+
+    const spacingX = size + DOTS_SPACING_X
+    const baseY = size * DOTS_BASE_Y_FACTOR
+    const jumpHeight = size * DOTS_JUMP_HEIGHT_FACTOR
+    const padding = size * DOTS_PADDING_FACTOR
+
+    return (
+      <svg
+        ref={ref}
+        aria-valuetext={label}
+        role="progressbar"
+        aria-busy="true"
+        width={size * 3 + spacingX * 2 + padding * 2}
+        height={size * 6}
+        viewBox={`0 0 ${size * 3 + spacingX * 2 + padding * 2} ${size * 6}`}
+      >
+        <g>
+          {/* ===================== DOT 1 ===================== */}
+          <circle cx={padding + size / 2} cy={baseY} r={size / 2} fill={color}>
+            {!reduceMotion && (
+              <>
+                <animate
+                  {...CY_PROPS}
+                  keyTimes={DOT1_ANIMATION_KEYTIMES}
+                  keySplines={`${BOUNCY_CURVE};${BOUNCY_CURVE};${BOUNCY_CURVE}`}
+                  values={`
+                  ${baseY};
+                  ${baseY - jumpHeight * OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `}
+                />
+                {/* color (fill) */}
+                <animate
+                  {...FILL_PROPS}
+                  keyTimes={DOT1_COLOR_KEYTIMES}
+                  values={`
+                  ${color}; 
+                  ${color}; 
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}
+                `}
+                />
+                {/* fade-out */}
+                <animate
+                  {...OPACITY_PROPS}
+                  keyTimes={DOTS_FADEOUT_KEYTIMES}
+                  values={DOTS_FADEOUT_VALUES}
+                />
+              </>
+            )}
+          </circle>
+
+          {/* ===================== DOT 2 ===================== */}
+          <circle
+            cx={padding + size + spacingX + size / 2}
+            cy={baseY}
+            r={size / 2}
+            fill={indicatorBackgroundColor}
+          >
+            {reduceMotion ? null : (
+              <>
+                <animate
+                  {...CY_PROPS}
+                  keyTimes={DOT2_ANIMATION_KEYTIMES}
+                  keySplines={`
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE}
+                `}
+                  values={`
+                  ${baseY};
+                  ${baseY};
+                  ${baseY - jumpHeight * OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `}
+                />
+                {/* color (fill) */}
+                <animate
+                  {...FILL_PROPS}
+                  keyTimes={DOT2_COLOR_KEYTIMES}
+                  values={`
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}; 
+                  ${color}; 
+                  ${color}; 
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}
+                `}
+                />
+                {/* fade-out */}
+                <animate
+                  {...OPACITY_PROPS}
+                  keyTimes={DOTS_FADEOUT_KEYTIMES}
+                  values={DOTS_FADEOUT_VALUES}
+                />
+              </>
+            )}
+          </circle>
+
+          {/* ===================== DOT 3 ===================== */}
+          <circle
+            cx={padding + (size + spacingX) * 2 + size / 2}
+            cy={baseY}
+            r={size / 2}
+            fill={indicatorBackgroundColor}
+          >
+            {reduceMotion ? null : (
+              <>
+                <animate
+                  {...CY_PROPS}
+                  keyTimes={DOT3_ANIMATION_KEYTIMES}
+                  keySplines={`
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE};
+                  ${BOUNCY_CURVE}
+                `}
+                  values={`
+                  ${baseY};
+                  ${baseY};
+                  ${baseY - jumpHeight * OVERSHOOT_FACTOR};
+                  ${baseY + jumpHeight * UNDERSHOOT_FACTOR};
+                  ${baseY}
+                `}
+                />
+                {/* color (fill) */}
+                <animate
+                  {...FILL_PROPS}
+                  keyTimes={DOT3_COLOR_KEYTIMES}
+                  values={`
+                  ${indicatorBackgroundColor}; 
+                  ${indicatorBackgroundColor}; 
+                  ${color}; 
+                  ${color}; 
+                  ${color}
+                `}
+                />
+              </>
+            )}
+          </circle>
+        </g>
+      </svg>
+    )
+  }
+)
+
+Dots.displayName = 'Dots'
+Dots.propTypes = propTypes
+
+export default Dots

package/src/ActivityIndicator/Dots.native.jsx

@@ -0,0 +1,213 @@
+import React from 'react'
+import { View, StyleSheet, Animated, Easing } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
+import {
+  DOTS_TOTAL_ANIMATION_DURATION,
+  OVERSHOOT_FACTOR,
+  UNDERSHOOT_FACTOR,
+  DOTS_SPACING_X,
+  DOTS_BASE_Y_FACTOR,
+  DOTS_JUMP_HEIGHT_FACTOR,
+  DOTS_PADDING_FACTOR,
+  DOT_FADEOUT_INPUT_RANGE,
+  DOT_FADEOUT_OUTPUT_RANGE,
+  DOT1_ANIMATION_INPUT_RANGE,
+  DOT2_ANIMATION_INPUT_RANGE,
+  DOT3_ANIMATION_INPUT_RANGE,
+  propTypes
+} from './shared'
+import { useA11yInfo } from '../A11yInfoProvider'
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+const Dots = React.forwardRef(
+  ({ size, color, indicatorBackgroundColor, label, isStatic = false }, ref) => {
+    const { reduceMotionEnabled } = useA11yInfo()
+    const reduceMotion = reduceMotionEnabled || isStatic
+
+    const spacingX = size + DOTS_SPACING_X
+    const baseY = size * DOTS_BASE_Y_FACTOR
+    const jumpHeight = size * DOTS_JUMP_HEIGHT_FACTOR
+    const padding = size * DOTS_PADDING_FACTOR
+    const width = (size + 1) * 6
+    const height = size * 6
+
+    const animationValue = React.useRef(new Animated.Value(0)).current
+
+    React.useEffect(() => {
+      if (reduceMotion) {
+        animationValue.stopAnimation()
+        animationValue.setValue(0)
+        return () => {}
+      }
+      const loopAnimation = Animated.loop(
+        Animated.timing(animationValue, {
+          toValue: 1,
+          duration: DOTS_TOTAL_ANIMATION_DURATION,
+          easing: Easing.linear,
+          useNativeDriver: false
+        })
+      )
+      loopAnimation.start()
+      return () => loopAnimation.stop()
+    }, [reduceMotion, animationValue])
+
+    const makeStepInterpolation = (steps) => {
+      const inputRange = []
+      const outputRange = []
+      steps.forEach(({ time, value }) => {
+        inputRange.push(time)
+        outputRange.push(value)
+      })
+      return { inputRange, outputRange }
+    }
+
+    // ---- DOT 1 ----
+    const dot1Cy = animationValue.interpolate({
+      inputRange: DOT1_ANIMATION_INPUT_RANGE,
+      outputRange: [
+        baseY,
+        baseY - jumpHeight * OVERSHOOT_FACTOR,
+        baseY + jumpHeight * UNDERSHOOT_FACTOR,
+        baseY
+      ],
+      extrapolate: 'clamp'
+    })
+
+    const { inputRange: dot1FillInputRange, outputRange: dot1FillOutputRange } =
+      makeStepInterpolation([
+        { time: 0, value: color },
+        { time: 0.3, value: color },
+        { time: 0.4, value: indicatorBackgroundColor },
+        { time: 1, value: indicatorBackgroundColor }
+      ])
+    const dot1Fill = animationValue.interpolate({
+      inputRange: dot1FillInputRange,
+      outputRange: dot1FillOutputRange,
+      extrapolate: 'clamp'
+    })
+
+    // Fade-out Dot 1
+    const dot1Opacity = animationValue.interpolate({
+      inputRange: DOT_FADEOUT_INPUT_RANGE,
+      outputRange: DOT_FADEOUT_OUTPUT_RANGE,
+      extrapolate: 'clamp'
+    })
+
+    // ---- DOT 2 ----
+    const dot2Cy = animationValue.interpolate({
+      inputRange: DOT2_ANIMATION_INPUT_RANGE,
+      outputRange: [
+        baseY,
+        baseY,
+        baseY - jumpHeight * OVERSHOOT_FACTOR,
+        baseY + jumpHeight * UNDERSHOOT_FACTOR,
+        baseY
+      ],
+      extrapolate: 'clamp'
+    })
+
+    const { inputRange: dot2FillInputRange, outputRange: dot2FillOutputRange } =
+      makeStepInterpolation([
+        { time: 0, value: indicatorBackgroundColor },
+        { time: 0.3, value: indicatorBackgroundColor },
+        { time: 0.4, value: color },
+        { time: 0.6, value: color },
+        { time: 0.7, value: indicatorBackgroundColor },
+        { time: 1, value: indicatorBackgroundColor }
+      ])
+    const dot2Fill = animationValue.interpolate({
+      inputRange: dot2FillInputRange,
+      outputRange: dot2FillOutputRange,
+      extrapolate: 'clamp'
+    })
+
+    // Fade-out Dot 2
+    const dot2Opacity = animationValue.interpolate({
+      inputRange: DOT_FADEOUT_INPUT_RANGE,
+      outputRange: DOT_FADEOUT_OUTPUT_RANGE,
+      extrapolate: 'clamp'
+    })
+
+    // ---- DOT 3 ----
+    const dot3Cy = animationValue.interpolate({
+      inputRange: DOT3_ANIMATION_INPUT_RANGE,
+      outputRange: [
+        baseY,
+        baseY,
+        baseY - jumpHeight * OVERSHOOT_FACTOR,
+        baseY + jumpHeight * UNDERSHOOT_FACTOR,
+        baseY
+      ],
+      extrapolate: 'clamp'
+    })
+
+    const { inputRange: dot3FillInputRange, outputRange: dot3FillOutputRange } =
+      makeStepInterpolation([
+        { time: 0, value: indicatorBackgroundColor },
+        { time: 0.5, value: indicatorBackgroundColor },
+        { time: 0.6, value: color },
+        { time: 0.8, value: color },
+        { time: 1, value: color }
+      ])
+    const dot3Fill = animationValue.interpolate({
+      inputRange: dot3FillInputRange,
+      outputRange: dot3FillOutputRange,
+      extrapolate: 'clamp'
+    })
+
+    const dot3Opacity = new Animated.Value(1)
+
+    return (
+      <View
+        ref={ref}
+        style={styles.container}
+        accessible
+        accessibilityLabel={label}
+        accessibilityRole="progressbar"
+        accessibilityState={{ busy: true }}
+      >
+        <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+          {/* DOT 1 */}
+          <AnimatedCircle
+            cx={size}
+            cy={reduceMotion ? baseY : dot1Cy}
+            r={padding}
+            fill={reduceMotion ? color : dot1Fill}
+            opacity={reduceMotion ? 1 : dot1Opacity}
+          />
+
+          {/* DOT 2 */}
+          <AnimatedCircle
+            cx={2 * size + spacingX}
+            cy={reduceMotion ? baseY : dot2Cy}
+            r={padding}
+            fill={reduceMotion ? indicatorBackgroundColor : dot2Fill}
+            opacity={reduceMotion ? 1 : dot2Opacity}
+          />
+
+          {/* DOT 3 */}
+          <AnimatedCircle
+            cx={3 * size + 2 * spacingX}
+            cy={reduceMotion ? baseY : dot3Cy}
+            r={padding}
+            fill={reduceMotion ? indicatorBackgroundColor : dot3Fill}
+            opacity={reduceMotion ? 1 : dot3Opacity}
+          />
+        </Svg>
+      </View>
+    )
+  }
+)
+
+Dots.displayName = 'Dots'
+Dots.propTypes = propTypes
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+export default Dots

package/src/ActivityIndicator/Spinner.jsx

@@ -1,83 +1,119 @@
 import React from 'react'
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
+import {
+  DURATION,
+  SVG_CIRCUMFERENCE,
+  SVG_SIZE,
+  ROTATION_TRANSFORM,
+  SVG_CENTER,
+  SPINNER_RADIUS,
+  SPINNER_ROTATION_DEGREES,
+  SPINNER_DASHARRAY_MIN,
+  SPINNER_DASHARRAY_MAX,
+  SPINNER_KEYTIMES,
+  SPINNER_DASHARRAY_HALF,
+  SPINNER_DASHOFFSET_FACTOR,
+  propTypes
+} from './shared'
 import { useA11yInfo } from '../A11yInfoProvider'
 
-const SVG_RADIUS = 20
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI
-const MIN_SVG_LENGTH = (MIN_STROKE_ANGLE / 360) * SVG_CIRCUMFERENCE
-const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE
-
-const animationProps = {
-  begin: '0s',
-  dur: `${DURATION}ms`,
-  fill: 'freeze',
+const animateProps = {
+  keyTimes: SPINNER_KEYTIMES,
   repeatCount: 'indefinite'
 }
 
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-}
-// We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = React.forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
-  const { reduceMotionEnabled } = useA11yInfo()
-  const reduceMotion = reduceMotionEnabled || isStatic
-  return (
-    <svg
-      ref={ref}
-      width={`${size}px`}
-      height={`${size}px`}
-      viewBox="0 0 48 48"
-      aria-valuetext={label}
-      role="progressbar"
-      aria-busy={true}
-    >
-      <g>
-        {reduceMotion ? null : (
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            values={`-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`}
-            {...animationProps}
-          />
-        )}
+const Spinner = React.forwardRef(
+  ({ size, color, indicatorBackgroundColor, thickness, label, isStatic = false }, ref) => {
+    const { reduceMotionEnabled } = useA11yInfo()
+    const reduceMotion = reduceMotionEnabled || isStatic
+
+    const strokeWidth = (thickness * SVG_SIZE) / size
+
+    return (
+      <svg
+        ref={ref}
+        width={`${size}px`}
+        height={`${size}px`}
+        viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}
+        aria-valuetext={label}
+        role="progressbar"
+        aria-busy="true"
+      >
+        {/* Base static circle with background color */}
+        <circle
+          fill="none"
+          stroke={indicatorBackgroundColor}
+          strokeWidth={strokeWidth}
+          cx={SVG_CENTER}
+          cy={SVG_CENTER}
+          r={SPINNER_RADIUS}
+        />
+
+        {/* Animated circle */}
         <circle
           fill="none"
           stroke={color}
-          strokeWidth={(thickness * 48) / size}
+          strokeWidth={strokeWidth}
           strokeLinecap="round"
-          cx="24"
-          cy="24"
-          r="20"
-          strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
-          strokeDashoffset={0}
-          vectorEffect="non-scaling-stroke"
+          cx={SVG_CENTER}
+          cy={SVG_CENTER}
+          r={SPINNER_RADIUS}
+          strokeDasharray={`${SPINNER_DASHARRAY_MIN * SVG_CIRCUMFERENCE}, ${
+            SPINNER_DASHARRAY_MAX * SVG_CIRCUMFERENCE
+          }`}
+          strokeDashoffset="0"
+          // Circle rotated -90° so that 0% is at the top (12 o'clock).
+          transform={ROTATION_TRANSFORM}
         >
           {reduceMotion ? null : (
             <>
-              <animate
-                attributeName="stroke-dashoffset"
-                values={`0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`}
-                {...animationProps}
-                {...bezierProps}
+              {/*
+                Rotation animated from 0° to 183°, 
+                with additive="sum" is added to the base rotation of -90°.
+              */}
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 24 24"
+                to={`${SPINNER_ROTATION_DEGREES} ${SVG_CENTER} ${SVG_CENTER}`}
+                dur={`${DURATION}ms`}
+                repeatCount="indefinite"
+                additive="sum"
               />
               <animate
                 attributeName="stroke-dasharray"
-                values={`${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`}
-                {...animationProps}
-                {...bezierProps}
+                dur={`${DURATION}ms`}
+                values={`
+                  ${SPINNER_DASHARRAY_MIN * SVG_CIRCUMFERENCE},${
+                  SPINNER_DASHARRAY_MAX * SVG_CIRCUMFERENCE
+                };
+                  ${SPINNER_DASHARRAY_HALF * SVG_CIRCUMFERENCE},${
+                  SPINNER_DASHARRAY_HALF * SVG_CIRCUMFERENCE
+                };
+                  ${SPINNER_DASHARRAY_MIN * SVG_CIRCUMFERENCE},${
+                  SPINNER_DASHARRAY_MAX * SVG_CIRCUMFERENCE
+                }
+                `}
+                {...animateProps}
+              />
+              <animate
+                attributeName="stroke-dashoffset"
+                dur={`${DURATION}ms`}
+                values={`
+                  0;
+                  0;
+                  -${SPINNER_DASHOFFSET_FACTOR * SVG_CIRCUMFERENCE}
+                `}
+                {...animateProps}
               />
             </>
           )}
         </circle>
-      </g>
-    </svg>
-  )
-})
-Spinner.displayName = 'Spinner'
+      </svg>
+    )
+  }
+)
 
+Spinner.displayName = 'Spinner'
 Spinner.propTypes = propTypes
 
 export default Spinner