4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3332,// Inline Edit from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { Slot, Slottable } from '@radix-ui/react-slot'; import { Check, Pencil, X } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; import { Input } from '@/registry/hirael/bases/radix/ui/input'; import { Spinner } from '@/registry/hirael/bases/radix/ui/spinner'; import { Textarea } from '@/registry/hirael/bases/radix/ui/textarea'; import { composeRefs } from '@/registry/hirael/bases/radix/components/compose-refs'; interface InlineEditCtx { value: string; draft: string; setDraft: (draft: string) => void; editing: boolean; pending: boolean; error: string | null; errorId: string; disabled: boolean; placeholder?: string; selectOnFocus: boolean; submitOnBlur: boolean; startEditing: () => void; submit: () => void; cancel: () => void; previewRef: React.RefObject; } const InlineEditContext = React.createContext(null); const useInlineEdit = () => { const ctx = React.useContext(InlineEditContext); if (!ctx) { throw new Error('InlineEdit compound parts must be used inside '); } return ctx; }; export interface InlineEditProps extends Omit, 'defaultValue' | 'onSubmit' | 'onCancel'> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Called with the draft when a submit passes validation. Return a promise to show a pending state. */ onSubmit?: (value: string) => void | Promise; onCancel?: () => void; editing?: boolean; defaultEditing?: boolean; onEditingChange?: (editing: boolean) => void; submitOnBlur?: boolean; selectOnFocus?: boolean; /** Return an error message to block the submit, or null to allow it. */ validate?: (value: string) => string | null; required?: boolean; /** Shown when `required` blocks an empty submit. */ requiredMessage?: string; /** Shown when `onSubmit` rejects without an error message of its own. */ submitErrorMessage?: string; disabled?: boolean; placeholder?: string; } const InlineEdit = ({ value: valueProp, defaultValue = '', onValueChange, onSubmit, onCancel, editing: editingProp, defaultEditing = false, onEditingChange, submitOnBlur = true, selectOnFocus = true, validate, required = false, requiredMessage = 'This field is required', submitErrorMessage = 'Could not save', disabled = false, placeholder, className, children, ...props }: InlineEditProps) => { const errorId = React.useId(); const [internalValue, setInternalValue] = React.useState(defaultValue); const value = valueProp ?? internalValue; const [internalEditing, setInternalEditing] = React.useState(defaultEditing); const editing = editingProp ?? internalEditing; const [draft, setDraft] = React.useState(value); const [error, setError] = React.useState(null); const [pending, setPending] = React.useState(false); const setValue = React.useCallback( (next: string) => { if (valueProp === undefined) setInternalValue(next); onValueChange?.(next); }, [valueProp, onValueChange], ); const setEditing = React.useCallback( (next: boolean) => { if (editingProp === undefined) setInternalEditing(next); onEditingChange?.(next); }, [editingProp, onEditingChange], ); const [prevEditing, setPrevEditing] = React.useState(editing); if (editing !== prevEditing) { setPrevEditing(editing); if (editing) { setDraft(value); setError(null); } } const startEditing = React.useCallback(() => { if (disabled) return; setEditing(true); }, [disabled, setEditing]); const submit = React.useCallback(() => { if (pending) return; const next = draft; const message = required && next.trim() === '' ? requiredMessage : (validate?.(next) ?? null); if (message) { setError(message); return; } setError(null); const result = onSubmit?.(next); if (result instanceof Promise) { setPending(true); result .then(() => { setValue(next); setEditing(false); }) .catch((reason: unknown) => { setError(reason instanceof Error && reason.message ? reason.message : submitErrorMessage); }) .finally(() => setPending(false)); } else { setValue(next); setEditing(false); } }, [pending, draft, required, requiredMessage, submitErrorMessage, validate, onSubmit, setValue, setEditing]); const cancel = React.useCallback(() => { if (pending) return; // Draft and error reset when editing next starts, so there's nothing to restore here. setEditing(false); onCancel?.(); }, [pending, setEditing, onCancel]); const previewRef = React.useRef(null); const wasEditingRef = React.useRef(editing); // The editor unmounts on exit and drops focus to ; restore it unless // blur-submit already moved focus elsewhere. React.useEffect(() => { const wasEditing = wasEditingRef.current; wasEditingRef.current = editing; if (!wasEditing || editing) return; const active = document.activeElement; if (active === null || active === document.body) { previewRef.current?.focus({ preventScroll: true }); } }, [editing]); const ctx = React.useMemo( () => ({ value, draft, setDraft, editing, pending, error, errorId, disabled, placeholder, selectOnFocus, submitOnBlur, startEditing, submit, cancel, previewRef, }), [ value, draft, editing, pending, error, errorId, disabled, placeholder, selectOnFocus, submitOnBlur, startEditing, submit, cancel, ], ); return (

{children} {editing && error && (

{error}

)}

); }; export interface InlineEditPreviewProps extends React.ComponentProps<'span'> { asChild?: boolean; } const InlineEditPreview = ({ asChild = false, className, children, ref, onClick, onKeyDown, ...props }: InlineEditPreviewProps) => { const { value, editing, disabled, placeholder, startEditing, previewRef } = useInlineEdit(); // Composed in the callback, not during render: previewRef arrives through context, // where the ref lint rule can't see that composeRefs never reads it. const composedRef = React.useCallback( (node: HTMLSpanElement | null) => composeRefs(previewRef, ref)(node), [previewRef, ref], ); if (editing) return null; const content = ( <> {value === '' ? {placeholder} : value} ); const Comp = asChild ? Slot : 'span'; return ( ) => { onClick?.(event); if (!event.defaultPrevented) startEditing(); }} onKeyDown={(event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || (event.key !== 'Enter' && event.key !== ' ')) return; event.preventDefault(); startEditing(); }} className={cn( 'group/preview inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-0.5 transition-colors outline-none', 'hover:bg-accent hover:text-accent-foreground', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', disabled && 'pointer-events-none opacity-50', className, )} > {asChild && {children}} {content} ); }; type FieldElement = HTMLInputElement | HTMLTextAreaElement; interface FieldHandlers { onKeyDown?: React.KeyboardEventHandler; onBlur?: React.FocusEventHandler; onChange?: React.ChangeEventHandler; ref?: React.Ref; } const useInlineEditField = ( { onKeyDown, onBlur, onChange, ref }: FieldHandlers, isSubmitKey: (event: React.KeyboardEvent) => boolean, ) => { const ctx = useInlineEdit(); // Once per node: an inline consumer ref re-invokes this every render, and // re-selecting mid-typing would swallow the next keystroke. const focusedRef = React.useRef(null); const focusOnMount = React.useCallback( (node: T | null) => { if (!node || node === focusedRef.current) return; focusedRef.current = node; node.focus(); if (ctx.selectOnFocus) node.select(); }, [ctx.selectOnFocus], ); const composedRef = React.useCallback((node: T | null) => composeRefs(focusOnMount, ref)(node), [focusOnMount, ref]); return { editing: ctx.editing, fieldProps: { value: ctx.draft, placeholder: ctx.placeholder, disabled: ctx.disabled || ctx.pending, 'aria-invalid': ctx.error ? true : undefined, 'aria-describedby': ctx.error ? ctx.errorId : undefined, onChange: (event: React.ChangeEvent) => { onChange?.(event); if (!event.defaultPrevented) ctx.setDraft(event.target.value); }, onKeyDown: (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229) return; if (isSubmitKey(event)) { event.preventDefault(); ctx.submit(); } else if (event.key === 'Escape') { event.preventDefault(); ctx.cancel(); } }, onBlur: (event: React.FocusEvent) => { onBlur?.(event); if (ctx.submitOnBlur && !ctx.pending) ctx.submit(); }, ref: composedRef, }, }; }; const InlineEditInput = ({ className, onKeyDown, onBlur, onChange, ref, ...props }: React.ComponentProps) => { const { editing, fieldProps } = useInlineEditField( { onKeyDown, onBlur, onChange, ref }, (event) => event.key === 'Enter', ); if (!editing) return null; return ; }; const InlineEditTextarea = ({ onKeyDown, onBlur, onChange, ref, ...props }: React.ComponentProps) => { const { editing, fieldProps } = useInlineEditField( { onKeyDown, onBlur, onChange, ref }, (event) => event.key === 'Enter' && (event.metaKey || event.ctrlKey), ); if (!editing) return null; return

;
};

export interface InlineEditControlsProps extends React.ComponentProps<'div'> {
  submitLabel?: string;
  cancelLabel?: string;
}

const InlineEditControls = ({
  submitLabel = 'Save',
  cancelLabel = 'Cancel',
  className,
  children,
  ...props
}: InlineEditControlsProps) => {
  const { editing, pending, submit, cancel } = useInlineEdit();

if (!editing) return null;

return (
    <div
      data-slot="inline-edit-controls"
      // Prevent the editor from blurring so blur-submit cannot double-fire.
      onMouseDown={(event) => event.preventDefault()}
      className={cn('flex items-center gap-1', className)}
      {...props}
    >
      {children ?? (
        <>
          <Button
            type="button"
            variant="default"
            size="icon"
            aria-label={submitLabel}
            disabled={pending}
            onClick={() => submit()}
            className="size-8"
          >
            {pending ? <Spinner /> : <Check />}
          </Button>
          <Button
            type="button"
            variant="outline"
            size="icon"
            aria-label={cancelLabel}
            disabled={pending}
            onClick={() => cancel()}
            className="size-8"
          >
            <X />
          </Button>
        </>
      )}
    </div>
  );
};

export { InlineEdit, InlineEditPreview, InlineEditInput, InlineEditTextarea, InlineEditControls };
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["button","https://hirael.com/r/compose-refs.json","input","https://hirael.com/r/spinner.json","textarea"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/inline-edit.tsx","content":"$50","type":"registry:component","target":"components/inline-edit.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>