Matcher props must be required in the modifier's body

[awinogradov]

interface IRatingHintProps {
  hint?: string;
}

Before:

export const withHint = withBemMod<IRatingHintProps, IRatingProps>(
  'Rating',
  { hint: '*' },
  Rating => props => (
    <Rating {...props}>
      <RatingValue base={props.base} value={props.value} />
      {props.hint && <RatingHint hint={props.hint} />}
    </Rating>
);

After:

export const withHint = withBemMod<IRatingHintProps, IRatingProps>(
  'Rating',
  { hint: '*' },
  Rating => props => (
    <Rating {...props}>
      <RatingValue base={props.base} value={props.value} />
      <RatingHint hint={props.hint} />
    </Rating>
);

props.hint must be required in the body context, because modifier applied already and we don't need to check existing of matched prop.

[Glazomer]

Created a test case: https://codesandbox.io/s/infallible-chatelet-3cqw8?file=/src/index.tsx