@yamada-ui/editable 1.0.32 → 1.0.33-dev-20240614141936

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/{chunk-YGKMFHSX.mjs → chunk-4PJUEIBU.mjs} +12 -23
  2. package/dist/{chunk-YGKMFHSX.mjs.map → chunk-4PJUEIBU.mjs.map} +1 -1
  3. package/dist/editable.js +11 -22
  4. package/dist/editable.js.map +1 -1
  5. package/dist/editable.mjs +1 -1
  6. package/dist/index.js +11 -22
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +1 -1
  9. package/package.json +3 -3
package/dist/{chunk-YGKMFHSX.mjs → chunk-4PJUEIBU.mjs} RENAMED
@@ -71,11 +71,9 @@ var useEditable = (props) => {
71
71
  });
72
72
  useSafeLayoutEffect(() => {
73
73
  var _a, _b;
74
- if (!isEditing)
75
- return;
74
+ if (!isEditing) return;
76
75
  (_a = inputRef.current) == null ? void 0 : _a.focus();
77
- if (selectAllOnFocus)
78
- (_b = inputRef.current) == null ? void 0 : _b.select();
76
+ if (selectAllOnFocus) (_b = inputRef.current) == null ? void 0 : _b.select();
79
77
  }, []);
80
78
  useUpdateEffect(() => {
81
79
  var _a, _b, _c;
@@ -84,17 +82,14 @@ var useEditable = (props) => {
84
82
  return;
85
83
  }
86
84
  (_b = inputRef.current) == null ? void 0 : _b.focus();
87
- if (selectAllOnFocus)
88
- (_c = inputRef.current) == null ? void 0 : _c.select();
85
+ if (selectAllOnFocus) (_c = inputRef.current) == null ? void 0 : _c.select();
89
86
  onEditRef();
90
87
  }, [isEditing, onEditRef, selectAllOnFocus]);
91
88
  useEffect(() => {
92
- if (isEditing)
93
- return;
89
+ if (isEditing) return;
94
90
  const el = inputRef.current;
95
91
  const activeEl = el == null ? void 0 : el.ownerDocument.activeElement;
96
- if (activeEl === el)
97
- el == null ? void 0 : el.blur();
92
+ if (activeEl === el) el == null ? void 0 : el.blur();
98
93
  }, [isEditing]);
99
94
  const onChange = useCallback(
100
95
  (ev) => setValue(ev.currentTarget.value),
@@ -102,8 +97,7 @@ var useEditable = (props) => {
102
97
  );
103
98
  const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value]);
104
99
  const onEdit = useCallback(() => {
105
- if (isInteractive)
106
- setIsEditing(true);
100
+ if (isInteractive) setIsEditing(true);
107
101
  }, [isInteractive]);
108
102
  const onCancel = useCallback(() => {
109
103
  setIsEditing(false);
@@ -117,23 +111,20 @@ var useEditable = (props) => {
117
111
  }, [onSubmitProp, value]);
118
112
  const onKeyDown = useCallback(
119
113
  (ev) => {
120
- if (ev.key !== "Escape" && ev.key !== "Enter")
121
- return;
114
+ if (ev.key !== "Escape" && ev.key !== "Enter") return;
122
115
  ev.preventDefault();
123
116
  if (ev.key === "Escape") {
124
117
  onCancel();
125
118
  } else {
126
119
  const { shiftKey, metaKey } = ev;
127
- if (!shiftKey && !metaKey)
128
- onSubmit();
120
+ if (!shiftKey && !metaKey) onSubmit();
129
121
  }
130
122
  },
131
123
  [onCancel, onSubmit]
132
124
  );
133
125
  const onKeyDownWithoutSubmit = useCallback(
134
126
  (ev) => {
135
- if (ev.key !== "Escape")
136
- return;
127
+ if (ev.key !== "Escape") return;
137
128
  ev.preventDefault();
138
129
  onCancel();
139
130
  },
@@ -142,15 +133,13 @@ var useEditable = (props) => {
142
133
  const onBlur = useCallback(
143
134
  (ev) => {
144
135
  var _a;
145
- if (!isEditing)
146
- return;
136
+ if (!isEditing) return;
147
137
  const ownerDocument = ev.currentTarget.ownerDocument;
148
138
  const relatedTarget = (_a = ev.relatedTarget) != null ? _a : ownerDocument.activeElement;
149
139
  const targetIsCancel = isContains(cancelRef.current, relatedTarget);
150
140
  const targetIsSubmit = isContains(submitRef.current, relatedTarget);
151
141
  const isValidBlur = !targetIsCancel && !targetIsSubmit;
152
- if (!isValidBlur)
153
- return;
142
+ if (!isValidBlur) return;
154
143
  if (submitOnBlur) {
155
144
  onSubmit();
156
145
  } else {
@@ -463,4 +452,4 @@ export {
463
452
  EditableInput,
464
453
  EditableTextarea
465
454
  };
466
- //# sourceMappingURL=chunk-YGKMFHSX.mjs.map
455
+ //# sourceMappingURL=chunk-4PJUEIBU.mjs.map
package/dist/{chunk-YGKMFHSX.mjs.map → chunk-4PJUEIBU.mjs.map} RENAMED
@@ -1 +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 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"]}
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,UAAW;AAEhB,mBAAS,YAAT,mBAAkB;AAElB,QAAI,iBAAkB,gBAAS,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,iBAAkB,gBAAS,YAAT,mBAAkB;AAExC,cAAU;AAAA,EACZ,GAAG,CAAC,WAAW,WAAW,gBAAgB,CAAC;AAE3C,YAAU,MAAM;AACd,QAAI,UAAW;AAEf,UAAM,KAAK,SAAS;AACpB,UAAM,WAAW,yBAAI,cAAc;AAEnC,QAAI,aAAa,GAAI,0BAAI;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,cAAe,cAAa,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,QAAS;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,QAAS,UAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ,SAAU;AAEzB,SAAG,eAAe;AAClB,eAAS;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,OAAmB;AAhOxB;AAiOM,UAAI,CAAC,UAAW;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,YAAa;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.js CHANGED
@@ -80,11 +80,9 @@ var useEditable = (props) => {
80
80
  });
81
81
  (0, import_utils.useSafeLayoutEffect)(() => {
82
82
  var _a, _b;
83
- if (!isEditing)
84
- return;
83
+ if (!isEditing) return;
85
84
  (_a = inputRef.current) == null ? void 0 : _a.focus();
86
- if (selectAllOnFocus)
87
- (_b = inputRef.current) == null ? void 0 : _b.select();
85
+ if (selectAllOnFocus) (_b = inputRef.current) == null ? void 0 : _b.select();
88
86
  }, []);
89
87
  (0, import_utils.useUpdateEffect)(() => {
90
88
  var _a, _b, _c;
@@ -93,17 +91,14 @@ var useEditable = (props) => {
93
91
  return;
94
92
  }
95
93
  (_b = inputRef.current) == null ? void 0 : _b.focus();
96
- if (selectAllOnFocus)
97
- (_c = inputRef.current) == null ? void 0 : _c.select();
94
+ if (selectAllOnFocus) (_c = inputRef.current) == null ? void 0 : _c.select();
98
95
  onEditRef();
99
96
  }, [isEditing, onEditRef, selectAllOnFocus]);
100
97
  (0, import_react.useEffect)(() => {
101
- if (isEditing)
102
- return;
98
+ if (isEditing) return;
103
99
  const el = inputRef.current;
104
100
  const activeEl = el == null ? void 0 : el.ownerDocument.activeElement;
105
- if (activeEl === el)
106
- el == null ? void 0 : el.blur();
101
+ if (activeEl === el) el == null ? void 0 : el.blur();
107
102
  }, [isEditing]);
108
103
  const onChange = (0, import_react.useCallback)(
109
104
  (ev) => setValue(ev.currentTarget.value),
@@ -111,8 +106,7 @@ var useEditable = (props) => {
111
106
  );
112
107
  const onUpdatePrevValue = (0, import_react.useCallback)(() => setPrevValue(value), [value]);
113
108
  const onEdit = (0, import_react.useCallback)(() => {
114
- if (isInteractive)
115
- setIsEditing(true);
109
+ if (isInteractive) setIsEditing(true);
116
110
  }, [isInteractive]);
117
111
  const onCancel = (0, import_react.useCallback)(() => {
118
112
  setIsEditing(false);
@@ -126,23 +120,20 @@ var useEditable = (props) => {
126
120
  }, [onSubmitProp, value]);
127
121
  const onKeyDown = (0, import_react.useCallback)(
128
122
  (ev) => {
129
- if (ev.key !== "Escape" && ev.key !== "Enter")
130
- return;
123
+ if (ev.key !== "Escape" && ev.key !== "Enter") return;
131
124
  ev.preventDefault();
132
125
  if (ev.key === "Escape") {
133
126
  onCancel();
134
127
  } else {
135
128
  const { shiftKey, metaKey } = ev;
136
- if (!shiftKey && !metaKey)
137
- onSubmit();
129
+ if (!shiftKey && !metaKey) onSubmit();
138
130
  }
139
131
  },
140
132
  [onCancel, onSubmit]
141
133
  );
142
134
  const onKeyDownWithoutSubmit = (0, import_react.useCallback)(
143
135
  (ev) => {
144
- if (ev.key !== "Escape")
145
- return;
136
+ if (ev.key !== "Escape") return;
146
137
  ev.preventDefault();
147
138
  onCancel();
148
139
  },
@@ -151,15 +142,13 @@ var useEditable = (props) => {
151
142
  const onBlur = (0, import_react.useCallback)(
152
143
  (ev) => {
153
144
  var _a;
154
- if (!isEditing)
155
- return;
145
+ if (!isEditing) return;
156
146
  const ownerDocument = ev.currentTarget.ownerDocument;
157
147
  const relatedTarget = (_a = ev.relatedTarget) != null ? _a : ownerDocument.activeElement;
158
148
  const targetIsCancel = (0, import_utils.isContains)(cancelRef.current, relatedTarget);
159
149
  const targetIsSubmit = (0, import_utils.isContains)(submitRef.current, relatedTarget);
160
150
  const isValidBlur = !targetIsCancel && !targetIsSubmit;
161
- if (!isValidBlur)
162
- return;
151
+ if (!isValidBlur) return;
163
152
  if (submitOnBlur) {
164
153
  onSubmit();
165
154
  } else {
package/dist/editable.js.map CHANGED
@@ -1 +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 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"]}
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":"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","names":["props"]}
package/dist/editable.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  EditableTextarea,
7
7
  useEditable,
8
8
  useEditableControl
9
- } from "./chunk-YGKMFHSX.mjs";
9
+ } from "./chunk-4PJUEIBU.mjs";
10
10
  export {
11
11
  Editable,
12
12
  EditableInput,
package/dist/index.js CHANGED
@@ -82,11 +82,9 @@ var useEditable = (props) => {
82
82
  });
83
83
  (0, import_utils.useSafeLayoutEffect)(() => {
84
84
  var _a, _b;
85
- if (!isEditing)
86
- return;
85
+ if (!isEditing) return;
87
86
  (_a = inputRef.current) == null ? void 0 : _a.focus();
88
- if (selectAllOnFocus)
89
- (_b = inputRef.current) == null ? void 0 : _b.select();
87
+ if (selectAllOnFocus) (_b = inputRef.current) == null ? void 0 : _b.select();
90
88
  }, []);
91
89
  (0, import_utils.useUpdateEffect)(() => {
92
90
  var _a, _b, _c;
@@ -95,17 +93,14 @@ var useEditable = (props) => {
95
93
  return;
96
94
  }
97
95
  (_b = inputRef.current) == null ? void 0 : _b.focus();
98
- if (selectAllOnFocus)
99
- (_c = inputRef.current) == null ? void 0 : _c.select();
96
+ if (selectAllOnFocus) (_c = inputRef.current) == null ? void 0 : _c.select();
100
97
  onEditRef();
101
98
  }, [isEditing, onEditRef, selectAllOnFocus]);
102
99
  (0, import_react.useEffect)(() => {
103
- if (isEditing)
104
- return;
100
+ if (isEditing) return;
105
101
  const el = inputRef.current;
106
102
  const activeEl = el == null ? void 0 : el.ownerDocument.activeElement;
107
- if (activeEl === el)
108
- el == null ? void 0 : el.blur();
103
+ if (activeEl === el) el == null ? void 0 : el.blur();
109
104
  }, [isEditing]);
110
105
  const onChange = (0, import_react.useCallback)(
111
106
  (ev) => setValue(ev.currentTarget.value),
@@ -113,8 +108,7 @@ var useEditable = (props) => {
113
108
  );
114
109
  const onUpdatePrevValue = (0, import_react.useCallback)(() => setPrevValue(value), [value]);
115
110
  const onEdit = (0, import_react.useCallback)(() => {
116
- if (isInteractive)
117
- setIsEditing(true);
111
+ if (isInteractive) setIsEditing(true);
118
112
  }, [isInteractive]);
119
113
  const onCancel = (0, import_react.useCallback)(() => {
120
114
  setIsEditing(false);
@@ -128,23 +122,20 @@ var useEditable = (props) => {
128
122
  }, [onSubmitProp, value]);
129
123
  const onKeyDown = (0, import_react.useCallback)(
130
124
  (ev) => {
131
- if (ev.key !== "Escape" && ev.key !== "Enter")
132
- return;
125
+ if (ev.key !== "Escape" && ev.key !== "Enter") return;
133
126
  ev.preventDefault();
134
127
  if (ev.key === "Escape") {
135
128
  onCancel();
136
129
  } else {
137
130
  const { shiftKey, metaKey } = ev;
138
- if (!shiftKey && !metaKey)
139
- onSubmit();
131
+ if (!shiftKey && !metaKey) onSubmit();
140
132
  }
141
133
  },
142
134
  [onCancel, onSubmit]
143
135
  );
144
136
  const onKeyDownWithoutSubmit = (0, import_react.useCallback)(
145
137
  (ev) => {
146
- if (ev.key !== "Escape")
147
- return;
138
+ if (ev.key !== "Escape") return;
148
139
  ev.preventDefault();
149
140
  onCancel();
150
141
  },
@@ -153,15 +144,13 @@ var useEditable = (props) => {
153
144
  const onBlur = (0, import_react.useCallback)(
154
145
  (ev) => {
155
146
  var _a;
156
- if (!isEditing)
157
- return;
147
+ if (!isEditing) return;
158
148
  const ownerDocument = ev.currentTarget.ownerDocument;
159
149
  const relatedTarget = (_a = ev.relatedTarget) != null ? _a : ownerDocument.activeElement;
160
150
  const targetIsCancel = (0, import_utils.isContains)(cancelRef.current, relatedTarget);
161
151
  const targetIsSubmit = (0, import_utils.isContains)(submitRef.current, relatedTarget);
162
152
  const isValidBlur = !targetIsCancel && !targetIsSubmit;
163
- if (!isValidBlur)
164
- return;
153
+ if (!isValidBlur) return;
165
154
  if (submitOnBlur) {
166
155
  onSubmit();
167
156
  } else {
package/dist/index.js.map CHANGED
@@ -1 +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 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"]}
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 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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACQA,kBAKO;AAEP,0BAGO;AACP,oCAAqC;AACrC,uBAAsC;AAEtC,mBAWO;AAEP,mBAAyD;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,QAAI,yCAAoB,KAAK;AAC7B,QAAM,gBAAY,6BAAe,UAAU;AAC3C,QAAM,uBAAmB,yBAAW,MAAM,yCAAqB;AAE/D,QAAM,CAAC,WAAW,YAAY,QAAI;AAAA,IAChC,CAAC,CAAC,qBAAqB,CAAC;AAAA,EAC1B;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;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,QAAI,uBAAS,KAAK;AAEhD,QAAM,eAAW,qBAA+C,IAAI;AACpE,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,cAAU,qBAA0B,IAAI;AAC9C,QAAM,gBAAY,qBAA0B,IAAI;AAChD,QAAM,gBAAY,qBAA0B,IAAI;AAEhD,8CAAsB;AAAA,IACpB,KAAK;AAAA,IACL,SAAS;AAAA,IACT,UAAU,CAAC,WAAW,SAAS;AAAA,EACjC,CAAC;AAED,wCAAoB,MAAM;AA7I5B;AA8II,QAAI,CAAC,UAAW;AAEhB,mBAAS,YAAT,mBAAkB;AAElB,QAAI,iBAAkB,gBAAS,YAAT,mBAAkB;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AArJxB;AAsJI,QAAI,CAAC,WAAW;AACd,oBAAQ,YAAR,mBAAiB;AAEjB;AAAA,IACF;AAEA,mBAAS,YAAT,mBAAkB;AAElB,QAAI,iBAAkB,gBAAS,YAAT,mBAAkB;AAExC,cAAU;AAAA,EACZ,GAAG,CAAC,WAAW,WAAW,gBAAgB,CAAC;AAE3C,8BAAU,MAAM;AACd,QAAI,UAAW;AAEf,UAAM,KAAK,SAAS;AACpB,UAAM,WAAW,yBAAI,cAAc;AAEnC,QAAI,aAAa,GAAI,0BAAI;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAAW;AAAA,IACf,CAAC,OACC,SAAS,GAAG,cAAc,KAAK;AAAA,IACjC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBAAoB,0BAAY,MAAM,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;AAExE,QAAM,aAAS,0BAAY,MAAM;AAC/B,QAAI,cAAe,cAAa,IAAI;AAAA,EACtC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,eAAW,0BAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,aAAS,SAAS;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,WAAW,cAAc,QAAQ,CAAC;AAEtC,QAAM,eAAW,0BAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,iBAAa,KAAK;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,cAAc,KAAK,CAAC;AAExB,QAAM,gBAAY;AAAA,IAChB,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ,YAAY,GAAG,QAAQ,QAAS;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,QAAS,UAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,6BAAyB;AAAA,IAC7B,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ,SAAU;AAEzB,SAAG,eAAe;AAClB,eAAS;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAS;AAAA,IACb,CAAC,OAAmB;AAhOxB;AAiOM,UAAI,CAAC,UAAW;AAEhB,YAAM,gBAAgB,GAAG,cAAc;AACvC,YAAM,iBAAiB,QAAG,kBAAH,YACrB,cAAc;AAChB,YAAM,qBAAiB,yBAAW,UAAU,SAAS,aAAa;AAClE,YAAM,qBAAiB,yBAAW,UAAU,SAAS,aAAa;AAClE,YAAM,cAAc,CAAC,kBAAkB,CAAC;AAExC,UAAI,CAAC,YAAa;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,sBAAgC;AAAA,IACpC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,UAAU;AAAA,MAC9B,QAAQ;AAAA,MACR,UAAU,iBAAiB,qBAAqB,IAAI;AAAA,MACpD,UAAU,eAAe,cAAc;AAAA,MACvC,aAAS,yBAAWA,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,oBAAuC;AAAA,IAC3C,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,QAAQ;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAQ,yBAAWA,OAAM,QAAQ,MAAM;AAAA,MACvC,cAAU,yBAAWA,OAAM,UAAU,QAAQ;AAAA,MAC7C,eAAW,yBAAWA,OAAM,WAAW,SAAS;AAAA,MAChD,aAAS,yBAAWA,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,uBAA6C;AAAA,IACjD,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,QAAQ;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAQ,yBAAWA,OAAM,QAAQ,MAAM;AAAA,MACvC,cAAU,yBAAWA,OAAM,UAAU,QAAQ;AAAA,MAC7C,eAAW,yBAAWA,OAAM,WAAW,sBAAsB;AAAA,MAC7D,aAAS,yBAAWA,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,mBAA2B;AAAA,IAC/B,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,OAAO;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,aAAS,yBAAWA,OAAM,SAAS,MAAM;AAAA,IAC3C;AAAA,IACA,CAAC,UAAU,QAAQ,UAAU,gBAAgB;AAAA,EAC/C;AAEA,QAAM,qBAA6B;AAAA,IACjC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,SAAK,wBAAU,WAAW,GAAG;AAAA,MAC7B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,aAAS,yBAAWA,OAAM,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA,CAAC,UAAU,UAAU,UAAU,gBAAgB;AAAA,EACjD;AAEA,QAAM,qBAA6B;AAAA,IACjC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH,SAAK,wBAAU,WAAW,GAAG;AAAA,MAC7B,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,aAAS,yBAAWA,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,QAAI,4BAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cACE;AACJ,CAAC;AAkCM,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,kBAAkB,kBAAkB,GAAG,MAAM,GAAG,QAAQ;AACzD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,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,QAAI,4BAAe,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,oBAAgB,wBAAU,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,eAAG;AAAA,UAAH;AAAA,YACC;AAAA,YACA,eAAW,iBAAG,eAAe,SAAS;AAAA,YACrC,GAAG;AAAA,YACJ,OAAO;AAAA,YAEN;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAIO,IAAM,sBAAkB;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,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,wBAAwB,SAAS;AAAA,QAC9C,GAAG,gBAAgB,MAAM,GAAG;AAAA,QAC7B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAIO,IAAM,oBAAgB;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,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,sBAAsB,SAAS;AAAA,QAC5C,GAAG,cAAc,MAAM,GAAG;AAAA,QAC3B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAIO,IAAM,uBAAmB;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,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,yBAAyB,SAAS;AAAA,QAC/C,GAAG,iBAAiB,MAAM,GAAG;AAAA,QAC9B,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;","names":["props"]}
package/dist/index.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  EditableTextarea,
7
7
  useEditable,
8
8
  useEditableControl
9
- } from "./chunk-YGKMFHSX.mjs";
9
+ } from "./chunk-4PJUEIBU.mjs";
10
10
  export {
11
11
  Editable,
12
12
  EditableInput,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/editable",
3
- "version": "1.0.32",
3
+ "version": "1.0.33-dev-20240614141936",
4
4
  "description": "Yamada UI editable component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,9 +36,9 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.7.1",
39
+ "@yamada-ui/core": "1.7.2-dev-20240614141936",
40
40
  "@yamada-ui/utils": "1.2.1",
41
- "@yamada-ui/form-control": "1.1.2",
41
+ "@yamada-ui/form-control": "1.1.3-dev-20240614141936",
42
42
  "@yamada-ui/use-controllable-state": "1.0.14",
43
43
  "@yamada-ui/use-focus": "1.0.14"
44
44
  },