@telus-uds/components-base 1.10.0 → 1.11.0

package/src/TextInput/TextInput.jsx

@@ -51,7 +51,7 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports {...supportsProps}>
+    <InputSupports nativeID={selectedProps.nativeID} {...supportsProps}>
       {({ inputId, ...props }) => (
         <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}

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