Can you give me an example where you'd nest it inside another element?

I have two use cases:

1. In the current project, there is a requirement for a fixed panel at the bottom of every page. The drawer component should be confined within the container above this panel, ensuring it never overlaps with the fixed panel. (so also the sizes of the drawer needs to be relative to that container)
2. There is also a modal view. The drawer component should be integrated as a part of this modal view, rather than appearing over it.

Little sketch here:

hi - I think this would have solved a similar use case where I define custom CSS variables (i.e. theme color) so that all components can be styled with the same tailwind classes (i.e. bg-theme) but with different variable values attached to them.

Since Radix's DialogPortal accepts a container, my workaround was to allow DrawerContent to take in an additional container prop and then pass that to DrawerPortal.

hi - I think this would have solved a similar use case where I define custom CSS variables (i.e. theme color) so that all components can be styled with the same tailwind classes (i.e. bg-theme) but with different variable values attached to them.

Since Radix's DialogPortal accepts a container, my workaround was to allow DrawerContent to take in an additional container prop and then pass that to DrawerPortal.

Do you have the code of the workaround by any chance?

I have something like this:

const DrawerContent = React.forwardRef<
  React.ElementRef<DrawerContentPrimitive>,
  React.ComponentPropsWithoutRef<DrawerContentPrimitive>
>(({ className, children, placement, theme, container, ...props }, ref) => (
  <DrawerPortal container={container}>
    ...
  </DrawerPortal>
))
DrawerContent.displayName = 'DrawerContent'

I wrap my app in a context provider that provides and sets the CSS variable in the container and then pass the element to places I want to use the drawer:

export function CustomStyledRadixContextProvider(props: {
  children: React.ReactNode
}) {
  const divRef = useRef<HTMLDivElement>(null)
  const [initialValue, setInitialValue] = useState<HTMLElement | undefined>()

  useLayoutEffect(() => {
    if (divRef.current) {
      setInitialValue(divRef.current)
    }
  }, [])

  const customStyles = {
    '--theme-color': color,
  } as React.CSSProperties

  return (
    <div style={customStyles} className="h-full w-full">
      <CustomStyledRadixContext.Provider value={initialValue}>
        {props.children}
      </CustomStyledRadixContext.Provider>
      <div ref={divRef} />
    </div>
  )
}

export function CustomStyledDrawerContent(props: {
  children: React.ReactNode
  [key: string]: any
}) {
  const radixStyleMountDiv = useContext(CustomStyledRadixContext)
  return (
    <DrawerContent
      container={radixStyleMountDiv}
      className="z-[100]"
      {...props}
    >
      {props.children}
    </DrawerContent>
  )
}

Hi @emilkowalski, just wanted to followup on whether there's any sort of way I could reduce the calculations of vaul to be in a parent container's size. This is currently a pretty big bottleneck for me on desktop breakpoints where at the moment Im keeping the size of the app to be within a phone sized container.