@yamada-ui/editable 0.1.0

package/dist/editable.js

@@ -0,0 +1,450 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/editable.tsx
+var editable_exports = {};
+__export(editable_exports, {
+  Editable: () => Editable,
+  EditableInput: () => EditableInput,
+  EditablePreview: () => EditablePreview,
+  EditableTextarea: () => EditableTextarea,
+  useEditable: () => useEditable,
+  useEditableControl: () => useEditableControl
+});
+module.exports = __toCommonJS(editable_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_focus = require("@yamada-ui/use-focus");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var useEditable = (props) => {
+  const {
+    id,
+    placeholder,
+    defaultValue,
+    required,
+    disabled,
+    readOnly,
+    startWithEditView,
+    isPreviewFocusable = true,
+    submitOnBlur = true,
+    selectAllOnFocus = true,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)(props);
+  rest.onEdit = (0, import_utils.useCallbackRef)(rest.onEdit);
+  const [isEditing, setIsEditing] = (0, import_react.useState)(!!startWithEditView && !disabled);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    defaultValue: defaultValue || "",
+    value: rest.value,
+    onChange: rest.onChange
+  });
+  const isInteractive = !isEditing && !disabled;
+  const isValueEmpty = value.length === 0;
+  const [prevValue, setPrevValue] = (0, import_react.useState)(value);
+  const inputRef = (0, import_react.useRef)(null);
+  const previewRef = (0, import_react.useRef)(null);
+  const editRef = (0, import_react.useRef)(null);
+  const cancelRef = (0, import_react.useRef)(null);
+  const submitRef = (0, import_react.useRef)(null);
+  (0, import_use_focus.useFocusOnPointerDown)({
+    ref: inputRef,
+    enabled: isEditing,
+    elements: [cancelRef, submitRef]
+  });
+  (0, import_utils.useSafeLayoutEffect)(() => {
+    var _a, _b;
+    if (!isEditing)
+      return;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    if (selectAllOnFocus)
+      (_b = inputRef.current) == null ? void 0 : _b.select();
+  }, []);
+  (0, import_utils.useUpdateEffect)(() => {
+    var _a, _b, _c, _d;
+    if (!isEditing) {
+      (_a = editRef.current) == null ? void 0 : _a.focus();
+      return;
+    }
+    (_b = inputRef.current) == null ? void 0 : _b.focus();
+    if (selectAllOnFocus)
+      (_c = inputRef.current) == null ? void 0 : _c.select();
+    (_d = rest.onEdit) == null ? void 0 : _d.call(rest);
+  }, [isEditing, rest.onEdit, selectAllOnFocus]);
+  (0, import_react.useEffect)(() => {
+    if (isEditing)
+      return;
+    const el = inputRef.current;
+    const activeEl = el == null ? void 0 : el.ownerDocument.activeElement;
+    if (activeEl === el)
+      el == null ? void 0 : el.blur();
+  }, [isEditing]);
+  const onChange = (0, import_react.useCallback)(
+    (ev) => setValue(ev.currentTarget.value),
+    [setValue]
+  );
+  const onUpdatePrevValue = (0, import_react.useCallback)(() => setPrevValue(value), [value]);
+  const onEdit = (0, import_react.useCallback)(() => {
+    if (isInteractive)
+      setIsEditing(true);
+  }, [isInteractive]);
+  const onCancel = (0, import_react.useCallback)(() => {
+    var _a;
+    setIsEditing(false);
+    setValue(prevValue);
+    (_a = rest.onCancel) == null ? void 0 : _a.call(rest, prevValue);
+  }, [prevValue, rest, setValue]);
+  const onSubmit = (0, import_react.useCallback)(() => {
+    var _a;
+    setIsEditing(false);
+    setPrevValue(value);
+    (_a = rest.onSubmit) == null ? void 0 : _a.call(rest, value);
+  }, [rest, value]);
+  const onKeyDown = (0, import_react.useCallback)(
+    (ev) => {
+      if (ev.key !== "Escape" && ev.key !== "Enter")
+        return;
+      ev.preventDefault();
+      if (ev.key === "Escape") {
+        onCancel();
+      } else {
+        const { shiftKey, metaKey } = ev;
+        if (!shiftKey && !metaKey)
+          onSubmit();
+      }
+    },
+    [onCancel, onSubmit]
+  );
+  const onKeyDownWithoutSubmit = (0, import_react.useCallback)(
+    (ev) => {
+      if (ev.key !== "Escape")
+        return;
+      ev.preventDefault();
+      onCancel();
+    },
+    [onCancel]
+  );
+  const onBlur = (0, import_react.useCallback)(
+    (ev) => {
+      var _a;
+      if (!isEditing)
+        return;
+      const ownerDocument = ev.currentTarget.ownerDocument;
+      const relatedTarget = (_a = ev.relatedTarget) != null ? _a : ownerDocument.activeElement;
+      const targetIsCancel = (0, import_utils.isContains)(cancelRef.current, relatedTarget);
+      const targetIsSubmit = (0, import_utils.isContains)(submitRef.current, relatedTarget);
+      const isValidBlur = !targetIsCancel && !targetIsSubmit;
+      if (!isValidBlur)
+        return;
+      if (submitOnBlur) {
+        onSubmit();
+      } else {
+        onCancel();
+      }
+    },
+    [isEditing, submitOnBlur, onSubmit, onCancel]
+  );
+  const getPreviewProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, previewRef),
+      hidden: isEditing,
+      tabIndex: isInteractive && isPreviewFocusable ? 0 : void 0,
+      children: isValueEmpty ? placeholder : value,
+      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onEdit, onUpdatePrevValue)
+    }),
+    [
+      isEditing,
+      isInteractive,
+      isPreviewFocusable,
+      isValueEmpty,
+      onEdit,
+      onUpdatePrevValue,
+      placeholder,
+      rest,
+      value
+    ]
+  );
+  const getInputProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, inputRef),
+      id,
+      placeholder,
+      hidden: !isEditing,
+      value,
+      required,
+      disabled,
+      readOnly,
+      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
+      onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
+      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
+      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue)
+    }),
+    [
+      disabled,
+      id,
+      isEditing,
+      onBlur,
+      onChange,
+      onKeyDown,
+      onUpdatePrevValue,
+      placeholder,
+      readOnly,
+      required,
+      rest,
+      value
+    ]
+  );
+  const getTextareaProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, inputRef),
+      id,
+      placeholder,
+      hidden: !isEditing,
+      value,
+      required,
+      disabled,
+      readOnly,
+      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
+      onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
+      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDownWithoutSubmit),
+      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue)
+    }),
+    [
+      disabled,
+      id,
+      isEditing,
+      onBlur,
+      onChange,
+      onKeyDownWithoutSubmit,
+      onUpdatePrevValue,
+      placeholder,
+      readOnly,
+      required,
+      rest,
+      value
+    ]
+  );
+  const getEditProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...(0, import_utils.omitObject)(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: (0, import_utils.mergeRefs)(ref, editRef),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: (0, import_utils.handlerAll)(props2.onClick, onEdit)
+    }),
+    [disabled, onEdit, readOnly, rest]
+  );
+  const getSubmitProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...(0, import_utils.omitObject)(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: (0, import_utils.mergeRefs)(submitRef, ref),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: (0, import_utils.handlerAll)(props2.onClick, onSubmit)
+    }),
+    [disabled, onSubmit, readOnly, rest]
+  );
+  const getCancelProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...(0, import_utils.omitObject)(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: (0, import_utils.mergeRefs)(cancelRef, ref),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: (0, import_utils.handlerAll)(props2.onClick, onCancel)
+    }),
+    [disabled, onCancel, readOnly, rest]
+  );
+  return {
+    isEditing,
+    value,
+    onEdit,
+    onCancel,
+    onSubmit,
+    getPreviewProps,
+    getInputProps,
+    getTextareaProps,
+    getEditProps,
+    getSubmitProps,
+    getCancelProps
+  };
+};
+var useEditableControl = () => {
+  const { isEditing, getEditProps, getCancelProps, getSubmitProps } = useEditableContext();
+  return { isEditing, getEditProps, getCancelProps, getSubmitProps };
+};
+var [EditableProvider, useEditableContext] = (0, import_utils.createContext)({
+  name: "EditableContext",
+  errorMessage: "useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`"
+});
+var Editable = (0, import_core.forwardRef)(
+  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Editable", {
+      focusBorderColor,
+      errorBorderColor,
+      ...props
+    });
+    const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    const {
+      isEditing,
+      getPreviewProps,
+      getInputProps,
+      getTextareaProps,
+      getEditProps,
+      getCancelProps,
+      getSubmitProps,
+      onSubmit,
+      onCancel,
+      onEdit
+    } = useEditable(rest);
+    const cloneChildren = (0, import_utils.runIfFunc)(children, {
+      isEditing,
+      onSubmit,
+      onCancel,
+      onEdit
+    });
+    const css = { ...styles.container };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      EditableProvider,
+      {
+        value: {
+          isEditing,
+          getPreviewProps,
+          getInputProps,
+          getTextareaProps,
+          getEditProps,
+          getCancelProps,
+          getSubmitProps,
+          styles
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_core.ui.div,
+          {
+            ref,
+            className: (0, import_utils.cx)("ui-editable", className),
+            ...(0, import_utils.omitObject)(rest, [
+              "placeholder",
+              "value",
+              "defaultValue",
+              "isInvalid",
+              "isReadOnly",
+              "isRequired",
+              "isDisabled",
+              "startWithEditView",
+              "isPreviewFocusable",
+              "submitOnBlur",
+              "selectAllOnFocus",
+              "onChange",
+              "onCancel",
+              "onSubmit",
+              "onEdit"
+            ]),
+            __css: css,
+            children: cloneChildren
+          }
+        )
+      }
+    );
+  }
+);
+var EditablePreview = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles, getPreviewProps } = useEditableContext();
+    const css = {
+      cursor: "text",
+      display: "inline-block",
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      ...styles.preview
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.span,
+      {
+        className: (0, import_utils.cx)("ui-editable-preview", className),
+        ...getPreviewProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+var EditableInput = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles, getInputProps } = useEditableContext();
+    const css = {
+      outline: 0,
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      ...styles.input
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.input,
+      {
+        className: (0, import_utils.cx)("ui-editable-input", className),
+        ...getInputProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+var EditableTextarea = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles, getTextareaProps } = useEditableContext();
+    const css = {
+      outline: 0,
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      ...styles.textarea
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.textarea,
+      {
+        className: (0, import_utils.cx)("ui-editable-textarea", className),
+        ...getTextareaProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  EditableTextarea,
+  useEditable,
+  useEditableControl
+});

package/dist/editable.mjs

@@ -0,0 +1,16 @@
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  EditableTextarea,
+  useEditable,
+  useEditableControl
+} from "./chunk-VFULS7K5.mjs";
+export {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  EditableTextarea,
+  useEditable,
+  useEditableControl
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Editable, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableTextarea, EditableTextareaProps, UseEditableProps, UseEditableReturn, useEditable, useEditableControl } from './editable.js';
+import '@yamada-ui/core';
+import '@yamada-ui/utils';
+import '@yamada-ui/form-control';
+import 'react';