@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/lib/utils/propTypes.js

@@ -1,7 +1,44 @@
-import PropTypes from 'prop-types';
-import { Linking, Platform } from 'react-native';
-import { tokenKeys } from '@telus-uds/tools-theme';
-export const variantProp = {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Linking = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Linking"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const paddingProp = {
+  propType: _propTypes.default.shape({
+    paddingBottom: _propTypes.default.number,
+    paddingLeft: _propTypes.default.number,
+    paddingRight: _propTypes.default.number,
+    paddingTop: _propTypes.default.number
+  })
+};
+exports.paddingProp = paddingProp;
+const rectProp = {
+  propType: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })
+};
+/**
+ * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
+ * @typedef {AppearanceSet} VariantProp
+ */
+
+exports.rectProp = rectProp;
+const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *
@@ -11,31 +48,77 @@ export const variantProp = {
    * Since the particular keys and values depend on which theme is currently active,
    * the exact shape of variant props is not enforced using PropTypes.
    */
-  propType: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]))
-};
-const tokenValueType = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]);
+  propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
+}; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
+// or components (e.g. Icon tokens)
+
+exports.variantProp = variantProp;
+
+const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
+
+const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
 
 const getTokenNames = componentName => {
-  const componentTokenNames = tokenKeys[componentName];
+  const componentTokenNames = _systemThemeTokens.components[componentName];
 
   if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/tools-theme`);
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
   }
 
   return componentTokenNames;
 };
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
+ * or by a provided array of tokens. A prefix may be provided, for example:
+ *
+ * @example
+ * ```jsx
+ * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
+ * selectTokens('Button', themeTokens)
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns `{ backgroundColor, width }` where the values of those keys come from
+ * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
+ * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns tokens that are defined in the `Button` theme schema, from tokens with
+ * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
+ * selectTokens('Button', themeTokens, 'button')
+ * ```
+ *
+ * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
+ * @param {object} tokens - a source object of theme tokens
+ * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
+ * @returns {object} - subset of theme tokens
  */
 
 
-export const selectTokens = (componentName, tokens) => {
-  const tokenNames = getTokenNames(componentName);
-  const filteredTokens = Object.entries(tokens).reduce((validTokens, [key, value]) => tokenNames.includes(key) ? { ...validTokens,
-    [key]: value
-  } : validTokens, {});
+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 token = tokens[prefixedKey];
+    return token !== undefined ? { ...validTokens,
+      [key]: token
+    } : validTokens;
+  }, {});
   return filteredTokens;
 };
+/**
+ * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
+ * @typedef {{[key: string]: TokenValue}} TokensSet
+ * @typedef {(AppearanceSet) => TokensSet} TokensGetter
+ * @typedef {TokensSet|TokensGetter} TokensProp
+ */
+
 /**
  * 'tokens' is an optional object prop on all themable components. Its keys must match the
  * token keys in the component's theme schema.
@@ -43,12 +126,64 @@ export const selectTokens = (componentName, tokens) => {
  * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
  * where the main theming system doesn't apply. It is intentionally permissive about values.
  *
- * Be careful about passing a token key with value `undefined`, as this will override any tokens from
- * the theme. If a key is set on a `tokens` prop object, tokens from the theme will be overridden.
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
+ */
+
+
+exports.selectTokens = selectTokens;
+
+const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  _propTypes.default.checkPropTypes({
+    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
+  }, props, propName, componentName);
+
+  if (typeof props[propName] !== 'function') {
+    _propTypes.default.checkPropTypes({
+      [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+    }, props, propName, componentName);
+  }
+};
+/**
+ * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
+ *
+ * For example, for a set of tokens used in a common style, or for a set of tokens required by
+ * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
+ *
+ * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ *
+ * @param {string[]} componentTokenKeys - array of strings of token names
+ * @param {object} [options]
+ * @param {boolean} [options.partial] - if true, allows tokens to be undefined
+ * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
+ * @returns
  */
 
-export const getTokensPropType = componentName => PropTypes.oneOfType([PropTypes.shape(Object.fromEntries(getTokenNames(componentName).map(key => [key, tokenValueType]))), PropTypes.func // function that takes current appearances and returns above shape
-]);
+
+exports.getTokensPropType = getTokensPropType;
+
+const getTokensSetPropType = (componentTokenKeys, {
+  partial = false,
+  allowFunction = false
+} = {}) => {
+  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+
+  return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
+};
+
+exports.getTokensSetPropType = getTokensSetPropType;
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
@@ -60,40 +195,39 @@ function getPropSelector(propTypes, regexp) {
 
 
 const a11yPropTypes = {
-  // react-native-web >= 0.15.0 ignores `accessible` and looks for `focusable`
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string,
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
   // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string
+  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.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
+  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.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
+  accessibilityValue: _propTypes.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
   }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func
+  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
 };
-export const a11yProps = {
+const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.
@@ -113,11 +247,9 @@ export const a11yProps = {
    */
   nonFocusableProps: {
     focusable: false,
-    // for android, and for keyboard nav in web (RNW >= 0.15.x)
-    ...Platform.select({
+    // for android, and for keyboard nav in web
+    ..._Platform.default.select({
       web: {
-        accessible: false,
-        // workaround for web keyboard nav in RNW < 0.15.x
         accessibilityHidden: true // web screenreaders
 
       },
@@ -128,17 +260,38 @@ export const a11yProps = {
         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: {}
+  })
 }; // Props related to HTML <a> anchor link attributes.
 
+exports.a11yProps = a11yProps;
 const targetValues = ['_self', '_blank', '_parent', '_top'];
-export const hrefAttrsProp = {
+const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"
-    download: PropTypes.string,
-    rel: PropTypes.string,
-    target: PropTypes.oneOf(targetValues)
+    download: _propTypes.default.string,
+    rel: _propTypes.default.string,
+    target: _propTypes.default.oneOf(targetValues)
   },
 
   /**
@@ -157,46 +310,36 @@ export const hrefAttrsProp = {
       target
     },
     rest
-  }),
-
-  /**
-   * Takes a hrefAttrs object and returns an object that can be spread into Pressable props
-   * in a way that handles compatibility before and after React Native Web 0.15.0
-   */
-  spread: hrefAttrs => ({
-    /**
-     * React Native Web >= 0.15.0 supports hrefAttrs prop but requires React 17
-     * so is incompatible with Expo until July 2021
-     */
-    hrefAttrs,
-
-    /**
-     * React Native Web < 0.15.0 uses `target` and `rel` props.
-     * React Native Web >= 0.15.0 ignores these and reads hrefAttrs only.
-     */
-    rel: hrefAttrs?.rel,
-    target: hrefAttrs?.target
-    /**
-     * Don't spread hrefAttrs.download, RNW <0.15.0 doesn't support it.
-     */
-
   })
 };
-const pressPropTypes = {
-  onPress: PropTypes.func,
-  onPressIn: PropTypes.func,
-  onPressOut: PropTypes.func,
-  ...Platform.select({
+exports.hrefAttrsProp = hrefAttrsProp;
+const pressHandlerPropTypes = {
+  onPress: _propTypes.default.func,
+  onPressIn: _propTypes.default.func,
+  onPressOut: _propTypes.default.func,
+  ..._Platform.default.select({
     web: {
-      onMouseEnter: PropTypes.func,
-      onMouseLeave: PropTypes.func,
-      onFocus: PropTypes.func,
-      onBlur: PropTypes.func
+      onMouseEnter: _propTypes.default.func,
+      onMouseLeave: _propTypes.default.func,
+      onFocus: _propTypes.default.func,
+      onBlur: _propTypes.default.func
     },
-    default: {}
+    default: {
+      onLongPress: _propTypes.default.func
+    }
   })
 };
-export const pressProps = {
+const pressPropTypes = { ...pressHandlerPropTypes,
+  disabled: _propTypes.default.bool,
+  ..._Platform.default.select({
+    web: {},
+    default: {
+      hitSlop: _propTypes.default.number,
+      pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
+    }
+  })
+};
+const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */
@@ -205,14 +348,16 @@ export const pressProps = {
   /**
    * Filters a props object, returning only the platform-relevant press props defined above
    */
-  select: getPropSelector(pressPropTypes)
+  select: getPropSelector(pressPropTypes),
+  selectHandlers: getPropSelector(pressHandlerPropTypes)
 };
+exports.pressProps = pressProps;
 const linkPropTypes = { ...pressPropTypes,
-  href: PropTypes.string,
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  href: _propTypes.default.string,
+  hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
   ...a11yPropTypes
 };
-export const linkProps = {
+const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */
@@ -224,7 +369,7 @@ export 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
@@ -234,27 +379,125 @@ export 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.OS !== 'web' && href ? () => Linking.openURL(href) : onPress;
+    return _Platform.default.select({
+      web: onPress,
+      default: (...args) => {
+        if (onPress) onPress(...args);
+        if (href) _Linking.default.openURL(href);
+      }
+    });
   }
 };
-export const levelsPropType = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
-export const responsivePropTypeFactory = propType => PropTypes.oneOfType([propType, PropTypes.shape({
+exports.linkProps = linkProps;
+const viewPropTypes = {
+  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: _propTypes.default.func,
+  nativeID: _propTypes.default.string
+};
+const viewProps = {
+  /**
+   * Subset of `View` proptypes that could conceivably be needed on any component
+   * that renders a single View.
+   */
+  types: viewPropTypes,
+
+  /**
+   * Filters a props object, returning only cross-platform View props that are potentially
+   * relevant to any basic layout component that renders one View.
+   */
+  select: getPropSelector(viewPropTypes)
+};
+exports.viewProps = viewProps;
+
+const getByViewport = propType => ({
   xs: propType,
   sm: propType,
   md: propType,
   lg: propType,
   xl: propType
-})]);
+});
+/**
+ * Utilities for props that allow different values to be applied at different viewports.
+ *
+ * These should apply viewport inheritance such that if a viewport is undefined, the value is
+ * taken from the next smallest viewport for which a value is available. For example, a
+ * responsive prop { xs: 2, lg: 3 } should apply 2 at sizes sm and md, and 3 at size xl.
+ *
+ * @property {Function} getByViewport - returns an object where each each viewport has a key
+ *   containing the provided argument.
+ * @property {Function} getTypeByViewport - returns a PropTypes shape validator for an object where
+ *   each viewport has a key containing the provided proptype.
+ * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
+ *   either the provided proptype on its own, or the output of getTypeByViewport
+ */
+
+
+const responsiveProps = {
+  getByViewport,
+  getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
+  getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])
+};
+/**
+ * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
+ *
+ * @typedef SpacingOptions
+ * @property {VariantProp} [SpacingOptions.variant] - optional theme scale variants e.g. compact, wide
+ * @property {number} [SpacingOptions.size] - optional override to force a particular pixel size
+ * @property {number} [SpacingOptions.subtract] - optional number to subtract from final pixel size
+ *
+ * @typedef SpacingObject
+ * @property {SpacingIndex} [SpacingObject.xs] - space scale index to use above xs viewport
+ * @property {SpacingIndex} [SpacingObject.sm] - space scale index to use above sm viewport
+ * @property {SpacingIndex} [SpacingObject.md] - space scale index to use above md viewport
+ * @property {SpacingIndex} [SpacingObject.lg] - space scale index to use above lg viewport
+ * @property {SpacingIndex} [SpacingObject.xl] - space scale index to use above xl viewport
+ * @property {SpacingIndex} [SpacingObject.space] - space scale index to use at all viewports
+ * @property {SpacingOptions} [SpacingObject.options] - optional options for this spacing
+ *
+ * @typedef {SpacingIndex|SpacingObject} SpacingValue
+ */
+
+exports.responsiveProps = responsiveProps;
+const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
+
+const spacingObjectPropType = _propTypes.default.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
+  space: spacingIndexPropType,
+  options: _propTypes.default.shape({
+    variant: variantProp.propType,
+    size: _propTypes.default.number
+  })
+});
+/**
+ * Components and utilities that assign fixed space between components use a theme-defined spacing scale.
+ *
+ * They typically take one or more props of the {@link SpacingValue} type and turn it into a pixel size value
+ * using the hook `useSpacingScale`, which resolves any options or responsive behaviour and returns the
+ * appropriate value from the theme spacing scale.
+ *
+ * - see /ADRs/inter-component-spacing/README.md - ADR on this structure
+ * - see /src/utils/spacing/useSpacingScale.js - hook that processes spacing values
+ * - @see {@link SpacingIndex} - themes provide spacing scales of up to 12 sizes with optional theme rules.
+ * - @see {@link SpacingValue} - either a simple number referencing an index position on the spacing
+ *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
+ *   viewports or `space` to apply at all viewports.
+ */
+
+
+const spacingProps = {
+  scale: spacingScale,
+  types: {
+    spacingIndex: spacingIndexPropType,
+    spacingObject: spacingObjectPropType,
+    // Most spacing components and utilities take this prop / arg type:
+    spacingValue: _propTypes.default.oneOfType([spacingIndexPropType, spacingObjectPropType])
+  }
+};
 /**
  * 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.
@@ -266,7 +509,9 @@ export const responsivePropTypeFactory = propType => PropTypes.oneOfType([propTy
  * @return {function}
  */
 
-export const componentPropType = (passedName, checkDisplayName = false) => {
+exports.spacingProps = spacingProps;
+
+const componentPropType = (passedName, checkDisplayName = false) => {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
 
   const checkProp = (props, propName, componentName) => {
@@ -285,7 +530,7 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
     const testNameInFunction = () => typeof props[propName] === 'function' && (!checkDisplayName && !passedNames.includes(props[propName].name) || checkDisplayName && !passedNames.includes(props[propName].displayName));
 
     if (props[propName] && typeof props[propName] !== 'object' && typeof props[propName] !== 'function' || testNameInObject() || testNameInFunction()) {
-      return new Error(`${componentName}: Component passed to \`${propName}\` prop should be ${passedNames.join(' or ')}`);
+      return new Error("".concat(componentName, ": Component passed to `").concat(propName, "` prop should be ").concat(passedNames.join(' or ')));
     }
 
     return undefined;
@@ -293,7 +538,7 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
 
   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 new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
     }
 
     return undefined;
@@ -318,4 +563,10 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
   const validate = createValidate();
   validate.isRequired = createValidate(true);
   return validate;
-};
+};
+
+exports.componentPropType = componentPropType;
+
+const copyPropTypes = _propTypes.default.oneOf(['en', 'fr']);
+
+exports.copyPropTypes = copyPropTypes;

package/lib/utils/useCopy.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_COPY = void 0;
+const DEFAULT_COPY = 'en';
+/**
+ * Extract translations from a keyed dictionary for a given language.
+ * Returns a getter.
+ *
+ * @example
+ * const getCopy = useCopy({
+ *   copy: 'en',
+ *   dictionary: {
+ *     en: { label: 'english label' },
+ *     fr: { label: 'french label' }
+ *   }
+ * })
+ *
+ * getCopy('label') => 'english label'
+ *
+ * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
+ * @example
+ * const getCopy = useCopy({
+ *   copy: { label: 'custom label' }
+ * })
+ *
+ * getCopy('label') => 'custom label'
+ *
+ * @param {object} [dictionary]
+ * @param {'en'|'fr'|object} copy - language
+ * @return {function(string): string}
+ */
+
+exports.DEFAULT_COPY = DEFAULT_COPY;
+
+function useCopy({
+  dictionary,
+  copy = DEFAULT_COPY
+}) {
+  if (typeof copy === 'string') {
+    return key => key ? dictionary[copy][key] : dictionary[copy];
+  } // support overriding the entire copy dictionary with an object for a single language
+
+
+  return key => copy[key];
+}
+
+var _default = useCopy;
+exports.default = _default;