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

package/lib/utils/a11y/semantics.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getA11yPropsFromHtmlTag = exports.getHeadingLevel = exports.textTags = exports.layoutTags = exports.supportedTags = exports.headingTags = exports.tagsToRoles = void 0;
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {import('react-native').AccessibilityRole} AccessibilityRole
+ */
+
+/**
+ * This is based on the role-to-tag mapping that React Native Web uses to set HTML tags.
+ * It's not exported in any way from RNW, so we need to keep this up-to-date manually.
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+ *
+ * Note: every role in this list is a web-only aria-role. There is no overlap between _these_ web tags
+ * or roles and native accessibilityRoles. Only h1, h2, h3 etc map to an RN equivalent ("heading").
+ *
+ * - RN "summary" native role maps to "region" aria-role, but setting `<section>`/"region" does not
+ *   set React Native's "summary" role, which has a much narrower use case.
+ * - `<Header>`/"Banner" also do not map to RN's "heading". Only h1 / h2 etc map to RN "heading".
+ *
+ * Therefore, all of these tags / roles default to no accessibilityRole in native apps. This is not wrong:
+ * in general, RN accessibilityRoles tend to be more about interaction and less about semantics than web roles.
+ *
+ * RNW's one-way mapping of React Native accessibilityRoles to web aria-roles:
+ * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
+ */
+// Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
+// eslint-disable-next-line prettier/prettier
+const rolesToTags =
+/** @type {const} */
+{
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+  // Add special cases that are in RNW's function logic but not in its mapping object
+  label: 'label' // eslint-disable-next-line prettier/prettier
+
+}; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
+
+const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(([key, value]) => [value, key]));
+/**
+ * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
+ * to headings on web but without the expectation of a hierarchy of headings within one screen.
+ */
+// eslint-disable-next-line prettier/prettier
+
+exports.tagsToRoles = tagsToRoles;
+const headingTags =
+/** @type {const} */
+['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+/**
+ * @typedef {typeof headingTags[number]} HeadingTag
+ */
+
+/**
+ * All HTML tags that may be set via RNW accesibility props alone and therefore may be set using
+ * the getA11yPropsFromHtmlTag function without changing other behaviour.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+
+exports.headingTags = headingTags;
+const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
+/**
+ * Uses readonly mapping keys/values to generate static types for IDEs that support TS in JSDoc.
+ * @typedef {keyof rolesToTags} RoleWithTag
+ * @typedef {typeof rolesToTags[RoleWithTag] | typeof headingTags[number]} SupportedTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with layout containers like Box.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+// eslint-disable-next-line prettier/prettier
+
+exports.supportedTags = supportedTags;
+const layoutTags =
+/** @type {const} */
+[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label' // eslint-disable-next-line prettier/prettier
+];
+/**
+ * @typedef {typeof layoutTags[number]} LayoutTag
+ */
+
+/**
+ * Subset of supported HTML tags that may be used with text elements like Typography.
+ *
+ * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
+ */
+// eslint-disable-next-line prettier/prettier
+
+exports.layoutTags = layoutTags;
+const textTags =
+/** @type {const} */
+[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label' // eslint-disable-next-line prettier/prettier
+];
+/**
+ * @typedef {typeof layoutTags[number]} TextTag
+ */
+
+/**
+ * If passed a heading tag string like 'h1', 'h2' etc, returns the heading number as a number
+ * ready for use in `accessibilityLevel` props and similar.
+ *
+ * @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
+ * @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
+ */
+
+exports.textTags = textTags;
+
+const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : undefined;
+/**
+ * Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
+ * render that tag.
+ *
+ * For cross-platform apps, a second argument may be passed with an [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole)
+ * to use in native apps. Heading tags (h1, h2, ...h5, h6) map to "heading" role by default;
+ * no other supported semantic HTML tags have an equivalent native accessibilityRole.
+ *
+ * @param {SupportedTag} tag - HTML tag to use on web
+ * @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
+ * @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
+ */
+
+
+exports.getHeadingLevel = getHeadingLevel;
+
+const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
+  // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
+  if (nativeRole !== undefined && _Platform.default.OS !== 'web') return {
+    accessibilityRole: nativeRole
+  };
+
+  if (tag) {
+    const accessibilityRole = tagsToRoles[tag];
+    if (accessibilityRole) return {
+      accessibilityRole
+    };
+    const accessibilityLevel = getHeadingLevel(tag);
+    if (accessibilityLevel) return {
+      accessibilityRole: 'header',
+      accessibilityLevel
+    };
+  } // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
+  // Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
+
+
+  return undefined;
+};
+
+exports.getA11yPropsFromHtmlTag = getA11yPropsFromHtmlTag;

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -47,7 +47,7 @@ function useVerticalExpandAnimation({
     if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
       containerStyles = {
-        transition: "height ".concat(transitionDuration, "ms ease-in-out"),
+        transition: `height ${transitionDuration}ms ease-in-out`,
         height: isExpanded ? containerHeight : 0
       };
     } else {

package/lib/utils/children.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 
+var _A11yText = _interopRequireDefault(require("../A11yText"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -59,16 +61,38 @@ const unpackFragment = child => {
 
   return child;
 };
+
+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 combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+
+
+const wrapChild = (child, wrappedText) => {
+  const lastIndex = wrappedText.length - 1; // If possible, simplify content by combining text nodes into one string.
+  // jest-native's `.toHaveTextContent` is buggy about array of text nodes in <Text> elements.
+
+  if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
+    /* eslint-disable-next-line no-param-reassign */
+    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
+  } else {
+    wrappedText.push(child);
+  }
+};
 /**
  * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
- * text style inheritance isn't as expected.
+ * text style inheritance behaves differently with text compared to regular HTML.
  *
  * Call this function on children that may contain text (strings or numbers) at the top level,
  * and any that are found will be wrapped in a React Native `<Text>` element with supplied props.
  *
- * Note that this does not wrap strings that are nested children of the top level children:
+ * Note that this does not wrap strings that are nested children of rendered top level children:
  * `wrapStringsInText(<View>Some text</View>)` will not wrap the inner text and will still crash,
- * but `wrapStringsInText(<>{someString}{anotherString}</>)` will wrap the strings in the fragment.
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` wraps the strings inside the fragment.
  *
  * @param {ReactChildren} children
  * @param {TextProps} props
@@ -76,12 +100,35 @@ const unpackFragment = child => {
  */
 
 
-exports.unpackFragment = unpackFragment;
+const wrapStringsInText = (children, textProps = {}) => {
+  const childrenArray = unpackFragment(_react.Children.toArray(children)); // Group adjacent wrapable children together in one Text element to create as few Text elements
+  // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
 
-const wrapStringsInText = (children, props = {}) => {
-  return _react.Children.map(unpackFragment(children), child => typeof child === 'string' || typeof child === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...props,
-    children: child
-  }) : child);
+  const wrapables = [[]];
+  let wrapablesIndex = 0;
+  childrenArray.forEach(child => {
+    if (isWrapable(child)) {
+      // Make this child a child of the current `Text`
+      wrapChild(child, wrapables[wrapablesIndex]);
+    } else {
+      // Close current `Text` and start a new one after this child
+      wrapables.push(child, []);
+      wrapablesIndex += 2;
+    }
+  });
+  const items = wrapables.reduce((flatChildren, group, index) => {
+    // Skip nullish children and empty arrays
+    if (!group || Array.isArray(group) && !group.length) return flatChildren;
+    return [...flatChildren, Array.isArray(group) && group.some(child => isStringOrNumber(child)) ?
+    /*#__PURE__*/
+    // Wrap text nodes and their wrappable neighbours in Text with as stable a key as possible.
+    // Avoid one-item arrays because jest-native's `.toHaveTextContent` is buggy
+    // and sometimes fails to match text content in arrays.
+    (0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+      children: group.length === 1 ? group[0] : group
+    }, combineKeys(group) || index) : group];
+  }, []);
+  return items.length === 1 ? items[0] : items;
 };
 
 exports.wrapStringsInText = wrapStringsInText;

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,7 @@ 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");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,13 +60,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 +104,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
@@ -225,7 +225,56 @@ const a11yPropTypes = {
   importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
   onAccessibilityAction: _propTypes.default.func,
   onAccessibilityEscape: _propTypes.default.func,
-  onAccessibilityTap: _propTypes.default.func
+  onAccessibilityTap: _propTypes.default.func,
+  ..._Platform.default.select({
+    web: {
+      // 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
+    }
+  })
 };
 const a11yProps = {
   /**
@@ -332,8 +381,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 = {
@@ -366,7 +418,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 +428,25 @@ 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
 };
 const viewProps = {
   /**
@@ -496,23 +549,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 +576,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 +588,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;
 }