@yamada-ui/react/dist/esm/components/modal/use-modal.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { utils_exports } from "../../utils/index.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
import { useCallback, useId } from "react";

//#region src/components/modal/use-modal.ts
const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open: openProp, onClose: onCloseProp, onEsc, onOpen: onOpenProp,...rest } = {}) => {
	const { open, onClose, onOpen } = useDisclosure({
		defaultOpen,
		open: openProp,
		onClose: onCloseProp,
		onOpen: onOpenProp,
		...rest
	});
	const contentId = useId();
	const titleId = useId();
	const bodyId = useId();
	const { t } = useI18n("modal");
	const onKeyDown = useCallback((ev) => {
		if (ev.key !== "Escape") return;
		ev.stopPropagation();
		if (closeOnEsc) onClose();
		onEsc?.();
	}, [
		closeOnEsc,
		onClose,
		onEsc
	]);
	const getRootProps = useCallback((props) => ({
		...rest,
		...props
	}), [rest]);
	const getOverlayProps = useCallback((props = {}) => ({
		"aria-hidden": "true",
		...props,
		onClick: (0, utils_exports.handlerAll)(props.onClick, (ev) => {
			ev.stopPropagation();
			if (closeOnOverlay) onClose();
		})
	}), [closeOnOverlay, onClose]);
	const getOpenTriggerProps = useCallback((props = {}) => ({
		"aria-controls": open ? contentId : void 0,
		"aria-expanded": open,
		"aria-haspopup": "dialog",
		"aria-label": t("Open modal"),
		...props,
		onClick: (0, utils_exports.handlerAll)(props.onClick, onOpen)
	}), [
		contentId,
		onOpen,
		open,
		t
	]);
	const getCloseTriggerProps = useCallback((props = {}) => ({
		"aria-label": t("Close modal"),
		...props,
		onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
	}), [onClose, t]);
	const getCloseButtonProps = useCallback((props = {}) => ({
		"aria-label": t("Close modal"),
		...props,
		onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
	}), [onClose, t]);
	const getContentProps = useCallback(({ "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby,...props } = {}) => ({
		id: contentId,
		"aria-describedby": (0, utils_exports.cx)(ariaDescribedby, bodyId),
		"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, titleId),
		"aria-modal": "true",
		role: "dialog",
		...props,
		onKeyDown: (0, utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
	}), [
		bodyId,
		contentId,
		onKeyDown,
		titleId
	]);
	const getHeaderProps = useCallback((props) => ({ ...props }), []);
	const getTitleProps = useCallback((props) => ({
		id: titleId,
		...props
	}), [titleId]);
	return {
		open,
		getBodyProps: useCallback((props) => ({
			id: bodyId,
			...props
		}), [bodyId]),
		getCloseButtonProps,
		getCloseTriggerProps,
		getContentProps,
		getFooterProps: useCallback((props) => ({ ...props }), []),
		getHeaderProps,
		getOpenTriggerProps,
		getOverlayProps,
		getRootProps,
		getTitleProps,
		onClose,
		onOpen
	};
};

//#endregion
export { useModal };
//# sourceMappingURL=use-modal.js.map