Source: react/withComponentPropOverrides.jsx

import React, { forwardRef } from 'react';
import { useComponentPropOverrides } from './hooks';

/**
 * A Higher-Order Component (HOC) that enhances the wrapped component with custom props via
 * the `useComponentPropOverrides` hook to merge any custom props from configuration with the
 * actual component props.
 *
 * @param {string} [target] - The target used to identify any custom props for a given element.
 * @param {ComponentPropOverridesOptions} [options] - Optional configuration for the HOC.
 *
 * @example
 * // Given a configuration like:
 * {
 *   componentPropOverrides: {
 *     targets: {
 *       example: {
 *         'data-dd-privacy': 'mask',
 *         'data-hj-suppress': '',
 *         className: 'fs-mask',
 *       },
 *     },
 *   },
 * }
 *
 * // and calling the HOC as follows:
 * const ComponentWithPropOverrides = withComponentPropOverrides('example')(MyComponent);
 * <ComponentWithPropOverrides otherProp="value" />
 *
 * // The resulting `ComponentWithPropOverrides` will render `MyComponent` with the following props:
 * { otherProp: 'value', 'data-dd-privacy': 'mask', data-hj-suppress: '', className: 'fs-mask' }
 *
 * @see module:React.useComponentPropOverrides
 * @memberof module:React
 */
const withComponentPropOverrides = (target, options = {}) => (WrappedComponent) => {
  const WithComponentPropOverrides = forwardRef((props, ref) => {
    const propOverrides = useComponentPropOverrides(target, props, options);
    return <WrappedComponent ref={ref} {...propOverrides} />;
  });
  WithComponentPropOverrides.displayName = `withComponentPropOverrides(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithComponentPropOverrides;
};

export default withComponentPropOverrides;