@stack-spot/citric-react 0.12.0 → 0.13.0

package/src/components/MenuOverlay/Menu.tsx

@@ -7,7 +7,7 @@ import { IconButton } from '../IconBox'
 import { useOverlayController } from '../Overlay/context'
 import { MenuProvider, useMenuController, useMenuState } from './context'
 import { keyboardNavigation } from './keyboard'
-import { MenuAction, MenuCollapsible, MenuItem, MenuProps, MenuSection, MenuState } from './types'
+import { MenuAction as MenuActionI, MenuCollapsible, MenuItem, MenuProps, MenuSection as MenuSectionI, MenuState } from './types'
 
 // Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
 const RENDER_DELAY = 20
@@ -38,7 +38,7 @@ function Submenu({ children, label, className, icon, iconRight, style }: MenuCol
   )
 }
 
-function MenuSection({ children, label, className, style }: MenuSection) {
+function MenuSection({ children, label, className, style }: MenuSectionI) {
   return (
     <section className={className} style={style}>
       {label && <h6>{label}</h6>}
@@ -50,7 +50,7 @@ function MenuSection({ children, label, className, style }: MenuSection) {
   )
 }
 
-function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }: MenuAction) {
+function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }: MenuActionI) {
   const overlayController = useOverlayController()
   const children = <>
     {icon}

package/src/components/Pagination.tsx

@@ -1,5 +1,6 @@
 import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { IconButton } from './IconBox'
 
@@ -28,9 +29,9 @@ export interface BasePaginationProps {
   onChange: (page: number, size: number) => void,
 }
 
-export type PaginationProps = React.JSX.IntrinsicElements['div'] & BasePaginationProps
+export type PaginationProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BasePaginationProps
 
-export const Pagination = (
+export const Pagination = withRef((
   { pageSizeOptions = [10, 20, 30], pageSize, totalPages, page, onChange, ...props }: PaginationProps,
 ) => {
   const t = useTranslate(dictionary)
@@ -73,7 +74,7 @@ export const Pagination = (
       </div>
     </CitricComponent>
   )
-}
+})
 
 const dictionary = {
   en: {

package/src/components/ProgressBar.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { isNil } from 'lodash'
 import { WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette {
@@ -15,11 +16,12 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
 
 export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
 
-export const ProgressBar = ({ progress, style, className, ...props }: ProgressBarProps) =>
+export const ProgressBar = withRef(({ progress, style, className, ...props }: ProgressBarProps) =>
   <CitricComponent
     tag="div"
     component="progress-bar"
     className={listToClass([className, isNil(progress) && 'indeterminate'])}
     style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
     {...props}
-  />
+  />,
+)

package/src/components/ProgressCircular.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { isNil } from 'lodash'
 import { WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseProgressCircularProps extends WithColorScheme, WithColorPalette {
@@ -19,11 +20,12 @@ export interface BaseProgressCircularProps extends WithColorScheme, WithColorPal
 
 export type ProgressCircularProps = React.JSX.IntrinsicElements['div'] & BaseProgressCircularProps
 
-export const ProgressCircular = ({ progress, size, style, className, ...props }: ProgressCircularProps) =>
+export const ProgressCircular = withRef(({ progress, size, style, className, ...props }: ProgressCircularProps) =>
   <CitricComponent
     tag="div"
     component="progress-circular"
     className={listToClass([size, className, isNil(progress) && 'indeterminate'])}
     style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
     {...props}
-  />
+  />,
+)

package/src/components/RadioGroup.tsx

@@ -2,6 +2,7 @@ import { isNil } from 'lodash'
 import { useMemo } from 'react'
 import { WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { Column } from './layout'
 
@@ -52,7 +53,7 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
 
 export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
 
-export function RadioGroup<T>({
+function _RadioGroup<T>({
   name,
   value,
   options,
@@ -85,3 +86,5 @@ export function RadioGroup<T>({
   }, [options, value, name, colorScheme])
   return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
 }
+
+export const RadioGroup = withRef(_RadioGroup)

package/src/components/Rating.tsx

@@ -1,3 +1,4 @@
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export type RatingValue = 1 | 2 | 3 | 4 | 5
@@ -13,7 +14,7 @@ export interface BaseRatingProps {
 
 export type RatingProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRatingProps
 
-export const Rating = ({ value, onChange, name, ...props }: RatingProps) => (
+export const Rating = withRef(({ value, onChange, name, ...props }: RatingProps) => (
   <CitricComponent tag="div" component="rating" {...props}>
     <input type="radio" value="1" name={name} checked={value === 5} onChange={() => onChange(5)} />
     <input type="radio" value="2" name={name} checked={value === 4} onChange={() => onChange(4)} />
@@ -21,4 +22,4 @@ export const Rating = ({ value, onChange, name, ...props }: RatingProps) => (
     <input type="radio" value="4" name={name} checked={value === 2} onChange={() => onChange(2)} />
     <input type="radio" value="5" name={name} checked={value === 1} onChange={() => onChange(1)} />
   </CitricComponent>
-)
+))

package/src/components/Select/RichSelect.tsx

@@ -3,13 +3,15 @@ import { useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { applyCSSVariable } from '../../utils/css'
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
+import { withRef } from '../../utils/react'
 import { CitricComponent } from '../CitricComponent'
 import { Input } from '../Input'
 import { ProgressCircular } from '../ProgressCircular'
 import { SimpleSelect } from './SimpleSelect'
 import { SelectProps } from './types'
 
-export function RichSelect<T>({
+function _RichSelect<T>({
+  ref,
   options,
   value,
   onChange,
@@ -28,9 +30,11 @@ export function RichSelect<T>({
   onBlur,
   showArrow,
   ...props
-}: SelectProps<T> & { type?: 'rich' }) {
+}: SelectProps<T> & { type?: 'rich' },
+) {
   const [search, setSearch] = useState('')
-  const element = useRef<HTMLDivElement | null>(null)
+  const _element = useRef<HTMLDivElement | null>(null)
+  const element = ref ?? _element
   const [open, setOpen] = useState(false)
   const [focused, setFocused] = useState(false)
   const t = useTranslate(dictionary)
@@ -213,3 +217,5 @@ const dictionary = {
     empty: 'Vazio',
   },
 }
+
+export const RichSelect = withRef(_RichSelect)

package/src/components/Select/SimpleSelect.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useMemo } from 'react'
+import { MutableRefObject, useCallback, useMemo } from 'react'
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
+import { withRef } from '../../utils/react'
 import { CitricComponent } from '../CitricComponent'
 import { ProgressCircular } from '../ProgressCircular'
 import { SelectProps } from './types'
 
-export function SimpleSelect<T>({
+export function _SimpleSelect<T>({
+  ref,
   options,
   value,
   onChange,
@@ -17,7 +19,8 @@ export function SimpleSelect<T>({
   onFocus,
   wrap,
   ...props
-}: SelectProps<T> & { wrap?: boolean }) {
+}: SelectProps<T> & { wrap?: boolean },
+) {
   const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedIndex = e.target.options.selectedIndex - (e.target.options.length > options.length ? 1 : 0)
     onChange?.(selectedIndex >= 0 ? options[selectedIndex] : undefined)
@@ -38,10 +41,11 @@ export function SimpleSelect<T>({
 
   return wrap === false ? (
     <CitricComponent
+      tag="select"
+      ref={ref as MutableRefObject<HTMLSelectElement | null>}
       required={required}
       onChange={handleChange}
       disabled={disabled || loading}
-      tag="select"
       component="select"
       onFocus={onFocus}
       onBlur={onBlur}
@@ -50,7 +54,7 @@ export function SimpleSelect<T>({
       {renderedOptions}
     </CitricComponent>
   ) : (
-    <CitricComponent tag="div" component="select" aria-busy={loading} {...props}>
+    <CitricComponent ref={ref as MutableRefObject<HTMLDivElement | null>} tag="div" component="select" aria-busy={loading} {...props}>
       <select
         value={value ? renderKey(value) : undefined}
         required={required}
@@ -65,3 +69,5 @@ export function SimpleSelect<T>({
     </CitricComponent>
   )
 }
+
+export const SimpleSelect = withRef(_SimpleSelect)

package/src/components/Select/index.tsx

@@ -1,8 +1,11 @@
+import { withRef } from '../../utils/react'
 import { RichSelect } from './RichSelect'
 import { SimpleSelect } from './SimpleSelect'
 import { SelectProps } from './types'
 export type * from './types'
 
-export function Select<T>(props: SelectProps<T>) {
+export function _Select<T>(props: SelectProps<T>) {
   return props.type === 'simple' ? <SimpleSelect {...props} /> : <RichSelect {...props} />
 }
+
+export const Select = withRef(_Select)

package/src/components/Select/types.ts

@@ -77,6 +77,7 @@ interface CommonSelectProps<T> extends WithColorScheme {
 
 export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
   type: 'simple',
+  ref?: React.MutableRefObject<HTMLDivElement | HTMLSelectElement>,
 }
 
 export interface RichSelectProps<T> extends CommonSelectProps<T> {
@@ -114,8 +115,9 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
    * @default true
    */
   showArrow?: boolean,
+  ref?: React.MutableRefObject<HTMLDivElement>,
 }
 
 export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>
 
-export type SelectProps<T> = React.JSX.IntrinsicElements['div'] & BaseSelectProps<T>
+export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>

package/src/components/SelectBox.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { useMemo } from 'react'
 import { WithColorPalette, WithColorScheme } from '../types'
 import { defaultRenderKey, defaultRenderLabel } from '../utils/options'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 import { layout } from './layout'
 
@@ -72,7 +73,7 @@ export type BaseSelectBoxProps<T> = RadioProps<T> | CheckboxProps<T>
 
 export type SelectBoxProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseSelectBoxProps<T>
 
-export function SelectBox<T>({
+function _SelectBox<T>({
   multiple,
   name,
   value,
@@ -132,3 +133,5 @@ export function SelectBox<T>({
     </div>
   )
 }
+
+export const SelectBox = withRef(_SelectBox)

package/src/components/Skeleton.tsx

@@ -1,4 +1,5 @@
 import { listToClass } from '@stack-spot/portal-theme'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseSkeletonProps {
@@ -30,11 +31,12 @@ export interface BaseSkeletonProps {
 
 export type SkeletonProps = React.JSX.IntrinsicElements['div'] & BaseSkeletonProps
 
-export const Skeleton = ({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) =>
+export const Skeleton = withRef(({ appearance, className, style, width, height, bgLevel, ...props }: SkeletonProps) =>
   <CitricComponent
     tag="div"
     component="skeleton"
     className={listToClass([appearance, bgLevel && `bg-${bgLevel}`, className])}
     style={{ width, height, ...style }}
     {...props}
-  />
+  />,
+)

package/src/components/Slider.tsx

@@ -1,6 +1,7 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { ControlledInput, WithColorPalette, WithColorScheme } from '../types'
 import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
@@ -34,7 +35,7 @@ export interface BaseSliderProps extends WithColorScheme, WithColorPalette {
 
 export type SliderProps =  ControlledInput & BaseSliderProps
 
-export const Slider = (
+export const Slider = withRef((
   { value, onChange, min, max, style, showValue, renderValue, colorPalette, colorScheme, className, ...props }: SliderProps,
 ) => {
   const percent = Math.floor((value / ((max ?? 100) - (min ?? 0))) * 100)
@@ -73,5 +74,4 @@ export const Slider = (
         </div>
       </CitricComponent>
     )
-}
-
+})

package/src/components/SmartTable.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { withRef } from '../utils/react'
 import { BaseTableProps, SortingDirection, Table, TableProps, Th, Tr } from './Table'
 
 export type TableColumn<T> = {
@@ -88,7 +89,7 @@ export type BaseSmartTableProps<T extends Record<string, any>> = BaseTableProps
 
 export type SmartTableProps<T extends Record<string, any>> = Omit<TableProps, 'children'> & ExtraSmartTableProps<T>
 
-export function SmartTable<T extends Record<string, any>>(
+function _SmartTable<T extends Record<string, any>>(
   { data, keygen, columns, renderAccordion, accordionTrigger, accordionMaxHeight, id, ...props }: SmartTableProps<T>,
 ) {
   id = useMemo(() => id || `${Math.random()}`, [id])
@@ -146,3 +147,5 @@ export function SmartTable<T extends Record<string, any>>(
     </Table>
   )
 }
+
+export const SmartTable = withRef(_SmartTable)

package/src/components/Stepper.tsx

@@ -1,6 +1,7 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { withRef } from '../utils/react'
 import { Button } from './Button'
 import { Column, Row } from './layout'
 import { Tabs } from './Tabs'
@@ -64,7 +65,7 @@ function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key |
   return tabs.map((t, i) => ({ ...t, disabled: i > index }))
 }
 
-export function Stepper<Key extends string>(
+function _Stepper<Key extends string>(
   { tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }: StepperProps<Key>,
 ) {
   const controller = useMemo(
@@ -139,3 +140,5 @@ const dictionary = {
     finish: 'Finalizar',
   },
 } satisfies Dictionary
+
+export const Stepper = withRef(_Stepper)

package/src/components/Switch.tsx

@@ -1,4 +1,5 @@
 import { ControlledInput, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 interface Props extends WithColorScheme {
@@ -9,7 +10,7 @@ interface Props extends WithColorScheme {
 
 export type SwitchProps = ControlledInput & Props
 
-export const Switch = ({ value, onChange, children, className, style, ...props }: SwitchProps) => {
+export const Switch = withRef(({ value, onChange, children, className, style, ...props }: SwitchProps) => {
   const handleChange = onChange ? () => onChange(!value) : undefined
   return children ? (
     <CitricComponent tag="label" component="switch-row" style={style} className={className}>
@@ -26,4 +27,4 @@ export const Switch = ({ value, onChange, children, className, style, ...props }
     style={style}
     {...props}
   />
-}
+})

package/src/components/Table.tsx

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useRef } from 'react'
 import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseTableProps {
@@ -109,7 +110,7 @@ export type TableProps = React.JSX.IntrinsicElements['table'] & BaseTableProps
 export type ThProps = React.JSX.IntrinsicElements['th'] & BaseThProps
 export type TrProps = React.JSX.IntrinsicElements['tr'] & BaseTrProps
 
-export const Table = ({
+export const Table = withRef(({
   appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className,
   children, accordionRows, ...props
 }: TableProps) => {
@@ -130,9 +131,9 @@ export const Table = ({
       {children}
     </CitricComponent>
   )
-}
+})
 
-export const Th = ({ direction, onSort, children, className, ...props }: ThProps) => {
+export const Th = withRef(({ direction, onSort, children, className, ...props }: ThProps) => {
   const t = useTranslate(dictionary)
   let tip: string | undefined
   const label = typeof children === 'string' ? children : undefined
@@ -158,51 +159,54 @@ export const Th = ({ direction, onSort, children, className, ...props }: ThProps
       {children}
     </th>
   )
-}
+})
 
-export const Tr = ({ accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }: TrProps) => {
-  const ref = useRef<HTMLTableRowElement | null>(null)
+export const Tr = withRef(
+  ({ ref: outerRef, accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }: TrProps) => {
+    const innerRef = useRef<HTMLTableRowElement | null>(null)
+    const ref = outerRef as React.MutableRefObject<HTMLTableRowElement | null> ?? innerRef
 
-  useEffect(() => {
-    if (!accordion) return
-    const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]')
-    if (checkbox instanceof HTMLElement) {
-      const onChange = (e: Event) => {
-        if (!ref.current || !(e.target instanceof HTMLInputElement)) return
-        if (e.target.checked) {
-          ref.current.setAttribute('aria-hidden', 'false')
-          ref.current.removeAttribute('inert')
-        } else {
-          ref.current.setAttribute('aria-hidden', 'true')
-          ref.current.setAttribute('inert', 'true')
+    useEffect(() => {
+      if (!accordion) return
+      const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]')
+      if (checkbox instanceof HTMLElement) {
+        const onChange = (e: Event) => {
+          if (!ref.current || !(e.target instanceof HTMLInputElement)) return
+          if (e.target.checked) {
+            ref.current.setAttribute('aria-hidden', 'false')
+            ref.current.removeAttribute('inert')
+          } else {
+            ref.current.setAttribute('aria-hidden', 'true')
+            ref.current.setAttribute('inert', 'true')
+          }
         }
+        checkbox.addEventListener('change', onChange)
+        return () => checkbox.removeEventListener('change', onChange)
       }
-      checkbox.addEventListener('change', onChange)
-      return () => checkbox.removeEventListener('change', onChange)
-    }
-  }, [ref.current])
+    }, [ref.current])
 
-  return (
-    <tr
-      ref={ref}
-      {...props}
-      className={listToClass([className, accordion && 'accordion', accordionTrigger === 'row' && 'clickable'])}
-      onClick={accordionTrigger === 'row'
-        ? (e) => {
-          const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]')
-          if (checkbox instanceof HTMLInputElement && e.target !== checkbox) checkbox.click()
-          onClick?.(e)
+    return (
+      <tr
+        ref={ref}
+        {...props}
+        className={listToClass([className, accordion && 'accordion', accordionTrigger === 'row' && 'clickable'])}
+        onClick={accordionTrigger === 'row'
+          ? (e) => {
+            const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]')
+            if (checkbox instanceof HTMLInputElement && e.target !== checkbox) checkbox.click()
+            onClick?.(e)
+          }
+          : onClick
         }
-        : onClick
-      }
-      style={applyCSSVariable(style, 'max-height', accordionMaxHeight)}
-      aria-hidden={accordion}
-      {...(accordion ? { inert: 'true' } : {})}
-    >
-      {children}
-    </tr>
-  )
-}
+        style={applyCSSVariable(style, 'max-height', accordionMaxHeight)}
+        aria-hidden={accordion}
+        {...(accordion ? { inert: 'true' } : {})}
+      >
+        {children}
+      </tr>
+    )
+  },
+)
 
 const dictionary = {
   en: {

package/src/components/Tabs/index.tsx

@@ -1,5 +1,6 @@
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
+import { withRef } from '../../utils/react'
 import { CitricComponent } from '../CitricComponent'
 import { ErrorBoundary } from '../ErrorBoundary'
 import { ProgressCircular } from '../ProgressCircular'
@@ -10,7 +11,7 @@ import { findSelectedIndex } from './utils'
 
 const ctx = createContext<TabController<any> | undefined>(undefined)
 
-export function Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>) {
+function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>) {
   const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
   const t = useTranslate(dictionary)
   const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
@@ -62,3 +63,5 @@ const dictionary = {
     error: 'Ocorreu um erro ao carregar a aba.',
   },
 } satisfies Dictionary
+
+export const Tabs = withRef(_Tabs)

package/src/components/Text.ts

@@ -2,6 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
 import { createElement } from 'react'
 import { HTMLTag, TextAppearance, WithColor } from '../types'
 import { applyColor, applyTextAppearance } from '../utils/css'
+import { withRef } from '../utils/react'
 
 type SupportedTags = 'span' | 'small' | 'p' | `h${1|2|3|4|5|6}` | 'pre'
 
@@ -72,7 +73,7 @@ const appearanceToTag: Record<TextAppearance, SupportedTags> = {
   subtitle4: 'p',
 }
 
-export function Text<T extends SupportedTags>(
+function _Text<T extends SupportedTags>(
   { tag, appearance, color, showMargins, weight, align, nowrapEllipsis, style, className, children, ...props }: TextProps<T>,
 ) {
   const renderedTag = tag || appearanceToTag[appearance || 'body2']
@@ -91,3 +92,5 @@ export function Text<T extends SupportedTags>(
     children,
   )
 }
+
+export const Text = withRef(_Text)

package/src/components/Textarea.tsx

@@ -1,12 +1,17 @@
+import React from 'react'
 import { ControlledTextarea, WithColorScheme } from '../types'
+import { withRef } from '../utils/react'
 import { CitricComponent } from './CitricComponent'
 
 export interface BaseTextareaProps extends WithColorScheme {
   value?: string,
   onChange?: (value: string) => void,
+  ref?: React.MutableRefObject<HTMLTextAreaElement | null>,
 }
 
 export type TextareaProps = ControlledTextarea & BaseTextareaProps
 
-export const Textarea = ({ value, onChange, ...props }: TextareaProps) =>
+export const _Textarea = ({ value, onChange, ...props }: TextareaProps) =>
   <CitricComponent tag="textarea" component="textarea" value={value} onChange={e => onChange?.(e.target.value)} {...props} />
+
+export const Textarea = withRef(_Textarea)

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
+}