InputMask: props.invalid does not work correctly in Passthrough

[jeffpapp]

Describe the bug

When using passthrough to style InputMask with Tailwind props.invalid is always false. This doesn't allow us to add specific conditional styles when the control is not valid

Reproducer

https://stackblitz.com/edit/yvptyh?file=src%2FApp.jsx

System Information

System:
    OS: Windows 11 10.0.22635
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
    Memory: 27.43 GB / 63.78 GB
  Binaries:
    Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3566
  npmPackages:
    primereact: ^10.8.2 => 10.8.2
    react: ^18.2.0 => 18.3.1
    tailwindcss: ^3.4.10 => 3.4.10

Steps to reproduce the behavior

1. Set a passthrough with a conditional set of class names
2. Set the InputMask invalid flag to true
3. The passthrough function reports props.invalid as false

Expected behavior

This should work like InputText and pass the correct invalid state into the passthrough function

[gcko]

Hey @jeffpapp , I created a PR #7226 that addresses the issues.

1. the invalid property is now be proxied correctly to the underlying InputText component
2. The default styling for InputMask as well as InputText has been updated

Once the changes are implemented, you can test the template Tailwind styling to see it work:

{
  root: ({ props, context }) => ({
    className: classNames(
      "m-0",
      "font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg",
      {
        "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]":
          !context.disabled,
        "hover:border-blue-500": !props.invalid && !context.disabled,
        "opacity-60 select-none pointer-events-none cursor-default": context.disabled,
        "border-gray-300 dark:border-blue-900/40": !props.invalid,
        "border-red-500 hover:border-red-500/80 focus:border-red-500":
          props.invalid && !context.disabled,
        "border-red-500/50": props.invalid && context.disabled
      },
      {
        "text-lg px-4 py-4": props.size === "large",
        "text-xs px-2 py-2": props.size === "small",
        "p-3 text-base": !props.size || typeof props.size === "number"
      },
      {
        "pl-8": context.iconPosition === "left",
        "pr-8": props.iconPosition === "right"
      }
    )
  });
};