@telus-uds/components-base 1.2.0 → 1.4.0

package/lib/ThemeProvider/useThemeTokens.js

@@ -14,9 +14,9 @@ var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

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

@@ -14,9 +14,9 @@ var _package = _interopRequireDefault(require("../../../package.json"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -23,12 +23,10 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes2 = require("../utils/propTypes");
+var _utils = require("../utils");
 
 var _input = require("../utils/input");
 
-var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,7 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+
+const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
   // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
   width: null
 }); // Map and rename icon-specific tokens to name used within Icon
@@ -117,7 +117,8 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   tooltip,
   variant,
   accessibilityRole = 'switch',
-  accessibilityLabel = label
+  accessibilityLabel = label,
+  ...rest
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
@@ -159,6 +160,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
         checked: currentValue
       },
       onPress: handlePress,
+      ...selectProps(rest),
       children: buttonState => {
         const stateTokens = getTokens(buttonState);
         const IconComponent = stateTokens.icon;
@@ -188,10 +190,9 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
-  ..._propTypes2.pressProps.propTypes,
-  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
-  variant: _propTypes2.variantProp.propType,
+ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  variant: _utils.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -23,7 +23,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _propTypes2 = require("../utils/propTypes");
+var _props = require("../utils/props");
 
 var _input = require("../utils/input");
 
@@ -35,6 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
@@ -76,13 +77,11 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly
   });
-
-  const a11y = _propTypes2.a11yProps.select({
+  const selectedProps = selectProps({
     accessibilityRole,
     ...rest
   });
-
-  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
   const toggleSwitches = items.map(({
     label,
     id = label,
@@ -104,7 +103,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       },
       accessibilityRole: itemA11yRole,
       accessibilityLabel,
-      ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
+      ..._props.a11yProps.getPositionInSet(items.length, index)
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
       id: id,
@@ -128,7 +127,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    ...a11y,
+    ...selectedProps,
     children: (0, _StackView.getStackedContent)(toggleSwitches, {
       space,
       direction: 'column'
@@ -136,10 +135,9 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
-ToggleSwitchGroup.propTypes = { ..._propTypes2.a11yProps.propTypes,
-  ..._propTypes2.pressProps.propTypes,
-  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitchGroup'),
-  variant: _propTypes2.variantProp.propType,
+ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _props.variantProp.propType,
 
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
@@ -219,7 +217,7 @@ ToggleSwitchGroup.propTypes = { ..._propTypes2.a11yProps.propTypes,
   /**
    * Toggle switch token overrides.
    */
-  toggleSwitchTokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
+  toggleSwitchTokens: (0, _props.getTokensPropType)('ToggleSwitch'),
 
   /**
    * Current validation status of the group, passed to the feedback element if there is one.

package/lib/Tooltip/Tooltip.js

@@ -43,6 +43,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -167,7 +169,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   position = 'auto',
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
@@ -280,6 +283,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,
       ref: controlRef,
@@ -312,7 +316,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
+Tooltip.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/lib/TooltipButton/TooltipButton.js

@@ -21,6 +21,8 @@ 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]);
+
 const selectInnerContainerStyles = ({
   borderRadius,
   width
@@ -49,7 +51,8 @@ const selectIconTokens = ({
 const TooltipButton = ({
   pressableState,
   tokens,
-  variant
+  variant,
+  ...rest
 }) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
@@ -57,6 +60,7 @@ const TooltipButton = ({
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
       children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -67,7 +71,8 @@ const TooltipButton = ({
   });
 };
 
-TooltipButton.propTypes = {
+TooltipButton.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used as appearances when resolving theme tokens.
    */

package/lib/Typography/Typography.js

@@ -32,6 +32,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
+
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -76,24 +78,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils2.a11yProps.select(rest)
-  };
+  const selectedProps = selectProps({ ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
       children: children
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...textProps,
-    ...a11y,
+    ...selectedProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ..._utils2.a11yProps.types,
+Typography.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 

package/lib/index.js

@@ -46,6 +46,7 @@ var _exportNames = {
   BaseProvider: true,
   ViewportProvider: true,
   useViewport: true,
+  ViewportContext: true,
   ThemeProvider: true,
   useTheme: true,
   useSetTheme: true,
@@ -304,6 +305,12 @@ Object.defineProperty(exports, "useViewport", {
     return _ViewportProvider.useViewport;
   }
 });
+Object.defineProperty(exports, "ViewportContext", {
+  enumerable: true,
+  get: function () {
+    return _ViewportProvider.ViewportContext;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {

package/lib/utils/a11y/semantics.js

@@ -154,9 +154,10 @@ const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
   };
 
   if (tag) {
-    const accessibilityRole = tagsToRoles[tag];
-    if (accessibilityRole) return {
-      accessibilityRole
+    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
+    const ariaRole = _Platform.default.OS === 'web' && tagsToRoles[tag];
+    if (ariaRole) return {
+      accessibilityRole: ariaRole
     };
     const accessibilityLevel = getHeadingLevel(tag);
     if (accessibilityLevel) return {

package/lib/utils/children.js

@@ -67,7 +67,11 @@ exports.unpackFragment = unpackFragment;
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number'; // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
 
 
-const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.default;
+const isWrapable = child => {
+  var _child$type;
+
+  return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
+};
 
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 

package/lib/utils/index.js

@@ -125,16 +125,16 @@ Object.keys(_pressability).forEach(function (key) {
   });
 });
 
-var _propTypes = require("./propTypes");
+var _props = require("./props");
 
-Object.keys(_propTypes).forEach(function (key) {
+Object.keys(_props).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _propTypes[key]) return;
+  if (key in exports && exports[key] === _props[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _propTypes[key];
+      return _props[key];
     }
   });
 });
@@ -165,6 +165,20 @@ var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
 var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
 
+var _ssr = require("./ssr");
+
+Object.keys(_ssr).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ssr[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssr[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/pressability.js

@@ -9,7 +9,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _propTypes = require("./propTypes");
+var _pressProps = _interopRequireDefault(require("./props/pressProps"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -108,7 +108,7 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
 
 const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(_propTypes.pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(([key, handler]) => ({
     [key]: (...defaultArgs) => {
       // Pass each handler data on this button and current selection
       handler(...args, ...defaultArgs);

package/lib/utils/props/a11yProps.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 }; }
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+const nativeA11yPropTypes = {
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
+  // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: _propTypes.default.bool,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityRole: _propTypes.default.string,
+  accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
+  })),
+  accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    selected: _propTypes.default.bool,
+    checked: _propTypes.default.oneOf([true, false, 'mixed']),
+    busy: _propTypes.default.bool,
+    expanded: _propTypes.default.bool
+  }),
+  accessibilityValue: _propTypes.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
+  }),
+  accessibilityViewIsModal: _propTypes.default.bool,
+  importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: _propTypes.default.func,
+  onAccessibilityEscape: _propTypes.default.func,
+  onAccessibilityTap: _propTypes.default.func
+};
+const a11yPropTypes = { ...nativeA11yPropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: _propTypes.default.string,
+  accessibilityAtomic: _propTypes.default.bool,
+  accessibilityAutoComplete: _propTypes.default.string,
+  accessibilityBusy: _propTypes.default.bool,
+  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: _propTypes.default.number,
+  accessibilityColumnIndex: _propTypes.default.number,
+  accessibilityColumnSpan: _propTypes.default.number,
+  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityDetails: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  accessibilityErrorMessage: _propTypes.default.string,
+  accessibilityExpanded: _propTypes.default.bool,
+  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityHasPopup: _propTypes.default.string,
+  accessibilityHidden: _propTypes.default.bool,
+  accessibilityInvalid: _propTypes.default.bool,
+  accessibilityKeyShortcuts: _propTypes.default.string,
+  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityLevel: _propTypes.default.number,
+  accessibilityModal: _propTypes.default.bool,
+  accessibilityMultiline: _propTypes.default.bool,
+  accessibilityMultiSelectable: _propTypes.default.bool,
+  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityPlaceholder: _propTypes.default.string,
+  accessibilityPosInSet: _propTypes.default.number,
+  accessibilityPressed: _propTypes.default.bool,
+  accessibilityReadOnly: _propTypes.default.bool,
+  accessibilityRequired: _propTypes.default.bool,
+  accessibilityRoleDescription: _propTypes.default.string,
+  accessibilityRowCount: _propTypes.default.number,
+  accessibilityRowIndex: _propTypes.default.number,
+  accessibilityRowSpan: _propTypes.default.number,
+  accessibilitySelected: _propTypes.default.bool,
+  accessibilitySetSize: _propTypes.default.number,
+  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: _propTypes.default.number,
+  accessibilityValueMin: _propTypes.default.number,
+  accessibilityValueNow: _propTypes.default.number,
+  accessibilityValueText: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Proptypes for recognised React Native accessiblity (a11y) props.
+   * Spread this in the propTypes of components that accept React Native a11y props.
+   */
+  types: a11yPropTypes,
+
+  /**
+   * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
+   *
+   * Where components accept React Native a11y props, pass { ...rest } from its props to this,
+   * then spread the returned object into the component's props (usually its outer container).
+   */
+  select: (0, _getPropSelector.default)(a11yPropTypes, /^aria-/),
+
+  /**
+   * Use this to disable focus for elements which are visually hidden but still rendered.
+   */
+  nonFocusableProps: {
+    focusable: false,
+    // for android, and for keyboard nav in web
+    ..._Platform.default.select({
+      web: {
+        accessibilityHidden: true // web screenreaders
+
+      },
+      android: {
+        importantForAccessibility: 'no-hide-descendants'
+      },
+      ios: {
+        accessibilityElementsHidden: true
+      }
+    })
+  },
+
+  /**
+   * Generates an object of platform-appropriate a11y props describing an item that has an
+   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
+   * saying "Item X of Y" when this item is select.
+   *
+   * @param {number} itemsCount - the number of items in the set
+   * @param {number} index - the current item's index in the set
+   * @returns {object} - platform-applicable a11y props describing this position (if available)
+   */
+  getPositionInSet: (itemsCount, index) => _Platform.default.select({
+    web: {
+      // accessibilityPosInSet etc exists in React Native Web main branch
+      // but not in a release compatible with Expo etc; just use `aria-*`
+      'aria-setsize': itemsCount,
+      'aria-posinset': index + 1
+    },
+    // No equivalents exist on the native side
+    default: {}
+  })
+};
+exports.default = _default;

package/lib/utils/props/clickProps.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+};
+var _default = {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, _propTypes.default.func])),
+
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+    const translatedName = clickHandlerMapping[originalName];
+    return translatedName ? [translatedName, value] : [originalName, value];
+  }))
+};
+exports.default = _default;

package/lib/utils/props/componentPropType.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = componentPropType;
+
+/**
+ * Returns a prop type validator which checks whether a prop is either a component or an array of
+ * components of a given type, based on their `name` or `displayName` properties.
+ * Use an array of strings for `passedName` to accept more than one component type.
+ * For an array the validation fails on the first occurrence of an invalid element.
+ *
+ * @param {string|string[]} passedName
+ * @return {function}
+ */
+function componentPropType(passedName) {
+  const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
+
+  const checkProp = (props, propName, componentName) => {
+    var _props$propName$type, _props$propName$type2;
+
+    if (props[propName] === undefined || props[propName] === null) {
+      return undefined;
+    }
+
+    if (Array.isArray(props[propName])) {
+      // Iterates through every child and try to find the first element that does not match the passed name
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+      return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
+    }
+
+    const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
+
+    if (!nameInProp || !passedNames.includes(nameInProp)) {
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
+    }
+
+    return undefined;
+  };
+
+  const checkRequired = (props, propName, componentName) => {
+    if (props[propName] === undefined) {
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+    }
+
+    return undefined;
+  };
+
+  const createValidate = isRequired => {
+    if (isRequired) {
+      return (props, propName, componentName) => {
+        const checkForError = checkProp(props, propName, componentName);
+
+        if (checkForError) {
+          return checkForError;
+        }
+
+        return checkRequired(props, propName, componentName);
+      };
+    }
+
+    return checkProp;
+  };
+
+  const validate = createValidate();
+  validate.isRequired = createValidate(true);
+  return validate;
+}

package/lib/utils/props/copyPropTypes.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _propTypes.default.oneOf(['en', 'fr']);
+
+exports.default = _default;