chore: allow parent component to forward ref

Author: tomislavhoracek

src/design-system/dialog/dialog-root.component.tsx

@@ -26,15 +26,15 @@ export interface DialogRootProps {
   // TODO refactor: pass z-indices config on app level: https://vanilla-extract.style/documentation/packages/dynamic/
   zIndex?: number;
 }
-
-export const Root = ({
+/*
+export const Root = React.forwardRef(({
   open,
   setOpen,
   onCloseAutoFocusRef,
   children,
   portalContainer,
   zIndex,
-}: Readonly<DialogRootProps>): JSX.Element => (
+}: Readonly<DialogRootProps>, ref)): JSX.Element => (
   <AlertDialog.Root open={open}>
     <AlertDialog.Portal container={portalContainer}>
       <AlertDialog.Overlay asChild>
@@ -62,3 +62,45 @@ export const Root = ({
     </AlertDialog.Portal>
   </AlertDialog.Root>
 );
+*/
+
+export const Root = React.forwardRef((
+  props: Readonly<DialogRootProps>, forwardReference?: any
+) => {
+  const {
+    open,
+    setOpen,
+    onCloseAutoFocusRef,
+    children,
+    portalContainer,
+    zIndex,
+  } = props;
+  return (
+  <AlertDialog.Root open={open}>
+    <AlertDialog.Portal container={portalContainer}>
+      <AlertDialog.Overlay asChild>
+        <Backdrop zIndex={zIndex}/>
+      </AlertDialog.Overlay>
+      <AlertDialog.Content
+        ref={forwardReference}
+        asChild
+        onEscapeKeyDown={(): void => {
+          setOpen(false);
+        }}
+        onCloseAutoFocus={
+          onCloseAutoFocusRef &&
+          ((): void => {
+            onCloseAutoFocusRef.current?.focus();
+          })
+        }
+      >
+        <Content
+          className={cx.dialogContent}
+          style={{ zIndex: zIndex === undefined ? undefined : zIndex + 1 }}
+        >
+          {children}
+        </Content>
+      </AlertDialog.Content>
+    </AlertDialog.Portal>
+  </AlertDialog.Root>
+)});