@stack-spot/citric-react 0.11.1 → 0.13.0

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/index.ts

@@ -20,6 +20,7 @@ export * from './components/FieldGroup'
 export * from './components/Form'
 export * from './components/FormGroup'
 export * from './components/IconBox'
+export * from './components/ImageBox'
 export * from './components/Input'
 export * from './components/layout'
 export * from './components/Link'

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