@yamada-ui/editable 1.0.29 → 1.0.30-dev-20240513050014

package/dist/{chunk-2DPPDVHW.mjs → chunk-YGKMFHSX.mjs}

@@ -16,7 +16,6 @@ import { useFocusOnPointerDown } from "@yamada-ui/use-focus";
 import {
   createContext,
   cx,
-  omitObject,
   runIfFunc,
   useCallbackRef,
   useSafeLayoutEffect,
@@ -32,6 +31,11 @@ var useEditable = (props) => {
   const {
     id,
     placeholder,
+    value: valueProp,
+    onChange: onChangeProp,
+    onCancel: onCancelProp,
+    onSubmit: onSubmitProp,
+    onEdit: onEditProp,
     defaultValue,
     required,
     disabled,
@@ -42,14 +46,15 @@ var useEditable = (props) => {
     selectAllOnFocus = true,
     ...rest
   } = useFormControlProps(props);
-  rest.onEdit = useCallbackRef(rest.onEdit);
+  const onEditRef = useCallbackRef(onEditProp);
+  const formControlProps = pickObject(rest, formControlProperties);
   const [isEditing, setIsEditing] = useState(
     !!startWithEditView && !disabled
   );
   const [value, setValue] = useControllableState({
     defaultValue: defaultValue || "",
-    value: rest.value,
-    onChange: rest.onChange
+    value: valueProp,
+    onChange: onChangeProp
   });
   const isInteractive = !isEditing && !disabled;
   const isValueEmpty = value.length === 0;
@@ -73,7 +78,7 @@ var useEditable = (props) => {
       (_b = inputRef.current) == null ? void 0 : _b.select();
   }, []);
   useUpdateEffect(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (!isEditing) {
       (_a = editRef.current) == null ? void 0 : _a.focus();
       return;
@@ -81,8 +86,8 @@ var useEditable = (props) => {
     (_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]);
+    onEditRef();
+  }, [isEditing, onEditRef, selectAllOnFocus]);
   useEffect(() => {
     if (isEditing)
       return;
@@ -101,17 +106,15 @@ var useEditable = (props) => {
       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]);
+    onCancelProp == null ? void 0 : onCancelProp(prevValue);
+  }, [prevValue, onCancelProp, setValue]);
   const onSubmit = useCallback(() => {
-    var _a;
     setIsEditing(false);
     setPrevValue(value);
-    (_a = rest.onSubmit) == null ? void 0 : _a.call(rest, value);
-  }, [rest, value]);
+    onSubmitProp == null ? void 0 : onSubmitProp(value);
+  }, [onSubmitProp, value]);
   const onKeyDown = useCallback(
     (ev) => {
       if (ev.key !== "Escape" && ev.key !== "Enter")
@@ -178,7 +181,7 @@ var useEditable = (props) => {
   );
   const getInputProps = useCallback(
     (props2 = {}, ref = null) => ({
-      ...pickObject(rest, formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: mergeRefs(ref, inputRef),
       id,
@@ -204,13 +207,13 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getTextareaProps = useCallback(
     (props2 = {}, ref = null) => ({
-      ...pickObject(rest, formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: mergeRefs(ref, inputRef),
       id,
@@ -236,63 +239,45 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getEditProps = useCallback(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onEdit, readOnly, formControlProps]
   );
   const getSubmitProps = useCallback(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onSubmit, readOnly, formControlProps]
   );
   const getCancelProps = useCallback(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onCancel, readOnly, formControlProps]
   );
   return {
     isEditing,
@@ -323,7 +308,26 @@ var Editable = forwardRef(
       errorBorderColor,
       ...props
     });
-    const { className, children, ...rest } = omitThemeProps(mergedProps);
+    const {
+      className,
+      children,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp,
+      ...rest
+    } = omitThemeProps(mergedProps);
     const {
       isEditing,
       getPreviewProps,
@@ -335,7 +339,23 @@ var Editable = forwardRef(
       onSubmit,
       onCancel,
       onEdit
-    } = useEditable(rest);
+    } = useEditable({
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp
+    });
     const cloneChildren = runIfFunc(children, {
       isEditing,
       onSubmit,
@@ -361,23 +381,7 @@ var Editable = forwardRef(
           {
             ref,
             className: cx("ui-editable", className),
-            ...omitObject(rest, [
-              "placeholder",
-              "value",
-              "defaultValue",
-              "isInvalid",
-              "isReadOnly",
-              "isRequired",
-              "isDisabled",
-              "startWithEditView",
-              "isPreviewFocusable",
-              "submitOnBlur",
-              "selectAllOnFocus",
-              "onChange",
-              "onCancel",
-              "onSubmit",
-              "onEdit"
-            ]),
+            ...rest,
             __css: css,
             children: cloneChildren
           }
@@ -459,4 +463,4 @@ export {
   EditableInput,
   EditableTextarea
 };
-//# sourceMappingURL=chunk-2DPPDVHW.mjs.map
+//# sourceMappingURL=chunk-YGKMFHSX.mjs.map

package/dist/chunk-YGKMFHSX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    value: valueProp,\n    onChange: onChangeProp,\n    onCancel: onCancelProp,\n    onSubmit: onSubmitProp,\n    onEdit: onEditProp,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const formControlProps = pickObject(rest, formControlProperties)\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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 = 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 = 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 = 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    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableElementProps = Pick<\n  UseEditableReturn,\n  \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n>\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?: ReactNode | EditableElement\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable({\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n    })\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\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\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":";;;AAQA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAuejD;AA9aD,IAAM,cAAc,CAAC,UAA4B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI,oBAAoB,KAAK;AAC7B,QAAM,YAAY,eAAe,UAAU;AAC3C,QAAM,mBAAmB,WAAW,MAAM,qBAAqB;AAE/D,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,CAAC,CAAC,qBAAqB,CAAC;AAAA,EAC1B;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,IAC7C,cAAc,gBAAgB;AAAA,IAC9B,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,gBAAgB,CAAC,aAAa,CAAC;AACrC,QAAM,eAAe,MAAM,WAAW;AAEtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,WAAW,OAA+C,IAAI;AACpE,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,UAAU,OAA0B,IAAI;AAC9C,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,YAAY,OAA0B,IAAI;AAEhD,wBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU,CAAC,WAAW,SAAS;AAAA,EACjC,CAAC;AAED,sBAAoB,MAAM;AA7I5B;AA8II,QAAI,CAAC;AAAW;AAEhB,mBAAS,YAAT,mBAAkB;AAElB,QAAI;AAAkB,qBAAS,YAAT,mBAAkB;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AArJxB;AAsJI,QAAI,CAAC,WAAW;AACd,oBAAQ,YAAR,mBAAiB;AAEjB;AAAA,IACF;AAEA,mBAAS,YAAT,mBAAkB;AAElB,QAAI;AAAkB,qBAAS,YAAT,mBAAkB;AAExC,cAAU;AAAA,EACZ,GAAG,CAAC,WAAW,WAAW,gBAAgB,CAAC;AAE3C,YAAU,MAAM;AACd,QAAI;AAAW;AAEf,UAAM,KAAK,SAAS;AACpB,UAAM,WAAW,yBAAI,cAAc;AAEnC,QAAI,aAAa;AAAI,+BAAI;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,WAAW;AAAA,IACf,CAAC,OACC,SAAS,GAAG,cAAc,KAAK;AAAA,IACjC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,oBAAoB,YAAY,MAAM,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;AAExE,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI;AAAe,mBAAa,IAAI;AAAA,EACtC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,WAAW,YAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,aAAS,SAAS;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,WAAW,cAAc,QAAQ,CAAC;AAEtC,QAAM,WAAW,YAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,iBAAa,KAAK;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,cAAc,KAAK,CAAC;AAExB,QAAM,YAAY;AAAA,IAChB,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ,YAAY,GAAG,QAAQ;AAAS;AAE/C,SAAG,eAAe;AAElB,UAAI,GAAG,QAAQ,UAAU;AACvB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,EAAE,UAAU,QAAQ,IAAI;AAE9B,YAAI,CAAC,YAAY,CAAC;AAAS,mBAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ;AAAU;AAEzB,SAAG,eAAe;AAClB,eAAS;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,OAAmB;AAhOxB;AAiOM,UAAI,CAAC;AAAW;AAEhB,YAAM,gBAAgB,GAAG,cAAc;AACvC,YAAM,iBAAiB,QAAG,kBAAH,YACrB,cAAc;AAChB,YAAM,iBAAiB,WAAW,UAAU,SAAS,aAAa;AAClE,YAAM,iBAAiB,WAAW,UAAU,SAAS,aAAa;AAClE,YAAM,cAAc,CAAC,kBAAkB,CAAC;AAExC,UAAI,CAAC;AAAa;AAElB,UAAI,cAAc;AAChB,iBAAS;AAAA,MACX,OAAO;AACL,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,WAAW,cAAc,UAAU,QAAQ;AAAA,EAC9C;AAEA,QAAM,kBAAgC;AAAA,IACpC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAGA;AAAA,MACH,KAAK,UAAU,KAAK,UAAU;AAAA,MAC9B,QAAQ;AAAA,MACR,UAAU,iBAAiB,qBAAqB,IAAI;AAAA,MACpD,UAAU,eAAe,cAAc;AAAA,MACvC,SAAS,WAAWA,OAAM,SAAS,QAAQ,iBAAiB;AAAA,IAC9D;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAuC;AAAA,IAC3C,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,KAAK,UAAU,KAAK,QAAQ;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,WAAWA,OAAM,QAAQ,MAAM;AAAA,MACvC,UAAU,WAAWA,OAAM,UAAU,QAAQ;AAAA,MAC7C,WAAW,WAAWA,OAAM,WAAW,SAAS;AAAA,MAChD,SAAS,WAAWA,OAAM,SAAS,iBAAiB;AAAA,IACtD;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAA6C;AAAA,IACjD,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,KAAK,UAAU,KAAK,QAAQ;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,WAAWA,OAAM,QAAQ,MAAM;AAAA,MACvC,UAAU,WAAWA,OAAM,UAAU,QAAQ;AAAA,MAC7C,WAAW,WAAWA,OAAM,WAAW,sBAAsB;AAAA,MAC7D,SAAS,WAAWA,OAAM,SAAS,iBAAiB;AAAA,IACtD;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eAA2B;AAAA,IAC/B,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,KAAK,UAAU,KAAK,OAAO;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAWA,OAAM,SAAS,MAAM;AAAA,IAC3C;AAAA,IACA,CAAC,UAAU,QAAQ,UAAU,gBAAgB;AAAA,EAC/C;AAEA,QAAM,iBAA6B;AAAA,IACjC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,KAAK,UAAU,WAAW,GAAG;AAAA,MAC7B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAWA,OAAM,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA,CAAC,UAAU,UAAU,UAAU,gBAAgB;AAAA,EACjD;AAEA,QAAM,iBAA6B;AAAA,IACjC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,KAAK,UAAU,WAAW,GAAG;AAAA,MAC7B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,SAAS,WAAWA,OAAM,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA,CAAC,UAAU,UAAU,UAAU,gBAAgB;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAIO,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,WAAW,cAAc,gBAAgB,eAAe,IAC9D,mBAAmB;AAErB,SAAO,EAAE,WAAW,cAAc,gBAAgB,eAAe;AACnE;AAaA,IAAM,CAAC,kBAAkB,kBAAkB,IAAI,cAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cACE;AACJ,CAAC;AAkCM,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,kBAAkB,kBAAkB,GAAG,MAAM,GAAG,QAAQ;AACzD,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,YAAY;AAAA,MAC/D;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAC9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,YAAY;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,CAAC;AAED,UAAM,gBAAgB,UAAU,UAAU;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC;AAAA,YACA,WAAW,GAAG,eAAe,SAAS;AAAA,YACrC,GAAG;AAAA,YACJ,OAAO;AAAA,YAEN;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAIO,IAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,gBAAgB,IAAI,mBAAmB;AAEvD,UAAM,MAAmB;AAAA,MACvB,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC9C,GAAG,gBAAgB,MAAM,GAAG;AAAA,QAC7B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAIO,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB;AAErD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC5C,GAAG,cAAc,MAAM,GAAG;AAAA,QAC3B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAIO,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,iBAAiB,IAAI,mBAAmB;AAExD,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAC/C,GAAG,iBAAiB,MAAM,GAAG;AAAA,QAC9B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;","names":["props"]}

package/dist/editable.d.mts

@@ -78,6 +78,8 @@ declare const useEditableControl: () => {
     getCancelProps: PropGetter;
     getSubmitProps: PropGetter;
 };
+type EditableElementProps = Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit">;
+type EditableElement = (props: EditableElementProps) => ReactNode;
 type EditableOptions = {
     /**
      * The border color when the input is focused.
@@ -87,7 +89,7 @@ type EditableOptions = {
      * The border color when the input is invalid.
      */
     errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
-    children?: ReactNode | ((props: Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit">) => ReactNode);
+    children?: ReactNode | EditableElement;
 };
 type EditableProps = Omit<HTMLUIProps<"div">, "onChange" | "value" | "defaultValue" | "onSubmit" | "children"> & ThemeProps<"Editable"> & UseEditableProps & EditableOptions;
 /**

package/dist/editable.d.ts

@@ -78,6 +78,8 @@ declare const useEditableControl: () => {
     getCancelProps: PropGetter;
     getSubmitProps: PropGetter;
 };
+type EditableElementProps = Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit">;
+type EditableElement = (props: EditableElementProps) => ReactNode;
 type EditableOptions = {
     /**
      * The border color when the input is focused.
@@ -87,7 +89,7 @@ type EditableOptions = {
      * The border color when the input is invalid.
      */
     errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
-    children?: ReactNode | ((props: Pick<UseEditableReturn, "isEditing" | "onSubmit" | "onCancel" | "onEdit">) => ReactNode);
+    children?: ReactNode | EditableElement;
 };
 type EditableProps = Omit<HTMLUIProps<"div">, "onChange" | "value" | "defaultValue" | "onSubmit" | "children"> & ThemeProps<"Editable"> & UseEditableProps & EditableOptions;
 /**

package/dist/editable.js

@@ -40,6 +40,11 @@ var useEditable = (props) => {
   const {
     id,
     placeholder,
+    value: valueProp,
+    onChange: onChangeProp,
+    onCancel: onCancelProp,
+    onSubmit: onSubmitProp,
+    onEdit: onEditProp,
     defaultValue,
     required,
     disabled,
@@ -50,14 +55,15 @@ var useEditable = (props) => {
     selectAllOnFocus = true,
     ...rest
   } = (0, import_form_control.useFormControlProps)(props);
-  rest.onEdit = (0, import_utils.useCallbackRef)(rest.onEdit);
+  const onEditRef = (0, import_utils.useCallbackRef)(onEditProp);
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
   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
+    value: valueProp,
+    onChange: onChangeProp
   });
   const isInteractive = !isEditing && !disabled;
   const isValueEmpty = value.length === 0;
@@ -81,7 +87,7 @@ var useEditable = (props) => {
       (_b = inputRef.current) == null ? void 0 : _b.select();
   }, []);
   (0, import_utils.useUpdateEffect)(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (!isEditing) {
       (_a = editRef.current) == null ? void 0 : _a.focus();
       return;
@@ -89,8 +95,8 @@ var useEditable = (props) => {
     (_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]);
+    onEditRef();
+  }, [isEditing, onEditRef, selectAllOnFocus]);
   (0, import_react.useEffect)(() => {
     if (isEditing)
       return;
@@ -109,17 +115,15 @@ var useEditable = (props) => {
       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]);
+    onCancelProp == null ? void 0 : onCancelProp(prevValue);
+  }, [prevValue, onCancelProp, 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]);
+    onSubmitProp == null ? void 0 : onSubmitProp(value);
+  }, [onSubmitProp, value]);
   const onKeyDown = (0, import_react.useCallback)(
     (ev) => {
       if (ev.key !== "Escape" && ev.key !== "Enter")
@@ -186,7 +190,7 @@ var useEditable = (props) => {
   );
   const getInputProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: (0, import_utils.mergeRefs)(ref, inputRef),
       id,
@@ -212,13 +216,13 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getTextareaProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: (0, import_utils.mergeRefs)(ref, inputRef),
       id,
@@ -244,63 +248,45 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getEditProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onEdit, readOnly, formControlProps]
   );
   const getSubmitProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onSubmit, readOnly, formControlProps]
   );
   const getCancelProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onCancel, readOnly, formControlProps]
   );
   return {
     isEditing,
@@ -331,7 +317,26 @@ var Editable = (0, import_core.forwardRef)(
       errorBorderColor,
       ...props
     });
-    const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    const {
+      className,
+      children,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp,
+      ...rest
+    } = (0, import_core.omitThemeProps)(mergedProps);
     const {
       isEditing,
       getPreviewProps,
@@ -343,7 +348,23 @@ var Editable = (0, import_core.forwardRef)(
       onSubmit,
       onCancel,
       onEdit
-    } = useEditable(rest);
+    } = useEditable({
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp
+    });
     const cloneChildren = (0, import_utils.runIfFunc)(children, {
       isEditing,
       onSubmit,
@@ -369,23 +390,7 @@ var Editable = (0, import_core.forwardRef)(
           {
             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"
-            ]),
+            ...rest,
             __css: css,
             children: cloneChildren
           }

package/dist/editable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  omitObject,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  rest.onEdit = useCallbackRef(rest.onEdit)\n\n  const [isEditing, setIsEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: rest.value,\n    onChange: rest.onChange,\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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    rest.onEdit?.()\n  }, [isEditing, rest.onEdit, 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    rest.onCancel?.(prevValue)\n  }, [prevValue, rest, setValue])\n\n  const onSubmit = useCallback(() => {\n    setIsEditing(false)\n    setPrevValue(value)\n    rest.onSubmit?.(value)\n  }, [rest, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDown,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getTextareaProps: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDownWithoutSubmit,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getEditProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(ref, editRef),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [disabled, onEdit, readOnly, rest],\n  )\n\n  const getSubmitProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(submitRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [disabled, onSubmit, readOnly, rest],\n  )\n\n  const getCancelProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(cancelRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [disabled, onCancel, readOnly, rest],\n  )\n\n  return {\n    isEditing,\n    value,\n    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?:\n    | ReactNode\n    | ((\n        props: Pick<\n          UseEditableReturn,\n          \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n        >,\n      ) => ReactNode)\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable(rest)\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\n        }}\n      >\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-editable\", className)}\n          {...omitObject(rest, [\n            \"placeholder\",\n            \"value\",\n            \"defaultValue\",\n            \"isInvalid\",\n            \"isReadOnly\",\n            \"isRequired\",\n            \"isDisabled\",\n            \"startWithEditView\",\n            \"isPreviewFocusable\",\n            \"submitOnBlur\",\n            \"selectAllOnFocus\",\n            \"onChange\",\n            \"onCancel\",\n            \"onSubmit\",\n            \"onEdit\",\n          ])}\n          __css={css}\n        >\n          {cloneChildren}\n        </ui.div>\n      </EditableProvider>\n    )\n  },\n)\n\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":"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","names":["props"]}
+{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    value: valueProp,\n    onChange: onChangeProp,\n    onCancel: onCancelProp,\n    onSubmit: onSubmitProp,\n    onEdit: onEditProp,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const formControlProps = pickObject(rest, formControlProperties)\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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 = 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 = 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 = 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    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableElementProps = Pick<\n  UseEditableReturn,\n  \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n>\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?: ReactNode | EditableElement\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable({\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n    })\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\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\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":"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","names":["props"]}

package/dist/editable.mjs

@@ -6,7 +6,7 @@ import {
   EditableTextarea,
   useEditable,
   useEditableControl
-} from "./chunk-2DPPDVHW.mjs";
+} from "./chunk-YGKMFHSX.mjs";
 export {
   Editable,
   EditableInput,

package/dist/index.js

@@ -42,6 +42,11 @@ var useEditable = (props) => {
   const {
     id,
     placeholder,
+    value: valueProp,
+    onChange: onChangeProp,
+    onCancel: onCancelProp,
+    onSubmit: onSubmitProp,
+    onEdit: onEditProp,
     defaultValue,
     required,
     disabled,
@@ -52,14 +57,15 @@ var useEditable = (props) => {
     selectAllOnFocus = true,
     ...rest
   } = (0, import_form_control.useFormControlProps)(props);
-  rest.onEdit = (0, import_utils.useCallbackRef)(rest.onEdit);
+  const onEditRef = (0, import_utils.useCallbackRef)(onEditProp);
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
   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
+    value: valueProp,
+    onChange: onChangeProp
   });
   const isInteractive = !isEditing && !disabled;
   const isValueEmpty = value.length === 0;
@@ -83,7 +89,7 @@ var useEditable = (props) => {
       (_b = inputRef.current) == null ? void 0 : _b.select();
   }, []);
   (0, import_utils.useUpdateEffect)(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (!isEditing) {
       (_a = editRef.current) == null ? void 0 : _a.focus();
       return;
@@ -91,8 +97,8 @@ var useEditable = (props) => {
     (_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]);
+    onEditRef();
+  }, [isEditing, onEditRef, selectAllOnFocus]);
   (0, import_react.useEffect)(() => {
     if (isEditing)
       return;
@@ -111,17 +117,15 @@ var useEditable = (props) => {
       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]);
+    onCancelProp == null ? void 0 : onCancelProp(prevValue);
+  }, [prevValue, onCancelProp, 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]);
+    onSubmitProp == null ? void 0 : onSubmitProp(value);
+  }, [onSubmitProp, value]);
   const onKeyDown = (0, import_react.useCallback)(
     (ev) => {
       if (ev.key !== "Escape" && ev.key !== "Enter")
@@ -188,7 +192,7 @@ var useEditable = (props) => {
   );
   const getInputProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: (0, import_utils.mergeRefs)(ref, inputRef),
       id,
@@ -214,13 +218,13 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getTextareaProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
-      ...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties),
+      ...formControlProps,
       ...props2,
       ref: (0, import_utils.mergeRefs)(ref, inputRef),
       id,
@@ -246,63 +250,45 @@ var useEditable = (props) => {
       placeholder,
       readOnly,
       required,
-      rest,
+      formControlProps,
       value
     ]
   );
   const getEditProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onEdit, readOnly, formControlProps]
   );
   const getSubmitProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onSubmit, readOnly, formControlProps]
   );
   const getCancelProps = (0, import_react.useCallback)(
     (props2 = {}, ref = null) => ({
+      ...formControlProps,
       ...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]
+    [disabled, onCancel, readOnly, formControlProps]
   );
   return {
     isEditing,
@@ -333,7 +319,26 @@ var Editable = (0, import_core.forwardRef)(
       errorBorderColor,
       ...props
     });
-    const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    const {
+      className,
+      children,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp,
+      ...rest
+    } = (0, import_core.omitThemeProps)(mergedProps);
     const {
       isEditing,
       getPreviewProps,
@@ -345,7 +350,23 @@ var Editable = (0, import_core.forwardRef)(
       onSubmit,
       onCancel,
       onEdit
-    } = useEditable(rest);
+    } = useEditable({
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      placeholder,
+      value,
+      defaultValue,
+      startWithEditView,
+      isPreviewFocusable,
+      submitOnBlur,
+      selectAllOnFocus,
+      onChange,
+      onCancel: onCancelProp,
+      onSubmit: onSubmitProp,
+      onEdit: onEditProp
+    });
     const cloneChildren = (0, import_utils.runIfFunc)(children, {
       isEditing,
       onSubmit,
@@ -371,23 +392,7 @@ var Editable = (0, import_core.forwardRef)(
           {
             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"
-            ]),
+            ...rest,
             __css: css,
             children: cloneChildren
           }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/editable.tsx"],"sourcesContent":["export {\n  Editable,\n  EditableInput,\n  EditableTextarea,\n  EditablePreview,\n  useEditable,\n  useEditableControl,\n} from \"./editable\"\nexport type {\n  EditableProps,\n  EditableInputProps,\n  EditableTextareaProps,\n  EditablePreviewProps,\n  UseEditableProps,\n  UseEditableReturn,\n} from \"./editable\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  omitObject,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  rest.onEdit = useCallbackRef(rest.onEdit)\n\n  const [isEditing, setIsEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: rest.value,\n    onChange: rest.onChange,\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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    rest.onEdit?.()\n  }, [isEditing, rest.onEdit, 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    rest.onCancel?.(prevValue)\n  }, [prevValue, rest, setValue])\n\n  const onSubmit = useCallback(() => {\n    setIsEditing(false)\n    setPrevValue(value)\n    rest.onSubmit?.(value)\n  }, [rest, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDown,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getTextareaProps: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDownWithoutSubmit,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getEditProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(ref, editRef),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [disabled, onEdit, readOnly, rest],\n  )\n\n  const getSubmitProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(submitRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [disabled, onSubmit, readOnly, rest],\n  )\n\n  const getCancelProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(cancelRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [disabled, onCancel, readOnly, rest],\n  )\n\n  return {\n    isEditing,\n    value,\n    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?:\n    | ReactNode\n    | ((\n        props: Pick<\n          UseEditableReturn,\n          \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n        >,\n      ) => ReactNode)\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable(rest)\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\n        }}\n      >\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-editable\", className)}\n          {...omitObject(rest, [\n            \"placeholder\",\n            \"value\",\n            \"defaultValue\",\n            \"isInvalid\",\n            \"isReadOnly\",\n            \"isRequired\",\n            \"isDisabled\",\n            \"startWithEditView\",\n            \"isPreviewFocusable\",\n            \"submitOnBlur\",\n            \"selectAllOnFocus\",\n            \"onChange\",\n            \"onCancel\",\n            \"onSubmit\",\n            \"onEdit\",\n          ])}\n          __css={css}\n        >\n          {cloneChildren}\n        </ui.div>\n      </EditableProvider>\n    )\n  },\n)\n\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":"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","names":["props"]}
+{"version":3,"sources":["../src/index.ts","../src/editable.tsx"],"sourcesContent":["export {\n  Editable,\n  EditableInput,\n  EditableTextarea,\n  EditablePreview,\n  useEditable,\n  useEditableControl,\n} from \"./editable\"\nexport type {\n  EditableProps,\n  EditableInputProps,\n  EditableTextareaProps,\n  EditablePreviewProps,\n  UseEditableProps,\n  UseEditableReturn,\n} from \"./editable\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    value: valueProp,\n    onChange: onChangeProp,\n    onCancel: onCancelProp,\n    onSubmit: onSubmitProp,\n    onEdit: onEditProp,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  const onEditRef = useCallbackRef(onEditProp)\n  const formControlProps = pickObject(rest, formControlProperties)\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\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 = 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 = 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 = 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    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableElementProps = Pick<\n  UseEditableReturn,\n  \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n>\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?: ReactNode | EditableElement\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n      ...rest\n    } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable({\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      isDisabled,\n      placeholder,\n      value,\n      defaultValue,\n      startWithEditView,\n      isPreviewFocusable,\n      submitOnBlur,\n      selectAllOnFocus,\n      onChange,\n      onCancel: onCancelProp,\n      onSubmit: onSubmitProp,\n      onEdit: onEditProp,\n    })\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\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\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":"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","names":["props"]}

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   EditableTextarea,
   useEditable,
   useEditableControl
-} from "./chunk-2DPPDVHW.mjs";
+} from "./chunk-YGKMFHSX.mjs";
 export {
   Editable,
   EditableInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/editable",
-  "version": "1.0.29",
+  "version": "1.0.30-dev-20240513050014",
   "description": "Yamada UI editable component",
   "keywords": [
     "yamada",

package/dist/chunk-2DPPDVHW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n  UIPropGetter,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\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 type { PropGetter } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  cx,\n  omitObject,\n  runIfFunc,\n  useCallbackRef,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  isContains,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, ReactNode, KeyboardEvent } from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport type UseEditableProps = FormControlOptions & {\n  /**\n   * The placeholder text when the value is empty.\n   */\n  placeholder?: string\n  /**\n   * The value of the Editable in both edit & preview mode.\n   */\n  value?: string\n  /**\n   * The initial value of the Editable in both edit & preview mode.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the Editable will start with edit mode by default.\n   */\n  startWithEditView?: boolean\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   * If `true`, it'll update the value onBlur and turn off the edit mode.\n   *\n   * @default true\n   */\n  submitOnBlur?: boolean\n  /**\n   * If `true`, the input's text will be highlighted on focus.\n   *\n   * @default true\n   */\n  selectAllOnFocus?: boolean\n  /**\n   * A callback invoked when user changes input.\n   */\n  onChange?: (value: string) => void\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 confirms value with `enter` key or by blurring input.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * A callback invoked once the user enters edit mode.\n   */\n  onEdit?: () => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n  const {\n    id,\n    placeholder,\n    defaultValue,\n    required,\n    disabled,\n    readOnly,\n    startWithEditView,\n    isPreviewFocusable = true,\n    submitOnBlur = true,\n    selectAllOnFocus = true,\n    ...rest\n  } = useFormControlProps(props)\n  rest.onEdit = useCallbackRef(rest.onEdit)\n\n  const [isEditing, setIsEditing] = useState<boolean>(\n    !!startWithEditView && !disabled,\n  )\n\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue || \"\",\n    value: rest.value,\n    onChange: rest.onChange,\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    enabled: isEditing,\n    elements: [cancelRef, submitRef],\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    rest.onEdit?.()\n  }, [isEditing, rest.onEdit, 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    rest.onCancel?.(prevValue)\n  }, [prevValue, rest, setValue])\n\n  const onSubmit = useCallback(() => {\n    setIsEditing(false)\n    setPrevValue(value)\n    rest.onSubmit?.(value)\n  }, [rest, value])\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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 { shiftKey, metaKey } = ev\n\n        if (!shiftKey && !metaKey) onSubmit()\n      }\n    },\n    [onCancel, onSubmit],\n  )\n\n  const onKeyDownWithoutSubmit = useCallback(\n    (ev: KeyboardEvent<Element>) => {\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: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref: mergeRefs(ref, previewRef),\n      hidden: isEditing,\n      tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n      children: isValueEmpty ? placeholder : value,\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: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDown,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getTextareaProps: UIPropGetter<\"textarea\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...pickObject(rest, formControlProperties),\n      ...props,\n      ref: mergeRefs(ref, inputRef),\n      id,\n      placeholder,\n      hidden: !isEditing,\n      value,\n      required,\n      disabled,\n      readOnly,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onChange),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n      onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n    }),\n    [\n      disabled,\n      id,\n      isEditing,\n      onBlur,\n      onChange,\n      onKeyDownWithoutSubmit,\n      onUpdatePrevValue,\n      placeholder,\n      readOnly,\n      required,\n      rest,\n      value,\n    ],\n  )\n\n  const getEditProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(ref, editRef),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onEdit),\n    }),\n    [disabled, onEdit, readOnly, rest],\n  )\n\n  const getSubmitProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(submitRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onSubmit),\n    }),\n    [disabled, onSubmit, readOnly, rest],\n  )\n\n  const getCancelProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ...omitObject(rest, [\n        \"value\",\n        \"onChange\",\n        \"onCancel\",\n        \"onSubmit\",\n        \"onEdit\",\n      ]),\n      ref: mergeRefs(cancelRef, ref),\n      type: \"button\",\n      disabled,\n      readOnly,\n      onClick: handlerAll(props.onClick, onCancel),\n    }),\n    [disabled, onCancel, readOnly, rest],\n  )\n\n  return {\n    isEditing,\n    value,\n    onEdit,\n    onCancel,\n    onSubmit,\n    getPreviewProps,\n    getInputProps,\n    getTextareaProps,\n    getEditProps,\n    getSubmitProps,\n    getCancelProps,\n  }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n  const { isEditing, getEditProps, getCancelProps, getSubmitProps } =\n    useEditableContext()\n\n  return { isEditing, getEditProps, getCancelProps, getSubmitProps }\n}\n\ntype EditableContext = {\n  isEditing: boolean\n  getPreviewProps: UIPropGetter\n  getInputProps: UIPropGetter<\"input\">\n  getTextareaProps: UIPropGetter<\"textarea\">\n  getEditProps: PropGetter\n  getCancelProps: PropGetter\n  getSubmitProps: PropGetter\n  styles: Record<string, CSSUIObject>\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\ntype EditableOptions = {\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  children?:\n    | ReactNode\n    | ((\n        props: Pick<\n          UseEditableReturn,\n          \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n        >,\n      ) => ReactNode)\n}\n\nexport type EditableProps = Omit<\n  HTMLUIProps<\"div\">,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"onSubmit\" | \"children\"\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  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Editable\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    const { className, children, ...rest } = omitThemeProps(mergedProps)\n    const {\n      isEditing,\n      getPreviewProps,\n      getInputProps,\n      getTextareaProps,\n      getEditProps,\n      getCancelProps,\n      getSubmitProps,\n      onSubmit,\n      onCancel,\n      onEdit,\n    } = useEditable(rest)\n\n    const cloneChildren = runIfFunc(children, {\n      isEditing,\n      onSubmit,\n      onCancel,\n      onEdit,\n    })\n\n    const css: CSSUIObject = { ...styles.container }\n\n    return (\n      <EditableProvider\n        value={{\n          isEditing,\n          getPreviewProps,\n          getInputProps,\n          getTextareaProps,\n          getEditProps,\n          getCancelProps,\n          getSubmitProps,\n          styles,\n        }}\n      >\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-editable\", className)}\n          {...omitObject(rest, [\n            \"placeholder\",\n            \"value\",\n            \"defaultValue\",\n            \"isInvalid\",\n            \"isReadOnly\",\n            \"isRequired\",\n            \"isDisabled\",\n            \"startWithEditView\",\n            \"isPreviewFocusable\",\n            \"submitOnBlur\",\n            \"selectAllOnFocus\",\n            \"onChange\",\n            \"onCancel\",\n            \"onSubmit\",\n            \"onEdit\",\n          ])}\n          __css={css}\n        >\n          {cloneChildren}\n        </ui.div>\n      </EditableProvider>\n    )\n  },\n)\n\nexport type EditablePreviewProps = HTMLUIProps<\"span\">\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getPreviewProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      cursor: \"text\",\n      display: \"inline-block\",\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableInputProps = HTMLUIProps<\"input\">\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getInputProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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\nexport type EditableTextareaProps = HTMLUIProps<\"textarea\">\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, getTextareaProps } = useEditableContext()\n\n    const css: CSSUIObject = {\n      outline: 0,\n      fontSize: \"inherit\",\n      fontWeight: \"inherit\",\n      textAlign: \"inherit\",\n      bg: \"transparent\",\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"],"mappings":"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","names":["props"]}