1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import React, { ButtonHTMLAttributes, ReactElement } from "react";
import cn from "classnames";
import {
  InteractionStatesOptions,
  useInteractionStates,
} from "@react-md/states";

import styles from "./CustomComponent.module.scss";

interface CustomButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    Omit<InteractionStatesOptions, "handlers"> {}

function CustomButton({
  disabled,
  disableRipple,
  disableSpacebarClick,
  disableProgrammaticRipple,
  className: propClassName,
  children,
  onKeyDown,
  onKeyUp,
  onMouseDown,
  onMouseUp,
  onMouseLeave,
  onTouchStart,
  onTouchMove,
  onTouchEnd,
  ...props
}: CustomButtonProps): ReactElement {
  const { ripples, handlers, className } = useInteractionStates({
    handlers: {
      onKeyDown,
      onKeyUp,
      onMouseDown,
      onMouseUp,
      onMouseLeave,
      onTouchStart,
      onTouchMove,
      onTouchEnd,
    },
    disabled,
    disableRipple,
    disableSpacebarClick,
    disableProgrammaticRipple,
    className: propClassName,
  });

  return (
    <button
      {...props}
      type="button"
      className={cn(styles.button, className)}
      {...handlers}
    >
      {children}
      {ripples}
    </button>
  );
}

export default function Demo(): ReactElement {
  return (
    <>
      <CustomButton id="custom-button-1">Hello</CustomButton>
    </>
  );
}