Apply --trigger-width to the open dialog

[byskat]

Hi! I'm trying to create a popover that would occupy the width of the ref passed through triggerRef on a DialogTrigger and its children, but I'm not succeeding. It seems to be implemented differently to for example ComboBoxes where I can "inherit" the css variable, but not here.

Demo
Line on the demo repo

    <RACDialogTrigger>
      <div ref={inputRef} className="relative flex flex-1 items-center overflow-hidden shadow-lg">
        <div className="absolute bottom-0 left-3 top-0 m-auto flex items-center">
          <MagnifyingGlassIcon aria-hidden className="text-glaucous h-[18px] w-[18px]" strokeWidth={2} />
        </div>
        <RACInput className={fieldGroupStyles} {...props} />
        <div className="absolute bottom-0 right-2 top-0 m-auto flex items-center">
          <RACButton className={triggerStyles} isDisabled={props.disabled} onPress={onFilterPress}>
            <AdjustmentsHorizontalIcon className="h-[24px] w-[24px]" />
          </RACButton>
        </div>
      </div>

      <RACPopover className={popoverStyles} triggerRef={inputRef}>
        <RACDialog className="flex w-[--trigger-width] flex-col gap-2 px-4 pb-4 pt-2 outline-0">
          <RACLabel>Refine your search</RACLabel>
          <RACSeparator />
          <div>{children}</div>
        </RACDialog>
      </RACPopover>
    </RACDialogTrigger>

There's any way of achieving this? Thanks!

[snowystinger]

You can measure it yourself #4858 (comment)
or like

react-spectrum/packages/react-aria-components/src/Select.tsx

Line 177 in 44fa2a5

style: {'--trigger-width': buttonWidth} as React.CSSProperties

We don't do this for DialogTrigger out of the box because there isn't a common size that popovers should generally be, unlike in Select/ComboBox/etc.
So you'll need to do it yourself, which you can do the same way we do.