Add forwardRef everywhere

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/docs/components/LayoutComponents/index.tsx

@@ -60,7 +60,7 @@ export const LayoutComponents = () => {
         <div className={description}>Arrange your components in a row</div>
       </div>
       <div className={box}>
-        <a className={content} href="/?path=/docs/components-tiles--docs">
+        <a className={content} href="/?path=/docs/components-container--docs">
           <ContainerSvg />
         </a>
         <div className={title}>Container</div>

packages/canon/src/components/Box/Box.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { createElement } from 'react';
+import { createElement, forwardRef } from 'react';
 import { boxSprinkles } from './sprinkles.css';
 import { base } from './box.css';
 import { BoxProps } from './types';
 
 /** @public */
-export const Box = (props: BoxProps) => {
+export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { as = 'div', className, style, children, ...restProps } = props;
 
   // Generate the list of class names
@@ -32,8 +32,9 @@ export const Box = (props: BoxProps) => {
     .join(' ');
 
   return createElement(as, {
+    ref,
     className: classNames,
     style,
     children,
   });
-};
+});

packages/canon/src/components/Grid/Grid.tsx

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
-import { createElement } from 'react';
+import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
 import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
 
+type GridComponent = React.ForwardRefExoticComponent<
+  GridProps & React.RefAttributes<HTMLDivElement>
+> & {
+  Item: typeof GridItem;
+};
+
 /** @public */
-export const Grid = (props: GridProps) => {
+export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
     children,
     columns,
@@ -42,14 +48,15 @@ export const Grid = (props: GridProps) => {
   return createElement(
     'div',
     {
+      ref,
       className: classNames,
       style,
     },
     children,
   );
-};
+}) as GridComponent;
 
-const GridItem = (props: GridItemProps) => {
+const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   const { children, rowSpan, colSpan, start, end, className, style } = props;
 
   const sprinklesClassName = gridItemSprinkles({
@@ -63,7 +70,15 @@ const GridItem = (props: GridItemProps) => {
     .filter(Boolean)
     .join(' ');
 
-  return createElement('div', { className: classNames, style }, children);
-};
+  return createElement(
+    'div',
+    {
+      ref,
+      className: classNames,
+      style,
+    },
+    children,
+  );
+});
 
 Grid.Item = GridItem;

packages/canon/src/components/Inline/Inline.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createElement } from 'react';
+import { createElement, forwardRef } from 'react';
 import { inlineSprinkles } from './sprinkles.css';
 import type { InlineProps } from './types';
 
@@ -33,7 +33,7 @@ const alignToFlexAlignY = (align: InlineProps['align']) => {
 };
 
 /** @public */
-export const Inline = (props: InlineProps) => {
+export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   const {
     as = 'div',
     children,
@@ -59,8 +59,9 @@ export const Inline = (props: InlineProps) => {
     .join(' ');
 
   return createElement(as, {
+    ref,
     className: classNames,
     style,
     children,
   });
-};
+});

packages/canon/src/components/Stack/Stack.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createElement } from 'react';
+import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
 import { stackSprinkles } from './sprinkles.css';
 
@@ -26,7 +26,7 @@ const alignToFlexAlign = (align: StackProps['align']) => {
 };
 
 /** @public */
-export const Stack = (props: StackProps) => {
+export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
     as = 'div',
     children,
@@ -53,8 +53,9 @@ export const Stack = (props: StackProps) => {
     .join(' ');
 
   return createElement(as, {
+    ref,
     className: classNames,
     style,
     children,
   });
-};
+});