SelectButton: Global PT invalid prop warning occurred

[redonearth]

Describe the bug

After recently updating Vite from 5.0.2 to 5.0.10, this warning message appeared in the Chrome browser console.
Fortunately, the app doesn't stretch and operates normally, but I'm reporting it because it's annoying.

Reproducer

No response

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 120

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

Please fork the CodeSandbox project or Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[melloware]

I can't reproduce can you please provide your exact SelectButton settings so I can reproduce it?

[redonearth]

https://stackblitz.com/edit/vitejs-vite-qoogob?file=src%2Fmain.tsx

I succeeded in reproducing the error.
I set PrimeReactProvider in main.tsx and created a primeReactValue variable of APIOptions type.
Because I needed to set the global style of the Button component, I wrote a pt option in value. I didn't write the SelectButton option.
However, an error related to SelectButton occurs.
Presumably, there is a conflict in the settings of Button and SelectButton.

[redonearth]

Additionally, I found that if I added the selectbutton settings (an empty object is also possible), the error message disappeared.

const primeReactValue: APIOptions = {
  pt: {
    button: {
      root: ({ props }: ButtonPassThroughMethodOptions) => ({
        className: classNames({
          'text-blue-500 bg-indigo-800 hover:bg-indigo-600 border-none':
            props.severity === 'secondary' && props.outlined,
        }),
        style: {
          fontWeight: 500,
          boxShadow: props.severity === 'secondary' && props.outlined && 'none',
        },
      }),
    },
    selectbutton: {},
  }
}

[melloware]

@redonearth you had your Passthrough incorrect see my fixed example:

https://stackblitz.com/edit/vitejs-vite-xw2br5?file=src%2Fmain.tsx

[redonearth]

@melloware
I think my explanation wasn't sufficient.

I didn't need the pt of SelectButton, I only needed the global setting of Button.

So, I set the Button's pt as in the example code, and strangely enough, the error occurred on a page that used SelectButton instead of Button, or that used Button and SelectButton together.

[melloware]

Ok let me take another look your reproducer was confusing what you were trying to accomplish.

[melloware]

OK i took a deeper look and i am not sure how PrimeTek will want to fix this. Basically for styles specifically button and menu they have root components. However inside components like SelectButton and others they have an internal button style.

    selectbutton: {
        root: ({ props }) => ({
            className: classNames({ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled })
        }),
        button: ({ context }) => ({
            className: classNames(
                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
                'px-4 py-3',
                'transition duration-200 border border-r-0',
                'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
                '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)]',
                {
                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.selected,
                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.selected,
                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
                }
            )
        }),
        label: 'font-bold'
    }

So the button here is being found by the Global PT and applying your matching button name and the error is that it doesn't match as this buttton is a DIV where the main button is a <Button>

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!