npm - @yamada-ui/react - Versions diffs - 2.2.6-dev-20260730064602 → 2.2.6-dev-20260730073118 - Mend

@yamada-ui/react 2.2.6-dev-20260730064602 → 2.2.6-dev-20260730073118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/cjs/components/editable/use-editable.cjs +4 -5
package/dist/cjs/components/editable/use-editable.cjs.map +1 -1
package/dist/cjs/components/modal/modal.cjs +38 -20
package/dist/cjs/components/modal/modal.cjs.map +1 -1
package/dist/cjs/hooks/use-focus/index.cjs +8 -4
package/dist/cjs/hooks/use-focus/index.cjs.map +1 -1
package/dist/cjs/utils/dom.cjs +4 -1
package/dist/cjs/utils/dom.cjs.map +1 -1
package/dist/esm/components/editable/use-editable.js +4 -5
package/dist/esm/components/editable/use-editable.js.map +1 -1
package/dist/esm/components/modal/modal.js +39 -20
package/dist/esm/components/modal/modal.js.map +1 -1
package/dist/esm/hooks/use-focus/index.js +8 -4
package/dist/esm/hooks/use-focus/index.js.map +1 -1
package/dist/esm/utils/dom.js +4 -1
package/dist/esm/utils/dom.js.map +1 -1
package/dist/types/components/chart/cartesian-chart.style.d.ts +1 -1
package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
package/dist/types/components/modal/modal.d.ts +37 -1
package/package.json +2 -2

package/dist/cjs/components/editable/use-editable.cjs CHANGED Viewed

@@ -65,8 +65,8 @@ const useEditable = (props = {}) => {
 	}, [onCancel]);
 	const onBlur = (0, react.useCallback)((ev) => {
 		if (!editing) return;
-		const ownerDocument = ev.currentTarget.ownerDocument;
-		const relatedTarget = ev.relatedTarget ?? ownerDocument.activeElement;
+		const rootNode = ev.currentTarget.getRootNode();
+		const relatedTarget = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode.activeElement ?? ev.relatedTarget : ev.relatedTarget ?? rootNode.activeElement;
 		const targetIsCancel = (0, require_utils_index.utils_exports.contains)(cancelRef.current, relatedTarget);
 		const targetIsSubmit = (0, require_utils_index.utils_exports.contains)(submitRef.current, relatedTarget);
 		if (!(!targetIsCancel && !targetIsSubmit)) return;
@@ -102,9 +102,8 @@ const useEditable = (props = {}) => {
 		selectAllOnFocus
 	]);
 	(0, react.useEffect)(() => {
-		if (editing) return;
-		const el = inputRef.current;
-		if (el?.ownerDocument.activeElement === el) el?.blur();
+		if (editing || !inputRef.current) return;
+		if ((0, require_utils_index.utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode())) inputRef.current.blur();
 	}, [editing]);
 	const getRootProps = (0, react.useCallback)((props) => ({
 		...rest,

package/dist/cjs/components/editable/use-editable.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" \| \"onCancel\" \| \"onEdit\" \| \"onSubmit\" \| \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /*\n The initial value of the Editable in both edit & preview mode.\n /\n defaultValue?: string\n /\n The placeholder text when the value is empty.\n /\n placeholder?: 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 previewFocusable?: boolean\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 props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\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 },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue \|\| \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\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 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 (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(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 if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\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 (!editing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing) return\n\n const el = inputRef.current\n const activeEl = el?.ownerDocument.activeElement\n\n if (activeEl === el) el?.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n isActiveElement,\n isShadowRoot,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" \| \"onCancel\" \| \"onEdit\" \| \"onSubmit\" \| \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /*\n The initial value of the Editable in both edit & preview mode.\n /\n defaultValue?: string\n /\n The placeholder text when the value is empty.\n /\n placeholder?: 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 previewFocusable?: boolean\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 props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\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 },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue \|\| \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\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 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 (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(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 if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\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 (!editing) return\n\n const rootNode = ev.currentTarget.getRootNode() as Document \| ShadowRoot\n const relatedTarget = (\n isShadowRoot(rootNode)\n ? (rootNode.activeElement ?? ev.relatedTarget)\n : (ev.relatedTarget ?? rootNode.activeElement)\n ) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing \|\| !inputRef.current) return\n if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n inputRef.current.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}

package/dist/cjs/components/modal/modal.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
+const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
@@ -24,7 +25,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 *
 * @see https://yamada-ui.com/docs/components/modal
 */
-const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
+const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, bodyProps, closeButtonProps, closeTriggerProps, contentProps, footerProps, headerProps, openTriggerProps, overlayProps, portalProps, titleProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
 	const hasChildren = (0, require_utils_index.utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
 	const { open, getRootProps, ...rest } = require_use_modal.useModal(props);
@@ -34,12 +35,30 @@ const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "sca
 		duration,
 		open,
 		withCloseButton,
+		bodyProps,
+		closeButtonProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
+		headerProps,
+		openTriggerProps,
+		overlayProps,
+		titleProps,
 		...rest
 	}), [
 		animationScheme,
 		duration,
 		open,
 		withCloseButton,
+		contentProps,
+		bodyProps,
+		footerProps,
+		headerProps,
+		titleProps,
+		openTriggerProps,
+		closeTriggerProps,
+		closeButtonProps,
+		overlayProps,
 		rest
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
@@ -83,28 +102,28 @@ const ModalOpenTrigger = withContext("button", {
 	name: "OpenTrigger",
 	slot: ["trigger", "open"]
 })(void 0, (props) => {
-	const { getOpenTriggerProps } = useComponentContext();
+	const { getOpenTriggerProps, openTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getOpenTriggerProps(props)
+		...getOpenTriggerProps(require_props.mergeProps(openTriggerProps, props)())
 	};
 });
 const ModalCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })(void 0, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getCloseTriggerProps(props)
+		...getCloseTriggerProps(require_props.mergeProps(closeTriggerProps, props)())
 	};
 });
 const ModalCloseButton = withContext(require_close_button.CloseButton, "closeButton")(void 0, (props) => {
-	const { getCloseButtonProps } = useComponentContext();
-	return { ...getCloseButtonProps(props) };
+	const { closeButtonProps, getCloseButtonProps } = useComponentContext();
+	return { ...getCloseButtonProps(require_props.mergeProps(closeButtonProps, props)()) };
 });
 const ModalOverlay = withContext((props) => {
-	const { animationScheme, duration: durationProp, getOverlayProps } = useComponentContext();
+	const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
 	const duration = require_hooks_use_value_index.useValue(durationProp);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.div, {
 		custom: { duration },
@@ -114,11 +133,11 @@ const ModalOverlay = withContext((props) => {
 			initial: "exit",
 			variants: require_fade.fadeVariants
 		} : {},
-		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(props)))
+		...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(require_props.mergeProps(overlayProps, props)())))
 	});
 }, "overlay")();
 const ModalContent = withContext(({ children, ...rest }) => {
-	const { animationScheme, duration, withCloseButton, getContentProps } = useComponentContext();
+	const { animationScheme, duration, withCloseButton, contentProps, getContentProps } = useComponentContext();
 	const [omittedChildren, customCloseButton] = require_children.useSplitChildren(children, ModalCloseButton);
 	const popupAnimationProps = require_popover.usePopupAnimationProps({
 		animationScheme,
@@ -126,7 +145,7 @@ const ModalContent = withContext(({ children, ...rest }) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory$1.motion.section, {
 		...popupAnimationProps,
-		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest))),
+		...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(require_props.mergeProps(contentProps, rest)()))),
 		children: [customCloseButton ?? (withCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCloseButton, {}) : null), omittedChildren]
 	});
 }, "content")();
@@ -160,20 +179,20 @@ const ShorthandModalContent = ({ body, cancel, footer, header, middle, success,
 	] });
 };
 const ModalHeader = withContext("header", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return { ...getHeaderProps(props) };
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return { ...getHeaderProps(require_props.mergeProps(headerProps, props)()) };
 });
 const ModalTitle = withContext("h2", "title")(void 0, (props) => {
-	const { getTitleProps } = useComponentContext();
-	return { ...getTitleProps(props) };
+	const { getTitleProps, titleProps } = useComponentContext();
+	return { ...getTitleProps(require_props.mergeProps(titleProps, props)()) };
 });
 const ModalBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return { ...getBodyProps(props) };
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return { ...getBodyProps(require_props.mergeProps(bodyProps, props)()) };
 });
 const ModalFooter = withContext("footer", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return { ...getFooterProps(props) };
+	const { footerProps, getFooterProps } = useComponentContext();
+	return { ...getFooterProps(require_props.mergeProps(footerProps, props)()) };
 });
 //#endregion
 exports.ModalBody = ModalBody;
@@ -187,7 +206,6 @@ exports.ModalOverlay = ModalOverlay;
 exports.ModalPropsContext = ModalPropsContext;
 exports.ModalRoot = ModalRoot;
 exports.ModalTitle = ModalTitle;
-exports.ShorthandModalContent = ShorthandModalContent;
 exports.useModalPropsContext = useModalPropsContext;
 //# sourceMappingURL=modal.cjs.map

package/dist/cjs/components/modal/modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","mergeProps","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n \| \"bodyProps\"\n \| \"closeButtonProps\"\n \| \"closeTriggerProps\"\n \| \"contentProps\"\n \| \"footerProps\"\n \| \"headerProps\"\n \| \"openTriggerProps\"\n \| \"overlayProps\"\n \| \"titleProps\"\n \| \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props for body element.\n /\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /\n Props for close button element.\n /\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /\n Props for close trigger element.\n /\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" \| \"children\">\n /\n Props for content element.\n /\n contentProps?: Omit<ModalContentProps, \"children\">\n /\n Props for footer element.\n /\n footerProps?: Omit<ModalFooterProps, \"children\">\n /\n Props for header element.\n /\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /\n Props for open trigger element.\n /\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" \| \"children\">\n /\n Props for overlay element.\n /\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Props for title element.\n /\n titleProps?: Omit<ModalTitleProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":"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"}

package/dist/cjs/hooks/use-focus/index.cjs CHANGED Viewed

@@ -26,7 +26,8 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 	const onFocus = (0, react.useCallback)(() => {
 		const target = getTarget();
 		if (!target || !trulyShouldFocus || focused.current) return;
-		if (target.contains(document.activeElement)) return;
+		const rootNode = target.getRootNode();
+		if ((0, require_utils_index.utils_exports.contains)(target, (0, require_utils_index.utils_exports.getActiveElement)((0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, require_utils_index.utils_exports.getDocument)(target)))) return;
 		const focusTarget = getFocusTarget();
 		if (focusTarget) requestAnimationFrame(() => {
 			focusTarget.focus({ preventScroll });
@@ -63,14 +64,17 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down
 */
 const useFocusOnPointerDown = ({ ref, elements, enabled }) => {
-	require_hooks_use_event_listener_index.useEventListener(() => (0, require_utils_index.utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
+	require_hooks_use_event_listener_index.useEventListener(() => ref.current?.getRootNode() ?? (0, require_utils_index.utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
 		if (!(0, require_utils_index.utils_exports.isSafari)() || !enabled) return;
 		const target = ev.target;
-		const validTarget = (elements ?? [ref]).some((elOrRef) => {
+		const els = elements ?? [ref];
+		const rootNode = ref.current?.getRootNode();
+		const root = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, require_utils_index.utils_exports.getDocument)(ref.current);
+		const validTarget = els.some((elOrRef) => {
 			const el = require_ref.isRefObject(elOrRef) ? elOrRef.current : elOrRef;
 			return el?.contains(target) || el === target;
 		});
-		if ((0, require_utils_index.utils_exports.getActiveElement)((0, require_utils_index.utils_exports.getDocument)(ref.current)) !== target && validTarget) {
+		if ((0, require_utils_index.utils_exports.getActiveElement)(root) !== target && validTarget) {
 			ev.preventDefault();
 			target.focus();
 		}

package/dist/cjs/hooks/use-focus/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":["isRefObject"],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n getActiveElement,\n getDocument,\n getFirstFocusableElement,\n isRefObject,\n isSafari,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n focusTarget?: HTMLElement \| null \| RefObject<HTMLElement \| null>\n preventScroll?: boolean\n shouldFocus?: boolean\n visible?: boolean\n}\n\n/*\n `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n /\nexport const useFocusOnShow = <Y extends HTMLElement>(\n refOrEl: RefObject<null \| Y> \| Y,\n {\n focusTarget: focusRefOrEl,\n preventScroll,\n shouldFocus,\n visible,\n }: UseFocusOnShowProps = {\n preventScroll: true,\n shouldFocus: false,\n },\n) => {\n const trulyShouldFocus = shouldFocus && visible\n const focused = useRef(false)\n\n const getTarget = useCallback(() => {\n return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n }, [refOrEl])\n\n const getFocusTarget = useCallback(() => {\n return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n }, [focusRefOrEl])\n\n const onFocus = useCallback(() => {\n const target = getTarget()\n\n if (!target \|\| !trulyShouldFocus \|\| focused.current) return\n if (~~target.~~contains(~~document.activeElement~~)) return\n\n const focusTarget = getFocusTarget()\n\n if (focusTarget) {\n requestAnimationFrame(() => {\n focusTarget.focus({ preventScroll })\n\n focused.current = true\n })\n } else {\n const firstFocusable = getFirstFocusableElement(target)\n\n if (firstFocusable)\n requestAnimationFrame(() => {\n firstFocusable.focus({ preventScroll })\n\n focused.current = true\n })\n else\n requestAnimationFrame(() => {\n target.focus({ preventScroll })\n\n focused.current = true\n })\n }\n }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n useUpdateEffect(() => {\n focused.current = !trulyShouldFocus\n }, [trulyShouldFocus])\n\n useUpdateEffect(() => {\n requestAnimationFrame(onFocus)\n }, [onFocus])\n\n useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n ref: RefObject<HTMLElement \| null>\n elements?: (HTMLElement \| null \| RefObject<HTMLElement \| null>)[]\n enabled?: boolean\n}\n\n/\n `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n ref,\n elements,\n enabled,\n}: UseFocusOnMouseDownProps) => {\n useEventListener(\n () => getDocument(ref.current),\n \"pointerdown\",\n (ev) => {\n if (!isSafari() \|\| !enabled) return\n const target = ev.target as HTMLElement\n\n const els = elements ?? [ref]\n\n const validTarget = els.some((elOrRef) => {\n const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n return el?.contains(target) \|\| el === target\n })\n\n if (\n getActiveElement(~~getDocument(ref.current~~)) !== target ~~&&\n~~ validTarget\n ) {\n ev.preventDefault()\n\n target.focus()\n }\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;~~AA0BA~~,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiB,KAAK;CAE5B,MAAM,aAAA,GAAA,MAAA,YAAA,OAA8B;EAClC,OAAOA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,OAAOA,YAAAA,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,~~IAAI~~,OAAO,~~SAAS~~,~~SAAS~~,~~aAAa~~,GAAG;~~EAE7C~~,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,oBAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,eAAA,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,eAAA,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,uCAAA,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uCAAA,~~wBAAA~~,GAAA,oBAAA,cAAA,YAAA,~~CACoB~~,IAAI,OAAO,~~GAC7B~~,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;~~EAC7B~~,MAAM,SAAS,GAAG;~~EAIlB~~,MAAM,~~eAFM~~,YAAY,CAAC,GAAG,~~EAAA~~,~~CAEJ~~,MAAM,YAAY;GACxC,MAAM,KAAKA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,oBAAA,cAAA,iBAAA,~~EAAA~~,~~GAAA,oBAAA,cAAA,YAAA,CAC+B,~~IAAI,~~OAAO,CAAC,~~MAAM,~~UAC/C~~,~~aACA~~;~~GACA~~,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}
1	+ {"version":3,"file":"index.cjs","names":["isRefObject"],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n contains,\n getActiveElement,\n getDocument,\n getFirstFocusableElement,\n isRefObject,\n isSafari,\n isShadowRoot,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n focusTarget?: HTMLElement \| null \| RefObject<HTMLElement \| null>\n preventScroll?: boolean\n shouldFocus?: boolean\n visible?: boolean\n}\n\n/*\n `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n /\nexport const useFocusOnShow = <Y extends HTMLElement>(\n refOrEl: RefObject<null \| Y> \| Y,\n {\n focusTarget: focusRefOrEl,\n preventScroll,\n shouldFocus,\n visible,\n }: UseFocusOnShowProps = {\n preventScroll: true,\n shouldFocus: false,\n },\n) => {\n const trulyShouldFocus = shouldFocus && visible\n const focused = useRef(false)\n\n const getTarget = useCallback(() => {\n return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n }, [refOrEl])\n\n const getFocusTarget = useCallback(() => {\n return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n }, [focusRefOrEl])\n\n const onFocus = useCallback(() => {\n const target = getTarget()\n\n if (!target \|\| !trulyShouldFocus \|\| focused.current) return\n const rootNode = target.getRootNode()\n const root = isShadowRoot(rootNode) ? rootNode : getDocument(target)\n if (contains(target, getActiveElement(root))) return\n\n const focusTarget = getFocusTarget()\n\n if (focusTarget) {\n requestAnimationFrame(() => {\n focusTarget.focus({ preventScroll })\n\n focused.current = true\n })\n } else {\n const firstFocusable = getFirstFocusableElement(target)\n\n if (firstFocusable)\n requestAnimationFrame(() => {\n firstFocusable.focus({ preventScroll })\n\n focused.current = true\n })\n else\n requestAnimationFrame(() => {\n target.focus({ preventScroll })\n\n focused.current = true\n })\n }\n }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n useUpdateEffect(() => {\n focused.current = !trulyShouldFocus\n }, [trulyShouldFocus])\n\n useUpdateEffect(() => {\n requestAnimationFrame(onFocus)\n }, [onFocus])\n\n useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n ref: RefObject<HTMLElement \| null>\n elements?: (HTMLElement \| null \| RefObject<HTMLElement \| null>)[]\n enabled?: boolean\n}\n\n/\n `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n ref,\n elements,\n enabled,\n}: UseFocusOnMouseDownProps) => {\n useEventListener(\n () => ref.current?.getRootNode() ?? getDocument(ref.current),\n \"pointerdown\",\n (ev) => {\n if (!isSafari() \|\| !enabled) return\n\n const target = ev.target as HTMLElement\n const els = elements ?? [ref]\n const rootNode = ref.current?.getRootNode()\n const root = isShadowRoot(rootNode) ? rootNode : getDocument(ref.current)\n const validTarget = els.some((elOrRef) => {\n const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n return el?.contains(target) \|\| el === target\n })\n\n if (getActiveElement(root) !== target && validTarget) {\n ev.preventDefault()\n\n target.focus()\n }\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiB,KAAK;CAE5B,MAAM,aAAA,GAAA,MAAA,YAAA,OAA8B;EAClC,OAAOA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,OAAOA,YAAAA,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,MAAM,WAAW,OAAO,YAAY;EAEpC,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,SAAA,GAAA,oBAAA,cAAA,iBAAA,EAAA,GAAA,oBAAA,cAAA,aAAA,CADa,QAAQ,IAAI,YAAA,GAAA,oBAAA,cAAA,YAAA,CAAuB,MAAM,CACzB,CAAC,GAAG;EAE9C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,oBAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,eAAA,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,eAAA,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,uCAAA,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uCAAA,uBACQ,IAAI,SAAS,YAAY,MAAA,GAAA,oBAAA,cAAA,YAAA,CAAiB,IAAI,OAAO,GAC3D,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAE7B,MAAM,SAAS,GAAG;EAClB,MAAM,MAAM,YAAY,CAAC,GAAG;EAC5B,MAAM,WAAW,IAAI,SAAS,YAAY;EAC1C,MAAM,QAAA,GAAA,oBAAA,cAAA,aAAA,CAAoB,QAAQ,IAAI,YAAA,GAAA,oBAAA,cAAA,YAAA,CAAuB,IAAI,OAAO;EACxE,MAAM,cAAc,IAAI,MAAM,YAAY;GACxC,MAAM,KAAKA,YAAAA,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,oBAAA,cAAA,iBAAA,CAAqB,IAAI,MAAM,UAAU,aAAa;GACpD,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}

package/dist/cjs/utils/dom.cjs CHANGED Viewed

@@ -1,6 +1,7 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
+let _yamada_ui_utils = require("@yamada-ui/utils");
 //#region src/utils/dom.ts
 function runKeyAction(ev, actions, { preventDefault = true } = {}) {
 	if (ev.key === " ") ev.key = ev.code;
@@ -32,7 +33,9 @@ function useAttributeObserver(ref, attributeFilter, enabled, func) {
 	});
 }
 function getEventRelatedTarget(ev) {
-	return ev.relatedTarget ?? ev.currentTarget.ownerDocument.activeElement;
+	if (ev.relatedTarget) return ev.relatedTarget;
+	const root = ev.currentTarget.getRootNode?.call(ev.currentTarget);
+	return (root && (0, _yamada_ui_utils.getActiveElement)(root)) ?? ev.currentTarget.ownerDocument.activeElement;
 }
 const visuallyHiddenAttributes = {
 	style: {

package/dist/cjs/utils/dom.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dom.cjs","names":["React"],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import type { AnyString } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n \| \"ArrowDown\"\n \| \"ArrowLeft\"\n \| \"ArrowRight\"\n \| \"ArrowUp\"\n \| \"End\"\n \| \"Home\"\n \| \"PageDown\"\n \| \"PageUp\"\n\ntype KeyboardControlKey =\n \| \"Alt\"\n \| \"Backspace\"\n \| \"CapsLock\"\n \| \"Control\"\n \| \"Delete\"\n \| \"Enter\"\n \| \"Escape\"\n \| \"Insert\"\n \| \"Meta\"\n \| \"NumLock\"\n \| \"Pause\"\n \| \"PrintScreen\"\n \| \"ScrollLock\"\n \| \"Shift\"\n \| \"Space\"\n \| \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" \| \"FnLock\" \| `F${number}`\n\ntype KeyboardKey =\n \| AnyString\n \| KeyboardControlKey\n \| KeyboardFunctionKey\n \| KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n ev: React.KeyboardEvent<Y>,\n actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n if (ev.key === \" \") ev.key = ev.code\n const action = actions[ev.key]\n\n if (!action) return\n\n if (preventDefault) ev.preventDefault()\n\n action(ev)\n}\n\nexport function isComposing(\n ev: React.ChangeEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n): boolean {\n if (\"keyCode\" in ev) return ev.nativeEvent.isComposing \|\| ev.keyCode === 229\n else if (ev.nativeEvent instanceof InputEvent)\n return ev.nativeEvent.isComposing\n else return false\n}\n\nexport function useAttributeObserver(\n ref: React.RefObject<HTMLElement \| null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) {\n React.useEffect(() => {\n if (!ref.current \|\| !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (type !== \"attributes\") continue\n if (!attributeName) continue\n\n if (attributeFilter.includes(attributeName)) func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent \| React.MouseEvent) {\n ~~return~~ (ev.relatedTarget ??\n ev.currentTarget.ownerDocument.activeElement) as HTMLElement \| null\n}\n\nconst visuallyHiddenStyle = {\n border: \"0px\",\n clipPath: \"rect(0px 0px 0px 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n style: visuallyHiddenStyle,\n \"aria-hidden\": true,\n tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n const id = React.useId()\n\n for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":"~~;;;;~~AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,~~OAAQ~~,GAAG,~~iBACT~~,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAKA,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}
1	+ {"version":3,"file":"dom.cjs","names":["React"],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import { type AnyString, getActiveElement } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n \| \"ArrowDown\"\n \| \"ArrowLeft\"\n \| \"ArrowRight\"\n \| \"ArrowUp\"\n \| \"End\"\n \| \"Home\"\n \| \"PageDown\"\n \| \"PageUp\"\n\ntype KeyboardControlKey =\n \| \"Alt\"\n \| \"Backspace\"\n \| \"CapsLock\"\n \| \"Control\"\n \| \"Delete\"\n \| \"Enter\"\n \| \"Escape\"\n \| \"Insert\"\n \| \"Meta\"\n \| \"NumLock\"\n \| \"Pause\"\n \| \"PrintScreen\"\n \| \"ScrollLock\"\n \| \"Shift\"\n \| \"Space\"\n \| \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" \| \"FnLock\" \| `F${number}`\n\ntype KeyboardKey =\n \| AnyString\n \| KeyboardControlKey\n \| KeyboardFunctionKey\n \| KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n ev: React.KeyboardEvent<Y>,\n actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n if (ev.key === \" \") ev.key = ev.code\n const action = actions[ev.key]\n\n if (!action) return\n\n if (preventDefault) ev.preventDefault()\n\n action(ev)\n}\n\nexport function isComposing(\n ev: React.ChangeEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n): boolean {\n if (\"keyCode\" in ev) return ev.nativeEvent.isComposing \|\| ev.keyCode === 229\n else if (ev.nativeEvent instanceof InputEvent)\n return ev.nativeEvent.isComposing\n else return false\n}\n\nexport function useAttributeObserver(\n ref: React.RefObject<HTMLElement \| null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) {\n React.useEffect(() => {\n if (!ref.current \|\| !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (type !== \"attributes\") continue\n if (!attributeName) continue\n\n if (attributeFilter.includes(attributeName)) func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent \| React.MouseEvent) {\n if (ev.relatedTarget) return ev.relatedTarget as HTMLElement\n\n const getRootNode = (\n ev.currentTarget as unknown as {\n getRootNode?: () => Document \| ShadowRoot\n }\n ).getRootNode\n const root = getRootNode?.call(ev.currentTarget)\n\n return ((root && getActiveElement(root)) ??\n ev.currentTarget.ownerDocument.activeElement) as HTMLElement \| null\n}\n\nconst visuallyHiddenStyle = {\n border: \"0px\",\n clipPath: \"rect(0px 0px 0px 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n style: visuallyHiddenStyle,\n \"aria-hidden\": true,\n tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n const id = React.useId()\n\n for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;;;;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,IAAI,GAAG,eAAe,OAAO,GAAG;CAOhC,MAAM,OAJJ,GAAG,cAGH,aACwB,KAAK,GAAG,aAAa;CAE/C,QAAS,SAAA,GAAA,iBAAA,iBAAA,CAAyB,IAAI,MACpC,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAKA,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}

package/dist/esm/components/editable/use-editable.js CHANGED Viewed

@@ -65,8 +65,8 @@ const useEditable = (props = {}) => {
 	}, [onCancel]);
 	const onBlur = useCallback((ev) => {
 		if (!editing) return;
-		const ownerDocument = ev.currentTarget.ownerDocument;
-		const relatedTarget = ev.relatedTarget ?? ownerDocument.activeElement;
+		const rootNode = ev.currentTarget.getRootNode();
+		const relatedTarget = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode.activeElement ?? ev.relatedTarget : ev.relatedTarget ?? rootNode.activeElement;
 		const targetIsCancel = (0, utils_exports.contains)(cancelRef.current, relatedTarget);
 		const targetIsSubmit = (0, utils_exports.contains)(submitRef.current, relatedTarget);
 		if (!(!targetIsCancel && !targetIsSubmit)) return;
@@ -102,9 +102,8 @@ const useEditable = (props = {}) => {
 		selectAllOnFocus
 	]);
 	useEffect(() => {
-		if (editing) return;
-		const el = inputRef.current;
-		if (el?.ownerDocument.activeElement === el) el?.blur();
+		if (editing || !inputRef.current) return;
+		if ((0, utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode())) inputRef.current.blur();
 	}, [editing]);
 	const getRootProps = useCallback((props) => ({
 		...rest,

package/dist/esm/components/editable/use-editable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" \| \"onCancel\" \| \"onEdit\" \| \"onSubmit\" \| \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /*\n The initial value of the Editable in both edit & preview mode.\n /\n defaultValue?: string\n /\n The placeholder text when the value is empty.\n /\n placeholder?: 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 previewFocusable?: boolean\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 props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\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 },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue \|\| \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\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 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 (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(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 if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\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 (!editing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing) return\n\n const el = inputRef.current\n const activeEl = el?.ownerDocument.activeElement\n\n if (activeEl === el) el?.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-editable.js","names":["createContext"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n isActiveElement,\n isShadowRoot,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" \| \"onCancel\" \| \"onEdit\" \| \"onSubmit\" \| \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /*\n The initial value of the Editable in both edit & preview mode.\n /\n defaultValue?: string\n /\n The placeholder text when the value is empty.\n /\n placeholder?: 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 previewFocusable?: boolean\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 props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\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 },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue \|\| \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\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 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 (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(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 if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\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 (!editing) return\n\n const rootNode = ev.currentTarget.getRootNode() as Document \| ShadowRoot\n const relatedTarget = (\n isShadowRoot(rootNode)\n ? (rootNode.activeElement ?? ev.relatedTarget)\n : (ev.relatedTarget ?? rootNode.activeElement)\n ) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing \|\| !inputRef.current) return\n if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n inputRef.current.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}

package/dist/esm/components/modal/modal.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { useSplitChildren, wrapOrPassProps } from "../../utils/children.js";
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import { useValue } from "../../hooks/use-value/index.js";
@@ -24,7 +25,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 *
 * @see https://yamada-ui.com/docs/components/modal
 */
-const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
+const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, bodyProps, closeButtonProps, closeTriggerProps, contentProps, footerProps, headerProps, openTriggerProps, overlayProps, portalProps, titleProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
 	const hasChildren = (0, utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
 	const { open, getRootProps, ...rest } = useModal(props);
@@ -34,12 +35,30 @@ const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "sca
 		duration,
 		open,
 		withCloseButton,
+		bodyProps,
+		closeButtonProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
+		headerProps,
+		openTriggerProps,
+		overlayProps,
+		titleProps,
 		...rest
 	}), [
 		animationScheme,
 		duration,
 		open,
 		withCloseButton,
+		contentProps,
+		bodyProps,
+		footerProps,
+		headerProps,
+		titleProps,
+		openTriggerProps,
+		closeTriggerProps,
+		closeButtonProps,
+		overlayProps,
 		rest
 	]);
 	return /* @__PURE__ */ jsxs(ComponentContext, {
@@ -83,28 +102,28 @@ const ModalOpenTrigger = withContext("button", {
 	name: "OpenTrigger",
 	slot: ["trigger", "open"]
 })(void 0, (props) => {
-	const { getOpenTriggerProps } = useComponentContext();
+	const { getOpenTriggerProps, openTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getOpenTriggerProps(props)
+		...getOpenTriggerProps(mergeProps(openTriggerProps, props)())
 	};
 });
 const ModalCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })(void 0, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
 	return {
 		asChild: true,
-		...getCloseTriggerProps(props)
+		...getCloseTriggerProps(mergeProps(closeTriggerProps, props)())
 	};
 });
 const ModalCloseButton = withContext(CloseButton, "closeButton")(void 0, (props) => {
-	const { getCloseButtonProps } = useComponentContext();
-	return { ...getCloseButtonProps(props) };
+	const { closeButtonProps, getCloseButtonProps } = useComponentContext();
+	return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) };
 });
 const ModalOverlay = withContext((props) => {
-	const { animationScheme, duration: durationProp, getOverlayProps } = useComponentContext();
+	const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
 	const duration = useValue(durationProp);
 	return /* @__PURE__ */ jsx(motion$1.div, {
 		custom: { duration },
@@ -114,11 +133,11 @@ const ModalOverlay = withContext((props) => {
 			initial: "exit",
 			variants: fadeVariants
 		} : {},
-		...(0, utils_exports.cast)(getOverlayProps((0, utils_exports.cast)(props)))
+		...(0, utils_exports.cast)(getOverlayProps((0, utils_exports.cast)(mergeProps(overlayProps, props)())))
 	});
 }, "overlay")();
 const ModalContent = withContext(({ children, ...rest }) => {
-	const { animationScheme, duration, withCloseButton, getContentProps } = useComponentContext();
+	const { animationScheme, duration, withCloseButton, contentProps, getContentProps } = useComponentContext();
 	const [omittedChildren, customCloseButton] = useSplitChildren(children, ModalCloseButton);
 	const popupAnimationProps = usePopupAnimationProps({
 		animationScheme,
@@ -126,7 +145,7 @@ const ModalContent = withContext(({ children, ...rest }) => {
 	});
 	return /* @__PURE__ */ jsxs(motion$1.section, {
 		...popupAnimationProps,
-		...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest))),
+		...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(mergeProps(contentProps, rest)()))),
 		children: [customCloseButton ?? (withCloseButton ? /* @__PURE__ */ jsx(ModalCloseButton, {}) : null), omittedChildren]
 	});
 }, "content")();
@@ -160,22 +179,22 @@ const ShorthandModalContent = ({ body, cancel, footer, header, middle, success,
 	] });
 };
 const ModalHeader = withContext("header", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return { ...getHeaderProps(props) };
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return { ...getHeaderProps(mergeProps(headerProps, props)()) };
 });
 const ModalTitle = withContext("h2", "title")(void 0, (props) => {
-	const { getTitleProps } = useComponentContext();
-	return { ...getTitleProps(props) };
+	const { getTitleProps, titleProps } = useComponentContext();
+	return { ...getTitleProps(mergeProps(titleProps, props)()) };
 });
 const ModalBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return { ...getBodyProps(props) };
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return { ...getBodyProps(mergeProps(bodyProps, props)()) };
 });
 const ModalFooter = withContext("footer", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return { ...getFooterProps(props) };
+	const { footerProps, getFooterProps } = useComponentContext();
+	return { ...getFooterProps(mergeProps(footerProps, props)()) };
 });
 //#endregion
-export { ModalBody, ModalCloseButton, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalOpenTrigger, ModalOverlay, ModalPropsContext, ModalRoot, ModalTitle, ShorthandModalContent, useModalPropsContext };
+export { ModalBody, ModalCloseButton, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalOpenTrigger, ModalOverlay, ModalPropsContext, ModalRoot, ModalTitle, useModalPropsContext };
 //# sourceMappingURL=modal.js.map

package/dist/esm/components/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n \| \"bodyProps\"\n \| \"closeButtonProps\"\n \| \"closeTriggerProps\"\n \| \"contentProps\"\n \| \"footerProps\"\n \| \"headerProps\"\n \| \"openTriggerProps\"\n \| \"overlayProps\"\n \| \"titleProps\"\n \| \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props for body element.\n /\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /\n Props for close button element.\n /\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /\n Props for close trigger element.\n /\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" \| \"children\">\n /\n Props for content element.\n /\n contentProps?: Omit<ModalContentProps, \"children\">\n /\n Props for footer element.\n /\n footerProps?: Omit<ModalFooterProps, \"children\">\n /\n Props for header element.\n /\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /\n Props for open trigger element.\n /\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" \| \"children\">\n /\n Props for overlay element.\n /\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Props for title element.\n /\n titleProps?: Omit<ModalTitleProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAA,cAAA,QAAA,CAAsB,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL,C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"}

package/dist/esm/hooks/use-focus/index.js CHANGED Viewed

@@ -25,7 +25,8 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 	const onFocus = useCallback(() => {
 		const target = getTarget();
 		if (!target || !trulyShouldFocus || focused.current) return;
-		if (target.contains(document.activeElement)) return;
+		const rootNode = target.getRootNode();
+		if ((0, utils_exports.contains)(target, (0, utils_exports.getActiveElement)((0, utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, utils_exports.getDocument)(target)))) return;
 		const focusTarget = getFocusTarget();
 		if (focusTarget) requestAnimationFrame(() => {
 			focusTarget.focus({ preventScroll });
@@ -62,14 +63,17 @@ const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, sho
 * @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down
 */
 const useFocusOnPointerDown = ({ ref, elements, enabled }) => {
-	useEventListener(() => (0, utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
+	useEventListener(() => ref.current?.getRootNode() ?? (0, utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
 		if (!(0, utils_exports.isSafari)() || !enabled) return;
 		const target = ev.target;
-		const validTarget = (elements ?? [ref]).some((elOrRef) => {
+		const els = elements ?? [ref];
+		const rootNode = ref.current?.getRootNode();
+		const root = (0, utils_exports.isShadowRoot)(rootNode) ? rootNode : (0, utils_exports.getDocument)(ref.current);
+		const validTarget = els.some((elOrRef) => {
 			const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef;
 			return el?.contains(target) || el === target;
 		});
-		if ((0, utils_exports.getActiveElement)((0, utils_exports.getDocument)(ref.current)) !== target && validTarget) {
+		if ((0, utils_exports.getActiveElement)(root) !== target && validTarget) {
 			ev.preventDefault();
 			target.focus();
 		}

package/dist/esm/hooks/use-focus/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n getActiveElement,\n getDocument,\n getFirstFocusableElement,\n isRefObject,\n isSafari,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n focusTarget?: HTMLElement \| null \| RefObject<HTMLElement \| null>\n preventScroll?: boolean\n shouldFocus?: boolean\n visible?: boolean\n}\n\n/*\n `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n /\nexport const useFocusOnShow = <Y extends HTMLElement>(\n refOrEl: RefObject<null \| Y> \| Y,\n {\n focusTarget: focusRefOrEl,\n preventScroll,\n shouldFocus,\n visible,\n }: UseFocusOnShowProps = {\n preventScroll: true,\n shouldFocus: false,\n },\n) => {\n const trulyShouldFocus = shouldFocus && visible\n const focused = useRef(false)\n\n const getTarget = useCallback(() => {\n return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n }, [refOrEl])\n\n const getFocusTarget = useCallback(() => {\n return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n }, [focusRefOrEl])\n\n const onFocus = useCallback(() => {\n const target = getTarget()\n\n if (!target \|\| !trulyShouldFocus \|\| focused.current) return\n if (~~target.~~contains(~~document.activeElement~~)) return\n\n const focusTarget = getFocusTarget()\n\n if (focusTarget) {\n requestAnimationFrame(() => {\n focusTarget.focus({ preventScroll })\n\n focused.current = true\n })\n } else {\n const firstFocusable = getFirstFocusableElement(target)\n\n if (firstFocusable)\n requestAnimationFrame(() => {\n firstFocusable.focus({ preventScroll })\n\n focused.current = true\n })\n else\n requestAnimationFrame(() => {\n target.focus({ preventScroll })\n\n focused.current = true\n })\n }\n }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n useUpdateEffect(() => {\n focused.current = !trulyShouldFocus\n }, [trulyShouldFocus])\n\n useUpdateEffect(() => {\n requestAnimationFrame(onFocus)\n }, [onFocus])\n\n useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n ref: RefObject<HTMLElement \| null>\n elements?: (HTMLElement \| null \| RefObject<HTMLElement \| null>)[]\n enabled?: boolean\n}\n\n/\n `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n ref,\n elements,\n enabled,\n}: UseFocusOnMouseDownProps) => {\n useEventListener(\n () => getDocument(ref.current),\n \"pointerdown\",\n (ev) => {\n if (!isSafari() \|\| !enabled) return\n const target = ev.target as HTMLElement\n\n const els = elements ?? [ref]\n\n const validTarget = els.some((elOrRef) => {\n const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n return el?.contains(target) \|\| el === target\n })\n\n if (\n getActiveElement(~~getDocument(ref.current~~)) !== target ~~&&\n~~ validTarget\n ) {\n ev.preventDefault()\n\n target.focus()\n }\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;~~AA0BA~~,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,UAAU,OAAO,KAAK;CAE5B,MAAM,YAAY,kBAAkB;EAClC,OAAO,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,iBAAiB,kBAAkB;EACvC,OAAO,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,~~IAAI~~,OAAO,~~SAAS~~,~~SAAS~~,~~aAAa~~,GAAG;~~EAE7C~~,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,~~wBAAA~~,GAAA,cAAA,YAAA,~~CACoB~~,IAAI,OAAO,~~GAC7B~~,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;~~EAC7B~~,MAAM,SAAS,GAAG;~~EAIlB~~,MAAM,~~eAFM~~,YAAY,CAAC,GAAG,~~EAAA~~,~~CAEJ~~,MAAM,YAAY;GACxC,MAAM,KAAK,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,cAAA,iBAAA,~~EAAA~~,~~GAAA,cAAA,YAAA,CAC+B,~~IAAI,~~OAAO,CAAC,~~MAAM,~~UAC/C~~,~~aACA~~;~~GACA~~,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-focus/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport {\n contains,\n getActiveElement,\n getDocument,\n getFirstFocusableElement,\n isRefObject,\n isSafari,\n isShadowRoot,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useEventListener } from \"../use-event-listener\"\n\nexport interface UseFocusOnShowProps {\n focusTarget?: HTMLElement \| null \| RefObject<HTMLElement \| null>\n preventScroll?: boolean\n shouldFocus?: boolean\n visible?: boolean\n}\n\n/*\n `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-show\n /\nexport const useFocusOnShow = <Y extends HTMLElement>(\n refOrEl: RefObject<null \| Y> \| Y,\n {\n focusTarget: focusRefOrEl,\n preventScroll,\n shouldFocus,\n visible,\n }: UseFocusOnShowProps = {\n preventScroll: true,\n shouldFocus: false,\n },\n) => {\n const trulyShouldFocus = shouldFocus && visible\n const focused = useRef(false)\n\n const getTarget = useCallback(() => {\n return isRefObject(refOrEl) ? refOrEl.current : refOrEl\n }, [refOrEl])\n\n const getFocusTarget = useCallback(() => {\n return isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl\n }, [focusRefOrEl])\n\n const onFocus = useCallback(() => {\n const target = getTarget()\n\n if (!target \|\| !trulyShouldFocus \|\| focused.current) return\n const rootNode = target.getRootNode()\n const root = isShadowRoot(rootNode) ? rootNode : getDocument(target)\n if (contains(target, getActiveElement(root))) return\n\n const focusTarget = getFocusTarget()\n\n if (focusTarget) {\n requestAnimationFrame(() => {\n focusTarget.focus({ preventScroll })\n\n focused.current = true\n })\n } else {\n const firstFocusable = getFirstFocusableElement(target)\n\n if (firstFocusable)\n requestAnimationFrame(() => {\n firstFocusable.focus({ preventScroll })\n\n focused.current = true\n })\n else\n requestAnimationFrame(() => {\n target.focus({ preventScroll })\n\n focused.current = true\n })\n }\n }, [getTarget, trulyShouldFocus, getFocusTarget, preventScroll])\n\n useUpdateEffect(() => {\n focused.current = !trulyShouldFocus\n }, [trulyShouldFocus])\n\n useUpdateEffect(() => {\n requestAnimationFrame(onFocus)\n }, [onFocus])\n\n useEventListener(getTarget, \"transitionend\", onFocus)\n}\n\nexport interface UseFocusOnMouseDownProps {\n ref: RefObject<HTMLElement \| null>\n elements?: (HTMLElement \| null \| RefObject<HTMLElement \| null>)[]\n enabled?: boolean\n}\n\n/\n `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.\n \n @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down\n */\nexport const useFocusOnPointerDown = ({\n ref,\n elements,\n enabled,\n}: UseFocusOnMouseDownProps) => {\n useEventListener(\n () => ref.current?.getRootNode() ?? getDocument(ref.current),\n \"pointerdown\",\n (ev) => {\n if (!isSafari() \|\| !enabled) return\n\n const target = ev.target as HTMLElement\n const els = elements ?? [ref]\n const rootNode = ref.current?.getRootNode()\n const root = isShadowRoot(rootNode) ? rootNode : getDocument(ref.current)\n const validTarget = els.some((elOrRef) => {\n const el = isRefObject(elOrRef) ? elOrRef.current : elOrRef\n\n return el?.contains(target) \|\| el === target\n })\n\n if (getActiveElement(root) !== target && validTarget) {\n ev.preventDefault()\n\n target.focus()\n }\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,kBACX,SACA,EACE,aAAa,cACb,eACA,aACA,YACuB;CACvB,eAAe;CACf,aAAa;AACf,MACG;CACH,MAAM,mBAAmB,eAAe;CACxC,MAAM,UAAU,OAAO,KAAK;CAE5B,MAAM,YAAY,kBAAkB;EAClC,OAAO,YAAY,OAAO,IAAI,QAAQ,UAAU;CAClD,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,iBAAiB,kBAAkB;EACvC,OAAO,YAAY,YAAY,IAAI,aAAa,UAAU;CAC5D,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,oBAAoB,QAAQ,SAAS;EACrD,MAAM,WAAW,OAAO,YAAY;EAEpC,KAAA,GAAA,cAAA,SAAA,CAAa,SAAA,GAAA,cAAA,iBAAA,EAAA,GAAA,cAAA,aAAA,CADa,QAAQ,IAAI,YAAA,GAAA,cAAA,YAAA,CAAuB,MAAM,CACzB,CAAC,GAAG;EAE9C,MAAM,cAAc,eAAe;EAEnC,IAAI,aACF,4BAA4B;GAC1B,YAAY,MAAM,EAAE,cAAc,CAAC;GAEnC,QAAQ,UAAU;EACpB,CAAC;OACI;GACL,MAAM,kBAAA,GAAA,cAAA,yBAAA,CAA0C,MAAM;GAEtD,IAAI,gBACF,4BAA4B;IAC1B,eAAe,MAAM,EAAE,cAAc,CAAC;IAEtC,QAAQ,UAAU;GACpB,CAAC;QAED,4BAA4B;IAC1B,OAAO,MAAM,EAAE,cAAc,CAAC;IAE9B,QAAQ,UAAU;GACpB,CAAC;EACL;CACF,GAAG;EAAC;EAAW;EAAkB;EAAgB;CAAa,CAAC;CAE/D,sBAAsB;EACpB,QAAQ,UAAU,CAAC;CACrB,GAAG,CAAC,gBAAgB,CAAC;CAErB,sBAAsB;EACpB,sBAAsB,OAAO;CAC/B,GAAG,CAAC,OAAO,CAAC;CAEZ,iBAAiB,WAAW,iBAAiB,OAAO;AACtD;;;;;;AAaA,MAAa,yBAAyB,EACpC,KACA,UACA,cAC8B;CAC9B,uBACQ,IAAI,SAAS,YAAY,MAAA,GAAA,cAAA,YAAA,CAAiB,IAAI,OAAO,GAC3D,gBACC,OAAO;EACN,IAAI,EAAA,GAAA,cAAA,SAAA,CAAU,KAAK,CAAC,SAAS;EAE7B,MAAM,SAAS,GAAG;EAClB,MAAM,MAAM,YAAY,CAAC,GAAG;EAC5B,MAAM,WAAW,IAAI,SAAS,YAAY;EAC1C,MAAM,QAAA,GAAA,cAAA,aAAA,CAAoB,QAAQ,IAAI,YAAA,GAAA,cAAA,YAAA,CAAuB,IAAI,OAAO;EACxE,MAAM,cAAc,IAAI,MAAM,YAAY;GACxC,MAAM,KAAK,YAAY,OAAO,IAAI,QAAQ,UAAU;GAEpD,OAAO,IAAI,SAAS,MAAM,KAAK,OAAO;EACxC,CAAC;EAED,KAAA,GAAA,cAAA,iBAAA,CAAqB,IAAI,MAAM,UAAU,aAAa;GACpD,GAAG,eAAe;GAElB,OAAO,MAAM;EACf;CACF,CACF;AACF"}

package/dist/esm/utils/dom.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { getActiveElement } from "@yamada-ui/utils";
 //#region src/utils/dom.ts
 function runKeyAction(ev, actions, { preventDefault = true } = {}) {
 	if (ev.key === " ") ev.key = ev.code;
@@ -30,7 +31,9 @@ function useAttributeObserver(ref, attributeFilter, enabled, func) {
 	});
 }
 function getEventRelatedTarget(ev) {
-	return ev.relatedTarget ?? ev.currentTarget.ownerDocument.activeElement;
+	if (ev.relatedTarget) return ev.relatedTarget;
+	const root = ev.currentTarget.getRootNode?.call(ev.currentTarget);
+	return (root && getActiveElement(root)) ?? ev.currentTarget.ownerDocument.activeElement;
 }
 const visuallyHiddenAttributes = {
 	style: {

package/dist/esm/utils/dom.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dom.js","names":[],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import type { AnyString } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n \| \"ArrowDown\"\n \| \"ArrowLeft\"\n \| \"ArrowRight\"\n \| \"ArrowUp\"\n \| \"End\"\n \| \"Home\"\n \| \"PageDown\"\n \| \"PageUp\"\n\ntype KeyboardControlKey =\n \| \"Alt\"\n \| \"Backspace\"\n \| \"CapsLock\"\n \| \"Control\"\n \| \"Delete\"\n \| \"Enter\"\n \| \"Escape\"\n \| \"Insert\"\n \| \"Meta\"\n \| \"NumLock\"\n \| \"Pause\"\n \| \"PrintScreen\"\n \| \"ScrollLock\"\n \| \"Shift\"\n \| \"Space\"\n \| \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" \| \"FnLock\" \| `F${number}`\n\ntype KeyboardKey =\n \| AnyString\n \| KeyboardControlKey\n \| KeyboardFunctionKey\n \| KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n ev: React.KeyboardEvent<Y>,\n actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n if (ev.key === \" \") ev.key = ev.code\n const action = actions[ev.key]\n\n if (!action) return\n\n if (preventDefault) ev.preventDefault()\n\n action(ev)\n}\n\nexport function isComposing(\n ev: React.ChangeEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n): boolean {\n if (\"keyCode\" in ev) return ev.nativeEvent.isComposing \|\| ev.keyCode === 229\n else if (ev.nativeEvent instanceof InputEvent)\n return ev.nativeEvent.isComposing\n else return false\n}\n\nexport function useAttributeObserver(\n ref: React.RefObject<HTMLElement \| null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) {\n React.useEffect(() => {\n if (!ref.current \|\| !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (type !== \"attributes\") continue\n if (!attributeName) continue\n\n if (attributeFilter.includes(attributeName)) func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent \| React.MouseEvent) {\n ~~return~~ (ev.relatedTarget ??\n ev.currentTarget.ownerDocument.activeElement) as HTMLElement \| null\n}\n\nconst visuallyHiddenStyle = {\n border: \"0px\",\n clipPath: \"rect(0px 0px 0px 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n style: visuallyHiddenStyle,\n \"aria-hidden\": true,\n tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n const id = React.useId()\n\n for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,~~OAAQ~~,GAAG,~~iBACT~~,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAK,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}
1	+ {"version":3,"file":"dom.js","names":[],"sources":["../../../src/utils/dom.ts"],"sourcesContent":["import { type AnyString, getActiveElement } from \"@yamada-ui/utils\"\nimport * as React from \"react\"\n\ntype KeyboardNavigationKey =\n \| \"ArrowDown\"\n \| \"ArrowLeft\"\n \| \"ArrowRight\"\n \| \"ArrowUp\"\n \| \"End\"\n \| \"Home\"\n \| \"PageDown\"\n \| \"PageUp\"\n\ntype KeyboardControlKey =\n \| \"Alt\"\n \| \"Backspace\"\n \| \"CapsLock\"\n \| \"Control\"\n \| \"Delete\"\n \| \"Enter\"\n \| \"Escape\"\n \| \"Insert\"\n \| \"Meta\"\n \| \"NumLock\"\n \| \"Pause\"\n \| \"PrintScreen\"\n \| \"ScrollLock\"\n \| \"Shift\"\n \| \"Space\"\n \| \"Tab\"\n\ntype KeyboardFunctionKey = \"Fn\" \| \"FnLock\" \| `F${number}`\n\ntype KeyboardKey =\n \| AnyString\n \| KeyboardControlKey\n \| KeyboardFunctionKey\n \| KeyboardNavigationKey\n\nexport function runKeyAction<Y>(\n ev: React.KeyboardEvent<Y>,\n actions: { [key in KeyboardKey]?: React.KeyboardEventHandler<Y> },\n { preventDefault = true }: { preventDefault?: boolean } = {},\n) {\n if (ev.key === \" \") ev.key = ev.code\n const action = actions[ev.key]\n\n if (!action) return\n\n if (preventDefault) ev.preventDefault()\n\n action(ev)\n}\n\nexport function isComposing(\n ev: React.ChangeEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n): boolean {\n if (\"keyCode\" in ev) return ev.nativeEvent.isComposing \|\| ev.keyCode === 229\n else if (ev.nativeEvent instanceof InputEvent)\n return ev.nativeEvent.isComposing\n else return false\n}\n\nexport function useAttributeObserver(\n ref: React.RefObject<HTMLElement \| null>,\n attributeFilter: string[],\n enabled: boolean,\n func: () => void,\n) {\n React.useEffect(() => {\n if (!ref.current \|\| !enabled) return\n\n const ownerDocument = ref.current.ownerDocument.defaultView ?? window\n\n const observer = new ownerDocument.MutationObserver((changes) => {\n for (const { type, attributeName } of changes) {\n if (type !== \"attributes\") continue\n if (!attributeName) continue\n\n if (attributeFilter.includes(attributeName)) func()\n }\n })\n\n observer.observe(ref.current, { attributeFilter, attributes: true })\n\n return () => observer.disconnect()\n })\n}\n\nexport function getEventRelatedTarget(ev: React.FocusEvent \| React.MouseEvent) {\n if (ev.relatedTarget) return ev.relatedTarget as HTMLElement\n\n const getRootNode = (\n ev.currentTarget as unknown as {\n getRootNode?: () => Document \| ShadowRoot\n }\n ).getRootNode\n const root = getRootNode?.call(ev.currentTarget)\n\n return ((root && getActiveElement(root)) ??\n ev.currentTarget.ownerDocument.activeElement) as HTMLElement \| null\n}\n\nconst visuallyHiddenStyle = {\n border: \"0px\",\n clipPath: \"rect(0px 0px 0px 0px)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n} satisfies React.CSSProperties\n\nexport const visuallyHiddenAttributes = {\n style: visuallyHiddenStyle,\n \"aria-hidden\": true,\n tabIndex: -1,\n} satisfies React.HTMLAttributes<HTMLElement>\n\nexport function* useIds() {\n const id = React.useId()\n\n for (let i = 0; ; i++) yield `${id}-${i}`\n}\n"],"mappings":";;;AAuCA,SAAgB,aACd,IACA,SACA,EAAE,iBAAiB,SAAuC,CAAC,GAC3D;CACA,IAAI,GAAG,QAAQ,KAAK,GAAG,MAAM,GAAG;CAChC,MAAM,SAAS,QAAQ,GAAG;CAE1B,IAAI,CAAC,QAAQ;CAEb,IAAI,gBAAgB,GAAG,eAAe;CAEtC,OAAO,EAAE;AACX;AAEA,SAAgB,YACd,IACS;CACT,IAAI,aAAa,IAAI,OAAO,GAAG,YAAY,eAAe,GAAG,YAAY;MACpE,IAAI,GAAG,uBAAuB,YACjC,OAAO,GAAG,YAAY;MACnB,OAAO;AACd;AAEA,SAAgB,qBACd,KACA,iBACA,SACA,MACA;CACA,MAAM,gBAAgB;EACpB,IAAI,CAAC,IAAI,WAAW,CAAC,SAAS;EAI9B,MAAM,WAAW,KAFK,IAAI,QAAQ,cAAc,eAAe,OAAA,CAE5B,kBAAkB,YAAY;GAC/D,KAAK,MAAM,EAAE,MAAM,mBAAmB,SAAS;IAC7C,IAAI,SAAS,cAAc;IAC3B,IAAI,CAAC,eAAe;IAEpB,IAAI,gBAAgB,SAAS,aAAa,GAAG,KAAK;GACpD;EACF,CAAC;EAED,SAAS,QAAQ,IAAI,SAAS;GAAE;GAAiB,YAAY;EAAK,CAAC;EAEnE,aAAa,SAAS,WAAW;CACnC,CAAC;AACH;AAEA,SAAgB,sBAAsB,IAAyC;CAC7E,IAAI,GAAG,eAAe,OAAO,GAAG;CAOhC,MAAM,OAJJ,GAAG,cAGH,aACwB,KAAK,GAAG,aAAa;CAE/C,QAAS,QAAQ,iBAAiB,IAAI,MACpC,GAAG,cAAc,cAAc;AACnC;AAcA,MAAa,2BAA2B;CACtC,OAAO;EAZP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;CAIA;CACP,eAAe;CACf,UAAU;AACZ;AAEA,UAAiB,SAAS;CACxB,MAAM,KAAK,MAAM,MAAM;CAEvB,KAAK,IAAI,IAAI,IAAK,KAAK,MAAM,GAAG,GAAG,GAAG;AACxC"}

package/dist/types/components/chart/cartesian-chart.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "labelList" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/components/modal/modal.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ import "../focus-lock/index.js";
 import { ModalStyle } from "./modal.style.js";
 import { UseModalProps } from "./use-modal.js";
 import "../../index.js";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 //#region src/components/modal/modal.d.ts
 interface ModalRootProps extends Omit<HTMLStyledProps<"div">, "scrollBehavior" | "title">, ThemeProps<ModalStyle>, Omit<UseModalProps, "title">, Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus">, UsePopupAnimationProps, ShorthandModalContentProps {
   /**
@@ -47,10 +47,46 @@ interface ModalRootProps extends Omit<HTMLStyledProps<"div">, "scrollBehavior" |
    * @default true
    */
   withOverlay?: boolean;
+  /**
+   * Props for body element.
+   */
+  bodyProps?: Omit<ModalBodyProps, "children">;
+  /**
+   * Props for close button element.
+   */
+  closeButtonProps?: Omit<ModalCloseButtonProps, "children">;
+  /**
+   * Props for close trigger element.
+   */
+  closeTriggerProps?: Omit<ModalCloseTriggerProps, "asChild" | "children">;
+  /**
+   * Props for content element.
+   */
+  contentProps?: Omit<ModalContentProps, "children">;
+  /**
+   * Props for footer element.
+   */
+  footerProps?: Omit<ModalFooterProps, "children">;
+  /**
+   * Props for header element.
+   */
+  headerProps?: Omit<ModalHeaderProps, "children">;
+  /**
+   * Props for open trigger element.
+   */
+  openTriggerProps?: Omit<ModalOpenTriggerProps, "asChild" | "children">;
+  /**
+   * Props for overlay element.
+   */
+  overlayProps?: Omit<ModalOverlayProps, "children">;
   /**
    * Props to be forwarded to the portal component.
    */
   portalProps?: Omit<PortalProps, "children">;
+  /**
+   * Props for title element.
+   */
+  titleProps?: Omit<ModalTitleProps, "children">;
   /**
    * Callback function to run side effects after the modal has closed.
    */

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.6-dev-20260730064602",
+  "version": "2.2.6-dev-20260730073118",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",
@@ -147,7 +147,7 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sonner": "^2.0.7",
     "uqr": "^0.1.3",
-    "@yamada-ui/utils": "2.1.6-dev-20260730064602"
+    "@yamada-ui/utils": "2.1.6-dev-20260730073118"
   },
   "devDependencies": {
     "@babel/parser": "^7.29.7",