@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
691 lines (594 loc) • 29.7 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ModalHeader", {
enumerable: true,
get: function get() {
return _ModalHeader.default;
}
});
Object.defineProperty(exports, "ModalFooter", {
enumerable: true,
get: function get() {
return _ModalFooter.default;
}
});
Object.defineProperty(exports, "ModalSection", {
enumerable: true,
get: function get() {
return _ModalSection.default;
}
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _ModalContext = require("./ModalContext");
var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));
var _ModalFooter = _interopRequireWildcard(require("./ModalFooter"));
var _ModalSection = _interopRequireWildcard(require("./ModalSection"));
var _ModalCloseButton = _interopRequireDefault(require("./ModalCloseButton"));
var _consts = require("./consts");
var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _ButtonPrimitive = require("../primitives/ButtonPrimitive");
var _mediaQuery = _interopRequireWildcard(require("../utils/mediaQuery"));
var _consts2 = require("../utils/mediaQuery/consts");
var _rtl = require("../utils/rtl");
var _transition = _interopRequireDefault(require("../utils/transition"));
var _randomID = _interopRequireDefault(require("../utils/randomID"));
var _onlyIE = _interopRequireDefault(require("../utils/onlyIE"));
var _useMediaQuery2 = _interopRequireDefault(require("../hooks/useMediaQuery"));
var _consts3 = _interopRequireDefault(require("../hooks/useFocusTrap/consts"));
var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
var _useLockScrolling = _interopRequireDefault(require("../hooks/useLockScrolling"));
var getSizeToken = function getSizeToken() {
return function (_ref) {
var _tokens;
var size = _ref.size,
theme = _ref.theme;
var tokens = (_tokens = {}, (0, _defineProperty2.default)(_tokens, _consts.SIZES.EXTRASMALL, "360px"), (0, _defineProperty2.default)(_tokens, _consts.SIZES.SMALL, theme.orbit.widthModalSmall), (0, _defineProperty2.default)(_tokens, _consts.SIZES.NORMAL, theme.orbit.widthModalNormal), (0, _defineProperty2.default)(_tokens, _consts.SIZES.LARGE, theme.orbit.widthModalLarge), (0, _defineProperty2.default)(_tokens, _consts.SIZES.EXTRALARGE, theme.orbit.widthModalExtraLarge), _tokens);
return tokens[size];
};
};
var ModalBody = _styledComponents.default.div.withConfig({
displayName: "Modal__ModalBody",
componentId: "sc-1f0srsl-0"
})(["width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);font-family:", ";-webkit-overflow-scrolling:auto;", ";", ";"], function (_ref2) {
var theme = _ref2.theme;
return theme.orbit.zIndexModalOverlay;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.orbit.fontFamily;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["overflow-y:auto;padding:", ";"], function (_ref4) {
var theme = _ref4.theme;
return theme.orbit.spaceXXLarge;
})), (0, _onlyIE.default)((0, _styledComponents.css)(["position:-ms-page;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalBody.defaultProps = {
theme: _defaultTheme.default
};
var ModalWrapper = _styledComponents.default.div.withConfig({
displayName: "Modal__ModalWrapper",
componentId: "sc-1f0srsl-1"
})(["box-sizing:border-box;min-height:100%;display:flex;align-items:flex-start;margin:0 auto;position:fixed;width:100%;border-top-left-radius:", ";border-top-right-radius:", ";", " ", ";", ";"], function (_ref5) {
var isMobileFullPage = _ref5.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref6) {
var isMobileFullPage = _ref6.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref7) {
var disableAnimation = _ref7.disableAnimation,
loaded = _ref7.loaded,
isMobileFullPage = _ref7.isMobileFullPage;
return disableAnimation ? (0, _styledComponents.css)(["top:", ";"], !isMobileFullPage && "32px") : (0, _styledComponents.css)(["transition:", ";top:", ";"], (0, _transition.default)(["top"], "normal", "ease-in-out"), loaded ? !isMobileFullPage && "32px" : "100%");
}, (0, _onlyIE.default)((0, _styledComponents.css)(["height:1px;"])), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:relative;top:0;max-width:", ";align-items:center;"], getSizeToken))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalWrapper.defaultProps = {
theme: _defaultTheme.default
};
var CloseContainer = _styledComponents.default.div.withConfig({
displayName: "Modal__CloseContainer",
componentId: "sc-1f0srsl-2"
})(["display:flex;", ";position:", ";top:", ";right:0;z-index:800;justify-content:flex-end;align-items:center;box-sizing:border-box;height:52px;width:100%;max-width:", ";box-shadow:", ";background-color:", ";border-top-left-radius:", ";border-top-right-radius:", ";transition:", ";pointer-events:none;", ";& + ", ":first-of-type{padding-top:52px;border-top:0;margin:0;}", "{pointer-events:auto;margin-", ":", ";& svg{transition:", ";color:", ";}&:hover svg{color:", ";}&:active svg{color:", ";}}"], function (_ref8) {
var scrolled = _ref8.scrolled,
fixedClose = _ref8.fixedClose,
theme = _ref8.theme;
return fixedClose || scrolled ? (0, _styledComponents.css)(["position:fixed;", ";"], (0, _onlyIE.default)((0, _styledComponents.css)(["position:-ms-page;"]), "(max-width:".concat(+(0, _mediaQuery.getBreakpointWidth)(_consts2.QUERIES.LARGEMOBILE, theme, true) - 1, "px)"))) : (0, _styledComponents.css)(["position:absolute;"]);
}, function (_ref9) {
var scrolled = _ref9.scrolled,
fixedClose = _ref9.fixedClose;
return fixedClose || scrolled ? "fixed" : "absolute";
}, function (_ref10) {
var scrolled = _ref10.scrolled,
fixedClose = _ref10.fixedClose,
isMobileFullPage = _ref10.isMobileFullPage;
return !isMobileFullPage && (fixedClose || scrolled) ? "32px" : "0";
}, function (_ref11) {
var modalWidth = _ref11.modalWidth;
return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref12) {
var scrolled = _ref12.scrolled,
theme = _ref12.theme;
return scrolled && theme.orbit.boxShadowFixed;
}, function (_ref13) {
var theme = _ref13.theme,
scrolled = _ref13.scrolled;
return scrolled && theme.orbit.paletteWhite;
}, function (_ref14) {
var isMobileFullPage = _ref14.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref15) {
var isMobileFullPage = _ref15.isMobileFullPage;
return !isMobileFullPage && "12px";
}, (0, _transition.default)(["box-shadow", "background-color"], "fast", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["top:", ";right:", ";border-radius:0;"], function (_ref16) {
var scrolled = _ref16.scrolled,
fixedClose = _ref16.fixedClose;
return (fixedClose || scrolled) && "0";
}, function (_ref17) {
var scrolled = _ref17.scrolled,
fixedClose = _ref17.fixedClose;
return (fixedClose || scrolled) && "auto";
})), _ModalSection.StyledModalSection, _ButtonPrimitive.StyledButtonPrimitive, _rtl.right, function (_ref18) {
var theme = _ref18.theme;
return theme.orbit.spaceXXSmall;
}, (0, _transition.default)(["color"], "fast", "ease-in-out"), function (_ref19) {
var theme = _ref19.theme;
return theme.orbit.paletteInkLight;
}, function (_ref20) {
var theme = _ref20.theme;
return theme.orbit.paletteInkLightHover;
}, function (_ref21) {
var theme = _ref21.theme;
return theme.orbit.paletteInkLightActive;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
CloseContainer.defaultProps = {
theme: _defaultTheme.default
};
var ModalWrapperContent = _styledComponents.default.div.withConfig({
displayName: "Modal__ModalWrapperContent",
componentId: "sc-1f0srsl-3"
})(["position:absolute;box-sizing:border-box;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";font-family:", ";width:100%;", ";bottom:", ";box-shadow:", ";overflow-y:auto;overflow-x:hidden;", ";", "{top:", ";opacity:", ";visibility:", ";transition:", ";", "}", "{margin-bottom:", ";}", ";", ";", ";"], function (_ref22) {
var isMobileFullPage = _ref22.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref23) {
var isMobileFullPage = _ref23.isMobileFullPage;
return !isMobileFullPage && "12px";
}, function (_ref24) {
var theme = _ref24.theme;
return theme.orbit.backgroundModal;
}, function (_ref25) {
var theme = _ref25.theme;
return theme.orbit.fontFamily;
}, function (_ref26) {
var theme = _ref26.theme,
fixedFooter = _ref26.fixedFooter,
footerHeight = _ref26.footerHeight,
isMobileFullPage = _ref26.isMobileFullPage;
return isMobileFullPage ? (0, _styledComponents.css)(["max-height:100%;top:0;"]) : (0, _styledComponents.css)(["max-height:calc( 100% - ", " - ", " );"], theme.orbit.spaceXLarge, "".concat(fixedFooter && Boolean(footerHeight) ? footerHeight : 0, "px"));
}, function (_ref27) {
var fixedFooter = _ref27.fixedFooter,
footerHeight = _ref27.footerHeight,
isMobileFullPage = _ref27.isMobileFullPage,
theme = _ref27.theme;
return "".concat((!isMobileFullPage ? parseInt(theme.orbit.spaceXLarge, 10) : 0) + (fixedFooter && Boolean(footerHeight) ? footerHeight : 0), "px");
}, function (_ref28) {
var theme = _ref28.theme;
return theme.orbit.boxShadowOverlay;
}, function (_ref29) {
var fixedFooter = _ref29.fixedFooter,
theme = _ref29.theme,
footerHeight = _ref29.footerHeight,
fullyScrolled = _ref29.fullyScrolled;
return fixedFooter && footerHeight && (0, _styledComponents.css)(["", "{bottom:0;padding:", ";box-shadow:", ";position:fixed;transition:", ";}", ":last-of-type{padding-bottom:", ";margin-bottom:0;}"], _ModalFooter.StyledModalFooter, theme.orbit.spaceMedium, fullyScrolled ? "inset 0 1px 0 ".concat(theme.orbit.paletteCloudNormal, ", ").concat(theme.orbit.boxShadowFixedReverse) : "inset 0 0 0 transparent, ".concat(theme.orbit.boxShadowFixedReverse), (0, _transition.default)(["box-shadow"], "fast", "ease-in-out"), _ModalSection.StyledModalSection, theme.orbit.spaceLarge);
}, _ModalHeader.MobileHeader, function (_ref30) {
var scrolled = _ref30.scrolled,
theme = _ref30.theme,
isMobileFullPage = _ref30.isMobileFullPage;
return !isMobileFullPage && scrolled && theme.orbit.spaceXLarge;
}, function (_ref31) {
var scrolled = _ref31.scrolled;
return scrolled && "1";
}, function (_ref32) {
var scrolled = _ref32.scrolled;
return scrolled && "visible";
}, function (_ref33) {
var scrolled = _ref33.scrolled;
return scrolled && (0, _styledComponents.css)(["", ",", ""], (0, _transition.default)(["top"], "normal", "ease-in-out"), (0, _transition.default)(["opacity", "visibility"], "fast", "ease-in-out"));
}, function (_ref34) {
var scrolled = _ref34.scrolled;
return scrolled && (0, _onlyIE.default)((0, _styledComponents.css)(["", "{position:-ms-page;}"], _ModalHeader.MobileHeader));
}, _ModalHeader.StyledModalHeader, function (_ref35) {
var hasModalSection = _ref35.hasModalSection,
theme = _ref35.theme;
return !hasModalSection && theme.orbit.spaceXLarge;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:relative;bottom:auto;border-radius:", ";padding-bottom:0;height:auto;overflow:visible;max-height:100%;", ":last-of-type{padding-bottom:", ";margin-bottom:", ";&::after{content:none;}}", "{margin-bottom:", ";}", "{padding:", ";max-width:", ";position:", ";box-shadow:", ";}", "{top:", ";width:", ";}"], function (_ref36) {
var isMobileFullPage = _ref36.isMobileFullPage;
return !isMobileFullPage && "9px";
}, _ModalSection.StyledModalSection, function (_ref37) {
var theme = _ref37.theme;
return theme.orbit.spaceXXLarge;
}, function (_ref38) {
var fixedFooter = _ref38.fixedFooter,
footerHeight = _ref38.footerHeight;
return fixedFooter ? "".concat(footerHeight, "px") : "0";
}, _ModalHeader.StyledModalHeader, function (_ref39) {
var hasModalSection = _ref39.hasModalSection,
fixedFooter = _ref39.fixedFooter,
footerHeight = _ref39.footerHeight;
return !hasModalSection && fixedFooter ? "".concat(footerHeight, "px") : "0";
}, _ModalFooter.StyledModalFooter, function (_ref40) {
var theme = _ref40.theme,
fixedFooter = _ref40.fixedFooter;
return fixedFooter ? "".concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.spaceXXLarge, "!important") : theme.orbit.spaceXXLarge;
}, function (_ref41) {
var modalWidth = _ref41.modalWidth;
return modalWidth ? "".concat(modalWidth, "px") : getSizeToken;
}, function (_ref42) {
var fullyScrolled = _ref42.fullyScrolled,
fixedFooter = _ref42.fixedFooter;
return fixedFooter && fullyScrolled && "absolute";
}, function (_ref43) {
var fullyScrolled = _ref43.fullyScrolled;
return fullyScrolled && "none";
}, _ModalHeader.MobileHeader, function (_ref44) {
var scrolled = _ref44.scrolled,
theme = _ref44.theme;
return scrolled ? "0" : "-".concat(theme.orbit.spaceXXLarge);
}, function (_ref45) {
var modalWidth = _ref45.modalWidth,
theme = _ref45.theme;
return "calc(".concat(modalWidth, "px - 48px - ").concat(theme.orbit.spaceXXLarge, ")");
})), (0, _onlyIE.default)((0, _styledComponents.css)(["", "{position:", ";}"], _ModalFooter.StyledModalFooter, function (_ref46) {
var fixedFooter = _ref46.fixedFooter;
return fixedFooter && "-ms-page";
})), function (_ref47) {
var theme = _ref47.theme;
return (0, _onlyIE.default)((0, _styledComponents.css)(["", "{position:", ";box-shadow:", ";}", ";"], _ModalFooter.StyledModalFooter, function (_ref48) {
var fullyScrolled = _ref48.fullyScrolled,
fixedFooter = _ref48.fixedFooter;
return fullyScrolled && fixedFooter && "static" || fixedFooter && "fixed";
}, function (_ref49) {
var fixedFooter = _ref49.fixedFooter;
return !fixedFooter && "inset 0 0 0 1px ".concat(theme.orbit.paletteWhite);
}, function (_ref50) {
var fullyScrolled = _ref50.fullyScrolled,
fixedFooter = _ref50.fixedFooter;
return fullyScrolled && fixedFooter && (0, _styledComponents.css)(["", ":last-of-type{margin-bottom:0;}", "{margin-bottom:", ";}"], _ModalSection.StyledModalSection, _ModalHeader.StyledModalHeader, function (_ref51) {
var hasModalSection = _ref51.hasModalSection;
return !hasModalSection && "0";
});
}), (0, _mediaQuery.getBreakpointWidth)(_consts2.QUERIES.LARGEMOBILE, theme));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
ModalWrapperContent.defaultProps = {
theme: _defaultTheme.default
};
var OFFSET = 40;
var Modal = /*#__PURE__*/React.forwardRef(function (_ref52, ref) {
var _ref52$size = _ref52.size,
size = _ref52$size === void 0 ? _consts.SIZES.NORMAL : _ref52$size,
scrollingElementRef = _ref52.scrollingElementRef,
children = _ref52.children,
onClose = _ref52.onClose,
_ref52$autoFocus = _ref52.autoFocus,
autoFocus = _ref52$autoFocus === void 0 ? true : _ref52$autoFocus,
_ref52$fixedFooter = _ref52.fixedFooter,
fixedFooter = _ref52$fixedFooter === void 0 ? false : _ref52$fixedFooter,
_ref52$isMobileFullPa = _ref52.isMobileFullPage,
isMobileFullPage = _ref52$isMobileFullPa === void 0 ? false : _ref52$isMobileFullPa,
_ref52$preventOverlay = _ref52.preventOverlayClose,
preventOverlayClose = _ref52$preventOverlay === void 0 ? false : _ref52$preventOverlay,
_ref52$hasCloseButton = _ref52.hasCloseButton,
hasCloseButton = _ref52$hasCloseButton === void 0 ? true : _ref52$hasCloseButton,
_ref52$mobileHeader = _ref52.mobileHeader,
mobileHeader = _ref52$mobileHeader === void 0 ? true : _ref52$mobileHeader,
_ref52$disableAnimati = _ref52.disableAnimation,
disableAnimation = _ref52$disableAnimati === void 0 ? false : _ref52$disableAnimati,
dataTest = _ref52.dataTest,
_ref52$lockScrolling = _ref52.lockScrolling,
lockScrolling = _ref52$lockScrolling === void 0 ? true : _ref52$lockScrolling;
var _React$useState = React.useState(false),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
loaded = _React$useState2[0],
setLoaded = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
scrolled = _React$useState4[0],
setScrolled = _React$useState4[1];
var _React$useState5 = React.useState(false),
_React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
fullyScrolled = _React$useState6[0],
setFullyScrolled = _React$useState6[1];
var _React$useState7 = React.useState(false),
_React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
hasModalTitle = _React$useState8[0],
setHasModalTitle = _React$useState8[1];
var _React$useState9 = React.useState(false),
_React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
hasModalSection = _React$useState10[0],
_setHasModalSection = _React$useState10[1];
var _React$useState11 = React.useState(false),
_React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
clickedModalBody = _React$useState12[0],
setClickedModalBody = _React$useState12[1];
var _React$useState13 = React.useState(false),
_React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
fixedClose = _React$useState14[0],
setFixedClose = _React$useState14[1];
var _React$useState15 = React.useState(false),
_React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
focusTriggered = _React$useState16[0],
setFocusTriggered = _React$useState16[1];
var _React$useState17 = React.useState(0),
_React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
modalWidth = _React$useState18[0],
setModalWidth = _React$useState18[1];
var _React$useState19 = React.useState(0),
_React$useState20 = (0, _slicedToArray2.default)(_React$useState19, 2),
footerHeight = _React$useState20[0],
setFooterHeight = _React$useState20[1];
var _React$useState21 = React.useState(null),
_React$useState22 = (0, _slicedToArray2.default)(_React$useState21, 2),
firstFocusableEl = _React$useState22[0],
setFirstFocusableEl = _React$useState22[1];
var _React$useState23 = React.useState(null),
_React$useState24 = (0, _slicedToArray2.default)(_React$useState23, 2),
lastFocusableEl = _React$useState24[0],
setLastFocusableEl = _React$useState24[1];
var modalContent = React.useRef(null);
var modalBody = React.useRef(null);
var modalID = React.useMemo(function () {
return (0, _randomID.default)("modalID");
}, []);
var _useMediaQuery = (0, _useMediaQuery2.default)(),
isLargeMobile = _useMediaQuery.isLargeMobile;
var scrollingElement = React.useRef(null);
var setScrollingElementRefs = React.useCallback(function (node) {
scrollingElement.current = node;
if (scrollingElementRef) {
if (typeof scrollingElementRef === "function") {
scrollingElementRef(node);
} else {
// eslint-disable-next-line no-param-reassign
scrollingElementRef.current = node;
}
}
}, [scrollingElementRef]);
(0, _useLockScrolling.default)(scrollingElement, lockScrolling);
var modalContentRef = React.useCallback(function (node) {
modalContent.current = node;
if (!isLargeMobile) setScrollingElementRefs(node);
}, [isLargeMobile, setScrollingElementRefs]);
var modalBodyRef = React.useCallback(function (node) {
modalBody.current = node;
if (isLargeMobile) setScrollingElementRefs(node);
}, [isLargeMobile, setScrollingElementRefs]);
var prevChildren = (0, _usePrevious.default)(children);
var setDimensions = function setDimensions() {
var content = modalContent.current;
if (!content) return; // added in 4.0.3, interpolation of styled component return static className
// $FlowFixMe
var footerEl = content.querySelector("".concat(_ModalFooter.StyledModalFooter));
var contentDimensions = content.getBoundingClientRect();
setModalWidth(contentDimensions.width);
if (footerEl !== null && footerEl !== void 0 && footerEl.clientHeight) {
setFooterHeight(footerEl.clientHeight);
}
};
var setFirstFocus = function setFirstFocus() {
if (modalBody.current && autoFocus) {
modalBody.current.focus();
}
};
var decideFixedFooter = function decideFixedFooter() {
if (!modalContent.current || !modalBody.current) return; // if the content height is smaller than window height, we need to explicitly set fullyScrolled to true
var content = modalContent.current;
var body = modalBody.current;
var contentHeight = content.scrollHeight > content.offsetHeight + OFFSET ? content.offsetHeight : content.scrollHeight; // when scrollHeight + topPadding - scrollingElementHeight is smaller than or equal to window height
setFullyScrolled(contentHeight + OFFSET - body.scrollTop <= window.innerHeight);
};
var manageFocus = function manageFocus() {
if (!focusTriggered || !modalContent.current) return;
var focusableElements = modalContent.current.querySelectorAll(_consts3.default);
if (focusableElements.length > 0) {
setFirstFocusableEl(focusableElements[0]);
setLastFocusableEl(focusableElements[focusableElements.length - 1]);
}
};
var keyboardHandler = function keyboardHandler(event) {
if (event.keyCode !== _keyMaps.default.TAB) return;
if (!focusTriggered) {
setFocusTriggered(true);
manageFocus();
}
if (event.shiftKey && (document.activeElement === firstFocusableEl || document.activeElement === modalBody.current)) {
event.preventDefault();
lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
} else if (!event.shiftKey && document.activeElement === lastFocusableEl) {
event.preventDefault();
firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
}
};
var handleKeyDown = function handleKeyDown(event) {
if (onClose && event.key === "Escape") {
event.stopPropagation();
onClose(event);
}
keyboardHandler(event);
};
var handleClickOutside = function handleClickOutside(event) {
var clickedOutside = onClose && preventOverlayClose === false && !clickedModalBody && modalContent.current && event.target instanceof Element && !modalContent.current.contains(event.target) && /ModalBody|ModalWrapper/.test(event.target.className);
if (clickedOutside && onClose) {
onClose(event);
}
setClickedModalBody(false);
};
var setScrollStates = function setScrollStates(target, fullScrollOffset, fixCloseOffset, scrollBegin, mobile) {
var content = modalContent.current;
if (!content) return;
var _content$getBoundingC = content.getBoundingClientRect(),
contentHeight = _content$getBoundingC.height;
/*
Only for desktop, we need to check if the scrollHeight of content is bigger than actual height
if so, we need to you use the contentHeight + padding as bottom scroll point,
otherwise actual scrollHeight of the target is enough.
*/
var scrollHeight = !mobile && target.scrollHeight > contentHeight + 80 ? contentHeight + 80 : target.scrollHeight; // $FlowFixMe
setScrolled(target.scrollTop >= scrollBegin + (!mobile ? target.scrollTop : 0));
setFixedClose(target.scrollTop >= fixCloseOffset); // set fullyScrolled state sooner than the exact end of the scroll (with fullScrollOffset value)
setFullyScrolled(fixedFooter && target.scrollTop >= scrollHeight - target.clientHeight - fullScrollOffset);
};
var getScrollTopPoint = function getScrollTopPoint(mobile) {
var content = modalContent.current;
if (!content) return null; // $FlowFixMe
var headingEl = content.querySelector("".concat(_ModalHeader.ModalHeading));
if (headingEl) {
var _headingEl$getBoundin = headingEl.getBoundingClientRect(),
_top = _headingEl$getBoundin.top;
return _top;
}
if (mobile) return OFFSET;
var _content$getBoundingC2 = content.getBoundingClientRect(),
top = _content$getBoundingC2.top;
return top;
};
var handleScroll = function handleScroll(event) {
if (event.target instanceof HTMLDivElement && event.target === modalBody.current) {
setScrollStates(event.target, OFFSET, OFFSET, getScrollTopPoint());
}
};
var handleMobileScroll = function handleMobileScroll(event) {
if (event.target instanceof HTMLDivElement && event.target === modalContent.current) {
setScrollStates(event.target, 10, 1, getScrollTopPoint(true), true);
}
};
var handleMouseDown = function handleMouseDown() {
/*
This is due to issue where it was possible to close Modal,
even though click started (onMouseDown) in ModalWrapper.
*/
setClickedModalBody(true);
};
var callContextFunctions = function callContextFunctions() {
setDimensions();
decideFixedFooter();
manageFocus();
};
var getScrollPosition = function getScrollPosition() {
if (scrollingElement.current) {
return scrollingElement.current.scrollTop;
}
return null;
};
var setScrollPosition = function setScrollPosition(value) {
if (scrollingElement.current) {
scrollingElement.current.scrollTop = value;
}
};
React.useImperativeHandle(ref, function () {
return {
getScrollPosition: getScrollPosition,
setScrollPosition: setScrollPosition,
modalBody: modalBody,
modalContent: modalContent
};
}); // eslint-disable-next-line consistent-return
React.useEffect(function () {
if (disableAnimation) {
decideFixedFooter();
setDimensions();
setFirstFocus();
} else {
var timer = setTimeout(function () {
setLoaded(true);
decideFixedFooter();
setDimensions();
setFirstFocus();
}, 15);
return function () {
clearTimeout(timer);
};
} // the Modal can only transition in on mount
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(function () {
var handleResize = function handleResize() {
setDimensions();
decideFixedFooter();
};
window.addEventListener("resize", handleResize);
return function () {
window.removeEventListener("resize", handleResize);
};
}, []);
React.useEffect(function () {
if (children !== prevChildren) {
decideFixedFooter();
setDimensions();
}
}, [children, prevChildren]);
var hasCloseContainer = mobileHeader && (hasModalTitle || onClose && hasCloseButton);
return /*#__PURE__*/React.createElement(ModalBody, {
tabIndex: "0",
onKeyDown: handleKeyDown,
onScroll: handleScroll,
onClick: handleClickOutside,
"data-test": dataTest,
ref: modalBodyRef,
role: "dialog",
autoFocus: autoFocus,
"aria-modal": "true",
"aria-labelledby": modalID
}, /*#__PURE__*/React.createElement(ModalWrapper, {
size: size,
loaded: loaded,
onScroll: handleMobileScroll,
fixedFooter: fixedFooter,
id: modalID,
isMobileFullPage: isMobileFullPage,
disableAnimation: disableAnimation
}, /*#__PURE__*/React.createElement(ModalWrapperContent, {
size: size,
fixedFooter: fixedFooter,
scrolled: scrolled,
ref: modalContentRef,
fixedClose: fixedClose,
fullyScrolled: fullyScrolled,
modalWidth: modalWidth,
footerHeight: footerHeight,
hasModalSection: hasModalSection,
isMobileFullPage: isMobileFullPage,
onMouseDown: handleMouseDown
}, hasCloseContainer && /*#__PURE__*/React.createElement(CloseContainer, {
"data-test": "CloseContainer",
modalWidth: modalWidth,
size: size,
scrolled: scrolled,
fixedClose: fixedClose,
isMobileFullPage: isMobileFullPage
}, onClose && hasCloseButton && /*#__PURE__*/React.createElement(_ModalCloseButton.default, {
onClick: onClose,
dataTest: _consts.CLOSE_BUTTON_DATA_TEST
})), /*#__PURE__*/React.createElement(_ModalContext.ModalContext.Provider, {
value: {
setHasModalTitle: setHasModalTitle,
setHasModalSection: function setHasModalSection() {
return _setHasModalSection(true);
},
removeHasModalSection: function removeHasModalSection() {
return _setHasModalSection(false);
},
callContextFunctions: callContextFunctions,
hasModalSection: hasModalSection,
hasMobileHeader: mobileHeader,
isMobileFullPage: isMobileFullPage,
closable: Boolean(onClose),
isInsideModal: true
}
}, children))));
});
Modal.displayName = "Modal";
var _default = Modal;
exports.default = _default;