withClassName React HOC (with forwardRef)

withClassName.tsx

import React from 'react';
import clsx from 'clsx';

import { getDisplayName, __DEV__ } from '@/utils/helpers';

export type withClassNameProps = {
  className?: string;
};

export function withClassName<T, P extends object>(
  WrappedComponent: React.ForwardRefExoticComponent<
    React.PropsWithoutRef<P & withClassNameProps> & React.RefAttributes<T>
  >,
  classes?: string,
) {
  const WithClassName = React.forwardRef<T, P & withClassNameProps>(
    function WithClassName(props, ref) {
      const { className, ...rest } = props;
      return (
        <WrappedComponent
          ref={ref}
          className={clsx(classes, className)}
          {...(rest as React.PropsWithoutRef<P>)}
        />
      );
    },
  );
  if (__DEV__) {
    WithClassName.displayName = `WithClassName(${getDisplayName(
      WrappedComponent,
    )})`;
  }
  return WithClassName;
}