@telus-uds/components-base 1.8.5 → 1.11.0

package/lib/Carousel/CarouselContext.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselProvider = void 0;
+exports.useCarousel = useCarousel;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CarouselContext = /*#__PURE__*/_react.default.createContext();
+
+const CarouselProvider = _ref => {
+  let {
+    children,
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  } = _ref;
+
+  const value = _react.default.useMemo(() => ({
+    activeIndex,
+    totalItems,
+    width,
+    goTo
+  }), [activeIndex, totalItems, width, goTo]);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+exports.CarouselProvider = CarouselProvider;
+
+function useCarousel() {
+  const context = _react.default.useContext(CarouselContext);
+
+  if (context === undefined) {
+    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+  }
+
+  return context;
+}
+
+CarouselProvider.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
+  activeIndex: _propTypes.default.number.isRequired,
+  totalItems: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number.isRequired,
+  goTo: _propTypes.default.func.isRequired
+};

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../../utils");
+
+var _CarouselContext = require("../CarouselContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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 = _ref => {
+  let {
+    children,
+    elementIndex,
+    tag = 'li',
+    hidden,
+    ...rest
+  } = _ref;
+  const {
+    width,
+    activeIndex
+  } = (0, _CarouselContext.useCarousel)();
+  const selectedProps = selectProps({ ...rest,
+    ...(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: style,
+    ...selectedProps,
+    ...focusabilityProps,
+    children: children
+  });
+};
+
+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.default.number,
+
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: _propTypes.default.string,
+
+  /**
+   * Content of the slide
+   */
+  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;
+exports.default = _default;

package/lib/Carousel/CarouselItem/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _CarouselItem.default;
+exports.default = _default;

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/Carousel/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Carousel: true
+};
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _Carousel.default;
+  }
+});
+
+var _CarouselContext = require("./CarouselContext");
+
+Object.keys(_CarouselContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CarouselContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CarouselContext[key];
+    }
+  });
+});
+
+var _Carousel = _interopRequireDefault(require("./Carousel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/ExpandCollapse/Panel.js

@@ -15,6 +15,8 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _Control = _interopRequireDefault(require("./Control"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -70,6 +72,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
+    controlRef,
     ...rest
   } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
@@ -112,6 +115,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       isExpanded: isExpanded,
       tokens: controlTokens,
       onPress: handleControlPress,
+      ref: controlRef,
       children: control
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
       ref: animatedRef,
@@ -167,7 +171,12 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl')
+  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+
+  /**
+   * An optional ref to be attached to the control
+   */
+  controlRef: _airbnbPropTypes.default.ref()
 };
 var _default = ExpandCollapsePanel;
 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

@@ -134,7 +134,10 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     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,
@@ -160,7 +163,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
             status: current,
             label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            name: getStepLabel(index),
             stepIndex: index,
             stepCount: steps.length,
             tokens: themeTokens
@@ -176,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

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _utils = require("../utils");
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
@@ -49,17 +47,8 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
     variant = {},
-    pattern,
     ...rest
   } = _ref;
-
-  _react.default.useEffect(() => {
-    if (_Platform.default.OS === 'web' && pattern && ref.current) {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.pattern = pattern;
-    }
-  }, [ref, pattern]);
-
   const {
     supportsProps,
     ...selectedProps
@@ -70,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/TextInput/TextInputBase.js

@@ -156,6 +156,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    pattern,
     tokens,
     variant = {},
     ...rest
@@ -194,6 +195,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     onChange,
     readOnly
   });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.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 => {
     var _event$nativeEvent, _event$target;

package/lib/TextInput/propTypes.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// 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
@@ -38,12 +38,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.default.func,
-  ..._Platform.default.select({
-    web: {
-      pattern: _propTypes.default.string
-    }
-  })
+  onChange: _propTypes.default.func
 };
 var _default = textInputPropTypes;
 exports.default = _default;

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 () {
@@ -385,6 +392,20 @@ Object.keys(_Button).forEach(function (key) {
 
 var _Card = _interopRequireWildcard(require("./Card"));
 
+var _Carousel = require("./Carousel");
+
+Object.keys(_Carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Carousel[key];
+    }
+  });
+});
+
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
 
 Object.keys(_Checkbox).forEach(function (key) {
@@ -441,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;
+};