Fix types when updating 7.1.3

[angelod1as]

Describe the bug

We have created a component that uses useIMask but now, trying to update from 6.4.3 to 7.1.3, our types are broken.

import { FC, RefObject, useEffect } from "react"
import { useIMask } from "react-imask"
import { ReactMaskProps } from "react-imask/dist/mixin"

import { Input, InputProps } from "src/components/common/input/Input"

export type MaskedInputProps = Omit<InputProps, "onChange"> & {
  maskOptions: IMask.AnyMaskedOptions
  onAccept?: ReactMaskProps["onAccept"]
}

export const MaskedInput: FC<MaskedInputProps> = ({
  maskOptions,
  onAccept,
  ...inputProps
}) => {
  const { ref, setTypedValue } = useIMask(maskOptions, {
    onAccept,
  })
  //Setting of initial value, only during the first load
  useEffect(() => {
    setTypedValue(inputProps?.defaultValue?.toString() || "")
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inputProps?.id]) //setting id as dependency since it changes based on fields

  return <Input ref={ref as RefObject<HTMLInputElement>} {...inputProps} />
}

I tried fixing the types but can't find any documentation on it, nor decipher the source types.

What breaks is:

import { ReactMaskProps } from "react-imask/dist/mixin"

Is not available anymore. So I import from somewhere else, so far so good:

import { ReactMaskProps, useIMask } from "react-imask"

But now it errors: Generic type 'ReactMaskProps' requires between 1 and 2 type arguments. Also, the IMask is not found anymore:

  maskOptions: IMask.AnyMaskedOptions
  onAccept?: ReactMaskProps["onAccept"]

Both break.

To Reproduce
See the code above.

Expected behaviour
The types should work or there should be docs describing what to do.

Environment:

• OS: macOS 14.1.1
• Browser: not applicable
• Version: not applicable
• IMask version: see above

[uNmAnNeR]

@angelod1as hey, you can find the API for new useIMask version here

there is no AnyMaskedOptions anymore.
ReactMaskProps now depends on Opts used to type imask to automatically infer types for values.

Yeah the docs can be better i know ...

[tsvetkovamaria]

@uNmAnNeR

In this particular example, what would be the correct argument in generic ReactMaskProps? ReactMaskProps ?