@telus-uds/components-base 1.14.3 → 1.15.0

package/src/utils/props/getPropSelector.js

@@ -1,14 +1,55 @@
-export default function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes)
+import merge from 'lodash.merge'
+import hasOwnProperty from '../hasOwnProperty'
+
+/**
+ * @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 merge({}, 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
+ */
+export default function getPropSelector(propTypes, regexp, callback) {
   return (props) =>
     Object.entries(props).reduce(
       (items, [key, value]) =>
-        keys.includes(key) || (regexp && regexp.test(key))
+        // 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
+        (hasOwnProperty(propTypes, key) || (regexp && regexp.test(key))
           ? {
               ...items,
               [key]: value
             }
-          : items,
+          : items),
       {}
     )
 }

package/src/utils/useResponsiveProp.js

@@ -1,9 +1,9 @@
 import { viewports } from '@telus-uds/system-constants'
 import { useViewport } from '../ViewportProvider'
+import hasOwnProperty from './hasOwnProperty'
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key)
 const hasResponsiveProperties = (objectProp) =>
-  viewports.keys.some((key) => hasOwn(objectProp, key))
+  viewports.keys.some((key) => hasOwnProperty(objectProp, key))
 
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
@@ -23,7 +23,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
     ? // If there's a current viewport, return the closest match at or below it
       viewports.inherit(prop)[viewport]
     : // If no current viewport is available, default to smallest viewport
-      prop[viewports.keys.find((key) => hasOwn(prop, key))]
+      prop[viewports.keys.find((key) => hasOwnProperty(prop, key))]
 
   return value === undefined ? defaultValue : value
 }

package/src/utils/withLinkRouter.jsx

@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-
-// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
-const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop)
+import hasOwnProperty from './hasOwnProperty'
 
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.