@yamada-ui/editable 1.0.45-dev-20241005224505 → 1.0.45-dev-20241006032009
Sign up to get free protection for your applications and to get access to all the features.
- 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/editable.js
CHANGED
@@ -39,21 +39,21 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
39
|
var useEditable = (props) => {
|
40
40
|
const {
|
41
41
|
id,
|
42
|
+
defaultValue,
|
43
|
+
isPreviewFocusable = true,
|
42
44
|
placeholder,
|
45
|
+
selectAllOnFocus = true,
|
46
|
+
startWithEditView,
|
47
|
+
submitOnBlur = true,
|
43
48
|
value: valueProp,
|
44
|
-
onChange: onChangeProp,
|
45
49
|
onCancel: onCancelProp,
|
46
|
-
|
50
|
+
onChange: onChangeProp,
|
47
51
|
onEdit: onEditProp,
|
48
|
-
|
49
|
-
startWithEditView,
|
50
|
-
isPreviewFocusable = true,
|
51
|
-
submitOnBlur = true,
|
52
|
-
selectAllOnFocus = true,
|
52
|
+
onSubmit: onSubmitProp,
|
53
53
|
...rest
|
54
54
|
} = (0, import_form_control.useFormControlProps)(props);
|
55
55
|
const onEditRef = (0, import_utils.useCallbackRef)(onEditProp);
|
56
|
-
const {
|
56
|
+
const { disabled, readOnly, required, ...formControlProps } = (0, import_utils.pickObject)(
|
57
57
|
rest,
|
58
58
|
import_form_control.formControlProperties
|
59
59
|
);
|
@@ -75,8 +75,8 @@ var useEditable = (props) => {
|
|
75
75
|
const submitRef = (0, import_react.useRef)(null);
|
76
76
|
(0, import_use_focus.useFocusOnPointerDown)({
|
77
77
|
ref: inputRef,
|
78
|
-
|
79
|
-
|
78
|
+
elements: [cancelRef, submitRef],
|
79
|
+
enabled: isEditing
|
80
80
|
});
|
81
81
|
(0, import_utils.useSafeLayoutEffect)(() => {
|
82
82
|
var _a, _b;
|
@@ -125,7 +125,7 @@ var useEditable = (props) => {
|
|
125
125
|
if (ev.key === "Escape") {
|
126
126
|
onCancel();
|
127
127
|
} else {
|
128
|
-
const {
|
128
|
+
const { metaKey, shiftKey } = ev;
|
129
129
|
if (!shiftKey && !metaKey) onSubmit();
|
130
130
|
}
|
131
131
|
},
|
@@ -161,9 +161,9 @@ var useEditable = (props) => {
|
|
161
161
|
(props2 = {}, ref = null) => ({
|
162
162
|
...props2,
|
163
163
|
ref: (0, import_utils.mergeRefs)(ref, previewRef),
|
164
|
+
children: isValueEmpty ? placeholder : value,
|
164
165
|
hidden: isEditing,
|
165
166
|
tabIndex: isInteractive && isPreviewFocusable ? 0 : void 0,
|
166
|
-
children: isValueEmpty ? placeholder : value,
|
167
167
|
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onEdit, onUpdatePrevValue)
|
168
168
|
}),
|
169
169
|
[
|
@@ -181,18 +181,18 @@ var useEditable = (props) => {
|
|
181
181
|
(props2 = {}, ref = null) => ({
|
182
182
|
...formControlProps,
|
183
183
|
...props2,
|
184
|
-
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
185
184
|
id,
|
186
|
-
|
187
|
-
hidden: !isEditing,
|
188
|
-
value,
|
189
|
-
required,
|
185
|
+
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
190
186
|
disabled,
|
187
|
+
hidden: !isEditing,
|
188
|
+
placeholder,
|
191
189
|
readOnly,
|
190
|
+
required,
|
191
|
+
value,
|
192
192
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
193
193
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
194
|
-
|
195
|
-
|
194
|
+
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue),
|
195
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown)
|
196
196
|
}),
|
197
197
|
[
|
198
198
|
disabled,
|
@@ -213,18 +213,18 @@ var useEditable = (props) => {
|
|
213
213
|
(props2 = {}, ref = null) => ({
|
214
214
|
...formControlProps,
|
215
215
|
...props2,
|
216
|
-
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
217
216
|
id,
|
218
|
-
|
219
|
-
hidden: !isEditing,
|
220
|
-
value,
|
221
|
-
required,
|
217
|
+
ref: (0, import_utils.mergeRefs)(ref, inputRef),
|
222
218
|
disabled,
|
219
|
+
hidden: !isEditing,
|
220
|
+
placeholder,
|
223
221
|
readOnly,
|
222
|
+
required,
|
223
|
+
value,
|
224
224
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
|
225
225
|
onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
|
226
|
-
|
227
|
-
|
226
|
+
onFocus: (0, import_utils.handlerAll)(props2.onFocus, onUpdatePrevValue),
|
227
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDownWithoutSubmit)
|
228
228
|
}),
|
229
229
|
[
|
230
230
|
disabled,
|
@@ -280,85 +280,85 @@ var useEditable = (props) => {
|
|
280
280
|
return {
|
281
281
|
isEditing,
|
282
282
|
value,
|
283
|
-
|
284
|
-
onCancel,
|
285
|
-
onSubmit,
|
286
|
-
getPreviewProps,
|
287
|
-
getInputProps,
|
288
|
-
getTextareaProps,
|
283
|
+
getCancelProps,
|
289
284
|
getEditProps,
|
285
|
+
getInputProps,
|
286
|
+
getPreviewProps,
|
290
287
|
getSubmitProps,
|
291
|
-
|
288
|
+
getTextareaProps,
|
289
|
+
onCancel,
|
290
|
+
onEdit,
|
291
|
+
onSubmit
|
292
292
|
};
|
293
293
|
};
|
294
294
|
var useEditableControl = () => {
|
295
|
-
const { isEditing,
|
296
|
-
return { isEditing,
|
295
|
+
const { isEditing, getCancelProps, getEditProps, getSubmitProps } = useEditableContext();
|
296
|
+
return { isEditing, getCancelProps, getEditProps, getSubmitProps };
|
297
297
|
};
|
298
298
|
var [EditableProvider, useEditableContext] = (0, import_utils.createContext)({
|
299
299
|
name: "EditableContext",
|
300
300
|
errorMessage: "useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`"
|
301
301
|
});
|
302
302
|
var Editable = (0, import_core.forwardRef)(
|
303
|
-
({
|
303
|
+
({ errorBorderColor, focusBorderColor, ...props }, ref) => {
|
304
304
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Editable", {
|
305
|
-
focusBorderColor,
|
306
305
|
errorBorderColor,
|
306
|
+
focusBorderColor,
|
307
307
|
...props
|
308
308
|
});
|
309
309
|
const {
|
310
310
|
className,
|
311
311
|
children,
|
312
|
+
defaultValue,
|
313
|
+
isDisabled,
|
312
314
|
isInvalid,
|
315
|
+
isPreviewFocusable,
|
313
316
|
isReadOnly,
|
314
317
|
isRequired,
|
315
|
-
isDisabled,
|
316
318
|
placeholder,
|
317
|
-
|
318
|
-
defaultValue,
|
319
|
+
selectAllOnFocus,
|
319
320
|
startWithEditView,
|
320
|
-
isPreviewFocusable,
|
321
321
|
submitOnBlur,
|
322
|
-
|
323
|
-
onChange,
|
322
|
+
value,
|
324
323
|
onCancel: onCancelProp,
|
325
|
-
|
324
|
+
onChange,
|
326
325
|
onEdit: onEditProp,
|
326
|
+
onSubmit: onSubmitProp,
|
327
327
|
...rest
|
328
328
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
329
329
|
const {
|
330
330
|
isEditing,
|
331
|
-
getPreviewProps,
|
332
|
-
getInputProps,
|
333
|
-
getTextareaProps,
|
334
|
-
getEditProps,
|
335
331
|
getCancelProps,
|
332
|
+
getEditProps,
|
333
|
+
getInputProps,
|
334
|
+
getPreviewProps,
|
336
335
|
getSubmitProps,
|
337
|
-
|
336
|
+
getTextareaProps,
|
338
337
|
onCancel,
|
339
|
-
onEdit
|
338
|
+
onEdit,
|
339
|
+
onSubmit
|
340
340
|
} = useEditable({
|
341
|
+
defaultValue,
|
342
|
+
isDisabled,
|
341
343
|
isInvalid,
|
344
|
+
isPreviewFocusable,
|
342
345
|
isReadOnly,
|
343
346
|
isRequired,
|
344
|
-
isDisabled,
|
345
347
|
placeholder,
|
346
|
-
|
347
|
-
defaultValue,
|
348
|
+
selectAllOnFocus,
|
348
349
|
startWithEditView,
|
349
|
-
isPreviewFocusable,
|
350
350
|
submitOnBlur,
|
351
|
-
|
352
|
-
onChange,
|
351
|
+
value,
|
353
352
|
onCancel: onCancelProp,
|
354
|
-
|
355
|
-
onEdit: onEditProp
|
353
|
+
onChange,
|
354
|
+
onEdit: onEditProp,
|
355
|
+
onSubmit: onSubmitProp
|
356
356
|
});
|
357
357
|
const cloneChildren = (0, import_utils.runIfFunc)(children, {
|
358
358
|
isEditing,
|
359
|
-
onSubmit,
|
360
359
|
onCancel,
|
361
|
-
onEdit
|
360
|
+
onEdit,
|
361
|
+
onSubmit
|
362
362
|
});
|
363
363
|
const css = { ...styles.container };
|
364
364
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -366,13 +366,13 @@ var Editable = (0, import_core.forwardRef)(
|
|
366
366
|
{
|
367
367
|
value: {
|
368
368
|
isEditing,
|
369
|
-
|
370
|
-
getInputProps,
|
371
|
-
getTextareaProps,
|
372
|
-
getEditProps,
|
369
|
+
styles,
|
373
370
|
getCancelProps,
|
371
|
+
getEditProps,
|
372
|
+
getInputProps,
|
373
|
+
getPreviewProps,
|
374
374
|
getSubmitProps,
|
375
|
-
|
375
|
+
getTextareaProps
|
376
376
|
},
|
377
377
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
378
378
|
import_core.ui.div,
|
@@ -394,12 +394,12 @@ var EditablePreview = (0, import_core.forwardRef)(
|
|
394
394
|
({ className, ...rest }, ref) => {
|
395
395
|
const { styles, getPreviewProps } = useEditableContext();
|
396
396
|
const css = {
|
397
|
+
bg: "transparent",
|
397
398
|
cursor: "text",
|
398
399
|
display: "inline-block",
|
399
400
|
fontSize: "inherit",
|
400
401
|
fontWeight: "inherit",
|
401
402
|
textAlign: "inherit",
|
402
|
-
bg: "transparent",
|
403
403
|
...styles.preview
|
404
404
|
};
|
405
405
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -418,11 +418,11 @@ var EditableInput = (0, import_core.forwardRef)(
|
|
418
418
|
({ className, ...rest }, ref) => {
|
419
419
|
const { styles, getInputProps } = useEditableContext();
|
420
420
|
const css = {
|
421
|
-
|
421
|
+
bg: "transparent",
|
422
422
|
fontSize: "inherit",
|
423
423
|
fontWeight: "inherit",
|
424
|
+
outline: 0,
|
424
425
|
textAlign: "inherit",
|
425
|
-
bg: "transparent",
|
426
426
|
...styles.input
|
427
427
|
};
|
428
428
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -441,11 +441,11 @@ var EditableTextarea = (0, import_core.forwardRef)(
|
|
441
441
|
({ className, ...rest }, ref) => {
|
442
442
|
const { styles, getTextareaProps } = useEditableContext();
|
443
443
|
const css = {
|
444
|
-
|
444
|
+
bg: "transparent",
|
445
445
|
fontSize: "inherit",
|
446
446
|
fontWeight: "inherit",
|
447
|
+
outline: 0,
|
447
448
|
textAlign: "inherit",
|
448
|
-
bg: "transparent",
|
449
449
|
...styles.textarea
|
450
450
|
};
|
451
451
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
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 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/editable.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"@yamada-ui/use-focus\"\nimport {\n createContext,\n cx,\n handlerAll,\n isContains,\n mergeRefs,\n pickObject,\n runIfFunc,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nexport interface UseEditableProps extends FormControlOptions {\n /**\n * The initial value of the Editable in both edit & preview mode.\n */\n defaultValue?: string\n /**\n * If `true`, the read only view, has a `tabIndex` set to `0`\n * so it can receive focus via the keyboard or click.\n *\n * @default true\n */\n isPreviewFocusable?: boolean\n /**\n * The placeholder text when the value is empty.\n */\n placeholder?: string\n /**\n * If `true`, the input's text will be highlighted on focus.\n *\n * @default true\n */\n selectAllOnFocus?: boolean\n /**\n * If `true`, the Editable will start with edit mode by default.\n */\n startWithEditView?: boolean\n /**\n * If `true`, it'll update the value onBlur and turn off the edit mode.\n *\n * @default true\n */\n submitOnBlur?: boolean\n /**\n * The value of the Editable in both edit & preview mode.\n */\n value?: string\n /**\n * Callback invoked when user cancels input with the `Esc` key.\n * It provides the last confirmed value as argument.\n */\n onCancel?: (preValue: string) => void\n /**\n * A callback invoked when user changes input.\n */\n onChange?: (value: string) => void\n /**\n * A callback invoked once the user enters edit mode.\n */\n onEdit?: () => void\n /**\n * A callback invoked when user confirms value with `enter` key or by blurring input.\n */\n onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps) => {\n const {\n id,\n defaultValue,\n isPreviewFocusable = true,\n placeholder,\n selectAllOnFocus = true,\n startWithEditView,\n submitOnBlur = true,\n value: valueProp,\n onCancel: onCancelProp,\n onChange: onChangeProp,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n } = useFormControlProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const { disabled, readOnly, required, ...formControlProps } = pickObject(\n rest,\n formControlProperties,\n )\n\n const [isEditing, setIsEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const isInteractive = !isEditing && !disabled\n const isValueEmpty = value.length === 0\n\n const [prevValue, setPrevValue] = useState(value)\n\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: isEditing,\n })\n\n useSafeLayoutEffect(() => {\n if (!isEditing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!isEditing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [isEditing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (isEditing) return\n\n const el = inputRef.current\n const activeEl = el?.ownerDocument.activeElement\n\n if (activeEl === el) el?.blur()\n }, [isEditing])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n setValue(ev.currentTarget.value),\n [setValue],\n )\n\n const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n const onEdit = useCallback(() => {\n if (isInteractive) setIsEditing(true)\n }, [isInteractive])\n\n const onCancel = useCallback(() => {\n setIsEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setIsEditing(false)\n setPrevValue(value)\n onSubmitProp?.(value)\n }, [onSubmitProp, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n ev.preventDefault()\n\n if (ev.key === \"Escape\") {\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) onSubmit()\n }\n },\n [onCancel, onSubmit],\n )\n\n const onKeyDownWithoutSubmit = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!isEditing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = isContains(cancelRef.current, relatedTarget)\n const targetIsSubmit = isContains(submitRef.current, relatedTarget)\n const isValidBlur = !targetIsCancel && !targetIsSubmit\n\n if (!isValidBlur) return\n\n if (submitOnBlur) {\n onSubmit()\n } else {\n onCancel()\n }\n },\n [isEditing, submitOnBlur, onSubmit, onCancel],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(ref, previewRef),\n children: isValueEmpty ? placeholder : value,\n hidden: isEditing,\n tabIndex: isInteractive && isPreviewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n isEditing,\n isInteractive,\n isPreviewFocusable,\n isValueEmpty,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(ref, inputRef),\n disabled,\n hidden: !isEditing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n disabled,\n id,\n isEditing,\n onBlur,\n onChange,\n onKeyDown,\n onUpdatePrevValue,\n placeholder,\n readOnly,\n required,\n formControlProps,\n value,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n id,\n ref: mergeRefs(ref, inputRef),\n disabled,\n hidden: !isEditing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n disabled,\n id,\n isEditing,\n onBlur,\n onChange,\n onKeyDownWithoutSubmit,\n onUpdatePrevValue,\n placeholder,\n readOnly,\n required,\n formControlProps,\n value,\n ],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(ref, editRef),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [disabled, onEdit, readOnly, formControlProps],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [disabled, onSubmit, readOnly, formControlProps],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...formControlProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n type: \"button\",\n disabled,\n readOnly,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [disabled, onCancel, readOnly, formControlProps],\n )\n\n return {\n isEditing,\n value,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n\nexport const useEditableControl = () => {\n const { isEditing, getCancelProps, getEditProps, getSubmitProps } =\n useEditableContext()\n\n return { isEditing, getCancelProps, getEditProps, getSubmitProps }\n}\n\ninterface EditableContext {\n isEditing: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n getCancelProps: PropGetter<\"button\">\n getEditProps: PropGetter<\"button\">\n getInputProps: PropGetter<\"input\">\n getPreviewProps: PropGetter<\"span\">\n getSubmitProps: PropGetter<\"button\">\n getTextareaProps: PropGetter<\"textarea\">\n}\n\nconst [EditableProvider, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n errorMessage:\n \"useEditableContext: context is undefined. Seems you forgot to wrap the editable components in `<Editable />`\",\n})\n\ninterface EditableElementProps\n extends Pick<\n UseEditableReturn,\n \"isEditing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n > {}\n\ntype EditableElement = (props: EditableElementProps) => ReactNode\n\ninterface EditableOptions {\n children?: EditableElement | ReactNode\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport interface EditableProps\n extends Omit<\n HTMLUIProps,\n \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n >,\n ThemeProps<\"Editable\">,\n UseEditableProps,\n EditableOptions {}\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/editable\n */\nexport const Editable = forwardRef<EditableProps, \"div\">(\n ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Editable\", {\n errorBorderColor,\n focusBorderColor,\n ...props,\n })\n const {\n className,\n children,\n defaultValue,\n isDisabled,\n isInvalid,\n isPreviewFocusable,\n isReadOnly,\n isRequired,\n placeholder,\n selectAllOnFocus,\n startWithEditView,\n submitOnBlur,\n value,\n onCancel: onCancelProp,\n onChange,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const {\n isEditing,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n } = useEditable({\n defaultValue,\n isDisabled,\n isInvalid,\n isPreviewFocusable,\n isReadOnly,\n isRequired,\n placeholder,\n selectAllOnFocus,\n startWithEditView,\n submitOnBlur,\n value,\n onCancel: onCancelProp,\n onChange,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n })\n\n const cloneChildren = runIfFunc(children, {\n isEditing,\n onCancel,\n onEdit,\n onSubmit,\n })\n\n const css: CSSUIObject = { ...styles.container }\n\n return (\n <EditableProvider\n value={{\n isEditing,\n styles,\n getCancelProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getSubmitProps,\n getTextareaProps,\n }}\n >\n <ui.div\n ref={ref}\n className={cx(\"ui-editable\", className)}\n {...rest}\n __css={css}\n >\n {cloneChildren}\n </ui.div>\n </EditableProvider>\n )\n },\n)\n\nEditable.displayName = \"Editable\"\nEditable.__ui__ = \"Editable\"\n\nexport interface EditablePreviewProps extends HTMLUIProps<\"span\"> {}\n\nexport const EditablePreview = forwardRef<EditablePreviewProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles, getPreviewProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n cursor: \"text\",\n display: \"inline-block\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n textAlign: \"inherit\",\n ...styles.preview,\n }\n\n return (\n <ui.span\n className={cx(\"ui-editable__preview\", className)}\n {...getPreviewProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditablePreview.displayName = \"EditablePreview\"\nEditablePreview.__ui__ = \"EditablePreview\"\n\nexport interface EditableInputProps extends HTMLUIProps<\"input\"> {}\n\nexport const EditableInput = forwardRef<EditableInputProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n outline: 0,\n textAlign: \"inherit\",\n ...styles.input,\n }\n\n return (\n <ui.input\n className={cx(\"ui-editable__input\", className)}\n {...getInputProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditableInput.displayName = \"EditableInput\"\nEditableInput.__ui__ = \"EditableInput\"\n\nexport interface EditableTextareaProps extends HTMLUIProps<\"textarea\"> {}\n\nexport const EditableTextarea = forwardRef<EditableTextareaProps, \"textarea\">(\n ({ className, ...rest }, ref) => {\n const { styles, getTextareaProps } = useEditableContext()\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n fontSize: \"inherit\",\n fontWeight: \"inherit\",\n outline: 0,\n textAlign: \"inherit\",\n ...styles.textarea,\n }\n\n return (\n <ui.textarea\n className={cx(\"ui-editable__textarea\", className)}\n {...getTextareaProps(rest, ref)}\n __css={css}\n />\n )\n },\n)\n\nEditableTextarea.displayName = \"EditableTextarea\"\nEditableTextarea.__ui__ = \"EditableTextarea\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,kBAKO;AACP,0BAGO;AACP,oCAAqC;AACrC,uBAAsC;AACtC,mBAWO;AACP,mBAAyD;AAyejD;AAhbD,IAAM,cAAc,CAAC,UAA4B;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,IACA,eAAe;AAAA,IACf,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,yCAAoB,KAAK;AAC7B,QAAM,gBAAY,6BAAe,UAAU;AAC3C,QAAM,EAAE,UAAU,UAAU,UAAU,GAAG,iBAAiB,QAAI;AAAA,IAC5D;AAAA,IACA;AAAA,EACF;AAEA,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,UAAU,CAAC,WAAW,SAAS;AAAA,IAC/B,SAAS;AAAA,EACX,CAAC;AAED,wCAAoB,MAAM;AA5I5B;AA6II,QAAI,CAAC,UAAW;AAEhB,mBAAS,YAAT,mBAAkB;AAElB,QAAI,iBAAkB,gBAAS,YAAT,mBAAkB;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AApJxB;AAqJI,QAAI,CAAC,WAAW;AACd,oBAAQ,YAAR,mBAAiB;AAEjB;AAAA,IACF;AAEA,mBAAS,YAAT,mBAAkB;AAElB,QAAI,iBAAkB,gBAAS,YAAT,mBAAkB;AAExC,cAAU;AAAA,EACZ,GAAG,CAAC,WAAW,WAAW,gBAAgB,CAAC;AAE3C,8BAAU,MAAM;AACd,QAAI,UAAW;AAEf,UAAM,KAAK,SAAS;AACpB,UAAM,WAAW,yBAAI,cAAc;AAEnC,QAAI,aAAa,GAAI,0BAAI;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAAW;AAAA,IACf,CAAC,OACC,SAAS,GAAG,cAAc,KAAK;AAAA,IACjC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBAAoB,0BAAY,MAAM,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;AAExE,QAAM,aAAS,0BAAY,MAAM;AAC/B,QAAI,cAAe,cAAa,IAAI;AAAA,EACtC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,eAAW,0BAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,aAAS,SAAS;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,WAAW,cAAc,QAAQ,CAAC;AAEtC,QAAM,eAAW,0BAAY,MAAM;AACjC,iBAAa,KAAK;AAClB,iBAAa,KAAK;AAClB,iDAAe;AAAA,EACjB,GAAG,CAAC,cAAc,KAAK,CAAC;AAExB,QAAM,gBAAY;AAAA,IAChB,CAAC,OAAsB;AACrB,UAAI,GAAG,QAAQ,YAAY,GAAG,QAAQ,QAAS;AAE/C,SAAG,eAAe;AAElB,UAAI,GAAG,QAAQ,UAAU;AACvB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,EAAE,SAAS,SAAS,IAAI;AAE9B,YAAI,CAAC,YAAY,CAAC,QAAS,UAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,6BAAyB;AAAA,IAC7B,CAAC,OAAsB;AACrB,UAAI,GAAG,QAAQ,SAAU;AAEzB,SAAG,eAAe;AAClB,eAAS;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAS;AAAA,IACb,CAAC,OAAmB;AA/NxB;AAgOM,UAAI,CAAC,UAAW;AAEhB,YAAM,gBAAgB,GAAG,cAAc;AACvC,YAAM,iBAAiB,QAAG,kBAAH,YACrB,cAAc;AAChB,YAAM,qBAAiB,yBAAW,UAAU,SAAS,aAAa;AAClE,YAAM,qBAAiB,yBAAW,UAAU,SAAS,aAAa;AAClE,YAAM,cAAc,CAAC,kBAAkB,CAAC;AAExC,UAAI,CAAC,YAAa;AAElB,UAAI,cAAc;AAChB,iBAAS;AAAA,MACX,OAAO;AACL,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,WAAW,cAAc,UAAU,QAAQ;AAAA,EAC9C;AAEA,QAAM,sBAAsC;AAAA,IAC1C,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,UAAU;AAAA,MAC9B,UAAU,eAAe,cAAc;AAAA,MACvC,QAAQ;AAAA,MACR,UAAU,iBAAiB,qBAAqB,IAAI;AAAA,MACpD,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,oBAAqC;AAAA,IACzC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH;AAAA,MACA,SAAK,wBAAU,KAAK,QAAQ;AAAA,MAC5B;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,aAAS,yBAAWA,OAAM,SAAS,iBAAiB;AAAA,MACpD,eAAW,yBAAWA,OAAM,WAAW,SAAS;AAAA,IAClD;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,uBAA2C;AAAA,IAC/C,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,GAAGA;AAAA,MACH;AAAA,MACA,SAAK,wBAAU,KAAK,QAAQ;AAAA,MAC5B;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,aAAS,yBAAWA,OAAM,SAAS,iBAAiB;AAAA,MACpD,eAAW,yBAAWA,OAAM,WAAW,sBAAsB;AAAA,IAC/D;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,mBAAqC;AAAA,IACzC,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,qBAAuC;AAAA,IAC3C,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,qBAAuC;AAAA,IAC3C,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,gBAAgB,cAAc,eAAe,IAC9D,mBAAmB;AAErB,SAAO,EAAE,WAAW,gBAAgB,cAAc,eAAe;AACnE;AAaA,IAAM,CAAC,kBAAkB,kBAAkB,QAAI,4BAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cACE;AACJ,CAAC;AAoCM,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,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,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,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ,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;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAIX,IAAM,sBAAkB;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,gBAAgB,IAAI,mBAAmB;AAEvD,UAAM,MAAmB;AAAA,MACvB,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,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;AAEA,gBAAgB,cAAc;AAC9B,gBAAgB,SAAS;AAIlB,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB;AAErD,UAAM,MAAmB;AAAA,MACvB,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,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;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;AAIhB,IAAM,uBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,iBAAiB,IAAI,mBAAmB;AAExD,UAAM,MAAmB;AAAA,MACvB,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,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;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":["props"]}
|