@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/utils/pressability.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolvePressableTokens = exports.resolvePressableState = exports.getPressHandlersWithArgs = exports.getCursorStyle = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _pressProps = _interopRequireDefault(require("./props/pressProps"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @typedef {import('react').ReactNode} ReactNode
+ */
+
+// These roles should result in cursor: pointer but don't in current RNW releases
+const shouldUseCursor = ['checkbox', 'radio', 'switch'];
+
+/**
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
+ * fail to apply an expected cursor style.
+ *
+ * @param {object} props
+ * @param {boolean} [props.inactive]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accessibilityRole]
+ * @returns
+ */
+const getCursorStyle = _ref => {
+  let {
+    inactive,
+    disabled,
+    accessibilityRole
+  } = _ref;
+  if (_Platform.default.OS !== 'web') return undefined;
+  if (inactive || disabled) return staticStyles.notAllowed;
+  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
+  return undefined; // allows React Native Web's built-in logic to apply
+};
+
+/**
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
+ */
+
+/**
+ * Maps the state object given by the React Native `Pressable` component to the set of
+ * equivalent appearance names used in UDS.
+ *
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
+ *   render functions passed to its `style` or `children` props.
+ * @param {object} [additionalState] - properties specific to the current component,
+ *   such as `inactive`, `selected`, etc.
+ * @returns {object}
+ */
+exports.getCursorStyle = getCursorStyle;
+const resolvePressableState = function () {
+  let {
+    pressed = false,
+    focused = false,
+    hovered = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let additionalState = arguments.length > 1 ? arguments[1] : undefined;
+  return {
+    ...additionalState,
+    focus: focused,
+    hover: hovered,
+    pressed
+  };
+};
+
+/**
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
+ * object passed from the React Native `Pressable` component and optional extra properties.
+ *
+ * @param {object|function} tokens - UDS system tokens prop
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
+ * @param {object} [additionalState] - properties specific to the current component
+ * @returns {object} - resolved tokens object
+ */
+exports.resolvePressableState = resolvePressableState;
+const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+  if (typeof tokens !== 'function') return tokens;
+  const udsPressableState = resolvePressableState(pressableState, additionalState);
+  return tokens(udsPressableState);
+};
+exports.resolvePressableTokens = resolvePressableTokens;
+const staticStyles = _StyleSheet.default.create(_Platform.default.select({
+  web: {
+    notAllowed: {
+      cursor: 'not-allowed'
+    },
+    pointer: {
+      cursor: 'pointer'
+    }
+  },
+  default: {}
+}));
+
+/**
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
+ * them in a function that passes in some provided args. Allows components containing a Pressable
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
+ */
+const getPressHandlersWithArgs = function () {
+  let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
+  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(_ref2 => {
+    let [key, handler] = _ref2;
+    return {
+      [key]: function () {
+        for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+          defaultArgs[_key] = arguments[_key];
+        }
+        // Pass each handler data on this button and current selection
+        handler(...args, ...defaultArgs);
+      }
+    };
+  }));
+  return pressHandlers;
+};
+exports.getPressHandlersWithArgs = getPressHandlersWithArgs;

package/lib/cjs/utils/props/a11yProps.js

@@ -0,0 +1,315 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+const nativeA11yPropTypes = {
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
+  // react-native-web ignores `accessibilityHint`
+  accessibilityIgnoresInvertColors: _propTypes.default.bool,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityRole: _propTypes.default.string,
+  accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
+  })),
+  accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    selected: _propTypes.default.bool,
+    checked: _propTypes.default.oneOf([true, false, 'mixed']),
+    busy: _propTypes.default.bool,
+    expanded: _propTypes.default.bool
+  }),
+  accessibilityValue: _propTypes.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
+  }),
+  accessibilityViewIsModal: _propTypes.default.bool,
+  importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: _propTypes.default.func,
+  onAccessibilityEscape: _propTypes.default.func,
+  onAccessibilityTap: _propTypes.default.func
+};
+const a11yPropTypes = {
+  ...nativeA11yPropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: _propTypes.default.string,
+  accessibilityAtomic: _propTypes.default.bool,
+  accessibilityAutoComplete: _propTypes.default.string,
+  accessibilityBusy: _propTypes.default.bool,
+  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: _propTypes.default.number,
+  accessibilityColumnIndex: _propTypes.default.number,
+  accessibilityColumnSpan: _propTypes.default.number,
+  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityDetails: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  accessibilityErrorMessage: _propTypes.default.string,
+  accessibilityExpanded: _propTypes.default.bool,
+  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityHasPopup: _propTypes.default.string,
+  accessibilityHidden: _propTypes.default.bool,
+  accessibilityInvalid: _propTypes.default.bool,
+  accessibilityKeyShortcuts: _propTypes.default.string,
+  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityLevel: _propTypes.default.number,
+  accessibilityModal: _propTypes.default.bool,
+  accessibilityMultiline: _propTypes.default.bool,
+  accessibilityMultiSelectable: _propTypes.default.bool,
+  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityPlaceholder: _propTypes.default.string,
+  accessibilityPosInSet: _propTypes.default.number,
+  accessibilityPressed: _propTypes.default.bool,
+  accessibilityReadOnly: _propTypes.default.bool,
+  accessibilityRequired: _propTypes.default.bool,
+  accessibilityRoleDescription: _propTypes.default.string,
+  accessibilityRowCount: _propTypes.default.number,
+  accessibilityRowIndex: _propTypes.default.number,
+  accessibilityRowSpan: _propTypes.default.number,
+  accessibilitySelected: _propTypes.default.bool,
+  accessibilitySetSize: _propTypes.default.number,
+  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: _propTypes.default.number,
+  accessibilityValueMin: _propTypes.default.number,
+  accessibilityValueNow: _propTypes.default.number,
+  accessibilityValueText: _propTypes.default.string
+};
+const a11yPropTypesByPlatform = _Platform.default.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
+  // Ignore web-only props in native builds
+  default: nativeA11yPropTypes
+});
+
+// These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
+// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
+// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
+// - On web, split them into both of:
+//   - The appropriate aria-* attr, like `aria-valuenow`, which will work regardless of RNW version
+//   - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
+//     than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
+//     and future releases might add more features here).
+const rwnPropMappings = {
+  // Former accessibilityValue props.
+  accessibilityValueMax: value => _Platform.default.select({
+    web: {
+      'aria-valuemax': value,
+      accessibilityValueMax: value
+    },
+    default: {
+      accessibilityValue: {
+        max: value
+      }
+    }
+  }),
+  accessibilityValueMin: value => _Platform.default.select({
+    web: {
+      'aria-valuemin': value,
+      accessibilityValueMin: value
+    },
+    default: {
+      accessibilityValue: {
+        min: value
+      }
+    }
+  }),
+  accessibilityValueNow: value => _Platform.default.select({
+    web: {
+      'aria-valuenow': value,
+      accessibilityValueNow: value
+    },
+    default: {
+      accessibilityValue: {
+        now: value
+      }
+    }
+  }),
+  accessibilityValueText: value => _Platform.default.select({
+    web: {
+      'aria-valuetext': value,
+      accessibilityValueText: value
+    },
+    default: {
+      accessibilityValue: {
+        text: value
+      }
+    }
+  }),
+  // Former accessibilityState props
+  accessibilityBusy: value => _Platform.default.select({
+    web: {
+      'aria-busy': value,
+      accessibilityBusy: value
+    },
+    default: {
+      accessibilityState: {
+        busy: value
+      }
+    }
+  }),
+  accessibilityChecked: value => _Platform.default.select({
+    web: {
+      'aria-checked': value,
+      accessibilityChecked: value
+    },
+    default: {
+      accessibilityState: {
+        checked: value
+      }
+    }
+  }),
+  accessibilityDisabled: value => _Platform.default.select({
+    web: {
+      'aria-disabled': value,
+      // RNW >= 0.18 maps `accessibilityDisabled` to `disabled` attr if element supports it
+      accessibilityDisabled: value,
+      // As of RNW 0.18.9, Pressable doesn't support `accessibilityDisabled`, only `disabled`,
+      // but everything else supports `accessibilityDisabled` but not `disabled`.
+      disabled: value
+    },
+    default: {
+      accessibilityState: {
+        disabled: value
+      }
+    }
+  }),
+  accessibilityExpanded: value => _Platform.default.select({
+    web: {
+      'aria-expanded': value,
+      accessibilityExpanded: value
+    },
+    default: {
+      accessibilityState: {
+        expanded: value
+      }
+    }
+  }),
+  accessibilitySelected: value => _Platform.default.select({
+    web: {
+      'aria-selected': value,
+      accessibilitySelected: value
+    },
+    default: {
+      accessibilityState: {
+        selected: value
+      }
+    }
+  })
+};
+if (_Platform.default.OS === 'web') {
+  const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value);
+
+  // On Web only, these React Native object props need manual mapping in RNW >=0.18
+  // which dropped support for the React Native shape of these props.
+  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
+  // new features added in >=0.18 (e.g. for accessibilityDisabled).
+  rwnPropMappings.accessibilityValue = function () {
+    let {
+      max,
+      min,
+      now,
+      text
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+      ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+      ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+      ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+    };
+  };
+  rwnPropMappings.accessibilityState = function () {
+    let {
+      busy,
+      checked,
+      disabled,
+      expanded,
+      selected
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+      ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+      ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+      ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+      ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+    };
+  };
+}
+var _default = exports.default = {
+  /**
+   * Proptypes for recognised React Native accessiblity (a11y) props.
+   * Spread this in the propTypes of components that accept React Native a11y props.
+   */
+  types: a11yPropTypes,
+  /**
+   * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
+   *
+   * Where components accept React Native a11y props, pass { ...rest } from its props to this,
+   * then spread the returned object into the component's props (usually its outer container).
+   */
+  select: (0, _getPropSelector.default)(
+  // Allow all React Native accessibility props
+  a11yPropTypesByPlatform,
+  // Allow any `aria-*` attribute on web; ignore them on native
+  _Platform.default.OS === 'web' && /^aria-/,
+  // For the props added and deprecated in React Native Web 0.18, convert them to
+  // a form that is platform-appropriate and RNW-version safe
+  (key, value) => {
+    const rnwPropMapper = rwnPropMappings[key];
+    return rnwPropMapper ? rnwPropMapper(value) : undefined;
+  }),
+  /**
+   * Use this to disable focus for elements which are visually hidden but still rendered.
+   */
+  nonFocusableProps: {
+    focusable: false,
+    // for android, and for keyboard nav in web
+    ..._Platform.default.select({
+      web: {
+        accessibilityHidden: true // web screenreaders
+      },
+      android: {
+        importantForAccessibility: 'no-hide-descendants'
+      },
+      ios: {
+        accessibilityElementsHidden: true
+      }
+    })
+  },
+  /**
+   * Generates an object of platform-appropriate a11y props describing an item that has an
+   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
+   * saying "Item X of Y" when this item is select.
+   *
+   * @param {number} itemsCount - the number of items in the set
+   * @param {number} index - the current item's index in the set
+   * @returns {object} - platform-applicable a11y props describing this position (if available)
+   */
+  getPositionInSet: (itemsCount, index) => _Platform.default.select({
+    web: {
+      // accessibilityPosInSet etc exists in React Native Web main branch
+      // but not in a release compatible with Expo etc; just use `aria-*`
+      'aria-setsize': itemsCount,
+      'aria-posinset': index + 1
+    },
+    // No equivalents exist on the native side
+    default: {}
+  })
+};

package/lib/cjs/utils/props/clickProps.js

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

package/lib/cjs/utils/props/componentPropType.js

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

package/lib/cjs/utils/props/contentfulProps.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const contentfulPropsTypes = {
+  ..._Platform.default.select({
+    web: {
+      'data-contentful-field-id': _propTypes.default.string,
+      'data-contentful-entry-id': _propTypes.default.string
+    },
+    default: {}
+  })
+};
+var _default = exports.default = {
+  /**
+   * Set of contentful properties used for the content preview inspector.
+   */
+  types: contentfulPropsTypes,
+  /**
+   * Filters a props object, returning only contentful props.
+   */
+  select: (0, _getPropSelector.default)(contentfulPropsTypes)
+};

package/lib/cjs/utils/props/copyPropTypes.js

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

package/lib/cjs/utils/props/getPropSelector.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getPropSelector;
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+var _hasOwnProperty = _interopRequireDefault(require("../hasOwnProperty"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined;
+  const newItems = callback(key, value);
+
+  // If the callback doesn't return anything, continue and look up keys as normal
+  if (!newItems) return undefined;
+
+  // If the callback returns items, merge them in, deep merging props that are objects
+  return (0, _lodash.default)({}, items, newItems);
+};
+
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+function getPropSelector(propTypes, regexp, callback) {
+  return props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return (
+      // If there's a callback and it matches something, applyCallback merges it in; return that
+      applyCallback(callback, items, key, value) || (
+      // If there's no callback match, check if this prop is valid and merge it in if it is
+      (0, _hasOwnProperty.default)(propTypes, key) || regexp && regexp.test(key) ? {
+        ...items,
+        [key]: value
+      } : items)
+    );
+  }, {});
+}