"use client"; import { Direction as DirectionPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { cn } from "@/lib/utils"; import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; const ROOT_NAME = "Editable"; const LABEL_NAME = "EditableLabel"; const AREA_NAME = "EditableArea"; const PREVIEW_NAME = "EditablePreview"; const INPUT_NAME = "EditableInput"; const TRIGGER_NAME = "EditableTrigger"; const TOOLBAR_NAME = "EditableToolbar"; const CANCEL_NAME = "EditableCancel"; const SUBMIT_NAME = "EditableSubmit"; type Direction = "ltr" | "rtl"; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } type RootElement = React.ComponentRef; type PreviewElement = React.ComponentRef; type SubmitElement = React.ComponentRef; type InputElement = React.ComponentRef; interface StoreState { value: string; editing: boolean; } interface Store { subscribe: (callback: () => void) => () => void; getState: () => StoreState; setState: (key: K, value: StoreState[K]) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore( selector: (state: StoreState) => T, ogStore?: Store | null, ): T { const contextStore = React.useContext(StoreContext); const store = ogStore ?? contextStore; if (!store) { throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``); } const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface EditableContextValue { rootId: string; inputId: string; labelId: string; defaultValue: string; onCancel: () => void; onEdit: () => void; onSubmit: (value: string) => void; onEnterKeyDown?: (event: KeyboardEvent) => void; onEscapeKeyDown?: (event: KeyboardEvent) => void; dir?: Direction; maxLength?: number; placeholder?: string; triggerMode: "click" | "dblclick" | "focus"; autosize: boolean; disabled?: boolean; readOnly?: boolean; required?: boolean; invalid?: boolean; } const EditableContext = React.createContext(null); function useEditableContext(consumerName: string) { const context = React.useContext(EditableContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface EditableProps extends Omit { id?: string; defaultValue?: string; value?: string; onValueChange?: (value: string) => void; defaultEditing?: boolean; editing?: boolean; onEditingChange?: (editing: boolean) => void; onCancel?: () => void; onEdit?: () => void; onSubmit?: (value: string) => void; onEscapeKeyDown?: (event: KeyboardEvent) => void; onEnterKeyDown?: (event: KeyboardEvent) => void; dir?: Direction; maxLength?: number; name?: string; placeholder?: string; triggerMode?: EditableContextValue["triggerMode"]; autosize?: boolean; disabled?: boolean; readOnly?: boolean; required?: boolean; invalid?: boolean; } function Editable(props: EditableProps) { const { value: valueProp, defaultValue = "", defaultEditing, editing: editingProp, onValueChange, onEditingChange, onCancel: onCancelProp, onEdit: onEditProp, onSubmit: onSubmitProp, onEscapeKeyDown, onEnterKeyDown, dir: dirProp, maxLength, name, placeholder, triggerMode = "click", asChild, autosize = false, disabled, required, readOnly, invalid, className, id, ref, ...rootProps } = props; const instanceId = React.useId(); const rootId = id ?? instanceId; const inputId = React.useId(); const labelId = React.useId(); const dir = DirectionPrimitive.useDirection(dirProp); const previousValueRef = React.useRef(defaultValue); const [formTrigger, setFormTrigger] = React.useState( null, ); const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node)); const isFormControl = formTrigger ? !!formTrigger.closest("form") : true; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => ({ value: valueProp ?? defaultValue, editing: editingProp ?? defaultEditing ?? false, })); const propsRef = useAsRef({ onValueChange, onEditingChange, onCancel: onCancelProp, onEdit: onEditProp, onSubmit: onSubmitProp, onEscapeKeyDown, onEnterKeyDown, }); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return; if (key === "value" && typeof value === "string") { stateRef.current.value = value; propsRef.current.onValueChange?.(value); } else if (key === "editing" && typeof value === "boolean") { stateRef.current.editing = value; propsRef.current.onEditingChange?.(value); } else { stateRef.current[key] = value; } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); const value = useStore((state) => state.value, store); useIsomorphicLayoutEffect(() => { if (valueProp !== undefined) { store.setState("value", valueProp); } }, [valueProp]); useIsomorphicLayoutEffect(() => { if (editingProp !== undefined) { store.setState("editing", editingProp); } }, [editingProp]); const onCancel = React.useCallback(() => { const prevValue = previousValueRef.current; store.setState("value", prevValue); store.setState("editing", false); propsRef.current.onCancel?.(); }, [store, propsRef]); const onEdit = React.useCallback(() => { const currentValue = store.getState().value; previousValueRef.current = currentValue; store.setState("editing", true); propsRef.current.onEdit?.(); }, [store, propsRef]); const onSubmit = React.useCallback( (newValue: string) => { store.setState("value", newValue); store.setState("editing", false); propsRef.current.onSubmit?.(newValue); }, [store, propsRef], ); const contextValue = React.useMemo( () => ({ rootId, inputId, labelId, defaultValue, onSubmit, onEdit, onCancel, onEscapeKeyDown, onEnterKeyDown, dir, maxLength, placeholder, triggerMode, autosize, disabled, readOnly, required, invalid, }), [ rootId, inputId, labelId, defaultValue, onSubmit, onCancel, onEdit, onEscapeKeyDown, onEnterKeyDown, dir, maxLength, placeholder, triggerMode, autosize, disabled, required, readOnly, invalid, ], ); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {isFormControl && ( )} ); } interface EditableLabelProps extends React.ComponentProps<"label"> { asChild?: boolean; } function EditableLabel(props: EditableLabelProps) { const { asChild, className, children, ref, ...labelProps } = props; const context = useEditableContext(LABEL_NAME); const LabelPrimitive = asChild ? SlotPrimitive.Slot : "label"; return ( {children} ); } interface EditableAreaProps extends React.ComponentProps<"div"> { asChild?: boolean; } function EditableArea(props: EditableAreaProps) { const { asChild, className, ref, ...areaProps } = props; const context = useEditableContext(AREA_NAME); const editing = useStore((state) => state.editing); const AreaPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } interface EditablePreviewProps extends React.ComponentProps<"div"> { asChild?: boolean; } function EditablePreview(props: EditablePreviewProps) { const { onClick: onClickProp, onDoubleClick: onDoubleClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, asChild, className, ref, ...previewProps } = props; const context = useEditableContext(PREVIEW_NAME); const value = useStore((state) => state.value); const editing = useStore((state) => state.editing); const propsRef = useAsRef({ onClick: onClickProp, onDoubleClick: onDoubleClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, }); const onTrigger = React.useCallback(() => { if (context.disabled || context.readOnly) return; context.onEdit(); }, [context.onEdit, context.disabled, context.readOnly]); const onClick = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onClick?.(event); if (event.defaultPrevented || context.triggerMode !== "click") return; onTrigger(); }, [propsRef, onTrigger, context.triggerMode], ); const onDoubleClick = React.useCallback( (event: React.MouseEvent) => { propsRef.current.onDoubleClick?.(event); if (event.defaultPrevented || context.triggerMode !== "dblclick") return; onTrigger(); }, [propsRef, onTrigger, context.triggerMode], ); const onFocus = React.useCallback( (event: React.FocusEvent) => { propsRef.current.onFocus?.(event); if (event.defaultPrevented || context.triggerMode !== "focus") return; onTrigger(); }, [propsRef, onTrigger, context.triggerMode], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { propsRef.current.onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "Enter") { const nativeEvent = event.nativeEvent; if (context.onEnterKeyDown) { context.onEnterKeyDown(nativeEvent); if (nativeEvent.defaultPrevented) return; } onTrigger(); } }, [propsRef, onTrigger, context.onEnterKeyDown], ); const PreviewPrimitive = asChild ? SlotPrimitive.Slot : "div"; if (editing || context.readOnly) return null; return ( {value || context.placeholder} ); } interface EditableInputProps extends React.ComponentProps<"input"> { asChild?: boolean; maxLength?: number; } function EditableInput(props: EditableInputProps) { const { onBlur: onBlurProp, onChange: onChangeProp, onKeyDown: onKeyDownProp, asChild, className, disabled, readOnly, required, maxLength, ref, ...inputProps } = props; const context = useEditableContext(INPUT_NAME); const store = useStoreContext(INPUT_NAME); const value = useStore((state) => state.value); const editing = useStore((state) => state.editing); const inputRef = React.useRef(null); const composedRef = useComposedRefs(ref, inputRef); const propsRef = useAsRef({ onBlur: onBlurProp, onChange: onChangeProp, onKeyDown: onKeyDownProp, }); const isDisabled = disabled || context.disabled; const isReadOnly = readOnly || context.readOnly; const isRequired = required || context.required; const onAutosize = React.useCallback( (target: InputElement) => { if (!context.autosize) return; if (target instanceof HTMLTextAreaElement) { target.style.height = "0"; target.style.height = `${target.scrollHeight}px`; } else { target.style.width = "0"; target.style.width = `${target.scrollWidth + 4}px`; } }, [context.autosize], ); const onBlur = React.useCallback( (event: React.FocusEvent) => { if (isDisabled || isReadOnly) return; propsRef.current.onBlur?.(event); if (event.defaultPrevented) return; const relatedTarget = event.relatedTarget; const isAction = relatedTarget instanceof HTMLElement && (relatedTarget.closest(`[data-slot="editable-trigger"]`) || relatedTarget.closest(`[data-slot="editable-cancel"]`)); if (!isAction) { context.onSubmit(value); } }, [value, context.onSubmit, propsRef, isDisabled, isReadOnly], ); const onChange = React.useCallback( (event: React.ChangeEvent) => { if (isDisabled || isReadOnly) return; propsRef.current.onChange?.(event); if (event.defaultPrevented) return; store.setState("value", event.target.value); onAutosize(event.target); }, [store, propsRef, onAutosize, isDisabled, isReadOnly], ); const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (isDisabled || isReadOnly) return; propsRef.current.onKeyDown?.(event); if (event.defaultPrevented) return; if (event.key === "Escape") { const nativeEvent = event.nativeEvent; if (context.onEscapeKeyDown) { context.onEscapeKeyDown(nativeEvent); if (nativeEvent.defaultPrevented) return; } context.onCancel(); } else if (event.key === "Enter") { context.onSubmit(value); } }, [ value, context.onSubmit, context.onCancel, context.onEscapeKeyDown, propsRef, isDisabled, isReadOnly, ], ); useIsomorphicLayoutEffect(() => { if (!editing || isDisabled || isReadOnly || !inputRef.current) return; const frameId = window.requestAnimationFrame(() => { if (!inputRef.current) return; inputRef.current.focus(); inputRef.current.select(); onAutosize(inputRef.current); }); return () => { window.cancelAnimationFrame(frameId); }; }, [editing, onAutosize, isDisabled, isReadOnly]); const InputPrimitive = asChild ? SlotPrimitive.Slot : "input"; if (!editing && !isReadOnly) return null; return ( ); } interface EditableTriggerProps extends React.ComponentProps<"button"> { asChild?: boolean; forceMount?: boolean; } function EditableTrigger(props: EditableTriggerProps) { const { asChild, forceMount = false, ref, ...triggerProps } = props; const context = useEditableContext(TRIGGER_NAME); const editing = useStore((state) => state.editing); const onTrigger = React.useCallback(() => { if (context.disabled || context.readOnly) return; context.onEdit(); }, [context.disabled, context.readOnly, context.onEdit]); const TriggerPrimitive = asChild ? SlotPrimitive.Slot : "button"; if (!forceMount && (editing || context.readOnly)) return null; return ( ); } interface EditableToolbarProps extends React.ComponentProps<"div"> { asChild?: boolean; orientation?: "horizontal" | "vertical"; } function EditableToolbar(props: EditableToolbarProps) { const { asChild, className, orientation = "horizontal", ref, ...toolbarProps } = props; const context = useEditableContext(TOOLBAR_NAME); const ToolbarPrimitive = asChild ? SlotPrimitive.Slot : "div"; return (

Editable

Instalação

Dependências

Registry dependencies