fix: forwardref on Block

maxholman · Jan 16, 2023 · 5f3c657 · 5f3c657
1 parent 4f18c5f
commit 5f3c657
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/lib/layout.tsx b/lib/layout.tsx
@@ -19,19 +19,20 @@ export type BlockProps<T extends keyof ReactHTMLAttributesHacked> = Merge<
   }
 >;
 
-export const Block = <T extends keyof ReactHTMLAttributesHacked = 'div'>({
-  component = 'div',
-  space = 'large',
-  className,
-  ...props
-}: BlockProps<T>) => (
+const BlockInner = <T extends keyof ReactHTMLAttributesHacked = 'div'>(
+  { space = 'large', className, component = 'div', ...props }: BlockProps<T>,
+  ref: ForwardedRef<ReactHTMLElementsHacked[T]>,
+): ReactElement | null => (
   <Box
+    component={component}
     {...props}
     className={[flexColumnVariants[space], className]}
-    component={component}
+    ref={ref}
   />
 );
 
+export const Block = forwardRef(BlockInner);
+
 export type InlineProps<T extends keyof ReactHTMLAttributesHacked> = Merge<
   BoxBasedComponentProps<T>,
   {