@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/lib/utils/input.js

@@ -23,23 +23,29 @@ const validateProps = ({
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
+    throw new Error(`${hookName} ${error}.
+
+Consumers of this hook must be one of:
+1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
+2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
+3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
+`);
   };
 
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
 
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
 /**
@@ -92,14 +98,14 @@ const useInputValue = (props = {}, hookName = 'useInputValue') => {
   }); // Make current value accessible inside useCallback without rememoizing every time the value changes
 
   valueRef.current.value = currentValue;
-  const setValue = (0, _react.useCallback)(arg => {
+  const setValue = (0, _react.useCallback)((arg, event) => {
     if (readOnly) return;
-    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg; // Only call onChange if the value actually changed
+    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
+    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
 
-    if (onChange && valueRef.current.value !== newValue) onChange(newValue);
-    if (!isControlled) setOwnValue(newValue);
+    if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
   }, [isControlled, onChange, readOnly]);
-  const resetValue = (0, _react.useCallback)(() => setValue(valueRef.current.initial), [setValue]);
+  const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
@@ -154,7 +160,7 @@ const useMultipleInputValues = ({
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
   const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;
@@ -162,14 +168,18 @@ const useMultipleInputValues = ({
     return excess > 0 ? newValues.slice(excess) : newValues;
   }, [maxValues]);
   const currentValues = enforceMaxValues(currentValue);
-  const setValues = (0, _react.useCallback)(newValues => setValue(enforceMaxValues(newValues)), [setValue, enforceMaxValues]);
+  const setValues = (0, _react.useCallback)((newValues, event) => {
+    const validNewValues = enforceMaxValues(newValues);
+    setValue(validNewValues, event);
+  }, [setValue, enforceMaxValues]);
   const resetValues = resetValue;
-  const unsetValues = (0, _react.useCallback)(() => setValues([]), [setValues]);
-  const toggleOneValue = (0, _react.useCallback)(newValue => {
-    if (readOnly) return;
-    setValues( // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+  const unsetValues = (0, _react.useCallback)(event => setValues([], event), [setValues]);
+  const toggleOneValue = (0, _react.useCallback)((newValue, event) => {
+    if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
     // a deepEqual() function if there's any use case for toggling stored objects or arrays.
-    currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue]);
+
+    const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
+    setValues(newValues, event);
   }, [currentValues, readOnly, setValues]);
   return {
     currentValues,

package/lib/utils/propTypes.js

@@ -11,7 +11,9 @@ var _Linking = _interopRequireDefault(require("react-native-web/dist/cjs/exports
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _schema = require("@telus-uds/system-themes/schema");
+var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
+
+var _propTypes2 = _interopRequireDefault(require("./a11y/propTypes"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,13 +62,13 @@ const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _pro
 const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
 
 const getTokenNames = componentName => {
-  const componentTokenNames = _schema.components[componentName];
+  const componentTokenSchema = _systemThemeTokens.components[componentName];
 
-  if (!componentTokenNames) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-themes/schema"));
+  if (!componentTokenSchema) {
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
 
-  return componentTokenNames;
+  return Object.keys(componentTokenSchema);
 };
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
@@ -104,7 +106,7 @@ exports.getTokenNames = getTokenNames;
 const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token
@@ -190,49 +192,14 @@ function getPropSelector(propTypes, regexp) {
   return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
     [key]: value
   } : items, {});
-} // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-
-
-const a11yPropTypes = {
-  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 a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.
    */
-  types: a11yPropTypes,
+  types: _propTypes2.default,
 
   /**
    * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
@@ -240,7 +207,7 @@ const a11yProps = {
    * 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: getPropSelector(a11yPropTypes, /^aria-/),
+  select: getPropSelector(_propTypes2.default, /^aria-/),
 
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.
@@ -332,8 +299,11 @@ const pressHandlerPropTypes = {
 const pressPropTypes = { ...pressHandlerPropTypes,
   disabled: _propTypes.default.bool,
   ..._Platform.default.select({
-    hitSlop: _propTypes.default.number,
-    pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
+    web: {},
+    default: {
+      hitSlop: _propTypes.default.number,
+      pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
+    }
   })
 };
 const pressProps = {
@@ -352,7 +322,7 @@ exports.pressProps = pressProps;
 const linkPropTypes = { ...pressPropTypes,
   href: _propTypes.default.string,
   hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
-  ...a11yPropTypes
+  ..._propTypes2.default
 };
 const linkProps = {
   /**
@@ -366,7 +336,7 @@ const linkProps = {
   select: getPropSelector(linkPropTypes),
 
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` xor `href`.
+   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
    *
    * @param {({ onPress?: () => void, href?: string })}
    * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
@@ -376,24 +346,26 @@ const linkProps = {
     onPress,
     href
   }) => {
-    // TODO: revisit this when integrating routing packages
-    // https://github.com/telus/universal-design-system/issues/24
-    if (href && onPress) {
-      throw new Error("handleHref currently doesn't support both href and onPress");
-    }
-
     if (!href && !onPress) {
       throw new Error('handleHref requires either href or onPress');
     }
 
-    return _Platform.default.OS !== 'web' && href ? () => _Linking.default.openURL(href) : onPress;
+    return _Platform.default.select({
+      web: onPress,
+      default: (...args) => {
+        if (onPress) onPress(...args);
+        if (href) _Linking.default.openURL(href);
+      }
+    });
   }
 };
 exports.linkProps = linkProps;
 const viewPropTypes = {
   pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: _propTypes.default.func,
-  nativeID: _propTypes.default.string
+  nativeID: _propTypes.default.string,
+  testID: _propTypes.default.string,
+  dataSet: _propTypes.default.object
 };
 const viewProps = {
   /**
@@ -496,23 +468,24 @@ const spacingProps = {
   }
 };
 /**
- * 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` property.
+ * 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
- * @param {boolean} [checkDisplayName] - if `true` then `displayName` property on the component will be validated instead of `name`
  * @return {function}
  */
 
 exports.spacingProps = spacingProps;
 
-const componentPropType = (passedName, checkDisplayName = false) => {
+const componentPropType = passedName => {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
 
   const checkProp = (props, propName, componentName) => {
-    if (typeof props[propName] === 'undefined' || props[propName] === null) {
+    var _props$propName$type, _props$propName$type2;
+
+    if (props[propName] === undefined || props[propName] === null) {
       return undefined;
     }
 
@@ -522,12 +495,11 @@ const componentPropType = (passedName, checkDisplayName = false) => {
       return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
     }
 
-    const testNameInObject = () => typeof props[propName] === 'object' && (!checkDisplayName && !passedNames.includes(props[propName].type.name) || checkDisplayName && !passedNames.includes(props[propName].type.displayName));
-
-    const testNameInFunction = () => typeof props[propName] === 'function' && (!checkDisplayName && !passedNames.includes(props[propName].name) || checkDisplayName && !passedNames.includes(props[propName].displayName));
+    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 (props[propName] && typeof props[propName] !== 'object' && typeof props[propName] !== 'function' || testNameInObject() || testNameInFunction()) {
-      return new Error("".concat(componentName, ": Component passed to `").concat(propName, "` prop should be ").concat(passedNames.join(' or ')));
+    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;
@@ -535,7 +507,7 @@ const componentPropType = (passedName, checkDisplayName = false) => {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
     }
 
     return undefined;

package/lib/utils/useCopy.js

@@ -40,7 +40,7 @@ function useCopy({
   copy = DEFAULT_COPY
 }) {
   if (typeof copy === 'string') {
-    return key => dictionary[copy][key];
+    return key => key ? dictionary[copy][key] : dictionary[copy];
   } // support overriding the entire copy dictionary with an object for a single language
 
 

package/lib/utils/useHash.js

@@ -7,11 +7,15 @@ exports.default = void 0;
 
 var _react = require("react");
 
-const doAction = action => {
+const doAction = (action, event) => {
   var _window, _window$location;
 
-  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash);
+  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
 };
+/**
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
+
 /**
  * Calls a function (passing it the current hash) based on the current hash state on mount,
  * and binds it to call it again any time the hash changes.
@@ -20,7 +24,7 @@ const doAction = action => {
  *
  * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
  *
- * @param {(hash: string) => void} action - a function to act on the current hash on load and when it changes
+ * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
 
@@ -37,7 +41,7 @@ const useHash = (action, isReady = true) => {
   }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
 
   (0, _react.useEffect)(() => {
-    const handleChange = () => doAction(action);
+    const handleChange = event => doAction(action, event);
 
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);

package/lib/utils/useSpacingScale.js

@@ -110,8 +110,6 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
-  var _spaceValue$space;
-
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -121,7 +119,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
   } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {

package/lib/utils/useUniqueId.js

@@ -12,7 +12,7 @@ let id = 0;
 function useUniqueId(prefix = '') {
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return "".concat(prefix, "-").concat(id);
+    return `${prefix}-${id}`;
   });
   return uniqueId;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.9",
+  "version": "1.1.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -23,8 +23,11 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "format": "prettier --write .",
-    "build": "babel src -d lib",
-    "dev": "yarn build --watch",
+    "build": "yarn build:code && yarn build:docs",
+    "build:code": "babel src -d lib",
+    "build:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
+    "storybook": "start-storybook",
+    "dev": "yarn build:code --watch",
     "release": "standard-version"
   },
   "bugs": {
@@ -33,6 +36,9 @@
   "standard-engine": {
     "skip": true
   },
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "*",
@@ -40,6 +46,7 @@
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.0",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
@@ -47,11 +54,12 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^0.0.2-prerelease.2",
-    "@telus-uds/system-themes": "^0.0.2-prerelease.2",
+    "@telus-uds/system-constants": "^1.0.1-prerelease.0",
+    "@telus-uds/system-theme-tokens": "^1.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4"
+    "react-native-picker-select": "^8.0.4",
+    "semver": "^7.3.5"
   }
 }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
-  "changelog": "### [0.0.2-prerelease.9](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.8...@telus-uds/components-base/v0.0.2-prerelease.9) (2021-12-29)\n\n\n### Features\n\n* **base:** implement IconButton ([#958](https://github.com/telus/universal-design-system/issues/958)) ([c3ff7dd](https://github.com/telus/universal-design-system/commit/c3ff7dd9fb76123d3ff8409e507c89ad91b7fef2))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.9",
-  "newVersion": "0.0.2-prerelease.9",
+  "previousReleaseTag": "@telus-uds/components-base/v1.0.1",
+  "changelog": "## [1.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.1...@telus-uds/components-base/v1.1.0) (2022-02-28)\n\n\n### Features\n\n* **component-base:** add some fixes to the list component ([#1226](https://github.com/telus/universal-design-system/issues/1226)) ([35a42e0](https://github.com/telus/universal-design-system/commit/35a42e05e23630696286e7c8607e7a1e8da9d6c2))\n* **ds-allium:** add an Allium List ([#1304](https://github.com/telus/universal-design-system/issues/1304)) ([2f91c74](https://github.com/telus/universal-design-system/commit/2f91c74d6c0b30f09089e8f11beb3739e5be1887))\n* generate component docs ([#1292](https://github.com/telus/universal-design-system/issues/1292)) ([e0c03a5](https://github.com/telus/universal-design-system/commit/e0c03a5c4b5186e97d424c5b1c4594b1dda8201f))\n\n\n### Bug Fixes\n\n* **base:** no SSR crash on transpiled global CSS ([#1311](https://github.com/telus/universal-design-system/issues/1311)) ([7bc585c](https://github.com/telus/universal-design-system/commit/7bc585cc76bf7d760b1630a6f90f336f2be2abda))\n",
+  "releaseTag": "@telus-uds/components-base/v1.1.0",
+  "newVersion": "1.1.0",
   "packageName": "@telus-uds/components-base"
 }

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -10,7 +10,7 @@ import { a11yProps } from '../utils/propTypes'
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = ({ text, heading, ...rest }) => {
+const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
   const a11y = a11yProps.select({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -21,8 +21,10 @@ const A11yText = ({ text, heading, ...rest }) => {
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   })
-  return <View style={styles.invisible} {...a11y} />
-}
+  return <View style={styles.invisible} ref={ref} {...a11y} />
+})
+
+A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
   text: PropTypes.string.isRequired,

package/src/ActivityIndicator/Spinner.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const SVG_RADIUS = 20
@@ -20,8 +20,9 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = ({ size, color, thickness, label }) => (
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => (
   <svg
+    ref={ref}
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 48 48"
@@ -62,7 +63,8 @@ const Spinner = ({ size, color, thickness, label }) => (
       </circle>
     </g>
   </svg>
-)
+))
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes
 

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = ({ size, color, thickness, label }) => {
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
 
   React.useLayoutEffect(() => {
@@ -31,6 +31,7 @@ const Spinner = ({ size, color, thickness, label }) => {
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
     <View
+      ref={ref}
       style={[styles.container]}
       accessible
       accessibilityLabel={label}
@@ -109,7 +110,8 @@ const Spinner = ({ size, color, thickness, label }) => {
       </Animated.View>
     </View>
   )
-}
+})
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes