@yamada-ui/editable 1.0.32-next-20240609204504 → 1.0.33-dev-20240614135711

Sign up to get free protection for your applications and to get access to all the features.
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 +6 -6
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":"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","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":";;;;;;;;;;;;;;;;;;;;;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;AAAW;AAEhB,mBAAS,YAAT,mBAAkB;AAElB,QAAI;AAAkB,qBAAS,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;AAAkB,qBAAS,YAAT,mBAAkB;AAExC,cAAU;AAAA,EACZ,GAAG,CAAC,WAAW,WAAW,gBAAgB,CAAC;AAE3C,8BAAU,MAAM;AACd,QAAI;AAAW;AAEf,UAAM,KAAK,SAAS;AACpB,UAAM,WAAW,yBAAI,cAAc;AAEnC,QAAI,aAAa;AAAI,+BAAI;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,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;AAAe,mBAAa,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;AAAS;AAE/C,SAAG,eAAe;AAElB,UAAI,GAAG,QAAQ,UAAU;AACvB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,EAAE,UAAU,QAAQ,IAAI;AAE9B,YAAI,CAAC,YAAY,CAAC;AAAS,mBAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,6BAAyB;AAAA,IAC7B,CAAC,OAA+B;AAC9B,UAAI,GAAG,QAAQ;AAAU;AAEzB,SAAG,eAAe;AAClB,eAAS;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAS;AAAA,IACb,CAAC,OAAmB;AAhOxB;AAiOM,UAAI,CAAC;AAAW;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;AAAa;AAElB,UAAI,cAAc;AAChB,iBAAS;AAAA,MACX,OAAO;AACL,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,WAAW,cAAc,UAAU,QAAQ;AAAA,EAC9C;AAEA,QAAM,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"]}
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"]}
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-next-20240609204504",
3
+ "version": "1.0.33-dev-20240614135711",
4
4
  "description": "Yamada UI editable component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,11 +36,11 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.7.1-next-20240609204504",
40
- "@yamada-ui/utils": "1.2.1-next-20240609204504",
41
- "@yamada-ui/form-control": "1.1.2-next-20240609204504",
42
- "@yamada-ui/use-controllable-state": "1.0.14-next-20240609204504",
43
- "@yamada-ui/use-focus": "1.0.14-next-20240609204504"
39
+ "@yamada-ui/core": "1.7.2-dev-20240614135711",
40
+ "@yamada-ui/utils": "1.2.1",
41
+ "@yamada-ui/form-control": "1.1.3-dev-20240614135711",
42
+ "@yamada-ui/use-controllable-state": "1.0.14",
43
+ "@yamada-ui/use-focus": "1.0.14"
44
44
  },
45
45
  "devDependencies": {
46
46
  "react": "^18.0.0",