"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalDrawer = void 0;
const react_1 = __importDefault(require("react"));
// TODO @grsmto: might be worth migrating to react-pose once https://github.com/reach/reach-ui/issues/126 is fixed
const renderprops_cjs_1 = require("react-spring/renderprops.cjs");
const ModalBase_1 = require("../ModalBase");
const Grid_1 = require("../Grid");
const sc = __importStar(require("./styles"));
const icons_1 = require("../../assets/images/icons");
exports.ModalDrawer = (_a) => {
    var { children, isOpen: isOpenProps, onClose, isCloseable, isCentered, maxWidth, scroll } = _a, otherProps = __rest(_a, ["children", "isOpen", "onClose", "isCloseable", "isCentered", "maxWidth", "scroll"]);
    const handleCloseRequest = () => {
        if (!isCloseable)
            return;
        if (onClose)
            onClose();
    };
    return (react_1.default.createElement(ModalBase_1.ModalBase, { isOpen: isOpenProps, onClose: onClose, isCentered: isCentered },
        react_1.default.createElement(renderprops_cjs_1.Transition, { native: true, items: isOpenProps, from: { transform: 'translate3d(-110%, 0, 0)' }, enter: { transform: 'translate3d(0, 0, 0)' }, leave: { transform: 'translate3d(-110%, 0, 0)' } }, (isOpen) => isOpen &&
            ((styles) => (react_1.default.createElement(sc.Container, { style: styles, "aria-label": "modal drawer content" },
                react_1.default.createElement(sc.Dialog, Object.assign({ scroll: scroll, maxWidth: maxWidth, p: 4, borderRadius: 0, boxShadow: 4 }, otherProps),
                    react_1.default.createElement(Grid_1.Grid, { gridAutoFlow: "column" },
                        isCloseable && (react_1.default.createElement(sc.CloseButton, { Asset: icons_1.SvgArrow, onClick: handleCloseRequest, variant: "primary" })),
                        react_1.default.createElement(sc.Inner, null, children)))))))));
};
exports.ModalDrawer.defaultProps = Object.assign(Object.assign({}, ModalBase_1.ModalBase.defaultProps), { maxWidth: 1 });
//# sourceMappingURL=ModalDrawer.js.map