Inner working of the menu machine

[suimong]

Hi team,

Thanks for making such a wonderful library! In my opinion zag is taking "reusable" component to the next level, where the actual hard part of managing component states is abstracted!
I just started playing with the menu example, and while debugging and reading the zag source code, there's something I can't wrap my head around:

1. As shown in the following screenshot, the style attribute of the "positioner" div contains all information that will place the actual menu at the write position:
   
   Presumably the attributes should come from api.positionerProps

2. the api object is obtained through menu.connect, so I went in there, find the positionerProps definition as shown below:
   

3. It tells me that the style prop comes from popperStyles.floating, so continue the trace to popperStyles gets me in the function getPlacementStyles:
   

4. Here comes the problem: within getPlacementStyles, the floating prop only outputs an ojbect with two fields: position and minWidth (because after the first render the measured variable becomes true and line 53 will short circuit), there are no signs of css attributes like --reference-width, --available-width, transform etc.
   

So my question is: how (and where) does zag put all those attributes in the actual dom element?

[anubra266]

@suimong

zag/packages/utilities/popper/src/get-placement.ts

Lines 66 to 76 in d786c6c

	middleware.push(transformOrigin)
	middleware.push(
	size({
	padding: options.overflowPadding,
	apply({ rects, availableHeight, availableWidth }) {
	const referenceWidth = Math.round(rects.reference.width)
	floating.style.setProperty("--reference-width", `${referenceWidth}px`)
	floating.style.setProperty("--available-width", `${availableWidth}px`)
	floating.style.setProperty("--available-height", `${availableHeight}px`)

[suimong]

Thank you @anubra266 ! So getPlacement is called inside computePlacement which is one of the activities of the menu machine, and when the machine is in state "open", then computePlacement gets called, am I right?