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

package/lib/utils/propTypes.js

@@ -1,12 +1,44 @@
-import PropTypes from 'prop-types';
-import { Linking, Platform } from 'react-native';
-import { tokenKeys } from '@telus-uds/tools-theme';
+"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
  */
 
-export const variantProp = {
+exports.rectProp = rectProp;
+const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *
@@ -16,32 +48,68 @@ 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]))
-}; // 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(...)' ... })
+  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 tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]);
-const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
+const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
 
 const getTokenNames = componentName => {
-  const componentTokenNames = tokenKeys[componentName];
+  const componentTokenSchema = _systemThemeTokens.components[componentName];
 
-  if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/tools-theme`);
+  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
+ * 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 ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
+    const token = tokens[prefixedKey];
+    return token !== undefined ? { ...validTokens,
+      [key]: token
+    } : validTokens;
+  }, {});
   return filteredTokens;
 };
 /**
@@ -57,10 +125,65 @@ 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.
+ *
+ * @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);
@@ -72,40 +195,88 @@ 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,
+  ..._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
+    }
+  })
 };
-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.
@@ -125,11 +296,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
 
       },
@@ -140,17 +309,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)
   },
 
   /**
@@ -169,46 +359,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
+    }
+  })
+};
+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])
+    }
   })
 };
-export const pressProps = {
+const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */
@@ -217,14 +397,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
    */
@@ -236,7 +418,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
@@ -246,19 +428,40 @@ 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);
+      }
+    });
   }
 };
+exports.linkProps = linkProps;
+const viewPropTypes = {
+  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: _propTypes.default.func,
+  nativeID: _propTypes.default.string,
+  testID: _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,
@@ -283,10 +486,10 @@ const getByViewport = propType => ({
  */
 
 
-export const responsiveProps = {
+const responsiveProps = {
   getByViewport,
-  getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),
-  getTypeOptionallyByViewport: propType => PropTypes.oneOfType([propType, PropTypes.shape(getByViewport(propType))])
+  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
@@ -308,13 +511,16 @@ export const responsiveProps = {
  * @typedef {SpacingIndex|SpacingObject} SpacingValue
  */
 
+exports.responsiveProps = responsiveProps;
 const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const spacingIndexPropType = PropTypes.oneOf(spacingScale);
-const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
+
+const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
+
+const spacingObjectPropType = _propTypes.default.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
   space: spacingIndexPropType,
-  options: PropTypes.shape({
+  options: _propTypes.default.shape({
     variant: variantProp.propType,
-    size: PropTypes.number
+    size: _propTypes.default.number
   })
 });
 /**
@@ -332,31 +538,35 @@ const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport
  *   viewports or `space` to apply at all viewports.
  */
 
-export const spacingProps = {
+
+const spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,
     spacingObject: spacingObjectPropType,
     // Most spacing components and utilities take this prop / arg type:
-    spacingValue: PropTypes.oneOfType([spacingIndexPropType, spacingObjectPropType])
+    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.
+ * 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}
  */
 
-export const componentPropType = (passedName, checkDisplayName = false) => {
+exports.spacingProps = spacingProps;
+
+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;
     }
 
@@ -366,12 +576,11 @@ export 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 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);
 
-    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 ')}`);
+    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;
@@ -405,12 +614,9 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
   validate.isRequired = createValidate(true);
   return validate;
 };
-export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);
-export const paddingProp = {
-  propType: PropTypes.shape({
-    paddingBottom: PropTypes.number,
-    paddingLeft: PropTypes.number,
-    paddingRight: PropTypes.number,
-    paddingTop: PropTypes.number
-  })
-};
+
+exports.componentPropType = componentPropType;
+
+const copyPropTypes = _propTypes.default.oneOf(['en', 'fr']);
+
+exports.copyPropTypes = copyPropTypes;