[data-placement] isn't typed in useSelectContext().triggerProps

[Eliya Cohen]

Description

I want to be able to pass the current select placement as data-placement for Select.Content (so I can style it with tailwind). The main reason for that is to be able to decide the transform-origin of the presence animation.

In runtime, this part of code seems to work:

function SelectContent() {
  const { triggerProps } = useSelectContext();

  return (
    <Select.Content data-placement={triggerProps['data-placement']}>
      ...
    </Select.Content>
  );
}

The issue is with TypeScript when I'm trying to access [data-placement]:

Element implicitly has an 'any' type because expression of type '"data-placement"' can't be used to index type 'WithoutRef<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>'.
  Property 'data-placement' does not exist on type 'WithoutRef<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>'.(7053)

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/edit/vitejs-vite-fziyaa?file=src%2FApp.tsx&terminal=dev

Steps to Reproduce

1. Go to code
2. See reproduction

Ark UI Version

2.2.3

Framework

• React
• Solid
• Vue

Browser

Google Chrome

Additional Information

Probably off-topic, but in terms of performance, it would be great if I could react only to triggerProps rather than the entire select context (since I only want to react to what I need). For instance - const triggerProps = useSelectTriggerProps() or const triggerProps = useSelectContext(context => context.triggerProps).

[Segun Adebayo]

Thanks for reporting this.

I think a more appropriate fix is to support data-placement at the Zag.js level. I've gone ahead to do this.

In the next release (or so), it'll be available and you won't need to rely on getTriggerProps just to read the placement