@docyrus/shadcn 1.1.0 → 1.2.0

package/dist/radix-vega/editable.js

@@ -0,0 +1,684 @@
+import { useDirection } from '@radix-ui/react-direction';
+import { Slot } from '@radix-ui/react-slot';
+import * as React6 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as ReactDOM from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React6.useCallback(composeRefs(...refs), refs);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var VisuallyHiddenInput = React6.forwardRef(({ className, control, ...props }, ref) => {
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: cn(
+        "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0",
+        "[clip:rect(0,0,0,0)]",
+        className
+      ),
+      ...props
+    }
+  );
+  if (control) {
+    return ReactDOM.createPortal(input, control);
+  }
+  return input;
+});
+VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React6.useLayoutEffect : React6.useEffect;
+
+// src/hooks/use-as-ref.ts
+function useAsRef(props) {
+  const ref = React6.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+function useLazyRef(fn) {
+  const ref = React6.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var ROOT_NAME = "Editable";
+var LABEL_NAME = "EditableLabel";
+var AREA_NAME = "EditableArea";
+var PREVIEW_NAME = "EditablePreview";
+var INPUT_NAME = "EditableInput";
+var TRIGGER_NAME = "EditableTrigger";
+var TOOLBAR_NAME = "EditableToolbar";
+var CANCEL_NAME = "EditableCancel";
+var SUBMIT_NAME = "EditableSubmit";
+var StoreContext = React6.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React6.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React6.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React6.useCallback(
+    () => selector(store.getState()),
+    [store, selector]
+  );
+  return React6.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var EditableContext = React6.createContext(null);
+function useEditableContext(consumerName) {
+  const context = React6.useContext(EditableContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Editable(props) {
+  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 = React6.useId();
+  const rootId = id ?? instanceId;
+  const inputId = React6.useId();
+  const labelId = React6.useId();
+  const dir = useDirection(dirProp);
+  const previousValueRef = React6.useRef(defaultValue);
+  const [formTrigger, setFormTrigger] = React6.useState(
+    null
+  );
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  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 = React6.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        if (key === "value" && typeof value2 === "string") {
+          stateRef.current.value = value2;
+          propsRef.current.onValueChange?.(value2);
+        } else if (key === "editing" && typeof value2 === "boolean") {
+          stateRef.current.editing = value2;
+          propsRef.current.onEditingChange?.(value2);
+        } else {
+          stateRef.current[key] = value2;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  const value = useStore((state) => state.value, store);
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (editingProp !== void 0) {
+      store.setState("editing", editingProp);
+    }
+  }, [editingProp]);
+  const onCancel = React6.useCallback(() => {
+    const prevValue = previousValueRef.current;
+    store.setState("value", prevValue);
+    store.setState("editing", false);
+    propsRef.current.onCancel?.();
+  }, [store, propsRef]);
+  const onEdit = React6.useCallback(() => {
+    const currentValue = store.getState().value;
+    previousValueRef.current = currentValue;
+    store.setState("editing", true);
+    propsRef.current.onEdit?.();
+  }, [store, propsRef]);
+  const onSubmit = React6.useCallback(
+    (newValue) => {
+      store.setState("value", newValue);
+      store.setState("editing", false);
+      propsRef.current.onSubmit?.(newValue);
+    },
+    [store, propsRef]
+  );
+  const contextValue = React6.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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(EditableContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        "data-slot": "editable",
+        ...rootProps,
+        id,
+        ref: composedRef,
+        className: cn("flex min-w-0 flex-col gap-2", className)
+      }
+    ),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) });
+}
+function EditableLabel(props) {
+  const { asChild, className, children, ref, ...labelProps } = props;
+  const context = useEditableContext(LABEL_NAME);
+  const LabelPrimitive = asChild ? Slot : "label";
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive,
+    {
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-invalid": context.invalid ? "" : void 0,
+      "data-required": context.required ? "" : void 0,
+      "data-slot": "editable-label",
+      ...labelProps,
+      ref,
+      id: context.labelId,
+      htmlFor: context.inputId,
+      className: cn(
+        "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-required:after:ml-0.5 data-required:after:text-destructive data-required:after:content-['*']",
+        className
+      ),
+      children
+    }
+  );
+}
+function EditableArea(props) {
+  const { asChild, className, ref, ...areaProps } = props;
+  const context = useEditableContext(AREA_NAME);
+  const editing = useStore((state) => state.editing);
+  const AreaPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    AreaPrimitive,
+    {
+      role: "group",
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-editing": editing ? "" : void 0,
+      "data-slot": "editable-area",
+      dir: context.dir,
+      ...areaProps,
+      ref,
+      className: cn(
+        "relative inline-block min-w-0 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )
+    }
+  );
+}
+function EditablePreview(props) {
+  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 = React6.useCallback(() => {
+    if (context.disabled || context.readOnly) return;
+    context.onEdit();
+  }, [context.onEdit, context.disabled, context.readOnly]);
+  const onClick = React6.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented || context.triggerMode !== "click") return;
+      onTrigger();
+    },
+    [propsRef, onTrigger, context.triggerMode]
+  );
+  const onDoubleClick = React6.useCallback(
+    (event) => {
+      propsRef.current.onDoubleClick?.(event);
+      if (event.defaultPrevented || context.triggerMode !== "dblclick") return;
+      onTrigger();
+    },
+    [propsRef, onTrigger, context.triggerMode]
+  );
+  const onFocus = React6.useCallback(
+    (event) => {
+      propsRef.current.onFocus?.(event);
+      if (event.defaultPrevented || context.triggerMode !== "focus") return;
+      onTrigger();
+    },
+    [propsRef, onTrigger, context.triggerMode]
+  );
+  const onKeyDown = React6.useCallback(
+    (event) => {
+      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 ? Slot : "div";
+  if (editing || context.readOnly) return null;
+  return /* @__PURE__ */ jsx(
+    PreviewPrimitive,
+    {
+      role: "button",
+      "aria-disabled": context.disabled || context.readOnly,
+      "data-empty": !value ? "" : void 0,
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-readonly": context.readOnly ? "" : void 0,
+      "data-slot": "editable-preview",
+      tabIndex: context.disabled || context.readOnly ? void 0 : 0,
+      ...previewProps,
+      ref,
+      onClick,
+      onDoubleClick,
+      onFocus,
+      onKeyDown,
+      className: cn(
+        "cursor-text truncate rounded-sm border border-transparent py-1 text-base focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-readonly:cursor-default data-empty:text-muted-foreground data-disabled:opacity-50 md:text-sm",
+        className
+      ),
+      children: value || context.placeholder
+    }
+  );
+}
+function EditableInput(props) {
+  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 = React6.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 = React6.useCallback(
+    (target) => {
+      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 = React6.useCallback(
+    (event) => {
+      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 = React6.useCallback(
+    (event) => {
+      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 = React6.useCallback(
+    (event) => {
+      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 ? Slot : "input";
+  if (!editing && !isReadOnly) return null;
+  return /* @__PURE__ */ jsx(
+    InputPrimitive,
+    {
+      "aria-required": isRequired,
+      "aria-invalid": context.invalid,
+      "data-slot": "editable-input",
+      dir: context.dir,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      ...inputProps,
+      id: context.inputId,
+      "aria-labelledby": context.labelId,
+      ref: composedRef,
+      maxLength,
+      placeholder: context.placeholder,
+      value,
+      onBlur,
+      onChange,
+      onKeyDown,
+      className: cn(
+        "flex rounded-sm border border-input bg-transparent py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        context.autosize ? "w-auto" : "w-full",
+        className
+      )
+    }
+  );
+}
+function EditableTrigger(props) {
+  const { asChild, forceMount = false, ref, ...triggerProps } = props;
+  const context = useEditableContext(TRIGGER_NAME);
+  const editing = useStore((state) => state.editing);
+  const onTrigger = React6.useCallback(() => {
+    if (context.disabled || context.readOnly) return;
+    context.onEdit();
+  }, [context.disabled, context.readOnly, context.onEdit]);
+  const TriggerPrimitive = asChild ? Slot : "button";
+  if (!forceMount && (editing || context.readOnly)) return null;
+  return /* @__PURE__ */ jsx(
+    TriggerPrimitive,
+    {
+      type: "button",
+      "aria-controls": context.rootId,
+      "aria-disabled": context.disabled || context.readOnly,
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-readonly": context.readOnly ? "" : void 0,
+      "data-slot": "editable-trigger",
+      ...triggerProps,
+      ref,
+      onClick: context.triggerMode === "click" ? onTrigger : void 0,
+      onDoubleClick: context.triggerMode === "dblclick" ? onTrigger : void 0
+    }
+  );
+}
+function EditableToolbar(props) {
+  const {
+    asChild,
+    className,
+    orientation = "horizontal",
+    ref,
+    ...toolbarProps
+  } = props;
+  const context = useEditableContext(TOOLBAR_NAME);
+  const ToolbarPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive,
+    {
+      role: "toolbar",
+      "aria-controls": context.rootId,
+      "aria-orientation": orientation,
+      "data-slot": "editable-toolbar",
+      dir: context.dir,
+      ...toolbarProps,
+      ref,
+      className: cn(
+        "flex items-center gap-2",
+        orientation === "vertical" && "flex-col",
+        className
+      )
+    }
+  );
+}
+function EditableCancel(props) {
+  const { onClick: onClickProp, asChild, ref, ...cancelProps } = props;
+  const context = useEditableContext(CANCEL_NAME);
+  const editing = useStore((state) => state.editing);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const onClick = React6.useCallback(
+    (event) => {
+      if (context.disabled || context.readOnly) return;
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.onCancel();
+    },
+    [propsRef, context.onCancel, context.disabled, context.readOnly]
+  );
+  const CancelPrimitive = asChild ? Slot : "button";
+  if (!editing && !context.readOnly) return null;
+  return /* @__PURE__ */ jsx(
+    CancelPrimitive,
+    {
+      type: "button",
+      "aria-controls": context.rootId,
+      "data-slot": "editable-cancel",
+      ...cancelProps,
+      onClick,
+      ref
+    }
+  );
+}
+function EditableSubmit(props) {
+  const { onClick: onClickProp, asChild, ref, ...submitProps } = props;
+  const context = useEditableContext(SUBMIT_NAME);
+  const value = useStore((state) => state.value);
+  const editing = useStore((state) => state.editing);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const onClick = React6.useCallback(
+    (event) => {
+      if (context.disabled || context.readOnly) return;
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.onSubmit(value);
+    },
+    [propsRef, context.onSubmit, value, context.disabled, context.readOnly]
+  );
+  const SubmitPrimitive = asChild ? Slot : "button";
+  if (!editing && !context.readOnly) return null;
+  return /* @__PURE__ */ jsx(
+    SubmitPrimitive,
+    {
+      type: "button",
+      "aria-controls": context.rootId,
+      "data-slot": "editable-submit",
+      ...submitProps,
+      ref,
+      onClick
+    }
+  );
+}
+
+export { Editable, EditableArea, EditableCancel, EditableInput, EditableLabel, EditablePreview, EditableSubmit, EditableToolbar, EditableTrigger, useStore as useEditable };
+//# sourceMappingURL=editable.js.map
+//# sourceMappingURL=editable.js.map