emilkowalski / vaul

A drawer component for React.
https://vaul.emilkowal.ski
MIT License
6.46k stars 215 forks source link

fix: initial nested transform #491

Closed jeremiasjutz closed 3 weeks ago

jeremiasjutz commented 1 month ago

this fixes issue #490

bcessa commented 2 weeks ago

hi @jeremiasjutz do you have any examples on how to get this fix to properly work? I've been looking into it but so far the animations only work when nesting instances vertically.

For example, using the following code; if you set direction = 'right' the stack animations don't work:

function getClassNames(direction: string): string {
  if (direction == 'right') {
    return 'fixed inset-y-0 right-0 flex h-auto flex-col border bg-gray-100 lg:w-[400px]';
  }
  return 'fixed inset-x-0 bottom-0 flex flex-col bg-gray-100 lg:h-[400px]';
}

export const SampleDrawer: React.FunctionComponent = () => {
  const direction = 'bottom';
  return (
    <Drawer.Root shouldScaleBackground={true} direction={direction}>
      <Drawer.Trigger>
        <Button>Open Drawer</Button>
      </Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className={getClassNames(direction)}>
          <p className="text-base">
            Lorem ipsum dolor sit...
          </p>
          <Drawer.NestedRoot direction={direction}>
            <Drawer.Trigger>
              <Button className="my-4">Open Second Drawer</Button>
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay className="fixed inset-0 bg-black/40" />
              <Drawer.Content className={getClassNames(direction)}>
                <div className="mx-auto max-w-md">
                  <p className="text-base">
                    Lorem ipsum dolor sit...
                  </p>
                </div>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.NestedRoot>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
};
jeremiasjutz commented 1 week ago

@bcessa it seems like the current implementation (including my fix) does not handle directions other than bottom and right. As I only needed the nested drawer on the right, I did not encounter your issues. If I get to it, I might open another PR that fixes the other two directions.