@stack-spot/citric-react 0.12.0 → 0.14.0

package/src/components/layout.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { createElement } from 'react'
 import { HTMLTag, WithStyleShortcuts } from '../types'
 import { applyStyles } from '../utils/css'
+import { withRef } from '../utils/react'
 
 export const layout = {
   center: 'center',
@@ -40,14 +41,18 @@ export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<
 export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>
 export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>
 
-export function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
+function _Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
   return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })
 }
 
-export function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
+function _Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
   return createElement(tag || 'div', { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) })
 }
 
-export function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
+function _Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
   return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) })
 }
+
+export const Center = withRef(_Center)
+export const Row = withRef(_Row)
+export const Column = withRef(_Column)

package/src/utils/react.ts

@@ -0,0 +1,6 @@
+/* eslint-disable react/display-name */
+import { forwardRef } from 'react'
+
+export function withRef<T extends (...args: any[]) => any>(fc: T): T {
+  return forwardRef((props, ref) => fc({ ...props, ref })) as any
+}