@telus-uds/components-base 1.65.0 → 1.67.0

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -2,9 +2,10 @@ import { useEffect, useRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Platform from "react-native-web/dist/exports/Platform";
-import useSafeLayoutEffect from '../useSafeLayoutEffect'; // TODO: systematise animations
-// https://github.com/telus/universal-design-system/issues/487
+import useSafeLayoutEffect from '../useSafeLayoutEffect';
 
+// TODO: systematise animations
+// https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation(_ref) {
   let {
     containerHeight,
@@ -28,16 +29,15 @@ function useVerticalExpandAnimation(_ref) {
   }, [expandStateChanged, isExpanded]);
   useEffect(() => {
     const onComplete = () => setIsAnimating(false);
-
     if (Platform.OS === 'web') {
-      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
-      // https://github.com/necolas/react-native-web/pull/1713
+      if (!elementRef.current) return () => {};
 
+      // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
       const element = elementRef.current;
       element.addEventListener('transitionend', onComplete);
       return () => element.removeEventListener('transitionend', onComplete);
     }
-
     const animationConfig = {
       duration: isExpanded ? expandDuration : collapseDuration,
       easing: Easing.inOut(Easing.ease),
@@ -50,7 +50,6 @@ function useVerticalExpandAnimation(_ref) {
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
   const containerStyles = {};
   if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
-
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
       // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
@@ -60,9 +59,9 @@ function useVerticalExpandAnimation(_ref) {
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
       containerStyles.opacity = 0;
     }
-  } // don't visually collapse the container until we have it measured
-
+  }
 
+  // don't visually collapse the container until we have it measured
   if (containerHeight === null) {
     if (Platform.OS === 'web') {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
@@ -82,8 +81,6 @@ function useVerticalExpandAnimation(_ref) {
   } else {
     containerStyles.height = expandAnimatedValue;
   }
-
   return [containerStyles, elementRef];
 }
-
 export default useVerticalExpandAnimation;

package/lib-module/utils/children.js

@@ -1,6 +1,7 @@
 import React, { Children, Fragment } from 'react';
 import Text from "react-native-web/dist/exports/Text";
 import A11yText from '../A11yText';
+
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples
  * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
@@ -33,35 +34,31 @@ import A11yText from '../A11yText';
  * @param {ReactChildren} child
  * @returns {ReactChildren}
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 export const unpackFragment = child => {
   var _child$props;
-
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+  if (Children.count(child) > 1) return Children.map(child, unpackFragment);
 
-  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
+  // When a fragment is found, unpack its children to the top level and check them
+  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
 
+  // Stop unpacking as soon as any non-fragment child is found
   return child;
 };
-
-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 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 => {
   var _child$type;
-
   return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
-
-
+// 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.
+  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}`;
@@ -69,6 +66,7 @@ const wrapChild = (child, wrappedText) => {
     wrappedText.push(child);
   }
 };
+
 /**
  * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
  * text style inheritance behaves differently with text compared to regular HTML.
@@ -84,13 +82,12 @@ const wrapChild = (child, wrappedText) => {
  * @param {TextProps} props
  * @returns {ReactChildren}
  */
-
-
 export const wrapStringsInText = function (children) {
   let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const childrenArray = unpackFragment(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 childrenArray = unpackFragment(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 wrapables = [[]];
   let wrapablesIndex = 0;
   childrenArray.forEach(child => {
@@ -111,7 +108,8 @@ export const wrapStringsInText = function (children) {
     // 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.
-    _jsx(Text, { ...textProps,
+    _jsx(Text, {
+      ...textProps,
       children: group.length === 1 ? group[0] : group
     }, combineKeys(group) || index) : group];
   }, []);

package/lib-module/utils/containUniqueFields.js

@@ -9,18 +9,16 @@ const containUniqueFields = (items, fields) => {
     if (!map[field]) {
       map[field] = [];
     }
-
     if (!item[field]) {
       // We exclude empty values from comparison
       return false;
-    } // Duplicate found!
-
+    }
 
+    // Duplicate found!
     if (map[field][item[field]]) return true;
     map[field][item[field]] = true;
     return false;
   }));
   return !itemsHaveDuplicateFields;
 };
-
 export default containUniqueFields;

package/lib-module/utils/htmlAttrs.js

@@ -15,7 +15,8 @@ export default {
   types: htmlAttrTypes,
   select: props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
-    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
+    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? {
+      ...items,
       [key]: value
     } : items;
   }, {})

package/lib-module/utils/info/index.js

@@ -1,6 +1,7 @@
 import platform from './platform';
-import versions from './versions'; // export an object accessed like info.platform.OS, info.version.uds, etc
+import versions from './versions';
 
+// export an object accessed like info.platform.OS, info.version.uds, etc
 export default {
   platform,
   versions

package/lib-module/utils/info/platform/index.js

@@ -1,6 +1,9 @@
 import Platform from "react-native-web/dist/exports/Platform";
-import fileSuffix from './platform'; // Allows consuming libraries that might not have a direct dependency on
+import fileSuffix from './platform';
+
+// Allows consuming libraries that might not have a direct dependency on
 // React Native to check what the current platform is.
+
 // Particularly useful for validating Jest config: it is possible for Jest to
 // get configured such that Platform.OS returns a different mocked value to the
 // OS being used to select files by platform suffix (e.g. .web, .native).

package/lib-module/utils/info/versions.js

@@ -1,5 +1,6 @@
-import pkgJson from '../../../package.json'; // Add more versions if they are useful e.g. theme schema version
+import pkgJson from '../../../package.json';
 
+// Add more versions if they are useful e.g. theme schema version
 export default {
   uds: pkgJson.version
 };

package/lib-module/utils/input.js

@@ -4,7 +4,6 @@ import { useCallback, useRef, useState } from 'react';
  */
 
 const pluralHooks = ['useMultipleInputValues'];
-
 const validateProps = (_ref, _ref2, hookName) => {
   let {
     value,
@@ -17,7 +16,6 @@ const validateProps = (_ref, _ref2, hookName) => {
     isControlled
   } = _ref2;
   const s = pluralHooks.includes(hookName) ? 's' : '';
-
   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.
@@ -29,23 +27,20 @@ Consumers of this hook must be one of:
 3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
 `);
   };
-
   if (value && !onChange && !readOnly) {
     usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
-
   if (initialValue && value) {
     usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
-
   if (isControlled && !isCurrentlyControlled) {
     usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
-
   if (!isControlled && isCurrentlyControlled) {
     usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
+
 /**
  * Hook used for controlling the input state of input components that have a singular value.
  * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -69,8 +64,6 @@ Consumers of this hook must be one of:
  *   isControlled: bool
  * }}
  */
-
-
 export const useInputValue = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
@@ -88,26 +81,25 @@ export const useInputValue = function () {
     readOnly = false
   } = props;
   const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
-  const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
-  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
+  const currentValue = isControlled ? value : ownValue;
 
+  // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
+  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
   const valueRef = useRef({
     initial: currentValue,
     value: currentValue
-  }); // Make current value accessible inside useCallback without rememoizing every time the value changes
-
+  });
+  // Make current value accessible inside useCallback without rememoizing every time the value changes
   valueRef.current.value = currentValue;
   const isDirty = currentValue !== valueRef.current.initial;
   const setValue = useCallback((arg, event) => {
     if (readOnly) return;
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-
     if (!isControlled) {
       setOwnValue(newValue);
       if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
-    } // Call onChange handler if there's something for it to handle (event or a changed value)
-
-
+    }
+    // Call onChange handler if there's something for it to handle (event or a changed value)
     if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
   }, [inputRef, isControlled, onChange, readOnly]);
   const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
@@ -119,6 +111,7 @@ export const useInputValue = function () {
     isDirty
   };
 };
+
 /**
  * Hook used for controlling the input state of input components that have multiple named on/off states.
  * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -144,7 +137,6 @@ export const useInputValue = function () {
  *   unsetValues: () => void
  * }}
  */
-
 export const useMultipleInputValues = function () {
   let {
     values,
@@ -177,9 +169,9 @@ export const useMultipleInputValues = function () {
   const resetValues = resetValue;
   const unsetValues = useCallback(event => setValues([], event), [setValues]);
   const toggleOneValue = useCallback((newValue, event) => {
-    if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+    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.
-
     const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
     setValues(newValues, event);
   }, [currentValues, readOnly, setValues]);

package/lib-module/utils/pressability.js

@@ -1,12 +1,14 @@
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import pressProps from './props/pressProps';
+
 /**
  * @typedef {import('react').ReactNode} ReactNode
  */
-// These roles should result in cursor: pointer but don't in current RNW releases
 
+// 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
@@ -18,7 +20,6 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
  * @param {string} [props.accessibilityRole]
  * @returns
  */
-
 export const getCursorStyle = _ref => {
   let {
     inactive,
@@ -30,6 +31,7 @@ export const getCursorStyle = _ref => {
   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
  */
@@ -44,7 +46,6 @@ export const getCursorStyle = _ref => {
  *   such as `inactive`, `selected`, etc.
  * @returns {object}
  */
-
 export const resolvePressableState = function () {
   let {
     pressed = false,
@@ -52,12 +53,14 @@ export const resolvePressableState = function () {
     hovered = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let additionalState = arguments.length > 1 ? arguments[1] : undefined;
-  return { ...additionalState,
+  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.
@@ -67,7 +70,6 @@ export const resolvePressableState = function () {
  * @param {object} [additionalState] - properties specific to the current component
  * @returns {object} - resolved tokens object
  */
-
 export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
   if (typeof tokens !== 'function') return tokens;
   const udsPressableState = resolvePressableState(pressableState, additionalState);
@@ -84,12 +86,12 @@ const staticStyles = StyleSheet.create(Platform.select({
   },
   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.
  */
-
 export const getPressHandlersWithArgs = function () {
   let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -101,7 +103,6 @@ export const getPressHandlersWithArgs = 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);
       }

package/lib-module/utils/props/a11yProps.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
+import getPropSelector from './getPropSelector';
 
+// 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.bool,
   focusable: PropTypes.bool,
@@ -36,7 +37,8 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: PropTypes.func,
   onAccessibilityTap: PropTypes.func
 };
-const a11yPropTypes = { ...nativeA11yPropTypes,
+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.string,
@@ -89,7 +91,9 @@ const a11yPropTypesByPlatform = Platform.select({
   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
+});
+
+// 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:
@@ -97,7 +101,6 @@ const a11yPropTypesByPlatform = Platform.select({
 //   - 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.select({
@@ -205,14 +208,13 @@ const rwnPropMappings = {
     }
   })
 };
-
 if (Platform.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
+  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,
@@ -220,13 +222,13 @@ if (Platform.OS === 'web') {
       now,
       text
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return { ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+    return {
+      ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
       ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
       ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
       ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
     };
   };
-
   rwnPropMappings.accessibilityState = function () {
     let {
       busy,
@@ -235,7 +237,8 @@ if (Platform.OS === 'web') {
       expanded,
       selected
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return { ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+    return {
+      ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
       ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
       ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
       ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
@@ -243,29 +246,29 @@ if (Platform.OS === 'web') {
     };
   };
 }
-
 export 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: getPropSelector( // Allow all React Native accessibility props
-  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
-  Platform.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
+  select: getPropSelector(
+  // Allow all React Native accessibility props
+  a11yPropTypesByPlatform,
+  // Allow any `aria-*` attribute on web; ignore them on native
+  Platform.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.
    */
@@ -275,8 +278,8 @@ export default {
     ...Platform.select({
       web: {
         accessibilityHidden: true // web screenreaders
-
       },
+
       android: {
         importantForAccessibility: 'no-hide-descendants'
       },
@@ -285,7 +288,6 @@ export default {
       }
     })
   },
-
   /**
    * 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

package/lib-module/utils/props/clickProps.js

@@ -9,7 +9,6 @@ export 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.func])),
-
   /**
    * Takes a set of props and converts HTML mouse click oriented event handlers to closest
    * equivalent React Native press event handler.

package/lib-module/utils/props/componentPropType.js

@@ -9,54 +9,41 @@
  */
 export default function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
-
   const checkProp = (props, propName, componentName) => {
     var _props$propName$type, _props$propName$type2;
-
     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 = 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 (!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-module/utils/props/getPropSelector.js

@@ -1,5 +1,6 @@
 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
@@ -14,16 +15,18 @@ import hasOwnProperty from '../hasOwnProperty';
  * @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
+  const newItems = callback(key, value);
 
-  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
+  // 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.
@@ -33,14 +36,15 @@ const applyCallback = (callback, items, key, value) => {
  * @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, _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
-      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
+    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
+      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? {
+        ...items,
         [key]: value
       } : items)
     );