editable

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import * as React from "react";
6import { useComposedRefs } from "@/lib/compose-refs";
7import { cn } from "@/lib/utils";
8import { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
9import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
10import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
11import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
12import { useDirection } from "@/registry/bases/base/ui/direction";
13 
14const ROOT_NAME = "Editable";
15const LABEL_NAME = "EditableLabel";
16const AREA_NAME = "EditableArea";
17const PREVIEW_NAME = "EditablePreview";
18const INPUT_NAME = "EditableInput";
19const TRIGGER_NAME = "EditableTrigger";
20const TOOLBAR_NAME = "EditableToolbar";
21const CANCEL_NAME = "EditableCancel";
22const SUBMIT_NAME = "EditableSubmit";
23 
24type Direction = "ltr" | "rtl";
25 
26type RootElement = React.ComponentRef<typeof Editable>;
27 
28interface StoreState {
29  value: string;
30  editing: boolean;
31}
32 
33interface Store {
34  subscribe: (callback: () => void) => () => void;
35  getState: () => StoreState;
36  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
37  notify: () => void;
38}
39 
40const StoreContext = React.createContext<Store | null>(null);
41 
42function useStoreContext(consumerName: string) {
43  const context = React.useContext(StoreContext);
44  if (!context) {
45    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
46  }
47  return context;
48}
49 
50function useStore<T>(
51  selector: (state: StoreState) => T,
52  ogStore?: Store | null,
53): T {
54  const contextStore = React.useContext(StoreContext);
55 
56  const store = ogStore ?? contextStore;
57 
58  if (!store) {
59    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
60  }
61 
62  const getSnapshot = React.useCallback(
63    () => selector(store.getState()),
64    [store, selector],
65  );
66 
67  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
68}
69 
70interface EditableContextValue {
71  rootId: string;
72  inputId: string;
73  labelId: string;
74  defaultValue: string;
75  onCancel: () => void;
76  onEdit: () => void;
77  onSubmit: (value: string) => void;
78  onEnterKeyDown?: (event: KeyboardEvent) => void;
79  onEscapeKeyDown?: (event: KeyboardEvent) => void;
80  dir?: Direction;
81  maxLength?: number;
82  placeholder?: string;
83// … truncated