/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
 * @module Widget
 */
import "./Overflow.scss";
import classnames from "classnames";
import * as React from "react";
import { useResizeObserver } from "@itwin/core-react/internal";
import { PanelSideContext } from "../widget-panels/Panel.js";
import { useLayout } from "../base/LayoutStore.js";
import { DropdownMenu } from "@itwin/itwinui-react";
import { SvgChevronRightSmall } from "@itwin/itwinui-icons-react";
import { TabBarButton } from "./Button.js";
import { useTranslation } from "../../hooks/useTranslation.js";
/** @internal */
export function WidgetOverflow(props) {
    const [open, setOpen] = React.useState(false);
    const resizeObserverRef = useResizeObserver(props.onResize);
    const handleClose = React.useCallback(() => {
        setOpen(false);
    }, []);
    usePanelPopup(handleClose);
    const overflowContext = React.useMemo(() => {
        return {
            close: handleClose,
        };
    }, [handleClose]);
    const { translate } = useTranslation();
    const moreWidgetsTitle = translate("widget.tooltips.moreWidgets");
    return (React.createElement(WidgetOverflowContext.Provider, { value: overflowContext },
        React.createElement(DropdownMenu, { className: "nz-widget-overflow_menu", menuItems: props.items, visible: open, onVisibleChange: setOpen, closeOnItemClick: false },
            React.createElement(TabBarButton, { label: moreWidgetsTitle, className: classnames("nz-widget-overflow", props.hidden && "nz-hidden"), ref: resizeObserverRef },
                React.createElement(SvgChevronRightSmall, null)))));
}
/** @internal */
export const WidgetOverflowContext = React.createContext(undefined);
WidgetOverflowContext.displayName = "nz:WidgetOverflowContext";
function usePanelPopup(onClose) {
    const side = React.useContext(PanelSideContext);
    const collapsed = useLayout((state) => side ? state.panels[side].collapsed : false);
    React.useEffect(() => {
        if (collapsed) {
            onClose();
        }
    }, [collapsed, onClose]);
}
//# sourceMappingURL=Overflow.js.map