@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/utils/input.js

@@ -1,187 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-/**
- * @typedef {import('react').SyntheticEvent} Event
- */
-
-const pluralHooks = ['useMultipleInputValues'];
-
-const validateProps = (_ref, _ref2, hookName) => {
-  let {
-    value,
-    onChange,
-    readOnly,
-    initialValue
-  } = _ref;
-  let {
-    isCurrentlyControlled,
-    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.
-    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
-  };
-
-  if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
-  }
-
-  if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
-  }
-
-  if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
-  }
-
-  if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(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.
- * If `value` prop is undefined, the hook manages its own state.
- *
- * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
- * management tools such as Formik and React Hooks Form.
- *
- * @param {object} props
- * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
- * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
- * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
- * @param {boolean} [props.readOnly] - if true, stops the input values from changing
- *
- * @param {string} hookName - optional, used for tailoring error messages
- *
- * @returns {{
- *   currentValue: string|number|null
- *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
- *   resetValue: () => void
- *   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';
-  const isCurrentlyControlled = props.value !== undefined;
-  const [isControlled] = useState(isCurrentlyControlled);
-  validateProps(props, {
-    isControlled,
-    isCurrentlyControlled
-  }, hookName);
-  const {
-    value,
-    initialValue,
-    inputRef,
-    onChange,
-    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 valueRef = useRef({
-    initial: currentValue,
-    value: currentValue
-  }); // 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 !== null && newValue !== void 0 ? newValue : '';
-    } // 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]);
-  return {
-    currentValue,
-    setValue,
-    resetValue,
-    isControlled,
-    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.
- * If `values` prop is not passed in, the hook manages its own state.
- *
- * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
- * management tools such as Formik and React Hooks Form.
- *
- * @param {object} props
- * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
- * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
- * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
- * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
- * @param {boolean} [props.readOnly] - if true, stops the input values from changing
- *
- * @param {string} componentName - optional, used in error messages
- *
- * @returns {{
- *   currentValues: any
- *   resetValues: () => void
- *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
- *   toggleOneValue: (value: string|number) => void
- *   unsetValues: () => void
- * }}
- */
-
-export const useMultipleInputValues = function () {
-  let {
-    values,
-    initialValues,
-    maxValues,
-    onChange,
-    readOnly
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    currentValue,
-    setValue,
-    resetValue
-  } = useInputValue({
-    readOnly,
-    onChange,
-    value: values,
-    // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
-  }, 'useMultipleInputValues');
-  const enforceMaxValues = useCallback(newValues => {
-    if (!maxValues) return newValues;
-    const excess = newValues.length - maxValues;
-    return excess > 0 ? newValues.slice(excess) : newValues;
-  }, [maxValues]);
-  const currentValues = enforceMaxValues(currentValue);
-  const setValues = useCallback((newValues, event) => {
-    const validNewValues = enforceMaxValues(newValues);
-    setValue(validNewValues, event);
-  }, [setValue, enforceMaxValues]);
-  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
-    // 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]);
-  return {
-    currentValues,
-    resetValues,
-    setValues,
-    toggleOneValue,
-    unsetValues
-  };
-};

package/lib-module/utils/pressability.js

@@ -1,111 +0,0 @@
-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
-
-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
- */
-
-export const getCursorStyle = _ref => {
-  let {
-    inactive,
-    disabled,
-    accessibilityRole
-  } = _ref;
-  if (Platform.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}
- */
-
-export 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
- */
-
-export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
-  if (typeof tokens !== 'function') return tokens;
-  const udsPressableState = resolvePressableState(pressableState, additionalState);
-  return tokens(udsPressableState);
-};
-const staticStyles = StyleSheet.create(Platform.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.
- */
-
-export 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.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;
-};

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

@@ -1,308 +0,0 @@
-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.
-
-const nativeA11yPropTypes = {
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.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
-  })),
-  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
-  }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
-  }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.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.string,
-  accessibilityAtomic: PropTypes.bool,
-  accessibilityAutoComplete: PropTypes.string,
-  accessibilityBusy: PropTypes.bool,
-  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-  accessibilityColumnCount: PropTypes.number,
-  accessibilityColumnIndex: PropTypes.number,
-  accessibilityColumnSpan: PropTypes.number,
-  accessibilityControls: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-  accessibilityDescribedBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityDetails: PropTypes.string,
-  accessibilityDisabled: PropTypes.bool,
-  accessibilityErrorMessage: PropTypes.string,
-  accessibilityExpanded: PropTypes.bool,
-  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityHasPopup: PropTypes.string,
-  accessibilityHidden: PropTypes.bool,
-  accessibilityInvalid: PropTypes.bool,
-  accessibilityKeyShortcuts: PropTypes.string,
-  accessibilityLabelledBy: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityLevel: PropTypes.number,
-  accessibilityModal: PropTypes.bool,
-  accessibilityMultiline: PropTypes.bool,
-  accessibilityMultiSelectable: PropTypes.bool,
-  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityPlaceholder: PropTypes.string,
-  accessibilityPosInSet: PropTypes.number,
-  accessibilityPressed: PropTypes.bool,
-  accessibilityReadOnly: PropTypes.bool,
-  accessibilityRequired: PropTypes.bool,
-  accessibilityRoleDescription: PropTypes.string,
-  accessibilityRowCount: PropTypes.number,
-  accessibilityRowIndex: PropTypes.number,
-  accessibilityRowSpan: PropTypes.number,
-  accessibilitySelected: PropTypes.bool,
-  accessibilitySetSize: PropTypes.number,
-  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-  accessibilityValueMax: PropTypes.number,
-  accessibilityValueMin: PropTypes.number,
-  accessibilityValueNow: PropTypes.number,
-  accessibilityValueText: PropTypes.string
-};
-const a11yPropTypesByPlatform = Platform.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.select({
-    web: {
-      'aria-valuemax': value,
-      accessibilityValueMax: value
-    },
-    default: {
-      accessibilityValue: {
-        max: value
-      }
-    }
-  }),
-  accessibilityValueMin: value => Platform.select({
-    web: {
-      'aria-valuemin': value,
-      accessibilityValueMin: value
-    },
-    default: {
-      accessibilityValue: {
-        min: value
-      }
-    }
-  }),
-  accessibilityValueNow: value => Platform.select({
-    web: {
-      'aria-valuenow': value,
-      accessibilityValueNow: value
-    },
-    default: {
-      accessibilityValue: {
-        now: value
-      }
-    }
-  }),
-  accessibilityValueText: value => Platform.select({
-    web: {
-      'aria-valuetext': value,
-      accessibilityValueText: value
-    },
-    default: {
-      accessibilityValue: {
-        text: value
-      }
-    }
-  }),
-  // Former accessibilityState props
-  accessibilityBusy: value => Platform.select({
-    web: {
-      'aria-busy': value,
-      accessibilityBusy: value
-    },
-    default: {
-      accessibilityState: {
-        busy: value
-      }
-    }
-  }),
-  accessibilityChecked: value => Platform.select({
-    web: {
-      'aria-checked': value,
-      accessibilityChecked: value
-    },
-    default: {
-      accessibilityState: {
-        checked: value
-      }
-    }
-  }),
-  accessibilityDisabled: value => Platform.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.select({
-    web: {
-      'aria-expanded': value,
-      accessibilityExpanded: value
-    },
-    default: {
-      accessibilityState: {
-        expanded: value
-      }
-    }
-  }),
-  accessibilitySelected: value => Platform.select({
-    web: {
-      'aria-selected': value,
-      accessibilitySelected: value
-    },
-    default: {
-      accessibilityState: {
-        selected: value
-      }
-    }
-  })
-};
-
-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
-  // 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)
-    };
-  };
-}
-
-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
-  // 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.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.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-module/utils/props/clickProps.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-const clickHandlerMapping = {
-  onClick: 'onPress',
-  onMouseDown: 'onPressIn',
-  onMouseUp: 'onPressOut'
-};
-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.
-   *
-   * 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-module/utils/props/componentPropType.js

@@ -1,63 +0,0 @@
-/**
- * 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}
- */
-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 ".concat(nameInProp) : typeof props[propName];
-      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
-    }
-
-    return undefined;
-  };
-
-  const checkRequired = (props, propName, componentName) => {
-    if (props[propName] === undefined) {
-      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(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;
-}