@yamada-ui/editable 1.0.45-dev-20241005224505 → 1.0.45-dev-20241006000212
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-IZRLAY3V.mjs → chunk-PCLA7CWV.mjs} +79 -79
- package/dist/chunk-PCLA7CWV.mjs.map +1 -0
- package/dist/editable.d.mts +35 -35
- package/dist/editable.d.ts +35 -35
- package/dist/editable.js +70 -70
- package/dist/editable.js.map +1 -1
- package/dist/editable.mjs +1 -1
- package/dist/index.js +70 -70
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +6 -6
- package/dist/chunk-IZRLAY3V.mjs.map +0 -1
package/dist/index.js
CHANGED
@@ -41,21 +41,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
41
|
var useEditable = (props) => {
|
42
42
|
const {
|
43
43
|
id,
|
44
|
+
defaultValue,
|
45
|
+
isPreviewFocusable = true,
|
44
46
|
placeholder,
|
47
|
+
selectAllOnFocus = true,
|
48
|
+
startWithEditView,
|
49
|
+
submitOnBlur = true,
|
45
50
|
value: valueProp,
|
46
|
-
onChange: onChangeProp,
|
47
51
|
onCancel: onCancelProp,
|
48
|
-
|
52
|
+
onChange: onChangeProp,
|
49
53
|
onEdit: onEditProp,
|
50
|
-
|
51
|
-
startWithEditView,
|
52
|
-
isPreviewFocusable = true,
|
53
|
-
submitOnBlur = true,
|
54
|
-
selectAllOnFocus = true,
|
54
|
+
onSubmit: onSubmitProp,
|
55
55
|
...rest
|
56
56
|
} = (0, import_form_control.useFormControlProps)(props);
|
57
57
|
const onEditRef = (0, import_utils.useCallbackRef)(onEditProp);
|
58
|
-
const {
|
58
|
+
const { disabled, readOnly, required, ...formControlProps } = (0, import_utils.pickObject)(
|
59
59
|
rest,
|
60
60
|
import_form_control.formControlProperties
|
61
61
|
);
|
@@ -77,8 +77,8 @@ var useEditable = (props) => {
|
|
77
77
|
const submitRef = (0, import_react.useRef)(null);
|
78
78
|
(0, import_use_focus.useFocusOnPointerDown)({
|
79
79
|
ref: inputRef,
|
80
|
-
|
81
|
-
|
80
|
+
elements: [cancelRef, submitRef],
|
81
|
+
enabled: isEditing
|
82
82
|
});
|
83
83
|
(0, import_utils.useSafeLayoutEffect)(() => {
|
84
84
|
var _a, _b;
|
@@ -127,7 +127,7 @@ var useEditable = (props) => {
|
|
127
127
|
if (ev.key === "Escape") {
|
128
128
|
onCancel();
|
129
129
|
} else {
|
130
|
-
const {
|
130
|
+
const { metaKey, shiftKey } = ev;
|
131
131
|
if (!shiftKey && !metaKey) onSubmit();
|
132
132
|
}
|
133
133
|
},
|
@@ -163,9 +163,9 @@ var useEditable = (props) => {
|
|
163
163
|
(props2 = {}, ref = null) => ({
|
164
164
|
...props2,
|
165
165
|
ref: (0, import_utils.mergeRefs)(ref, previewRef),
|
166
|
+
children: isValueEmpty ? placeholder : value,
|
166
167
|
hidden: isEditing,
|
167
168
|
tabIndex: isInteractive && isPreviewFocusable ? 0 : void 0,
|
168
|
-
children: isValueEmpty ? placeholder : value,
|
169
169
|
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onEdit, onUpdatePrevValue)
|
170
170
|
}),
|
171
171
|
[
|
@@ -183,18 +183,18 @@ var useEditable = (props) => {
|
|
183
183
|
(props2 = {}, ref = null) => ({
|
184
184
|
...formControlProps,
|
185
185
|
...props2,
|
186
|
-
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
187
186
|
id,
|
188
|
-
|
189
|
-
hidden: !isEditing,
|
190
|
-
value,
|
191
|
-
required,
|
187
|
+
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
192
188
|
disabled,
|
189
|
+
hidden: !isEditing,
|
190
|
+
placeholder,
|
193
191
|
readOnly,
|
192
|
+
required,
|
193
|
+
value,
|
194
194
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
195
195
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
196
|
-
|
197
|
-
|
196
|
+
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue),
|
197
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown)
|
198
198
|
}),
|
199
199
|
[
|
200
200
|
disabled,
|
@@ -215,18 +215,18 @@ var useEditable = (props) => {
|
|
215
215
|
(props2 = {}, ref = null) => ({
|
216
216
|
...formControlProps,
|
217
217
|
...props2,
|
218
|
-
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
219
218
|
id,
|
220
|
-
|
221
|
-
hidden: !isEditing,
|
222
|
-
value,
|
223
|
-
required,
|
219
|
+
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
224
220
|
disabled,
|
221
|
+
hidden: !isEditing,
|
222
|
+
placeholder,
|
225
223
|
readOnly,
|
224
|
+
required,
|
225
|
+
value,
|
226
226
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
227
227
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
228
|
-
|
229
|
-
|
228
|
+
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue),
|
229
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDownWithoutSubmit)
|
230
230
|
}),
|
231
231
|
[
|
232
232
|
disabled,
|
@@ -282,85 +282,85 @@ var useEditable = (props) => {
|
|
282
282
|
return {
|
283
283
|
isEditing,
|
284
284
|
value,
|
285
|
-
|
286
|
-
onCancel,
|
287
|
-
onSubmit,
|
288
|
-
getPreviewProps,
|
289
|
-
getInputProps,
|
290
|
-
getTextareaProps,
|
285
|
+
getCancelProps,
|
291
286
|
getEditProps,
|
287
|
+
getInputProps,
|
288
|
+
getPreviewProps,
|
292
289
|
getSubmitProps,
|
293
|
-
|
290
|
+
getTextareaProps,
|
291
|
+
onCancel,
|
292
|
+
onEdit,
|
293
|
+
onSubmit
|
294
294
|
};
|
295
295
|
};
|
296
296
|
var useEditableControl = () => {
|
297
|
-
const { isEditing,
|
298
|
-
return { isEditing,
|
297
|
+
const { isEditing, getCancelProps, getEditProps, getSubmitProps } = useEditableContext();
|
298
|
+
return { isEditing, getCancelProps, getEditProps, getSubmitProps };
|
299
299
|
};
|
300
300
|
var [EditableProvider, useEditableContext] = (0, import_utils.createContext)({
|
301
301
|
name: "EditableContext",
|
302
302
|
errorMessage: "useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`"
|
303
303
|
});
|
304
304
|
var Editable = (0, import_core.forwardRef)(
|
305
|
-
({
|
305
|
+
({ errorBorderColor, focusBorderColor, ...props }, ref) => {
|
306
306
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Editable", {
|
307
|
-
focusBorderColor,
|
308
307
|
errorBorderColor,
|
308
|
+
focusBorderColor,
|
309
309
|
...props
|
310
310
|
});
|
311
311
|
const {
|
312
312
|
className,
|
313
313
|
children,
|
314
|
+
defaultValue,
|
315
|
+
isDisabled,
|
314
316
|
isInvalid,
|
317
|
+
isPreviewFocusable,
|
315
318
|
isReadOnly,
|
316
319
|
isRequired,
|
317
|
-
isDisabled,
|
318
320
|
placeholder,
|
319
|
-
|
320
|
-
defaultValue,
|
321
|
+
selectAllOnFocus,
|
321
322
|
startWithEditView,
|
322
|
-
isPreviewFocusable,
|
323
323
|
submitOnBlur,
|
324
|
-
|
325
|
-
onChange,
|
324
|
+
value,
|
326
325
|
onCancel: onCancelProp,
|
327
|
-
|
326
|
+
onChange,
|
328
327
|
onEdit: onEditProp,
|
328
|
+
onSubmit: onSubmitProp,
|
329
329
|
...rest
|
330
330
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
331
331
|
const {
|
332
332
|
isEditing,
|
333
|
-
getPreviewProps,
|
334
|
-
getInputProps,
|
335
|
-
getTextareaProps,
|
336
|
-
getEditProps,
|
337
333
|
getCancelProps,
|
334
|
+
getEditProps,
|
335
|
+
getInputProps,
|
336
|
+
getPreviewProps,
|
338
337
|
getSubmitProps,
|
339
|
-
|
338
|
+
getTextareaProps,
|
340
339
|
onCancel,
|
341
|
-
onEdit
|
340
|
+
onEdit,
|
341
|
+
onSubmit
|
342
342
|
} = useEditable({
|
343
|
+
defaultValue,
|
344
|
+
isDisabled,
|
343
345
|
isInvalid,
|
346
|
+
isPreviewFocusable,
|
344
347
|
isReadOnly,
|
345
348
|
isRequired,
|
346
|
-
isDisabled,
|
347
349
|
placeholder,
|
348
|
-
|
349
|
-
defaultValue,
|
350
|
+
selectAllOnFocus,
|
350
351
|
startWithEditView,
|
351
|
-
isPreviewFocusable,
|
352
352
|
submitOnBlur,
|
353
|
-
|
354
|
-
onChange,
|
353
|
+
value,
|
355
354
|
onCancel: onCancelProp,
|
356
|
-
|
357
|
-
onEdit: onEditProp
|
355
|
+
onChange,
|
356
|
+
onEdit: onEditProp,
|
357
|
+
onSubmit: onSubmitProp
|
358
358
|
});
|
359
359
|
const cloneChildren = (0, import_utils.runIfFunc)(children, {
|
360
360
|
isEditing,
|
361
|
-
onSubmit,
|
362
361
|
onCancel,
|
363
|
-
onEdit
|
362
|
+
onEdit,
|
363
|
+
onSubmit
|
364
364
|
});
|
365
365
|
const css = { ...styles.container };
|
366
366
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -368,13 +368,13 @@ var Editable = (0, import_core.forwardRef)(
|
|
368
368
|
{
|
369
369
|
value: {
|
370
370
|
isEditing,
|
371
|
-
|
372
|
-
getInputProps,
|
373
|
-
getTextareaProps,
|
374
|
-
getEditProps,
|
371
|
+
styles,
|
375
372
|
getCancelProps,
|
373
|
+
getEditProps,
|
374
|
+
getInputProps,
|
375
|
+
getPreviewProps,
|
376
376
|
getSubmitProps,
|
377
|
-
|
377
|
+
getTextareaProps
|
378
378
|
},
|
379
379
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
380
380
|
import_core.ui.div,
|
@@ -396,12 +396,12 @@ var EditablePreview = (0, import_core.forwardRef)(
|
|
396
396
|
({ className, ...rest }, ref) => {
|
397
397
|
const { styles, getPreviewProps } = useEditableContext();
|
398
398
|
const css = {
|
399
|
+
bg: "transparent",
|
399
400
|
cursor: "text",
|
400
401
|
display: "inline-block",
|
401
402
|
fontSize: "inherit",
|
402
403
|
fontWeight: "inherit",
|
403
404
|
textAlign: "inherit",
|
404
|
-
bg: "transparent",
|
405
405
|
...styles.preview
|
406
406
|
};
|
407
407
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -420,11 +420,11 @@ var EditableInput = (0, import_core.forwardRef)(
|
|
420
420
|
({ className, ...rest }, ref) => {
|
421
421
|
const { styles, getInputProps } = useEditableContext();
|
422
422
|
const css = {
|
423
|
-
|
423
|
+
bg: "transparent",
|
424
424
|
fontSize: "inherit",
|
425
425
|
fontWeight: "inherit",
|
426
|
+
outline: 0,
|
426
427
|
textAlign: "inherit",
|
427
|
-
bg: "transparent",
|
428
428
|
...styles.input
|
429
429
|
};
|
430
430
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -443,11 +443,11 @@ var EditableTextarea = (0, import_core.forwardRef)(
|
|
443
443
|
({ className, ...rest }, ref) => {
|
444
444
|
const { styles, getTextareaProps } = useEditableContext();
|
445
445
|
const css = {
|
446
|
-
|
446
|
+
bg: "transparent",
|
447
447
|
fontSize: "inherit",
|
448
448
|
fontWeight: "inherit",
|
449
|
+
outline: 0,
|
449
450
|
textAlign: "inherit",
|
450
|
-
bg: "transparent",
|
451
451
|
...styles.textarea
|
452
452
|
};
|
453
453
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
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 PropGetter,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\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 {\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 interface UseEditableProps extends 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 startWithEditView,\n isPreviewFocusable = true,\n submitOnBlur = true,\n selectAllOnFocus = true,\n ...rest\n } = useFormControlProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const { required, disabled, readOnly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n\n const [isEditing, setIsEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const isInteractive = !isEditing && !disabled\n const isValueEmpty = value.length === 0\n\n const [prevValue, setPrevValue] = useState(value)\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n useFocusOnPointerDown({\n ref: inputRef,\n 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) => {\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) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!isEditing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = isContains(cancelRef.current, relatedTarget)\n const targetIsSubmit = isContains(submitRef.current, relatedTarget)\n const isValidBlur = !targetIsCancel && !targetIsSubmit\n\n if (!isValidBlur) return\n\n if (submitOnBlur) {\n onSubmit()\n } else {\n onCancel()\n }\n },\n [isEditing, submitOnBlur, onSubmit, onCancel],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(ref, previewRef),\n 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: PropGetter<\"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: PropGetter<\"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<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, editRef),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [disabled, onEdit, readOnly, formControlProps],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [disabled, onSubmit, readOnly, formControlProps],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [disabled, onCancel, readOnly, formControlProps],\n )\n\n return {\n isEditing,\n value,\n 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\ninterface EditableContext {\n isEditing: boolean\n getPreviewProps: PropGetter<\"span\">\n getInputProps: PropGetter<\"input\">\n getTextareaProps: PropGetter<\"textarea\">\n getEditProps: PropGetter<\"button\">\n getCancelProps: PropGetter<\"button\">\n getSubmitProps: PropGetter<\"button\">\n styles: { [key: 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\ninterface EditableElementProps\n extends Pick<\n UseEditableReturn,\n \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n > {}\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ninterface 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 interface EditableProps\n extends Omit<\n HTMLUIProps,\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] = useComponentMultiStyle(\"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\nEditable.displayName = \"Editable\"\nEditable.__ui__ = \"Editable\"\n\nexport interface EditablePreviewProps extends HTMLUIProps<\"span\"> {}\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles, getPreviewProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditablePreview.displayName = \"EditablePreview\"\nEditablePreview.__ui__ = \"EditablePreview\"\n\nexport interface EditableInputProps extends HTMLUIProps<\"input\"> {}\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditableInput.displayName = \"EditableInput\"\nEditableInput.__ui__ = \"EditableInput\"\n\nexport interface EditableTextareaProps extends HTMLUIProps<\"textarea\"> {}\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n ({ className, ...rest }, ref) => {\n const { styles, getTextareaProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditableTextarea.displayName = \"EditableTextarea\"\nEditableTextarea.__ui__ = \"EditableTextarea\"\n"],"mappings":"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","names":["props"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/editable.tsx"],"sourcesContent":["export {\n Editable,\n EditableInput,\n EditablePreview,\n EditableTextarea,\n useEditable,\n useEditableControl,\n} from \"./editable\"\nexport type {\n EditableInputProps,\n EditablePreviewProps,\n EditableProps,\n EditableTextareaProps,\n UseEditableProps,\n UseEditableReturn,\n} from \"./editable\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"@yamada-ui/use-focus\"\nimport {\n createContext,\n cx,\n handlerAll,\n isContains,\n mergeRefs,\n pickObject,\n runIfFunc,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport interface UseEditableProps extends FormControlOptions {\n /**\n * The initial value of the Editable in both edit & preview mode.\n */\n defaultValue?: string\n /**\n * If `true`, the read only view, has a `tabIndex` set to `0`\n * so it can receive focus via the keyboard or click.\n *\n * @default true\n */\n isPreviewFocusable?: boolean\n /**\n * The placeholder text when the value is empty.\n */\n placeholder?: string\n /**\n * If `true`, the input's text will be highlighted on focus.\n *\n * @default true\n */\n selectAllOnFocus?: boolean\n /**\n * If `true`, the Editable will start with edit mode by default.\n */\n startWithEditView?: boolean\n /**\n * If `true`, it'll update the value onBlur and turn off the edit mode.\n *\n * @default true\n */\n submitOnBlur?: boolean\n /**\n * The value of the Editable in both edit & preview mode.\n */\n value?: string\n /**\n * Callback invoked when user cancels input with the `Esc` key.\n * It provides the last confirmed value as argument.\n */\n onCancel?: (preValue: string) => void\n /**\n * A callback invoked when user changes input.\n */\n onChange?: (value: string) => void\n /**\n * A callback invoked once the user enters edit mode.\n */\n onEdit?: () => void\n /**\n * A callback invoked when user confirms value with `enter` key or by blurring input.\n */\n onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n const {\n id,\n defaultValue,\n isPreviewFocusable = true,\n placeholder,\n selectAllOnFocus = true,\n startWithEditView,\n submitOnBlur = true,\n value: valueProp,\n onCancel: onCancelProp,\n onChange: onChangeProp,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n } = useFormControlProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const { disabled, readOnly, required, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n\n const [isEditing, setIsEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const isInteractive = !isEditing && !disabled\n const isValueEmpty = value.length === 0\n\n const [prevValue, setPrevValue] = useState(value)\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: isEditing,\n })\n\n useSafeLayoutEffect(() => {\n if (!isEditing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!isEditing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [isEditing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (isEditing) return\n\n const el = inputRef.current\n const activeEl = el?.ownerDocument.activeElement\n\n if (activeEl === el) el?.blur()\n }, [isEditing])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n setValue(ev.currentTarget.value),\n [setValue],\n )\n\n const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n const onEdit = useCallback(() => {\n if (isInteractive) setIsEditing(true)\n }, [isInteractive])\n\n const onCancel = useCallback(() => {\n setIsEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setIsEditing(false)\n setPrevValue(value)\n onSubmitProp?.(value)\n }, [onSubmitProp, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n ev.preventDefault()\n\n if (ev.key === \"Escape\") {\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) onSubmit()\n }\n },\n [onCancel, onSubmit],\n )\n\n const onKeyDownWithoutSubmit = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!isEditing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = isContains(cancelRef.current, relatedTarget)\n const targetIsSubmit = isContains(submitRef.current, relatedTarget)\n const isValidBlur = !targetIsCancel && !targetIsSubmit\n\n if (!isValidBlur) return\n\n if (submitOnBlur) {\n onSubmit()\n } else {\n onCancel()\n }\n },\n [isEditing, submitOnBlur, onSubmit, onCancel],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(ref, previewRef),\n children: isValueEmpty ? placeholder : value,\n hidden: isEditing,\n tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n isEditing,\n isInteractive,\n isPreviewFocusable,\n isValueEmpty,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(ref, inputRef),\n disabled,\n hidden: !isEditing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n disabled,\n id,\n isEditing,\n onBlur,\n onChange,\n onKeyDown,\n onUpdatePrevValue,\n placeholder,\n readOnly,\n required,\n formControlProps,\n value,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(ref, inputRef),\n disabled,\n hidden: !isEditing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n disabled,\n id,\n isEditing,\n onBlur,\n onChange,\n onKeyDownWithoutSubmit,\n onUpdatePrevValue,\n placeholder,\n readOnly,\n required,\n formControlProps,\n value,\n ],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, editRef),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [disabled, onEdit, readOnly, formControlProps],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [disabled, onSubmit, readOnly, formControlProps],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [disabled, onCancel, readOnly, formControlProps],\n )\n\n return {\n isEditing,\n value,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n const { isEditing, getCancelProps, getEditProps, getSubmitProps } =\n useEditableContext()\n\n return { isEditing, getCancelProps, getEditProps, getSubmitProps }\n}\n\ninterface EditableContext {\n isEditing: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n getCancelProps: PropGetter<\"button\">\n getEditProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n getPreviewProps: PropGetter<\"span\">\n getSubmitProps: PropGetter<\"button\">\n getTextareaProps: PropGetter<\"textarea\">\n}\n\nconst [EditableProvider, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n errorMessage:\n \"useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`\",\n})\n\ninterface EditableElementProps\n extends Pick<\n UseEditableReturn,\n \"isEditing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n > {}\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ninterface EditableOptions {\n children?: EditableElement | ReactNode\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport interface EditableProps\n extends Omit<\n HTMLUIProps,\n \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n >,\n ThemeProps<\"Editable\">,\n UseEditableProps,\n EditableOptions {}\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/editable\n */\nexport const Editable = forwardRef<EditableProps, \"div\">(\n ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Editable\", {\n errorBorderColor,\n focusBorderColor,\n ...props,\n })\n const {\n className,\n children,\n defaultValue,\n isDisabled,\n isInvalid,\n isPreviewFocusable,\n isReadOnly,\n isRequired,\n placeholder,\n selectAllOnFocus,\n startWithEditView,\n submitOnBlur,\n value,\n onCancel: onCancelProp,\n onChange,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const {\n isEditing,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n } = useEditable({\n defaultValue,\n isDisabled,\n isInvalid,\n isPreviewFocusable,\n isReadOnly,\n isRequired,\n placeholder,\n selectAllOnFocus,\n startWithEditView,\n submitOnBlur,\n value,\n onCancel: onCancelProp,\n onChange,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n })\n\n const cloneChildren = runIfFunc(children, {\n isEditing,\n onCancel,\n onEdit,\n onSubmit,\n })\n\n const css: CSSUIObject = { ...styles.container }\n\n return (\n <EditableProvider\n value={{\n isEditing,\n styles,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n }}\n >\n <ui.div\n ref={ref}\n className={cx(\"ui-editable\", className)}\n {...rest}\n __css={css}\n >\n {cloneChildren}\n </ui.div>\n </EditableProvider>\n )\n },\n)\n\nEditable.displayName = \"Editable\"\nEditable.__ui__ = \"Editable\"\n\nexport interface EditablePreviewProps extends HTMLUIProps<\"span\"> {}\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles, getPreviewProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n cursor: \"text\",\n display: \"inline-block\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n textAlign: \"inherit\",\n ...styles.preview,\n }\n\n return (\n <ui.span\n className={cx(\"ui-editable__preview\", className)}\n {...getPreviewProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditablePreview.displayName = \"EditablePreview\"\nEditablePreview.__ui__ = \"EditablePreview\"\n\nexport interface EditableInputProps extends HTMLUIProps<\"input\"> {}\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n outline: 0,\n textAlign: \"inherit\",\n ...styles.input,\n }\n\n return (\n <ui.input\n className={cx(\"ui-editable__input\", className)}\n {...getInputProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditableInput.displayName = \"EditableInput\"\nEditableInput.__ui__ = \"EditableInput\"\n\nexport interface EditableTextareaProps extends HTMLUIProps<\"textarea\"> {}\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n ({ className, ...rest }, ref) => {\n const { styles, getTextareaProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n outline: 0,\n textAlign: \"inherit\",\n ...styles.textarea,\n }\n\n return (\n <ui.textarea\n className={cx(\"ui-editable__textarea\", className)}\n {...getTextareaProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditableTextarea.displayName = \"EditableTextarea\"\nEditableTextarea.__ui__ = \"EditableTextarea\"\n"],"mappings":"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","names":["props"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/editable",
|
3
|
-
"version": "1.0.45-dev-
|
3
|
+
"version": "1.0.45-dev-20241006000212",
|
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.15.2-dev-
|
40
|
-
"@yamada-ui/form-control": "2.1.4-dev-
|
41
|
-
"@yamada-ui/use-controllable-state": "1.0.
|
42
|
-
"@yamada-ui/use-focus": "1.0.
|
43
|
-
"@yamada-ui/utils": "1.5.
|
39
|
+
"@yamada-ui/core": "1.15.2-dev-20241006000212",
|
40
|
+
"@yamada-ui/form-control": "2.1.4-dev-20241006000212",
|
41
|
+
"@yamada-ui/use-controllable-state": "1.0.22-dev-20241006000212",
|
42
|
+
"@yamada-ui/use-focus": "1.0.23-dev-20241006000212",
|
43
|
+
"@yamada-ui/utils": "1.5.3-dev-20241006000212"
|
44
44
|
},
|
45
45
|
"devDependencies": {
|
46
46
|
"clean-package": "2.2.0",
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/editable.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n PropGetter,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\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 {\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 interface UseEditableProps extends 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 startWithEditView,\n isPreviewFocusable = true,\n submitOnBlur = true,\n selectAllOnFocus = true,\n ...rest\n } = useFormControlProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const { required, disabled, readOnly, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n\n const [isEditing, setIsEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const isInteractive = !isEditing && !disabled\n const isValueEmpty = value.length === 0\n\n const [prevValue, setPrevValue] = useState(value)\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n useFocusOnPointerDown({\n ref: inputRef,\n 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) => {\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) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!isEditing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = isContains(cancelRef.current, relatedTarget)\n const targetIsSubmit = isContains(submitRef.current, relatedTarget)\n const isValidBlur = !targetIsCancel && !targetIsSubmit\n\n if (!isValidBlur) return\n\n if (submitOnBlur) {\n onSubmit()\n } else {\n onCancel()\n }\n },\n [isEditing, submitOnBlur, onSubmit, onCancel],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(ref, previewRef),\n 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: PropGetter<\"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: PropGetter<\"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<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, editRef),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [disabled, onEdit, readOnly, formControlProps],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [disabled, onSubmit, readOnly, formControlProps],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [disabled, onCancel, readOnly, formControlProps],\n )\n\n return {\n isEditing,\n value,\n 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\ninterface EditableContext {\n isEditing: boolean\n getPreviewProps: PropGetter<\"span\">\n getInputProps: PropGetter<\"input\">\n getTextareaProps: PropGetter<\"textarea\">\n getEditProps: PropGetter<\"button\">\n getCancelProps: PropGetter<\"button\">\n getSubmitProps: PropGetter<\"button\">\n styles: { [key: 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\ninterface EditableElementProps\n extends Pick<\n UseEditableReturn,\n \"isEditing\" | \"onSubmit\" | \"onCancel\" | \"onEdit\"\n > {}\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ninterface 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 interface EditableProps\n extends Omit<\n HTMLUIProps,\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] = useComponentMultiStyle(\"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\nEditable.displayName = \"Editable\"\nEditable.__ui__ = \"Editable\"\n\nexport interface EditablePreviewProps extends HTMLUIProps<\"span\"> {}\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles, getPreviewProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditablePreview.displayName = \"EditablePreview\"\nEditablePreview.__ui__ = \"EditablePreview\"\n\nexport interface EditableInputProps extends HTMLUIProps<\"input\"> {}\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditableInput.displayName = \"EditableInput\"\nEditableInput.__ui__ = \"EditableInput\"\n\nexport interface EditableTextareaProps extends HTMLUIProps<\"textarea\"> {}\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n ({ className, ...rest }, ref) => {\n const { styles, getTextareaProps } = useEditableContext()\n\n const css: CSSUIObject = {\n 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\nEditableTextarea.displayName = \"EditableTextarea\"\nEditableTextarea.__ui__ = \"EditableTextarea\"\n"],"mappings":"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","names":["props"]}
|