How to use the @axa-fr/react-toolkit-core.withClickId function in @axa-fr/react-toolkit-core

export type TitleProps = TitleComponentProps &
  TitleHandlerProps &
  WithClassModifierOptions;

const setWithProps = (props: TitleComponentProps) => ({
  ...props,
  classModifier: (props.classModifier || '').concat(
    (props.enable === false ? ' disabled' : '').concat(
      props.active ? ' active' : ''
    )
  ),
});

const enchance = compose(
  withProps(setWithProps),
  withClickId({ event: [onChangeEvent] }),
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
)(Title);

enchance.displayName = 'Title';

export default enchance;

import { WithClickIdProps, withClickId, compose } from '@axa-fr/react-toolkit-core';
import ActionCore, { ActionCoreProps } from './ActionCore';

export type ActionProps = WithClickIdProps;

const Action = compose(
  withClickId({ event: ['onClick'] })
)(ActionCore);
Action.displayName = 'Action';

export default Action;

import HeaderCore, { HeaderCoreProps } from './HeaderCore';

const onCancelEvent = 'onCancel';

export interface HeaderProps
  extends WithClickIdProps {
  title: string;
}

const setWithProps = (props: HeaderProps) => ({
  ...props,
  children: props.title,
});

const enchance = compose(
  withClickId({ event: [onCancelEvent] }),
  withProps(setWithProps),
)(HeaderCore);

enchance.displayName = 'Header';

export default enchance;

import { withClickId, WithClickIdProps, compose } from '@axa-fr/react-toolkit-core';

import ButtonCore, { ButtonCoreProps } from './ButtonCore';

export type ButtonProps = WithClickIdProps;

const Button = compose(
  withClickId({ event: ['onClick'] })
)(ButtonCore);

Button.displayName = "Button";

export default Button;