@yamada-ui/editable 0.0.0-dev-20230603042803

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/editable
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/editable
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/editable
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/editable
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-VFULS7K5.mjs

@@ -0,0 +1,446 @@
+// src/editable.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import {
+  formControlProperties,
+  useFormControlProps
+} from "@yamada-ui/form-control";
+import { useControllableState } from "@yamada-ui/use-controllable-state";
+import { useFocusOnPointerDown } from "@yamada-ui/use-focus";
+import {
+  createContext,
+  cx,
+  omitObject,
+  runIfFunc,
+  useCallbackRef,
+  useSafeLayoutEffect,
+  useUpdateEffect,
+  isContains,
+  handlerAll,
+  mergeRefs,
+  pickObject
+} from "@yamada-ui/utils";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var useEditable = (props) => {
+  const {
+    id,
+    placeholder,
+    defaultValue,
+    required,
+    disabled,
+    readOnly,
+    startWithEditView,
+    isPreviewFocusable = true,
+    submitOnBlur = true,
+    selectAllOnFocus = true,
+    ...rest
+  } = useFormControlProps(props);
+  rest.onEdit = useCallbackRef(rest.onEdit);
+  const [isEditing, setIsEditing] = useState(!!startWithEditView && !disabled);
+  const [value, setValue] = useControllableState({
+    defaultValue: defaultValue || "",
+    value: rest.value,
+    onChange: rest.onChange
+  });
+  const isInteractive = !isEditing && !disabled;
+  const isValueEmpty = value.length === 0;
+  const [prevValue, setPrevValue] = useState(value);
+  const inputRef = useRef(null);
+  const previewRef = useRef(null);
+  const editRef = useRef(null);
+  const cancelRef = useRef(null);
+  const submitRef = useRef(null);
+  useFocusOnPointerDown({
+    ref: inputRef,
+    enabled: isEditing,
+    elements: [cancelRef, submitRef]
+  });
+  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();
+  }, []);
+  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]);
+  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 = useCallback(
+    (ev) => setValue(ev.currentTarget.value),
+    [setValue]
+  );
+  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value]);
+  const onEdit = useCallback(() => {
+    if (isInteractive)
+      setIsEditing(true);
+  }, [isInteractive]);
+  const onCancel = useCallback(() => {
+    var _a;
+    setIsEditing(false);
+    setValue(prevValue);
+    (_a = rest.onCancel) == null ? void 0 : _a.call(rest, prevValue);
+  }, [prevValue, rest, setValue]);
+  const onSubmit = useCallback(() => {
+    var _a;
+    setIsEditing(false);
+    setPrevValue(value);
+    (_a = rest.onSubmit) == null ? void 0 : _a.call(rest, value);
+  }, [rest, value]);
+  const onKeyDown = 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 = useCallback(
+    (ev) => {
+      if (ev.key !== "Escape")
+        return;
+      ev.preventDefault();
+      onCancel();
+    },
+    [onCancel]
+  );
+  const onBlur = useCallback(
+    (ev) => {
+      var _a;
+      if (!isEditing)
+        return;
+      const ownerDocument = ev.currentTarget.ownerDocument;
+      const relatedTarget = (_a = ev.relatedTarget) != null ? _a : ownerDocument.activeElement;
+      const targetIsCancel = isContains(cancelRef.current, relatedTarget);
+      const targetIsSubmit = isContains(submitRef.current, relatedTarget);
+      const isValidBlur = !targetIsCancel && !targetIsSubmit;
+      if (!isValidBlur)
+        return;
+      if (submitOnBlur) {
+        onSubmit();
+      } else {
+        onCancel();
+      }
+    },
+    [isEditing, submitOnBlur, onSubmit, onCancel]
+  );
+  const getPreviewProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref: mergeRefs(ref, previewRef),
+      hidden: isEditing,
+      tabIndex: isInteractive && isPreviewFocusable ? 0 : void 0,
+      children: isValueEmpty ? placeholder : value,
+      onFocus: handlerAll(props2.onFocus, onEdit, onUpdatePrevValue)
+    }),
+    [
+      isEditing,
+      isInteractive,
+      isPreviewFocusable,
+      isValueEmpty,
+      onEdit,
+      onUpdatePrevValue,
+      placeholder,
+      rest,
+      value
+    ]
+  );
+  const getInputProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref: mergeRefs(ref, inputRef),
+      id,
+      placeholder,
+      hidden: !isEditing,
+      value,
+      required,
+      disabled,
+      readOnly,
+      onBlur: handlerAll(props2.onBlur, onBlur),
+      onChange: handlerAll(props2.onChange, onChange),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue)
+    }),
+    [
+      disabled,
+      id,
+      isEditing,
+      onBlur,
+      onChange,
+      onKeyDown,
+      onUpdatePrevValue,
+      placeholder,
+      readOnly,
+      required,
+      rest,
+      value
+    ]
+  );
+  const getTextareaProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref: mergeRefs(ref, inputRef),
+      id,
+      placeholder,
+      hidden: !isEditing,
+      value,
+      required,
+      disabled,
+      readOnly,
+      onBlur: handlerAll(props2.onBlur, onBlur),
+      onChange: handlerAll(props2.onChange, onChange),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDownWithoutSubmit),
+      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue)
+    }),
+    [
+      disabled,
+      id,
+      isEditing,
+      onBlur,
+      onChange,
+      onKeyDownWithoutSubmit,
+      onUpdatePrevValue,
+      placeholder,
+      readOnly,
+      required,
+      rest,
+      value
+    ]
+  );
+  const getEditProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...omitObject(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: mergeRefs(ref, editRef),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: handlerAll(props2.onClick, onEdit)
+    }),
+    [disabled, onEdit, readOnly, rest]
+  );
+  const getSubmitProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...omitObject(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: mergeRefs(submitRef, ref),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: handlerAll(props2.onClick, onSubmit)
+    }),
+    [disabled, onSubmit, readOnly, rest]
+  );
+  const getCancelProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ...omitObject(rest, ["value", "onChange", "onCancel", "onSubmit", "onEdit"]),
+      ref: mergeRefs(cancelRef, ref),
+      type: "button",
+      disabled,
+      readOnly,
+      onClick: 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] = createContext({
+  name: "EditableContext",
+  errorMessage: "useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`"
+});
+var Editable = forwardRef(
+  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle("Editable", {
+      focusBorderColor,
+      errorBorderColor,
+      ...props
+    });
+    const { className, children, ...rest } = omitThemeProps(mergedProps);
+    const {
+      isEditing,
+      getPreviewProps,
+      getInputProps,
+      getTextareaProps,
+      getEditProps,
+      getCancelProps,
+      getSubmitProps,
+      onSubmit,
+      onCancel,
+      onEdit
+    } = useEditable(rest);
+    const cloneChildren = runIfFunc(children, {
+      isEditing,
+      onSubmit,
+      onCancel,
+      onEdit
+    });
+    const css = { ...styles.container };
+    return /* @__PURE__ */ jsx(
+      EditableProvider,
+      {
+        value: {
+          isEditing,
+          getPreviewProps,
+          getInputProps,
+          getTextareaProps,
+          getEditProps,
+          getCancelProps,
+          getSubmitProps,
+          styles
+        },
+        children: /* @__PURE__ */ jsx(
+          ui.div,
+          {
+            ref,
+            className: cx("ui-editable", className),
+            ...omitObject(rest, [
+              "placeholder",
+              "value",
+              "defaultValue",
+              "isInvalid",
+              "isReadOnly",
+              "isRequired",
+              "isDisabled",
+              "startWithEditView",
+              "isPreviewFocusable",
+              "submitOnBlur",
+              "selectAllOnFocus",
+              "onChange",
+              "onCancel",
+              "onSubmit",
+              "onEdit"
+            ]),
+            __css: css,
+            children: cloneChildren
+          }
+        )
+      }
+    );
+  }
+);
+var EditablePreview = 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__ */ jsx(
+      ui.span,
+      {
+        className: cx("ui-editable-preview", className),
+        ...getPreviewProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+var EditableInput = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles, getInputProps } = useEditableContext();
+    const css = {
+      outline: 0,
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      ...styles.input
+    };
+    return /* @__PURE__ */ jsx(
+      ui.input,
+      {
+        className: cx("ui-editable-input", className),
+        ...getInputProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+var EditableTextarea = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles, getTextareaProps } = useEditableContext();
+    const css = {
+      outline: 0,
+      fontSize: "inherit",
+      fontWeight: "inherit",
+      textAlign: "inherit",
+      bg: "transparent",
+      ...styles.textarea
+    };
+    return /* @__PURE__ */ jsx(
+      ui.textarea,
+      {
+        className: cx("ui-editable-textarea", className),
+        ...getTextareaProps(rest, ref),
+        __css: css
+      }
+    );
+  }
+);
+
+export {
+  useEditable,
+  useEditableControl,
+  Editable,
+  EditablePreview,
+  EditableInput,
+  EditableTextarea
+};

package/dist/editable.d.ts

@@ -0,0 +1,55 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import * as _yamada_ui_utils from '@yamada-ui/utils';
+import { PropGetter } from '@yamada-ui/utils';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { ReactNode } from 'react';
+
+type UseEditableProps = FormControlOptions & {
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    startWithEditView?: boolean;
+    isPreviewFocusable?: boolean;
+    submitOnBlur?: boolean;
+    selectAllOnFocus?: boolean;
+    onChange?: (value: string) => void;
+    onCancel?: (preValue: string) => void;
+    onSubmit?: (value: string) => void;
+    onEdit?: () => void;
+};
+declare const useEditable: (props: UseEditableProps) => {
+    isEditing: boolean;
+    value: string;
+    onEdit: () => void;
+    onCancel: () => void;
+    onSubmit: () => void;
+    getPreviewProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getInputProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getTextareaProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getEditProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getSubmitProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getCancelProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type UseEditableReturn = ReturnType<typeof useEditable>;
+declare const useEditableControl: () => {
+    isEditing: boolean;
+    getEditProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getCancelProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+    getSubmitProps: PropGetter<Record<string, unknown>, _yamada_ui_utils.DOMAttributes<Element & HTMLOrSVGElement>>;
+};
+type EditableOptions = {
+    focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    children?: ReactNode | ((props: Pick<UseEditableReturn, 'isEditing' | 'onSubmit' | 'onCancel' | 'onEdit'>) => ReactNode);
+};
+type EditableProps = Omit<HTMLUIProps<'div'>, 'onChange' | 'value' | 'defaultValue' | 'onSubmit' | 'children'> & ThemeProps<'Editable'> & UseEditableProps & EditableOptions;
+declare const Editable: _yamada_ui_core.Component<"div", EditableProps>;
+type EditablePreviewProps = HTMLUIProps<'span'>;
+declare const EditablePreview: _yamada_ui_core.Component<"span", EditablePreviewProps>;
+type EditableInputProps = HTMLUIProps<'input'>;
+declare const EditableInput: _yamada_ui_core.Component<"input", EditableInputProps>;
+type EditableTextareaProps = HTMLUIProps<'textarea'>;
+declare const EditableTextarea: _yamada_ui_core.Component<"textarea", EditableTextareaProps>;
+
+export { Editable, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableTextarea, EditableTextareaProps, UseEditableProps, UseEditableReturn, useEditable, useEditableControl };