@telus-uds/components-base 1.10.0 → 1.12.1

package/src/ThemeProvider/utils/theme-tokens.js

@@ -157,7 +157,7 @@ export const validateThemeTokensVersion = (theme) => {
 
 The UDS base components ${pkg.name} v${pkg.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
 
-If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`
+If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`
     )
   }
 }

package/src/Typography/Typography.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { useTheme, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
@@ -24,22 +24,17 @@ import {
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) =>
+const selectTextStyles = (
+  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight,
     fontSize,
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -64,9 +59,13 @@ const Typography = forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+      style: selectTextStyles(
+        align ? { ...themeTokens, textAlign: align } : themeTokens,
+        themeOptions
+      ),
       dataSet,
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }

package/src/index.js

@@ -17,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/index.js

@@ -10,6 +10,7 @@ export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
+export { default as useScrollBlocking } from './useScrollBlocking'
 export * from './useResponsiveProp'
 export { default as useUniqueId } from './useUniqueId'
 export { default as withLinkRouter } from './withLinkRouter'

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/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 () => {}