@yamada-ui/editable 1.0.45-dev-20241005224505 → 1.0.45-dev-20241006032009

package/dist/{chunk-IZRLAY3V.mjs → chunk-PCLA7CWV.mjs}

@@ -2,10 +2,10 @@
 
 // src/editable.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import {
   formControlProperties,
@@ -16,35 +16,35 @@ import { useFocusOnPointerDown } from "@yamada-ui/use-focus";
 import {
   createContext,
   cx,
+  handlerAll,
+  isContains,
+  mergeRefs,
+  pickObject,
   runIfFunc,
   useCallbackRef,
   useSafeLayoutEffect,
-  useUpdateEffect,
-  isContains,
-  handlerAll,
-  mergeRefs,
-  pickObject
+  useUpdateEffect
 } from "@yamada-ui/utils";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var useEditable = (props) => {
   const {
     id,
+    defaultValue,
+    isPreviewFocusable = true,
     placeholder,
+    selectAllOnFocus = true,
+    startWithEditView,
+    submitOnBlur = true,
     value: valueProp,
-    onChange: onChangeProp,
     onCancel: onCancelProp,
-    onSubmit: onSubmitProp,
+    onChange: onChangeProp,
     onEdit: onEditProp,
-    defaultValue,
-    startWithEditView,
-    isPreviewFocusable = true,
-    submitOnBlur = true,
-    selectAllOnFocus = true,
+    onSubmit: onSubmitProp,
     ...rest
   } = useFormControlProps(props);
   const onEditRef = useCallbackRef(onEditProp);
-  const { required, disabled, readOnly, ...formControlProps } = pickObject(
+  const { disabled, readOnly, required, ...formControlProps } = pickObject(
     rest,
     formControlProperties
   );
@@ -66,8 +66,8 @@ var useEditable = (props) => {
   const submitRef = useRef(null);
   useFocusOnPointerDown({
     ref: inputRef,
-    enabled: isEditing,
-    elements: [cancelRef, submitRef]
+    elements: [cancelRef, submitRef],
+    enabled: isEditing
   });
   useSafeLayoutEffect(() => {
     var _a, _b;
@@ -116,7 +116,7 @@ var useEditable = (props) => {
       if (ev.key === "Escape") {
         onCancel();
       } else {
-        const { shiftKey, metaKey } = ev;
+        const { metaKey, shiftKey } = ev;
         if (!shiftKey && !metaKey) onSubmit();
       }
     },
@@ -152,9 +152,9 @@ var useEditable = (props) => {
     (props2 = {}, ref = null) => ({
       ...props2,
       ref: mergeRefs(ref, previewRef),
+      children: isValueEmpty ? placeholder : value,
       hidden: isEditing,
       tabIndex: isInteractive && isPreviewFocusable ? 0 : void 0,
-      children: isValueEmpty ? placeholder : value,
       onFocus: handlerAll(props2.onFocus, onEdit, onUpdatePrevValue)
     }),
     [
@@ -172,18 +172,18 @@ var useEditable = (props) => {
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
-      ref: mergeRefs(ref, inputRef),
       id,
-      placeholder,
-      hidden: !isEditing,
-      value,
-      required,
+      ref: mergeRefs(ref, inputRef),
       disabled,
+      hidden: !isEditing,
+      placeholder,
       readOnly,
+      required,
+      value,
       onBlur: handlerAll(props2.onBlur, onBlur),
       onChange: handlerAll(props2.onChange, onChange),
-      onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
-      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue)
+      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDown)
     }),
     [
       disabled,
@@ -204,18 +204,18 @@ var useEditable = (props) => {
     (props2 = {}, ref = null) => ({
       ...formControlProps,
       ...props2,
-      ref: mergeRefs(ref, inputRef),
       id,
-      placeholder,
-      hidden: !isEditing,
-      value,
-      required,
+      ref: mergeRefs(ref, inputRef),
       disabled,
+      hidden: !isEditing,
+      placeholder,
       readOnly,
+      required,
+      value,
       onBlur: handlerAll(props2.onBlur, onBlur),
       onChange: handlerAll(props2.onChange, onChange),
-      onKeyDown: handlerAll(props2.onKeyDown, onKeyDownWithoutSubmit),
-      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue)
+      onFocus: handlerAll(props2.onFocus, onUpdatePrevValue),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDownWithoutSubmit)
     }),
     [
       disabled,
@@ -271,85 +271,85 @@ var useEditable = (props) => {
   return {
     isEditing,
     value,
-    onEdit,
-    onCancel,
-    onSubmit,
-    getPreviewProps,
-    getInputProps,
-    getTextareaProps,
+    getCancelProps,
     getEditProps,
+    getInputProps,
+    getPreviewProps,
     getSubmitProps,
-    getCancelProps
+    getTextareaProps,
+    onCancel,
+    onEdit,
+    onSubmit
   };
 };
 var useEditableControl = () => {
-  const { isEditing, getEditProps, getCancelProps, getSubmitProps } = useEditableContext();
-  return { isEditing, getEditProps, getCancelProps, getSubmitProps };
+  const { isEditing, getCancelProps, getEditProps, getSubmitProps } = useEditableContext();
+  return { isEditing, getCancelProps, getEditProps, 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) => {
+  ({ errorBorderColor, focusBorderColor, ...props }, ref) => {
     const [styles, mergedProps] = useComponentMultiStyle("Editable", {
-      focusBorderColor,
       errorBorderColor,
+      focusBorderColor,
       ...props
     });
     const {
       className,
       children,
+      defaultValue,
+      isDisabled,
       isInvalid,
+      isPreviewFocusable,
       isReadOnly,
       isRequired,
-      isDisabled,
       placeholder,
-      value,
-      defaultValue,
+      selectAllOnFocus,
       startWithEditView,
-      isPreviewFocusable,
       submitOnBlur,
-      selectAllOnFocus,
-      onChange,
+      value,
       onCancel: onCancelProp,
-      onSubmit: onSubmitProp,
+      onChange,
       onEdit: onEditProp,
+      onSubmit: onSubmitProp,
       ...rest
     } = omitThemeProps(mergedProps);
     const {
       isEditing,
-      getPreviewProps,
-      getInputProps,
-      getTextareaProps,
-      getEditProps,
       getCancelProps,
+      getEditProps,
+      getInputProps,
+      getPreviewProps,
       getSubmitProps,
-      onSubmit,
+      getTextareaProps,
       onCancel,
-      onEdit
+      onEdit,
+      onSubmit
     } = useEditable({
+      defaultValue,
+      isDisabled,
       isInvalid,
+      isPreviewFocusable,
       isReadOnly,
       isRequired,
-      isDisabled,
       placeholder,
-      value,
-      defaultValue,
+      selectAllOnFocus,
       startWithEditView,
-      isPreviewFocusable,
       submitOnBlur,
-      selectAllOnFocus,
-      onChange,
+      value,
       onCancel: onCancelProp,
-      onSubmit: onSubmitProp,
-      onEdit: onEditProp
+      onChange,
+      onEdit: onEditProp,
+      onSubmit: onSubmitProp
     });
     const cloneChildren = runIfFunc(children, {
       isEditing,
-      onSubmit,
       onCancel,
-      onEdit
+      onEdit,
+      onSubmit
     });
     const css = { ...styles.container };
     return /* @__PURE__ */ jsx(
@@ -357,13 +357,13 @@ var Editable = forwardRef(
       {
         value: {
           isEditing,
-          getPreviewProps,
-          getInputProps,
-          getTextareaProps,
-          getEditProps,
+          styles,
           getCancelProps,
+          getEditProps,
+          getInputProps,
+          getPreviewProps,
           getSubmitProps,
-          styles
+          getTextareaProps
         },
         children: /* @__PURE__ */ jsx(
           ui.div,
@@ -385,12 +385,12 @@ var EditablePreview = forwardRef(
   ({ className, ...rest }, ref) => {
     const { styles, getPreviewProps } = useEditableContext();
     const css = {
+      bg: "transparent",
       cursor: "text",
       display: "inline-block",
       fontSize: "inherit",
       fontWeight: "inherit",
       textAlign: "inherit",
-      bg: "transparent",
       ...styles.preview
     };
     return /* @__PURE__ */ jsx(
@@ -409,11 +409,11 @@ var EditableInput = forwardRef(
   ({ className, ...rest }, ref) => {
     const { styles, getInputProps } = useEditableContext();
     const css = {
-      outline: 0,
+      bg: "transparent",
       fontSize: "inherit",
       fontWeight: "inherit",
+      outline: 0,
       textAlign: "inherit",
-      bg: "transparent",
       ...styles.input
     };
     return /* @__PURE__ */ jsx(
@@ -432,11 +432,11 @@ var EditableTextarea = forwardRef(
   ({ className, ...rest }, ref) => {
     const { styles, getTextareaProps } = useEditableContext();
     const css = {
-      outline: 0,
+      bg: "transparent",
       fontSize: "inherit",
       fontWeight: "inherit",
+      outline: 0,
       textAlign: "inherit",
-      bg: "transparent",
       ...styles.textarea
     };
     return /* @__PURE__ */ jsx(
@@ -460,4 +460,4 @@ export {
   EditableInput,
   EditableTextarea
 };
-//# sourceMappingURL=chunk-IZRLAY3V.mjs.map
+//# sourceMappingURL=chunk-PCLA7CWV.mjs.map

package/dist/chunk-PCLA7CWV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n  ColorModeToken,\n  CSS,\n  CSSUIObject,\n  HTMLUIProps,\n  PropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from \"react\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"@yamada-ui/use-focus\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  isContains,\n  mergeRefs,\n  pickObject,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport interface UseEditableProps extends FormControlOptions {\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the read only view, has a `tabIndex` set to `0`\n   * so it can receive focus via the keyboard or click.\n   *\n   * @default true\n   */\n  isPreviewFocusable?: boolean\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\n  /**\n   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * Callback invoked when user cancels input with the `Esc` key.\n   * It provides the last confirmed value as argument.\n   */\n  onCancel?: (preValue: string) => void\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n  /**\n   * A callback invoked when user confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    defaultValue,\n    isPreviewFocusable = true,\n    placeholder,\n    selectAllOnFocus = true,\n    startWithEditView,\n    submitOnBlur = true,\n    value: valueProp,\n    onCancel: onCancelProp,\n    onChange: onChangeProp,\n    onEdit: onEditProp,\n    onSubmit: onSubmitProp,\n    ...rest\n  } = useFormControlProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const { disabled, readOnly, required, ...formControlProps } = pickObject(\n    rest,\n    formControlProperties,\n  )\n\n  const [isEditing, setIsEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n\n  const isInteractive = !isEditing && !disabled\n  const isValueEmpty = value.length === 0\n\n  const [prevValue, setPrevValue] = useState(value)\n\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n  const previewRef = useRef<HTMLElement>(null)\n  const editRef = useRef<HTMLButtonElement>(null)\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  const submitRef = useRef<HTMLButtonElement>(null)\n\n  useFocusOnPointerDown({\n    ref: inputRef,\n    elements: [cancelRef, submitRef],\n    enabled: isEditing,\n  })\n\n  useSafeLayoutEffect(() => {\n    if (!isEditing) return\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n  }, [])\n\n  useUpdateEffect(() => {\n    if (!isEditing) {\n      editRef.current?.focus()\n\n      return\n    }\n\n    inputRef.current?.focus()\n\n    if (selectAllOnFocus) inputRef.current?.select()\n\n    onEditRef()\n  }, [isEditing, onEditRef, selectAllOnFocus])\n\n  useEffect(() => {\n    if (isEditing) return\n\n    const el = inputRef.current\n    const activeEl = el?.ownerDocument.activeElement\n\n    if (activeEl === el) el?.blur()\n  }, [isEditing])\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n      setValue(ev.currentTarget.value),\n    [setValue],\n  )\n\n  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n  const onEdit = useCallback(() => {\n    if (isInteractive) setIsEditing(true)\n  }, [isInteractive])\n\n  const onCancel = useCallback(() => {\n    setIsEditing(false)\n    setValue(prevValue)\n    onCancelProp?.(prevValue)\n  }, [prevValue, onCancelProp, setValue])\n\n  const onSubmit = useCallback(() => {\n    setIsEditing(false)\n    setPrevValue(value)\n    onSubmitProp?.(value)\n  }, [onSubmitProp, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n      ev.preventDefault()\n\n      if (ev.key === \"Escape\") {\n        onCancel()\n      } else {\n        const { metaKey, shiftKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent) => {\n      if (ev.key !== \"Escape\") return\n\n      ev.preventDefault()\n      onCancel()\n    },\n    [onCancel],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent) => {\n      if (!isEditing) return\n\n      const ownerDocument = ev.currentTarget.ownerDocument\n      const relatedTarget = (ev.relatedTarget ??\n        ownerDocument.activeElement) as HTMLElement\n      const targetIsCancel = isContains(cancelRef.current, relatedTarget)\n      const targetIsSubmit = isContains(submitRef.current, relatedTarget)\n      const isValidBlur = !targetIsCancel && !targetIsSubmit\n\n      if (!isValidBlur) return\n\n      if (submitOnBlur) {\n        onSubmit()\n      } else {\n        onCancel()\n      }\n    },\n    [isEditing, submitOnBlur, onSubmit, onCancel],\n  )\n\n  const getPreviewProps: PropGetter<\"span\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      children: isValueEmpty ? placeholder : value,\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n    }),\n    [\n      isEditing,\n      isInteractive,\n      isPreviewFocusable,\n      isValueEmpty,\n      onEdit,\n      onUpdatePrevValue,\n      placeholder,\n      value,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      id,\n      ref: mergeRefs(ref, inputRef),\n      disabled,\n      hidden: !isEditing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDown,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      formControlProps,\n      value,\n    ],\n  )\n\n  const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      id,\n      ref: mergeRefs(ref, inputRef),\n      disabled,\n      hidden: !isEditing,\n      placeholder,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDownWithoutSubmit,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      formControlProps,\n      value,\n    ],\n  )\n\n  const getEditProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, editRef),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [disabled, onEdit, readOnly, formControlProps],\n  )\n\n  const getSubmitProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(submitRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [disabled, onSubmit, readOnly, formControlProps],\n  )\n\n  const getCancelProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(cancelRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [disabled, onCancel, readOnly, formControlProps],\n  )\n\n  return {\n    isEditing,\n    value,\n    getCancelProps,\n    getEditProps,\n    getInputProps,\n    getPreviewProps,\n    getSubmitProps,\n    getTextareaProps,\n    onCancel,\n    onEdit,\n    onSubmit,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getCancelProps, getEditProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getCancelProps, getEditProps, getSubmitProps }\n}\n\ninterface EditableContext {\n  isEditing: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\n  getCancelProps: PropGetter<\"button\">\n  getEditProps: PropGetter<\"button\">\n  getInputProps: PropGetter<\"input\">\n  getPreviewProps: PropGetter<\"span\">\n  getSubmitProps: PropGetter<\"button\">\n  getTextareaProps: PropGetter<\"textarea\">\n}\n\nconst [EditableProvider, useEditableContext] = createContext<EditableContext>({\n  name: \"EditableContext\",\n  errorMessage:\n    \"useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`\",\n})\n\ninterface EditableElementProps\n  extends Pick<\n    UseEditableReturn,\n    \"isEditing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n  > {}\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ninterface EditableOptions {\n  children?: EditableElement | ReactNode\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport interface EditableProps\n  extends Omit<\n      HTMLUIProps,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n    >,\n    ThemeProps<\"Editable\">,\n    UseEditableProps,\n    EditableOptions {}\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/editable\n */\nexport const Editable = forwardRef<EditableProps, \"div\">(\n  ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Editable\", {\n      errorBorderColor,\n      focusBorderColor,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      defaultValue,\n      isDisabled,\n      isInvalid,\n      isPreviewFocusable,\n      isReadOnly,\n      isRequired,\n      placeholder,\n      selectAllOnFocus,\n      startWithEditView,\n      submitOnBlur,\n      value,\n      onCancel: onCancelProp,\n      onChange,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getCancelProps,\n      getEditProps,\n      getInputProps,\n      getPreviewProps,\n      getSubmitProps,\n      getTextareaProps,\n      onCancel,\n      onEdit,\n      onSubmit,\n    } = useEditable({\n      defaultValue,\n      isDisabled,\n      isInvalid,\n      isPreviewFocusable,\n      isReadOnly,\n      isRequired,\n      placeholder,\n      selectAllOnFocus,\n      startWithEditView,\n      submitOnBlur,\n      value,\n      onCancel: onCancelProp,\n      onChange,\n      onEdit: onEditProp,\n      onSubmit: onSubmitProp,\n    })\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onCancel,\n      onEdit,\n      onSubmit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          styles,\n          getCancelProps,\n          getEditProps,\n          getInputProps,\n          getPreviewProps,\n          getSubmitProps,\n          getTextareaProps,\n        }}\n      >\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-editable\", className)}\n          {...rest}\n          __css={css}\n        >\n          {cloneChildren}\n        </ui.div>\n      </EditableProvider>\n    )\n  },\n)\n\nEditable.displayName = \"Editable\"\nEditable.__ui__ = \"Editable\"\n\nexport interface EditablePreviewProps extends HTMLUIProps<\"span\"> {}\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      bg: \"transparent\",\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      ...styles.preview,\n    }\n\n    return (\n      <ui.span\n        className={cx(\"ui-editable__preview\", className)}\n        {...getPreviewProps(rest, ref)}\n        __css={css}\n      />\n    )\n  },\n)\n\nEditablePreview.displayName = \"EditablePreview\"\nEditablePreview.__ui__ = \"EditablePreview\"\n\nexport interface EditableInputProps extends HTMLUIProps<\"input\"> {}\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      bg: \"transparent\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      outline: 0,\n      textAlign: \"inherit\",\n      ...styles.input,\n    }\n\n    return (\n      <ui.input\n        className={cx(\"ui-editable__input\", className)}\n        {...getInputProps(rest, ref)}\n        __css={css}\n      />\n    )\n  },\n)\n\nEditableInput.displayName = \"EditableInput\"\nEditableInput.__ui__ = \"EditableInput\"\n\nexport interface EditableTextareaProps extends HTMLUIProps<\"textarea\"> {}\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      bg: \"transparent\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      outline: 0,\n      textAlign: \"inherit\",\n      ...styles.textarea,\n    }\n\n    return (\n      <ui.textarea\n        className={cx(\"ui-editable__textarea\", className)}\n        {...getTextareaProps(rest, ref)}\n        __css={css}\n      />\n    )\n  },\n)\n\nEditableTextarea.displayName = \"EditableTextarea\"\nEditableTextarea.__ui__ = \"EditableTextarea\"\n"],"mappings":"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","names":["props"]}

package/dist/editable.d.mts

@@ -4,22 +4,10 @@ import { FormControlOptions } from '@yamada-ui/form-control';
 import { ReactNode } from 'react';
 
 interface UseEditableProps extends FormControlOptions {
-    /**
-     * The placeholder text when the value is empty.
-     */
-    placeholder?: string;
-    /**
-     * The value of the Editable in both edit & preview mode.
-     */
-    value?: string;
     /**
      * The initial value of the Editable in both edit & preview mode.
      */
     defaultValue?: string;
-    /**
-     * If `true`, the Editable will start with edit mode by default.
-     */
-    startWithEditView?: boolean;
     /**
      * If `true`, the read only view, has a `tabIndex` set to `0`
      * so it can receive focus via the keyboard or click.
@@ -28,11 +16,9 @@ interface UseEditableProps extends FormControlOptions {
      */
     isPreviewFocusable?: boolean;
     /**
-     * If `true`, it'll update the value onBlur and turn off the edit mode.
-     *
-     * @default true
+     * The placeholder text when the value is empty.
      */
-    submitOnBlur?: boolean;
+    placeholder?: string;
     /**
      * If `true`, the input's text will be highlighted on focus.
      *
@@ -40,58 +26,72 @@ interface UseEditableProps extends FormControlOptions {
      */
     selectAllOnFocus?: boolean;
     /**
-     * A callback invoked when user changes input.
+     * If `true`, the Editable will start with edit mode by default.
      */
-    onChange?: (value: string) => void;
+    startWithEditView?: boolean;
+    /**
+     * If `true`, it'll update the value onBlur and turn off the edit mode.
+     *
+     * @default true
+     */
+    submitOnBlur?: boolean;
+    /**
+     * The value of the Editable in both edit & preview mode.
+     */
+    value?: string;
     /**
      * Callback invoked when user cancels input with the `Esc` key.
      * It provides the last confirmed value as argument.
      */
     onCancel?: (preValue: string) => void;
     /**
-     * A callback invoked when user confirms value with `enter` key or by blurring input.
+     * A callback invoked when user changes input.
      */
-    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
     /**
      * A callback invoked once the user enters edit mode.
      */
     onEdit?: () => void;
+    /**
+     * A callback invoked when user confirms value with `enter` key or by blurring input.
+     */
+    onSubmit?: (value: string) => void;
 }
 declare const useEditable: (props: UseEditableProps) => {
     isEditing: boolean;
     value: string;
-    onEdit: () => void;
-    onCancel: () => void;
-    onSubmit: () => void;
-    getPreviewProps: PropGetter<"span", undefined>;
-    getInputProps: PropGetter<"input", undefined>;
-    getTextareaProps: PropGetter<"textarea", undefined>;
+    getCancelProps: PropGetter<"button", undefined>;
     getEditProps: PropGetter<"button", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getPreviewProps: PropGetter<"span", undefined>;
     getSubmitProps: PropGetter<"button", undefined>;
-    getCancelProps: PropGetter<"button", undefined>;
+    getTextareaProps: PropGetter<"textarea", undefined>;
+    onCancel: () => void;
+    onEdit: () => void;
+    onSubmit: () => void;
 };
 type UseEditableReturn = ReturnType<typeof useEditable>;
 declare const useEditableControl: () => {
     isEditing: boolean;
-    getEditProps: PropGetter<"button", undefined>;
     getCancelProps: PropGetter<"button", undefined>;
+    getEditProps: PropGetter<"button", undefined>;
     getSubmitProps: PropGetter<"button", undefined>;
 };
-interface EditableElementProps extends Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit"> {
+interface EditableElementProps extends Pick<UseEditableReturn, "isEditing" | "onCancel" | "onEdit" | "onSubmit"> {
 }
 type EditableElement = (props: EditableElementProps) => ReactNode;
 interface EditableOptions {
-    /**
-     * The border color when the input is focused.
-     */
-    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
+    children?: EditableElement | ReactNode;
     /**
      * The border color when the input is invalid.
      */
     errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
-    children?: ReactNode | EditableElement;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
 }
-interface EditableProps extends Omit<HTMLUIProps, "onChange" | "value" | "defaultValue" | "onSubmit" | "children">, ThemeProps<"Editable">, UseEditableProps, EditableOptions {
+interface EditableProps extends Omit<HTMLUIProps, "children" | "defaultValue" | "onChange" | "onSubmit" | "value">, ThemeProps<"Editable">, UseEditableProps, EditableOptions {
 }
 /**
  * `Editable` is a component used to obtain inline editable text input.

package/dist/editable.d.ts

@@ -4,22 +4,10 @@ import { FormControlOptions } from '@yamada-ui/form-control';
 import { ReactNode } from 'react';
 
 interface UseEditableProps extends FormControlOptions {
-    /**
-     * The placeholder text when the value is empty.
-     */
-    placeholder?: string;
-    /**
-     * The value of the Editable in both edit & preview mode.
-     */
-    value?: string;
     /**
      * The initial value of the Editable in both edit & preview mode.
      */
     defaultValue?: string;
-    /**
-     * If `true`, the Editable will start with edit mode by default.
-     */
-    startWithEditView?: boolean;
     /**
      * If `true`, the read only view, has a `tabIndex` set to `0`
      * so it can receive focus via the keyboard or click.
@@ -28,11 +16,9 @@ interface UseEditableProps extends FormControlOptions {
      */
     isPreviewFocusable?: boolean;
     /**
-     * If `true`, it'll update the value onBlur and turn off the edit mode.
-     *
-     * @default true
+     * The placeholder text when the value is empty.
      */
-    submitOnBlur?: boolean;
+    placeholder?: string;
     /**
      * If `true`, the input's text will be highlighted on focus.
      *
@@ -40,58 +26,72 @@ interface UseEditableProps extends FormControlOptions {
      */
     selectAllOnFocus?: boolean;
     /**
-     * A callback invoked when user changes input.
+     * If `true`, the Editable will start with edit mode by default.
      */
-    onChange?: (value: string) => void;
+    startWithEditView?: boolean;
+    /**
+     * If `true`, it'll update the value onBlur and turn off the edit mode.
+     *
+     * @default true
+     */
+    submitOnBlur?: boolean;
+    /**
+     * The value of the Editable in both edit & preview mode.
+     */
+    value?: string;
     /**
      * Callback invoked when user cancels input with the `Esc` key.
      * It provides the last confirmed value as argument.
      */
     onCancel?: (preValue: string) => void;
     /**
-     * A callback invoked when user confirms value with `enter` key or by blurring input.
+     * A callback invoked when user changes input.
      */
-    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
     /**
      * A callback invoked once the user enters edit mode.
      */
     onEdit?: () => void;
+    /**
+     * A callback invoked when user confirms value with `enter` key or by blurring input.
+     */
+    onSubmit?: (value: string) => void;
 }
 declare const useEditable: (props: UseEditableProps) => {
     isEditing: boolean;
     value: string;
-    onEdit: () => void;
-    onCancel: () => void;
-    onSubmit: () => void;
-    getPreviewProps: PropGetter<"span", undefined>;
-    getInputProps: PropGetter<"input", undefined>;
-    getTextareaProps: PropGetter<"textarea", undefined>;
+    getCancelProps: PropGetter<"button", undefined>;
     getEditProps: PropGetter<"button", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getPreviewProps: PropGetter<"span", undefined>;
     getSubmitProps: PropGetter<"button", undefined>;
-    getCancelProps: PropGetter<"button", undefined>;
+    getTextareaProps: PropGetter<"textarea", undefined>;
+    onCancel: () => void;
+    onEdit: () => void;
+    onSubmit: () => void;
 };
 type UseEditableReturn = ReturnType<typeof useEditable>;
 declare const useEditableControl: () => {
     isEditing: boolean;
-    getEditProps: PropGetter<"button", undefined>;
     getCancelProps: PropGetter<"button", undefined>;
+    getEditProps: PropGetter<"button", undefined>;
     getSubmitProps: PropGetter<"button", undefined>;
 };
-interface EditableElementProps extends Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit"> {
+interface EditableElementProps extends Pick<UseEditableReturn, "isEditing" | "onCancel" | "onEdit" | "onSubmit"> {
 }
 type EditableElement = (props: EditableElementProps) => ReactNode;
 interface EditableOptions {
-    /**
-     * The border color when the input is focused.
-     */
-    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
+    children?: EditableElement | ReactNode;
     /**
      * The border color when the input is invalid.
      */
     errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
-    children?: ReactNode | EditableElement;
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
 }
-interface EditableProps extends Omit<HTMLUIProps, "onChange" | "value" | "defaultValue" | "onSubmit" | "children">, ThemeProps<"Editable">, UseEditableProps, EditableOptions {
+interface EditableProps extends Omit<HTMLUIProps, "children" | "defaultValue" | "onChange" | "onSubmit" | "value">, ThemeProps<"Editable">, UseEditableProps, EditableOptions {
 }
 /**
  * `Editable` is a component used to obtain inline editable text input.