@telus-uds/components-base 1.8.5 → 1.11.0

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, Platform } from 'react-native'
+import {
+  layoutTags,
+  getA11yPropsFromHtmlTag,
+  selectSystemProps,
+  a11yProps,
+  viewProps
+} from '../../utils'
+import { useCarousel } from '../CarouselContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
+  const { width, activeIndex } = useCarousel()
+  const selectedProps = selectProps({
+    ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  })
+
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+  const style = { width }
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden'
+  }
+  return (
+    <View style={style} {...selectedProps} {...focusabilityProps}>
+      {children}
+    </View>
+  )
+}
+
+CarouselItem.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Index of the current slide
+   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   */
+  elementIndex: PropTypes.number,
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: PropTypes.string,
+  /**
+   * Content of the slide
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags)
+}
+
+CarouselItem.displayName = 'Carousel.Item'
+
+export default CarouselItem

package/src/Carousel/CarouselItem/index.js

@@ -0,0 +1,3 @@
+import CarouselItem from './CarouselItem'
+
+export default CarouselItem

package/src/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export default {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+}

package/src/Carousel/index.js

@@ -0,0 +1,2 @@
+export * from './CarouselContext'
+export { default as Carousel } from './Carousel'

package/src/ExpandCollapse/Panel.jsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from 'react'
 import { Animated, Platform, View } from 'react-native'
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 
 import ExpandCollapseControl from './Control'
 import { useThemeTokens } from '../ThemeProvider'
@@ -51,6 +52,7 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
+      controlRef,
       ...rest
     },
     ref
@@ -95,6 +97,7 @@ const ExpandCollapsePanel = forwardRef(
           isExpanded={isExpanded}
           tokens={controlTokens}
           onPress={handleControlPress}
+          ref={controlRef}
         >
           {control}
         </ExpandCollapseControl>
@@ -142,7 +145,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: getTokensPropType('ExpandCollapseControl')
+  controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: ABBPropTypes.ref()
 }
 
 export default ExpandCollapsePanel

package/src/InputSupports/InputSupports.jsx

@@ -9,7 +9,17 @@ import useInputSupports from './useInputSupports'
 
 const InputSupports = forwardRef(
   (
-    { children, copy = 'en', label, hint, hintPosition = 'inline', feedback, tooltip, validation },
+    {
+      children,
+      copy = 'en',
+      label,
+      hint,
+      hintPosition = 'inline',
+      feedback,
+      tooltip,
+      validation,
+      nativeID
+    },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
@@ -18,7 +28,8 @@ const InputSupports = forwardRef(
       feedback,
       hint,
       label,
-      validation
+      validation,
+      nativeID
     })
 
     return (
@@ -72,7 +83,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 }
 
 export default InputSupports

package/src/InputSupports/useInputSupports.js

@@ -2,7 +2,7 @@ import useUniqueId from '../utils/useUniqueId'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint }) => {
+const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -20,7 +20,7 @@ const useInputSupports = ({ label, feedback, validation, hint }) => {
   }
 
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/src/Modal/Modal.jsx

@@ -22,6 +22,7 @@ import {
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
 import dictionary from './dictionary'
+import useScrollBlocking from '../utils/useScrollBlocking'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -89,6 +90,7 @@ const Modal = forwardRef(
   ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+    const modalRef = useScrollBlocking(isOpen)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -113,7 +115,7 @@ const Modal = forwardRef(
 
     return (
       <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]}>
+        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events

package/src/Skeleton/Skeleton.jsx

@@ -22,6 +22,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
   backgroundColor: color,
   borderRadius: radius,
+  maxWidth: '100%',
   ...fadeAnimation
 })
 

package/src/StepTracker/StepTracker.jsx

@@ -95,10 +95,17 @@ const StepTracker = forwardRef(
       }
     )
     const getCopy = useCopy({ dictionary, copy })
-    const stepTrackerLabel = getCopy('stepTrackerLabel')
-      .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
-      .replace('%{stepCount}', steps.length)
-      .replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1])
+    const stepTrackerLabel = showStepTrackerLabel
+      ? getCopy('stepTrackerLabel')
+          .replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length)
+          .replace('%{stepCount}', steps.length)
+          .replace(
+            '%{stepLabel}',
+            current < steps.length ? steps[current] : steps[steps.length - 1]
+          )
+      : ''
+    const getStepLabel = (index) =>
+      themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
@@ -123,7 +130,7 @@ const StepTracker = forwardRef(
                   status={current}
                   key={label}
                   label={label}
-                  name={getCopy('stepLabel').replace('%{stepNumber}', index + 1)}
+                  name={getStepLabel(index)}
                   stepIndex={index}
                   stepCount={steps.length}
                   tokens={themeTokens}
@@ -148,13 +155,19 @@ const StepTracker = forwardRef(
 )
 StepTracker.displayName = 'StepTracker'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+})
+
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string }),
-    fr: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),

package/src/TextInput/TextInput.jsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react'
-import { Platform } from 'react-native'
 import {
   a11yProps,
   focusHandlerProps,
@@ -42,13 +41,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) => {
-  React.useEffect(() => {
-    if (Platform.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern
-    }
-  }, [ref, pattern])
+const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
@@ -58,7 +51,7 @@ const TextInput = forwardRef(({ tokens, variant = {}, pattern, ...rest }, ref) =
   }
 
   return (
-    <InputSupports {...supportsProps}>
+    <InputSupports nativeID={selectedProps.nativeID} {...supportsProps}>
       {({ inputId, ...props }) => (
         <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}

package/src/TextInput/TextInputBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -128,6 +128,7 @@ const TextInputBase = forwardRef(
       onBlur,
       onMouseOver,
       onMouseOut,
+      pattern,
       tokens,
       variant = {},
       ...rest
@@ -161,6 +162,15 @@ const TextInputBase = forwardRef(
       readOnly
     })
 
+    const element = ref?.current
+    useEffect(() => {
+      if (Platform.OS === 'web' && pattern && element) {
+        // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+        // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+        element.pattern = pattern
+      }
+    }, [element, pattern])
+
     const handleChangeText = (event) => {
       const text = event.nativeEvent?.text || event.target?.value
       setValue(text, event)

package/src/TextInput/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
-import { Platform } from 'react-native'
 
+// These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
 const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
@@ -24,12 +25,7 @@ const textInputPropTypes = {
    * Use to react upon input's value changes. Required when the `value` prop is set.
    * Will receive the input's value as an argument.
    */
-  onChange: PropTypes.func,
-  ...Platform.select({
-    web: {
-      pattern: PropTypes.string
-    }
-  })
+  onChange: PropTypes.func
 }
 
 export default textInputPropTypes

package/src/index.js

@@ -3,6 +3,7 @@ export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Box } from './Box'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
+export * from './Carousel'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as Divider } from './Divider'
@@ -16,6 +17,7 @@ export { default as Icon } from './Icon'
 export * from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
+export { default as InputSupports } from './InputSupports'
 export * from './Link'
 export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'

package/src/utils/props/clickProps.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types'
 
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 }
 
 export default {

package/src/utils/props/handlerProps.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import getPropSelector from './getPropSelector'
 
-export const focusHandlerProps = {
+const focusHandlerProps = {
   types: {
     /**
      * onBlur handler
@@ -10,14 +12,11 @@ export const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: PropTypes.func
-  },
-  select: ({ onBlur, onFocus }) => ({
-    onBlur,
-    onFocus
-  })
+  }
 }
+focusHandlerProps.select = getPropSelector(focusHandlerProps.types)
 
-export const textInputHandlerProps = {
+const textInputHandlerProps = {
   types: {
     /**
      * onChange handler
@@ -34,14 +33,63 @@ export const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: PropTypes.func
-  },
-  select: ({ onChange, onChangeText, onSubmit, onSubmitEditing }) => ({
-    onChange,
-    onChangeText,
-    onSubmit,
-    onSubmitEditing
-  })
+    onSubmitEditing: PropTypes.func,
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: PropTypes.func,
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: PropTypes.func,
+    /**
+     * onScroll handler
+     */
+    onScroll: PropTypes.func,
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: PropTypes.func,
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: PropTypes.func,
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: PropTypes.func,
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: PropTypes.func
+  }
+}
+const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types)
+textInputHandlerProps.select = (props) => {
+  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
+  const { onKeyPress, onKeyUp, onKeyDown, ...resolvedProps } = selectTextInputHandlers(props)
+  if (onKeyPress || onKeyUp || onKeyDown) {
+    if (Platform.OS !== 'web') {
+      // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
+      resolvedProps.onKeyPress = (event) => {
+        if (typeof onKeyDown === 'function') onKeyDown(event)
+        if (typeof onKeyPress === 'function') onKeyPress(event)
+        if (typeof onKeyUp === 'function') onKeyUp(event)
+      }
+    } else {
+      // React Native Web supports onKeyUp the normal way.
+      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp
+      // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
+      // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
+      if (onKeyPress || onKeyDown) {
+        resolvedProps.onKeyPress = (event) => {
+          if (typeof onKeyDown === 'function') onKeyDown(event)
+          if (typeof onKeyPress === 'function') onKeyPress(event)
+        }
+      }
+    }
+  }
+  return resolvedProps
 }
 
-export default { focusHandlerProps, textInputHandlerProps }
+export { focusHandlerProps, textInputHandlerProps }

package/src/utils/props/textInputProps.js

@@ -121,7 +121,13 @@ const crossPlatform = {
 const webOnly = {
   disabled: PropTypes.bool,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
+  lang: PropTypes.string,
+  /**
+   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
+   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+   */
+  pattern: PropTypes.string
 }
 
 /**

package/src/utils/useScrollBlocking.js

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  document.body.addEventListener('touchmove', preventScrolling, { passive: false })
+  ref.current?.addEventListener('touchmove', stopPropagation)
+  document.body.style.overflow = 'hidden'
+}
+
+const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  document.body.removeEventListener('touchmove', preventScrolling)
+  ref.current?.removeEventListener('touchmove', stopPropagation)
+  document.body.style.overflow = 'inherit'
+}
+
+/**
+ * Disables scrolling when passed `true` or an array where all items are `true`.
+ *
+ * Returns an optional callback ref. Pass this to an element if it or its children
+ * should allow touch-based scrolling within that element's bounds.
+ *
+ * @param {boolean | boolean[]} conditionProps
+ * @returns
+ */
+const useScrollBlocking = (conditionProps) => {
+  // useRef refs are null on first render and don't trigger a re-render when they get their
+  // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
+  const ref = useRef()
+  const [refIsMounted, setRefIsMounted] = useState(false)
+  const callbackRef = useCallback((element) => {
+    ref.current = element
+    setRefIsMounted(Boolean(element))
+  }, [])
+
+  const conditionsMet = Array.isArray(conditionProps)
+    ? conditionProps.every((condition) => condition)
+    : Boolean(conditionProps)
+
+  const preventScrolling = useCallback((event) => event.preventDefault(), [])
+  const stopPropagation = useCallback((event) => event.stopPropagation(), [])
+
+  useEffect(() => {
+    const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref)
+
+    if (conditionsMet) {
+      addScrollBlocking(preventScrolling, stopPropagation, ref)
+    } else {
+      cleanup()
+    }
+    return cleanup
+    // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    // will re-run when conditionsMet or refIsMounted flip between true and false.
+  }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted])
+
+  return callbackRef
+}
+
+export default useScrollBlocking

package/src/utils/useScrollBlocking.native.js

@@ -0,0 +1,2 @@
+// This is a no-op to emphasize that the original hook is web-only
+export default () => {}