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 { CaretDown, CaretUp, EllipsisVertical } from '@procore/core-icons/dist';
import React from 'react';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { MenuImperative } from '../MenuImperative/MenuImperative';
import { OverlayTrigger, useOverlayTriggerContext } from '../OverlayTrigger';
import { StyledDropdownButton, StyledDropdownMenu, StyledDropdownSpinner, } from './Dropdown.styles';
function noop() { }
var Item = React.forwardRef(function Item(props, ref) {
    return React.createElement(MenuImperative.Item, __assign({ ref: ref }, props));
});
export var DropdownButton = React.forwardRef(function DropdownButton(_a, ref) {
    var children = _a.children, _b = _a.arrow, arrow = _b === void 0 ? false : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.open, open = _d === void 0 ? false : _d, _e = _a.variant, variant = _e === void 0 ? 'secondary' : _e, props = __rest(_a, ["children", "arrow", "loading", "open", "variant"]);
    var caret = arrow && (open ? React.createElement(CaretUp, { size: "sm" }) : React.createElement(CaretDown, { size: "sm" }));
    var icon = loading ? (React.createElement(StyledDropdownSpinner, { size: "xs", variant: variant === 'primary' ? 'light' : '' })) : (caret);
    return (React.createElement(StyledDropdownButton, __assign({}, props, { "aria-busy": loading || undefined, iconRight: icon, "$loading": loading, variant: variant, ref: ref }), children));
});
var DropdownMenu = React.forwardRef(function DropdownMenu(_a, ref) {
    var children = _a.children, footer = _a.footer, i18nScope = _a.i18nScope, menuRef = _a.menuRef, onSearch_ = _a.onSearch, _b = _a.onSelect, onSelect_ = _b === void 0 ? noop : _b;
    var overlayTriggerContext = useOverlayTriggerContext();
    var _c = React.useState(''), search = _c[0], setSearch = _c[1];
    function onSelect(selection) {
        overlayTriggerContext.hide(null);
        onSelect_(selection);
    }
    function onSearch(e) {
        setSearch(e.target.value);
        onSearch_ === null || onSearch_ === void 0 ? void 0 : onSearch_(e);
    }
    React.useEffect(function () {
        var _a;
        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
    }, [menuRef, search]);
    return (React.createElement(StyledDropdownMenu, { ref: ref, shadowStrength: 2 },
        React.createElement(MenuImperative, { ref: menuRef, onSelect: onSelect },
            onSearch_ && (React.createElement(MenuImperative.Search, { onChange: onSearch, autoFocus: true, autoComplete: "false", i18nScope: i18nScope })),
            React.createElement(MenuImperative.Options, null, children),
            footer && React.createElement(MenuImperative.Footer, null, footer))));
});
/**

 Dropdowns display a list of actions in a menu that opens and closes. We use
 dropdowns most commonly to trigger an action or to redirect the user to
 a new page or modal.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/dropdown--basic-props)

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

 */
var Dropdown_ = React.forwardRef(function Dropdown(_a, ref) {
    var afterHide_ = _a.afterHide, afterShow_ = _a.afterShow, beforeHide = _a.beforeHide, beforeShow = _a.beforeShow, children = _a.children, error = _a.error, footer = _a.footer, _b = _a.i18nScope, i18nScope = _b === void 0 ? 'core.dropdown' : _b, icon = _a.icon, label = _a.label, _c = _a.onKeyDown, onKeyDown_ = _c === void 0 ? noop : _c, onSearch = _a.onSearch, _d = _a.onSelect, onSelect = _d === void 0 ? noop : _d, _e = _a.placement, placement = _e === void 0 ? 'bottom-left' : _e, _f = _a.variant, variant = _f === void 0 ? 'secondary' : _f, props = __rest(_a, ["afterHide", "afterShow", "beforeHide", "beforeShow", "children", "error", "footer", "i18nScope", "icon", "label", "onKeyDown", "onSearch", "onSelect", "placement", "variant"]);
    var menuRef = React.useRef(null);
    function onKeyDown(e) {
        var _a, _b, _c;
        if (e.key === 'Up' || e.key === 'ArrowUp') {
            e.preventDefault();
            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.prev();
        }
        else if (e.key === 'Down' || e.key === 'ArrowDown') {
            e.preventDefault();
            (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.next();
        }
        else if (e.key === 'Enter') {
            e.preventDefault();
            (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.select(e);
        }
        onKeyDown_(e);
    }
    // Safari has an issue with giving focus to buttons after clicking on them
    // if the button or menu do not have focus, the keyboard navigation does not work,
    // so just focus the menu when we open it. This isn't an issue on other components because
    // they use a div instead of a button as the trigger
    function afterShow() {
        var _a, _b;
        afterShow_ === null || afterShow_ === void 0 ? void 0 : afterShow_();
        if (!onSearch) {
            (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.focus();
        }
    }
    function afterHide() {
        afterHide_ === null || afterHide_ === void 0 ? void 0 : afterHide_();
        onSearch === null || onSearch === void 0 ? void 0 : onSearch({
            target: { value: '' },
        });
    }
    return (React.createElement(OverlayTrigger, { afterHide: afterHide, afterShow: afterShow, beforeHide: beforeHide, beforeShow: beforeShow, overlay: React.createElement(DropdownMenu, { footer: footer, i18nScope: i18nScope, menuRef: menuRef, onSearch: onSearch, onSelect: onSelect }, children), placement: placement, ref: ref, restoreFocusOnHide: false }, function () { return (React.createElement(DropdownButton, __assign({}, props, { arrow: label !== undefined, icon: props.loading && !label ? undefined : !icon && !label ? (React.createElement(EllipsisVertical, null)) : (icon), onKeyDown: onKeyDown, variant: variant }), label)); }));
});
export var useDropdownContext = useOverlayTriggerContext;
/**
 * @deprecated Please use `useDropdownContext()` instead
 */
export var consumeDropdown = useDropdownContext;
export function DropdownConsumer(_a) {
    var children = _a.children;
    return children(useDropdownContext());
}
export var Dropdown = addSubcomponents(Dropdown_, { Item: Item });
export default Dropdown;
//# sourceMappingURL=Dropdown.js.map