@telus-uds/components-base 1.10.0 → 1.11.0

package/lib/Carousel/Carousel.js

@@ -37,6 +37,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -103,14 +105,6 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   return styles;
 };
 
-const defaultPanelNavigationDictionary = {
-  en: {
-    stepTrackerLabel: 'Showing %{stepNumber} of %{stepCount}'
-  },
-  fr: {
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-  }
-};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
@@ -172,6 +166,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     variant,
     children,
+    itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
@@ -181,9 +176,10 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onIndexChanged,
     springConfig = undefined,
     onRenderPanelNavigation,
-    panelNavigationTextDictionary = defaultPanelNavigationDictionary,
+    tag = 'ul',
     accessibilityRole = 'adjustable',
     accessibilityLabel = 'carousel',
+    copy,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -200,6 +196,23 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const [activeIndex, setActiveIndex] = _react.default.useState(0);
 
+  const [isAnimating, setIsAnimating] = _react.default.useState(false);
+
+  const handleAnimationStart = _react.default.useCallback(function () {
+    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
+    setIsAnimating(true);
+  }, [onAnimationStart]);
+
+  const handleAnimationEnd = _react.default.useCallback(function () {
+    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+    setIsAnimating(false);
+  }, [onAnimationEnd]);
+
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
   const childrenArray = _react.default.Children.toArray(children);
 
   const systemProps = selectProps({ ...rest,
@@ -276,20 +289,28 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   }, [activeIndex, containerLayout.width, pan, animatedX]);
 
-  const animate = _react.default.useCallback(toValue => {
+  const animate = _react.default.useCallback((toValue, toIndex) => {
+    const handleAnimationEndToIndex = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return handleAnimationEnd(toIndex, ...args);
+    };
+
     if (reduceMotionEnabled) {
       _Animated.default.timing(pan, {
         toValue,
         duration: 1,
         useNativeDriver: false
-      }).start();
+      }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(pan, { ...springConfig,
         toValue,
         useNativeDriver: false
-      }).start();
+      }).start(handleAnimationEndToIndex);
     }
-  }, [pan, springConfig, reduceMotionEnabled]);
+  }, [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]);
 
   const updateIndex = _react.default.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
@@ -308,25 +329,25 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       calcDelta = -1 * activeIndex + delta - 1;
     }
 
+    const index = activeIndex + calcDelta;
+
     if (skipChanges) {
-      animate(toValue);
+      animate(toValue, index);
       return calcDelta;
     }
 
-    const index = activeIndex + calcDelta;
     setActiveIndex(index);
     toValue.x = containerLayout.width * -1 * calcDelta;
-    animate(toValue);
+    animate(toValue, index);
     if (onIndexChanged) onIndexChanged(calcDelta);
-    if (onAnimationEnd) onAnimationEnd(index);
     return calcDelta;
-  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged, onAnimationEnd]);
+  }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
 
   const fixOffsetAndGo = _react.default.useCallback(delta => {
     updateOffset();
-    if (onAnimationStart) onAnimationStart(activeIndex);
+    handleAnimationStart(activeIndex);
     updateIndex(delta);
-  }, [updateIndex, updateOffset, activeIndex, onAnimationStart]);
+  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart]);
 
   const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -349,7 +370,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         return false;
       }
 
-      if (onAnimationStart) onAnimationStart(activeIndex);
+      handleAnimationStart(activeIndex);
       return Math.abs(gestureState.dx) > minDistanceToCapture;
     },
     onPanResponderGrant: () => updateOffset(),
@@ -365,13 +386,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         animate({
           x: 0,
           y: 0
-        });
+        }, 0);
       } else {
         const delta = correction > 0 ? -1 : 1;
         updateIndex(delta);
       }
     }
-  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, onAnimationStart, minDistanceToCapture, pan.x]);
+  }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
 
   _react.default.useEffect(() => {
     pan.x.addListener(_ref4 => {
@@ -416,6 +437,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     size: previousNextIconSize,
     raised: true
   };
+
+  const getCopyWithPlaceholders = copyKey => {
+    const copyText = getCopy(copyKey).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
+
+    return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     totalItems: childrenArray.length,
@@ -434,7 +462,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: previousIcon,
           onPress: goToPrev,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: "previous-button"
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),
@@ -447,9 +475,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             }]
           }]),
           ...panResponder.panHandlers,
+          ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
           children: childrenArray.map((element, index) => {
+            const hidden = !isAnimating && index !== activeIndex;
+
             const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
-              elementIndex: index
+              elementIndex: index,
+              hidden
             });
 
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
@@ -465,7 +497,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           icon: nextIcon,
           onPress: goToNext,
           variant: previousNextIconButtonVariants,
-          accessibilityLabel: "next-button"
+          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
     }), showPanelNavigation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
@@ -477,7 +509,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
         current: activeIndex,
         steps: childrenArray.map((_, index) => String(index)),
-        dictionary: panelNavigationTextDictionary,
+        copy: {
+          // Give StepTracker copy from Carousel's language and dictionary
+          stepLabel: getCopyWithPlaceholders('stepLabel'),
+          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        },
         tokens: panelNavigationTokens
       })
     }) : null]
@@ -493,6 +529,14 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
 
+  /**
+   * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
+   * This is used when generating item labels. For example, if a carousel contains offers,
+   * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
+   * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
+   */
+  itemLabel: _propTypes.default.string,
+
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
@@ -611,7 +655,16 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
-  accessibilityLabel: _propTypes.default.string
+  accessibilityLabel: _propTypes.default.string,
+
+  /**
+   * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
+   * assistive technology tools know to intepret the carousel as a list.
+   *
+   * Note that if the immediate Carousel children do not all render as `'li'` elements,
+   * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags)
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -31,23 +31,29 @@ const CarouselItem = _ref => {
   let {
     children,
     elementIndex,
+    tag = 'li',
+    hidden,
     ...rest
   } = _ref;
   const {
     width,
-    activeIndex,
-    totalItems
+    activeIndex
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({ ...rest,
-    // `group` role crashes the app on Android so setting it to `none` for Android
-    accessibilityRole: _Platform.default.OS === 'android' ? 'none' : 'group',
-    accessibilityLabel: "Showing ".concat(elementIndex + 1, " of ").concat(totalItems)
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
   const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  const style = {
+    width
+  };
+
+  if (hidden && _Platform.default.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden';
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: {
-      width
-    },
+    style: style,
     ...selectedProps,
     ...focusabilityProps,
     children: children
@@ -70,7 +76,16 @@ CarouselItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Content of the slide
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.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.default.oneOf(_utils.layoutTags)
 };
 CarouselItem.displayName = 'Carousel.Item';
 var _default = CarouselItem;

package/lib/Carousel/dictionary.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+var _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}'
+  }
+};
+exports.default = _default;

package/lib/InputSupports/InputSupports.js

@@ -36,7 +36,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     tooltip,
-    validation
+    validation,
+    nativeID
   } = _ref;
   const {
     space
@@ -50,7 +51,8 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback,
     hint,
     label,
-    validation
+    validation,
+    nativeID
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: space,
@@ -111,7 +113,12 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: _propTypes.default.oneOf(['error', 'success'])
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: _propTypes.default.string
 };
 var _default = InputSupports;
 exports.default = _default;

package/lib/InputSupports/useInputSupports.js

@@ -16,7 +16,8 @@ const useInputSupports = _ref => {
     label,
     feedback,
     validation,
-    hint
+    hint,
+    nativeID
   } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = (0, _useUniqueId.default)('input');
@@ -31,7 +32,7 @@ const useInputSupports = _ref => {
     accessibilityInvalid: hasValidationError
   };
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/lib/Modal/Modal.js

@@ -29,6 +29,8 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _useScrollBlocking = _interopRequireDefault(require("../utils/useScrollBlocking"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -135,6 +137,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     viewport,
     maxWidth
   });
+  const modalRef = (0, _useScrollBlocking.default)(isOpen);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -165,6 +168,7 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.positioningContainer],
+      ref: modalRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
         pointerEvents: "box-none" // don't capture backdrop press events

package/lib/Skeleton/Skeleton.js

@@ -42,6 +42,7 @@ const selectSkeletonStyles = _ref => {
   return {
     backgroundColor: color,
     borderRadius: radius,
+    maxWidth: '100%',
     ...fadeAnimation
   };
 };

package/lib/StepTracker/StepTracker.js

@@ -179,19 +179,19 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     })
   });
 });
-StepTracker.displayName = 'StepTracker';
+StepTracker.displayName = 'StepTracker'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  stepLabel: _propTypes.default.string.isRequired,
+  stepTrackerLabel: _propTypes.default.string.isRequired
+});
+
 StepTracker.propTypes = { ...selectedSystemPropTypes,
   current: _propTypes.default.number,
-  copy: _propTypes.default.oneOf(['en', 'fr']),
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: _propTypes.default.shape({
-    en: _propTypes.default.shape({
-      stepLabel: _propTypes.default.string,
-      stepTrackerLabel: _propTypes.default.string
-    }),
-    fr: _propTypes.default.shape({
-      stepLabel: _propTypes.default.string,
-      stepTrackerLabel: _propTypes.default.string
-    })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: _propTypes.default.arrayOf(_propTypes.default.string),
   tokens: (0, _utils.getTokensPropType)('StepTracker'),

package/lib/TextInput/TextInput.js

@@ -59,7 +59,9 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+    nativeID: selectedProps.nativeID,
+    ...supportsProps,
     children: _ref2 => {
       let {
         inputId,

package/lib/index.js

@@ -20,6 +20,7 @@ var _exportNames = {
   Icon: true,
   IconButton: true,
   InputLabel: true,
+  InputSupports: true,
   List: true,
   ListItem: true,
   ListBase: true,
@@ -158,6 +159,12 @@ Object.defineProperty(exports, "InputLabel", {
     return _InputLabel.default;
   }
 });
+Object.defineProperty(exports, "InputSupports", {
+  enumerable: true,
+  get: function () {
+    return _InputSupports.default;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -455,6 +462,8 @@ var _IconButton = _interopRequireDefault(require("./IconButton"));
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
+var _InputSupports = _interopRequireDefault(require("./InputSupports"));
+
 var _Link = require("./Link");
 
 Object.keys(_Link).forEach(function (key) {

package/lib/utils/props/clickProps.js

@@ -11,8 +11,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const clickHandlerMapping = {
   onClick: 'onPress',
-  mouseDown: 'onPressIn',
-  mouseUp: 'onPressOut'
+  onMouseDown: 'onPressIn',
+  onMouseUp: 'onPressOut'
 };
 var _default = {
   /**

package/lib/utils/props/handlerProps.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textInputHandlerProps = exports.focusHandlerProps = exports.default = void 0;
+exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const focusHandlerProps = {
@@ -20,19 +24,10 @@ const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: _propTypes.default.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
 exports.focusHandlerProps = focusHandlerProps;
+focusHandlerProps.select = (0, _getPropSelector.default)(focusHandlerProps.types);
 const textInputHandlerProps = {
   types: {
     /**
@@ -53,26 +48,77 @@ const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: _propTypes.default.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: _propTypes.default.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: _propTypes.default.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: _propTypes.default.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: _propTypes.default.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: _propTypes.default.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: _propTypes.default.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: _propTypes.default.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: _propTypes.default.func
   }
 };
 exports.textInputHandlerProps = textInputHandlerProps;
-var _default = {
-  focusHandlerProps,
-  textInputHandlerProps
-};
-exports.default = _default;
+const selectTextInputHandlers = (0, _getPropSelector.default)(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.default.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;
+};