(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "react-transition-group", "../../../hooks/useOnClickOutside", "../../helpers", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var react_transition_group_1 = require("react-transition-group");
    var useOnClickOutside_1 = require("../../../hooks/useOnClickOutside");
    var helpers_1 = require("../../helpers");
    var styles_1 = require("./styles");
    var TIMEOUT_TRANSITION = 100;
    var DropdownPortal = function (_a) {
        var direction = _a.direction, anchorRect = _a.anchorRect, onClickOutsideClose = _a.onClickOutsideClose, anchorRef = _a.anchorRef, props = (0, tslib_1.__rest)(_a, ["direction", "anchorRect", "onClickOutsideClose", "anchorRef"]);
        var _b = (0, tslib_1.__read)((0, react_1.useState)(helpers_1.DEFAULT_RECT_ELEMENT), 2), dropdownRect = _b[0], setDropdownRect = _b[1];
        var maxHeight = (0, react_1.useMemo)(function () {
            return document.documentElement.scrollHeight -
                anchorRect.height -
                anchorRect.y -
                8;
        }, [anchorRect]);
        var dropdownRef = (0, react_1.useRef)(null);
        (0, react_1.useEffect)(function () {
            setDropdownRect((0, helpers_1.calculateRectElement)(dropdownRef.current));
        }, []);
        (0, useOnClickOutside_1.useOnClickOutside)([dropdownRef, anchorRef], onClickOutsideClose);
        var portalDirection = (0, react_1.useMemo)(function () { return (0, helpers_1.getDirection)({ anchorRect: anchorRect, direction: direction, dropdownRect: dropdownRect, offset: 8 }); }, [dropdownRect, direction]);
        return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: dropdownRect.width !== 0, timeout: TIMEOUT_TRANSITION, classNames: "dropdown-transition" },
            react_1.default.createElement(styles_1.DropdownListStyled, (0, tslib_1.__assign)({ height: props.height, maxHeight: maxHeight, anchorRect: anchorRect, dropdownRect: dropdownRect, ref: dropdownRef, direction: portalDirection }, props))));
    };
    DropdownPortal.displayName = "DropdownPortal";
    exports.default = DropdownPortal;
});
