var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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;
};
import { Check, Clear, EllipsisVertical, Error, Info, Warning, } from '@procore/core-icons/dist';
import { partition } from 'ramda';
import React from 'react';
import { mergeRefs } from '../../effects/mergeRefs';
import { OverflowObserver } from '../../effects/OverflowObserver';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { Button } from '../Button';
import { Card } from '../Card';
import { Icon as BaseIcon } from '../Icon';
import { Menu, useMenu } from '../Menu';
import { OverlayTrigger } from '../OverlayTrigger';
import { StyledAction, StyledActionsTrigger, StyledBannerContainer, StyledBody, StyledContent, StyledExpandableContent, StyledExpandableContentContainer, StyledIconContainer, StyledTitle, } from './Banner.styles';
/**


 We use banners to contextually convey complicated or supplemental information
 to a user. Depending on the type of banner, we can provide more information
 about a feature or page the user is on, an action the user needs to perform,
 or an error the user has encountered.

 Procore banners are informative and actionable. Always explain what the user
 needs to know (and in some cases, why they’re seeing the banner), and provide
 an actionable next step.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-banner--demo)

 @see [Design Guidelines](https://design.procore.com/banner)

 */
var Banner_ = React.forwardRef(function Banner(_a, ref) {
    var children = _a.children, variant = _a.variant, props = __rest(_a, ["children", "variant"]);
    var _b = partition(function (element) {
        return React.isValidElement(element) && element.type === ExpandableContent;
    }, React.Children.toArray(children)), expandableContentNodes = _b[0], content = _b[1];
    var isExpandable = expandableContentNodes.length !== 0;
    return (React.createElement(StyledBannerContainer, __assign({ ref: ref, isExpandable: isExpandable, variant: variant }, props), isExpandable ? (React.createElement(React.Fragment, null,
        React.createElement(StyledExpandableContentContainer, { justifyContent: "space-between", alignItems: "center" }, content),
        expandableContentNodes)) : (content)));
});
var Content = React.forwardRef(function Content(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledContent, __assign({}, props, { ref: ref }), children));
});
var ExpandableContent = React.forwardRef(function ExpandableContent(_a, ref) {
    var children = _a.children, _b = _a.expanded, expanded = _b === void 0 ? false : _b, props = __rest(_a, ["children", "expanded"]);
    var containerRef = React.useRef(null);
    return expanded ? (React.createElement(OverflowObserver, null, function (_a) {
        var overflowRef = _a.ref, isOverflowingY = _a.isOverflowingY;
        return (React.createElement(StyledExpandableContent, __assign({ ref: mergeRefs(ref, containerRef), "data-qa": "core-banner-expandable-content", onAnimationEnd: function () { return overflowRef(containerRef.current); }, isOverflowingY: isOverflowingY }, props, (isOverflowingY && { tabIndex: 0 })), children));
    })) : null;
});
var Title = React.forwardRef(function Title(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledTitle, __assign({}, props, { ref: ref }), children));
});
var Body = React.forwardRef(function Body(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledBody, __assign({}, props, { ref: ref }), children));
});
var Action = React.forwardRef(function Action(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(StyledAction, __assign({}, props, { ref: ref }), children));
});
var DropdownAction = React.forwardRef(function DropdownAction(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(Menu.Item, __assign({ ref: ref, item: null }, props), children));
});
var Actions = React.forwardRef(function Actions(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    var actionButtons = React.Children.toArray(children).filter(function (element) {
        return React.isValidElement(element) && element.type === Action;
    });
    return (React.createElement(OverlayTrigger, { overlay: React.createElement(Card, null,
            React.createElement(Menu, { ref: function (node) { return node === null || node === void 0 ? void 0 : node.focus(); }, usingHook: useMenu({
                    isSelectable: function (_a) {
                        var type = _a.type;
                        return type === DropdownAction;
                    },
                }) },
                React.createElement(Menu.Options, null, actionButtons.map(function (_a, idx) {
                    var actionButtonProps = _a.props;
                    return (React.createElement(DropdownAction, __assign({ key: idx }, actionButtonProps)));
                })))), ref: ref, placement: "bottom-right" },
        React.createElement(StyledActionsTrigger, __assign({ "data-qa": "core-banner-actions-trigger", variant: "tertiary", arrow: false, icon: React.createElement(EllipsisVertical, null) }, props))));
});
var Icon = React.forwardRef(function Icon(_a, ref) {
    var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
    return (React.createElement(StyledIconContainer, __assign({ ref: ref, "aria-hidden": "true" }, props), typeof icon === 'string' ? React.createElement(BaseIcon, { icon: icon, size: "lg" }) : icon));
});
var Dismiss = React.forwardRef(function Dismiss(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return React.createElement(Button, __assign({ ref: ref }, props, { icon: React.createElement(Clear, null), variant: "tertiary" }));
});
export var ErrorBanner = React.forwardRef(function ErrorBanner(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(Banner, __assign({ ref: ref, variant: "error" }, props),
        React.createElement(Icon, { icon: React.createElement(Error, { size: "lg" }) }),
        children));
});
/**
 * @deprecated Component will be removed in a future version. Instead, please consider using "success" variant of Toast component.
 */
export var SuccessBanner = React.forwardRef(function SuccessBanner(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(Banner, __assign({ ref: ref, variant: "success" }, props),
        React.createElement(Icon, { icon: React.createElement(Check, { size: "lg" }) }),
        children));
});
export var InfoBanner = React.forwardRef(function InfoBanner(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(Banner, __assign({ ref: ref, variant: "info" }, props),
        React.createElement(Icon, { icon: React.createElement(Info, { size: "lg" }) }),
        children));
});
export var ActionBanner = React.forwardRef(function ActionBanner(_a, ref) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return (React.createElement(Banner, __assign({ ref: ref, variant: "action" }, props),
        React.createElement(Icon, { icon: React.createElement(Warning, { size: "lg" }) }),
        children));
});
Banner_.displayName = 'Banner';
Body.displayName = 'Banner.Body';
Content.displayName = 'Banner.Content';
ExpandableContent.displayName = 'Banner.ExpandableContent';
Title.displayName = 'Banner.Title';
Action.displayName = 'Banner.Action';
Actions.displayName = 'Banner.Actions';
DropdownAction.displayName = 'Banner.DropdownAction';
Icon.displayName = 'Banner.Icon';
Dismiss.displayName = 'Banner.Dismiss';
ErrorBanner.displayName = 'ErrorBanner';
SuccessBanner.displayName = 'SuccessBanner';
InfoBanner.displayName = 'InfoBanner';
ActionBanner.displayName = 'ActionBanner';
export var Banner = addSubcomponents({
    Body: Body,
    Content: Content,
    ExpandableContent: ExpandableContent,
    Title: Title,
    Action: Action,
    Actions: Actions,
    Icon: Icon,
    Dismiss: Dismiss,
}, Banner_);
//# sourceMappingURL=Banner.js.map