@gravity-ui/uikit
Version:
Gravity UI base styling and components
74 lines (73 loc) • 4.52 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dialog = Dialog;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const Modal_1 = require("../Modal/index.js");
const mobile_1 = require("../mobile/index.js");
const useDefaultProps_1 = require("../theme/useDefaultProps.js");
const cn_1 = require("../utils/cn.js");
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const ButtonClose_1 = require("./ButtonClose/ButtonClose.js");
const DialogBody_1 = require("./DialogBody/DialogBody.js");
const DialogDivider_1 = require("./DialogDivider/DialogDivider.js");
const DialogFooter_1 = require("./DialogFooter/DialogFooter.js");
const DialogHeader_1 = require("./DialogHeader/DialogHeader.js");
const DialogPrivateContext_1 = require("./DialogPrivateContext.js");
require("./Dialog.css");
const b = (0, cn_1.block)('dialog');
function Dialog(rawProps) {
const { container, children, open, disableBodyScrollLock = false, disableEscapeKeyDown = false, disableOutsideClick = false, initialFocus, returnFocus, keepMounted = false, size, maxWidth, fullWidth, contentOverflow = 'visible', className, modalClassName, hasCloseButton = true, disableHeightTransition = false, onEscapeKeyDown, onEnterKeyDown, onOpenChange, onOutsideClick, onClose, onTransitionIn, onTransitionInComplete, onTransitionOut, onTransitionOutComplete, qa, ...restProps } = (0, useDefaultProps_1.useDefaultProps)('Dialog', rawProps);
const mobileModals = React.useContext(mobile_1.MobileContext).__experimentalMobileModals ?? false;
const mobile = (0, mobile_1.useMobile)() && mobileModals;
const handleCloseButtonClick = React.useCallback((event) => {
onClose(event.nativeEvent, 'closeButtonClick');
}, [onClose]);
const footerAutoFocusRef = React.useRef(null);
const privateContextProps = React.useMemo(() => {
const result = {
onTooltipEscapeKeyDown: (event) => {
onOpenChange?.(false, event, 'escape-key');
onEscapeKeyDown?.(event);
onClose?.(event, 'escapeKeyDown');
},
disableHeightTransition: disableHeightTransition || !open || mobile,
mobile,
};
if (typeof initialFocus === 'string') {
result.initialFocusRef = footerAutoFocusRef;
result.initialFocusAction = initialFocus;
}
return result;
}, [
initialFocus,
onEscapeKeyDown,
onClose,
onOpenChange,
open,
disableHeightTransition,
mobile,
]);
let initialFocusValue;
if (typeof initialFocus === 'string') {
initialFocusValue = footerAutoFocusRef;
}
else {
initialFocusValue = initialFocus;
}
return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...(0, filterDOMProps_1.filterDOMProps)(restProps, { labelable: true }), open: open, contentOverflow: mobile ? 'auto' : contentOverflow, disableBodyScrollLock: disableBodyScrollLock, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsideClick: disableOutsideClick, disableVisuallyHiddenDismiss: hasCloseButton, initialFocus: initialFocusValue, returnFocus: returnFocus, keepMounted: keepMounted, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick, onClose: onClose, onEnterKeyDown: onEnterKeyDown, onTransitionIn: onTransitionIn, onTransitionInComplete: onTransitionInComplete, onTransitionOut: onTransitionOut, onTransitionOutComplete: onTransitionOutComplete, className: b('modal', modalClassName), container: container, qa: qa, disableHeightTransition: true, children: (0, jsx_runtime_1.jsxs)("div", { className: b({
size,
mobile,
'max-width': maxWidth,
'full-width': mobile ? true : fullWidth,
'has-close': hasCloseButton,
'has-scroll': mobile ? true : contentOverflow === 'auto',
}, className), children: [hasCloseButton && (0, jsx_runtime_1.jsx)(ButtonClose_1.ButtonClose, { mobile: mobile, onClose: handleCloseButtonClick }), (0, jsx_runtime_1.jsx)(DialogPrivateContext_1.DialogPrivateContext.Provider, { value: privateContextProps, children: children })] }) }));
}
Dialog.Footer = DialogFooter_1.DialogFooter;
Dialog.Header = DialogHeader_1.DialogHeader;
Dialog.Body = DialogBody_1.DialogBody;
Dialog.Divider = DialogDivider_1.DialogDivider;
//# sourceMappingURL=Dialog.js.map