@opensumi/ide-core-browser 2.12.1-next-079c1930

package/lib/style/override.less

@@ -0,0 +1,80 @@
+@import "~@opensumi/ide-components/lib/style/mixins.less";
+@import "./variable.less";
+
+.overrideMenu(@n, @i: 1) when (@i =< @n) {
+  @clsx: extract(@menuClx, @i);
+
+  .kt-menu {
+    &.@{clsx}, .@{clsx} {
+      padding: 2px 0px !important;
+      color: var(--menu-foreground) !important;
+      background-color: var(--menu-background) !important;
+      border: none !important;
+      .overlay-shadow(var(--kt-menu-shadow)) !important;
+      border-radius: 0 !important;
+      min-width: 200px;
+
+      .@{clsx}-item,
+      .@{clsx}-submenu-title {
+        margin: 0 !important;
+        padding: 3px 4px !important;
+        height: 26px !important;
+        display: flex !important;
+        align-items: center !important;
+        color: inherit !important;
+      }
+
+      .@{clsx}-submenu-title:hover {
+        color: inherit !important;
+      }
+
+      .@{clsx}-item:not(.@{clsx}-item-disabled) {
+        cursor: default !important;
+      }
+
+      .@{clsx}-item-disabled {
+        color: var(--kt-menu-disableForeground) !important;
+      }
+
+      .@{clsx}-item-divider {
+        margin: 3px 0 !important;
+        pointer-events: none !important;
+        background-color: var(--menu-separatorBackground) !important;
+      }
+
+      .@{clsx}-item-active,
+      .@{clsx}-item-open,
+      .@{clsx}-item-selected,
+      .@{clsx}-submenu-active,
+      .@{clsx}-submenu-open,
+      .@{clsx}-submenu-selected {
+        background: var(--menu-selectionBackground) !important;
+        color: var(--menu-selectionForeground) !important;
+      }
+
+      .@{clsx}-submenu-arrow {
+        display: none;
+      }
+    }
+
+    // 解决 antd 弹出元素防穿透的背景色
+    &.@{clsx}-submenu {
+      .overlay-shadow(var(--kt-menu-shadow)) !important;
+      border-radius: 0 !important;
+      min-width: 120px;
+      background-color: var(--menu-background) !important;
+    }
+  }
+
+  .overrideMenu(@n, (@i + 1));
+}
+
+@menuClx: kt-inner-menu, kt-dropdown-menu;
+
+.overrideMenu(length(@menuClx));
+
+.monaco-editor {
+  h1, h2, h3, h4, h5, h6, p {
+    color: var(--foreground);
+  }
+}

package/lib/style/toolbar.less

@@ -0,0 +1,193 @@
+@import "~@opensumi/ide-components/lib/style/mixins.less";
+
+.kt-toolbar-location {
+  position: relative;
+  background-color: var(--kt-menubar-background);
+  .kt-toolbar-location-visible.kt-toolbar-location-no-actions{
+    display:none;
+  }
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+  .kt-toolbar-action-btn-title {
+    white-space: nowrap;
+  }
+  .kt-toolbar-location-visible, .kt-toolbar-location-dropdown {
+    width: 100%;
+    display: flex;
+    padding: 0 5px;
+    > div {
+      margin-left: 5px;
+      &:first-child {
+        margin-left:0;
+      }
+    }
+    .kt-toolbar-action-wrapper-compact-middle, .kt-toolbar-action-wrapper-compact-tail {
+      margin-left: 0;
+    }
+    .kt-toolbar-more {
+      cursor: pointer;
+      position: relative;
+    }
+  }
+
+  // button
+  .kt-toolbar-action-btn {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &.kt-toolbar-action-btn-vertical {
+      flex-direction: column;
+      font-size: 12px;
+      .kt-toolbar-action-btn-title {
+        line-height: 24px;
+      }
+    }
+    &.kt-toolbar-action-btn-horizontal {
+
+      &.kt-toolbar-action-btn-inline {
+
+      }
+      &.kt-toolbar-action-btn-button {
+        padding: 0px 5px;
+        background: #43484D; /* TODO: */
+        border-radius: 2px;
+        &:hover {
+          background: #5F656B; /* TODO: */
+        }
+      }
+      .kt-toolbar-action-btn-icon {
+          margin-right: 4px;
+          position: relative;
+          top: 1px;
+      }
+      .kt-toolbar-action-btn-icon:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .kt-toolbar-action-wrapper-compact:not(.kt-toolbar-action-wrapper-compact-head) {
+    .kt-toolbar-action-btn-wrapper > .kt-button{
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .kt-toolbar-action-wrapper-compact-middle,  .kt-toolbar-action-wrapper-compact-tail:not(.kt-toolbar-action-wrapper-compact-head){
+    .kt-toolbar-action-btn-wrapper > .kt-button{
+      border-left: 1px solid var(--kt-actionbar-separatorBackground);
+    }
+  }
+
+  .kt-toolbar-action-wrapper-compact:not(.kt-toolbar-action-wrapper-compact-tail) {
+    .kt-toolbar-action-btn-wrapper > .kt-button{
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .kt-toolbar-action-split {
+    border-right: 1px solid rgba(0,0,0,.25);
+    height: 18px;
+  }
+  &.action-btn-in-dropdown {
+    flex-direction: row;
+    padding: 2px 7px;
+  }
+}
+
+.kt-toolbar-location-dropdown {
+    position: fixed;
+    z-index: 10;
+    display: block;
+    background-color: var(--kt-menubar-background);
+    .kt-toolbar-action-btn {
+      display: flex;
+      align-items: center;
+      font-size:12px;
+      cursor: pointer;
+      background: var(--menu-background);
+      &:hover {
+        background: var(--menubar-selectionBackground);
+      }
+      &.action-btn-in-dropdown {
+        flex-direction: row;
+        padding: 5px 20px;
+      }
+      .kt-toolbar-action-btn-icon {
+          margin-right: 4px;
+          position: relative;
+          top: 1px;
+      }
+      &.kt-toolbar-action-select {
+        position: relative;
+        padding-right: 30px;
+        .kt-toolbar-action-select-right {
+          position: absolute;
+          right: 0;
+          top: 4px;
+        }
+      }
+    }
+
+  .kt-toolbar-action-split {
+    border-top: 1px solid rgba(0,0,0,.25);
+    width:100%;
+  }
+  .overlay-shadow();
+}
+
+.kt-toolbar-action-select-dropdown {
+  position: absolute;
+  width: 150px;
+  max-width: none;
+  display: block;
+  z-index: 11;
+  visibility: hidden;
+}
+
+.kt-toolbar-action-wrapper {
+  position: relative;
+}
+.kt-toolbar-popover {
+  position: absolute;
+  --offset-size: 30px;
+  --button-width: 30px;
+  right: calc(0px - var(--offset-size));
+  &.kt-toolbar-popover-bottom {
+    top: 100%;
+  }
+  &.kt-toolbar-popover-top {
+    bottom: 100%;
+  }
+  &.kt-toolbar-popover-default {
+    .overlay-shadow();
+    box-shadow: 1px solid;
+    border-radius: 5px;
+    background: var(--kt-popover-background);
+    &:before {
+      border-top: 0px solid transparent;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+      border-bottom: 5px solid var(--kt-popover-background);
+      position: absolute;
+      right: calc(var(--offset-size) + 0.5 * var(--button-width) - 7px);
+      top: -5px;
+    }
+    &.kt-toolbar-popover-bottom {
+      top: calc(100% + 7px);
+    }
+    &.kt-toolbar-popover-top {
+      bottom: calc(100% + 7px);
+    }
+    &.kt-toolbar-popover-visible {
+      &::before, &::after {
+        content: '';
+      }
+    }
+  }
+}

package/lib/style/utilities.less

@@ -0,0 +1,18 @@
+.kt-text-desc {
+  color: var(--descriptionForeground);
+}
+
+.kt-text-error {
+  color: var(--errorForeground);
+}
+
+.none-pointer-event {
+  pointer-events: none;
+}
+
+/* ---- 这一段是寻壑加的，建议挪到 layout resize 相关的实现部分 ---- */
+.resize-wrapper {
+  width: 100%;
+  height: 100%;
+}
+/* -------- */

package/lib/style/variable.less

@@ -0,0 +1,16 @@
+/* 请不要在这里申明 css variables 到 :root 下 */
+/* 会导致这里的变量在被引用的时候 :root 下反复挂载过多的 css variables */
+
+/* 基础文字大小 */
+@kt-default-font-size: 13px;
+
+/* 基础间距大小 */
+@kt-ui-spacing: 6px;
+
+/* ---- 这一段是寻壑和吭头在用，因此继续保留，后续应该换成 less vars  ---- */
+:root {
+  --tabBar-height: 28px;
+  --kt-scrollbar-width: 10px;
+}
+
+/* -------- */

package/lib/toolbar/components/auto-complete.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=auto-complete.d.ts.map

package/lib/toolbar/components/auto-complete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete.d.ts","sourceRoot":"","sources":["../../../src/toolbar/components/auto-complete.tsx"],"names":[],"mappings":""}

package/lib/toolbar/components/auto-complete.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=auto-complete.js.map

package/lib/toolbar/components/auto-complete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete.js","sourceRoot":"","sources":["../../../src/toolbar/components/auto-complete.tsx"],"names":[],"mappings":""}

package/lib/toolbar/components/button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IToolbarActionReactElement, IToolbarActionElementProps, IToolbarActionBtnProps } from '../types';
+import { BasicEvent } from '@opensumi/ide-core-common';
+export declare const ToolbarActionBtn: (props: IToolbarActionBtnProps & IToolbarActionElementProps) => JSX.Element;
+export declare function createToolbarActionBtn(props: IToolbarActionBtnProps): IToolbarActionReactElement;
+export declare class ToolbarActionBtnClickEvent extends BasicEvent<{
+    id: string;
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>;
+}> {
+}
+//# sourceMappingURL=button.d.ts.map

package/lib/toolbar/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/toolbar/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,sBAAsB,EAAoG,MAAM,UAAU,CAAC;AAE5M,OAAO,EAAE,UAAU,EAAoC,MAAM,2BAA2B,CAAC;AAYzF,eAAO,MAAM,gBAAgB,UAAW,sBAAsB,GAAG,0BAA0B,gBA6I1F,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,sBAAsB,GAAG,0BAA0B,CAIhG;AAED,qBAAa,0BAA2B,SAAQ,UAAU,CAAC;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;CACrD,CAAC;CAAG"}

package/lib/toolbar/components/button.js

@@ -0,0 +1,324 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarActionBtnClickEvent = exports.createToolbarActionBtn = exports.ToolbarActionBtn = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
+const di_1 = require("@opensumi/di");
+const types_1 = require("../types");
+const react_hooks_1 = require("../../react-hooks");
+const ide_core_common_1 = require("@opensumi/ide-core-common");
+const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
+const react_providers_1 = require("../../react-providers");
+const ide_components_1 = require("@opensumi/ide-components");
+const preferences_1 = require("../../preferences");
+const dom_1 = require("../../dom");
+var BUTTON_TITLE_STYLE;
+(function (BUTTON_TITLE_STYLE) {
+    BUTTON_TITLE_STYLE["HORIZONTAL"] = "horizontal";
+    BUTTON_TITLE_STYLE["VERTICAL"] = "vertical";
+})(BUTTON_TITLE_STYLE || (BUTTON_TITLE_STYLE = {}));
+const ToolbarActionBtn = (props) => {
+    const context = (0, react_hooks_1.useInjectable)(react_providers_1.AppConfig);
+    const ref = react_1.default.useRef();
+    const [viewState, setViewState] = react_1.default.useState(props.defaultState || 'default');
+    const [title, setTitle] = react_1.default.useState(undefined);
+    const preferenceService = (0, react_hooks_1.useInjectable)(preferences_1.PreferenceService);
+    const [, updateState] = react_1.default.useState();
+    const forceUpdate = react_1.default.useCallback(() => updateState({}), []);
+    const { defaultButtonStyle = {} } = props.preferences || {};
+    const styles = Object.assign(Object.assign(Object.assign({ title: props.title, iconClass: props.iconClass, showTitle: preferenceService.get('toolbar.buttonDisplay') !== 'icon', btnStyle: 'button' }, defaultButtonStyle), props.defaultStyle), (props.styles || {})[viewState] || {});
+    if (title) {
+        styles.title = title;
+    }
+    if (styles.btnStyle !== 'button') {
+        styles.showTitle = false;
+    }
+    const delegate = react_1.default.useRef();
+    const inDropDownRef = react_1.default.useRef(props.inDropDown);
+    react_1.default.useEffect(() => {
+        inDropDownRef.current = props.inDropDown;
+    }, [props.inDropDown]);
+    react_1.default.useEffect(() => {
+        const disposer = new ide_core_common_1.Disposable();
+        disposer.addDispose(preferenceService.onSpecificPreferenceChange('toolbar.buttonDisplay', () => {
+            forceUpdate();
+        }));
+        if (ref.current && props.delegate) {
+            // 如果是在 dropdown 中，popover 元素将显示在 more 按钮上
+            const getPopoverParent = () => (inDropDownRef.current ? document.querySelector(`#toolbar-location-${props.location} .kt-toolbar-more`) : ref.current);
+            delegate.current = context.injector.get(ToolbarBtnDelegate, [
+                ref.current,
+                props.id,
+                (state, title) => {
+                    setViewState(state);
+                    setTitle(title);
+                },
+                () => {
+                    return viewState;
+                },
+                context,
+                getPopoverParent,
+                props.popoverComponent,
+                props.popoverStyle,
+                props.popoverId,
+            ]);
+            props.delegate(delegate.current);
+            disposer.addDispose(delegate.current);
+            disposer.addDispose({
+                dispose: () => {
+                    props.delegate && props.delegate(undefined);
+                },
+            });
+        }
+        return () => disposer.dispose();
+    }, []);
+    const iconContent = !props.inDropDown ? react_1.default.createElement("div", { className: styles.iconClass + ' kt-toolbar-action-btn-icon', title: styles.title, style: Object.assign(Object.assign(Object.assign({ color: styles.iconForeground, backgroundColor: styles.iconBackground }, (styles.width ? { width: styles.width } : null)), (styles.height ? { height: styles.height } : null)), (styles.iconSize ? { fontSize: styles.iconSize, WebkitMaskSize: styles.iconSize } : null)) }) : null;
+    const titleContent = (styles.showTitle || props.inDropDown) ? react_1.default.createElement("div", { className: 'kt-toolbar-action-btn-title', style: {
+            color: styles.titleForeground,
+            backgroundColor: styles.titleBackground,
+            fontSize: styles.titleSize,
+        } }, styles.title) : null;
+    const bindings = {
+        onClick: (event) => {
+            delegate.current && delegate.current._onClick.fire(event);
+            if (props.inDropDown) {
+                props.closeDropDown();
+            }
+        },
+        onMouseLeave: (event) => {
+            delegate.current && delegate.current._onMouseLeave.fire(event);
+        },
+        onMouseEnter: (event) => {
+            delegate.current && delegate.current._onMouseEnter.fire(event);
+        },
+    };
+    const backgroundBindings = {
+        style: Object.assign({ backgroundColor: styles.background }, (styles.width ? { padding: 0 } : null)),
+    };
+    let buttonElement;
+    if (props.inDropDown) {
+        buttonElement = react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)({ 'kt-toolbar-action-btn': true,
+                'action-btn-in-dropdown': true }) }, bindings, backgroundBindings, { ref: ref }),
+            iconContent,
+            titleContent);
+    }
+    else {
+        const btnTitleStyle = styles.btnTitleStyle || preferenceService.get('toolbar.buttonTitleStyle');
+        if (styles.btnStyle === 'button' && btnTitleStyle !== BUTTON_TITLE_STYLE.VERTICAL) {
+            buttonElement = react_1.default.createElement(ide_components_1.Button, Object.assign({ type: 'default', size: 'small' }, bindings, backgroundBindings),
+                iconContent,
+                titleContent);
+        }
+        else {
+            // BtnStyle == inline 或 btnTitleStyle === 'vertical' (类似小程序IDE工具栏） 的模式
+            if (btnTitleStyle === BUTTON_TITLE_STYLE.VERTICAL) {
+                backgroundBindings.style['min-width'] = '42px';
+            }
+            buttonElement = react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)({ 'kt-toolbar-action-btn': true,
+                    'kt-toolbar-action-btn-button': styles.btnStyle === 'button',
+                    'kt-toolbar-action-btn-inline': styles.btnStyle !== 'button',
+                    'kt-toolbar-action-btn-vertical': btnTitleStyle === BUTTON_TITLE_STYLE.VERTICAL,
+                    'kt-toolbar-action-btn-horizontal': btnTitleStyle !== BUTTON_TITLE_STYLE.VERTICAL }) }, bindings),
+                react_1.default.createElement(ide_components_1.Button, Object.assign({ type: 'default', size: 'small' }, backgroundBindings), iconContent),
+                titleContent);
+        }
+    }
+    return react_1.default.createElement("div", { className: 'kt-toolbar-action-btn-wrapper', ref: ref },
+        buttonElement,
+        props.popoverComponent && react_1.default.createElement("div", { className: 'kt-toolbar-popover', "data-toolbar-no-context": true }));
+};
+exports.ToolbarActionBtn = ToolbarActionBtn;
+function createToolbarActionBtn(props) {
+    return (actionProps) => {
+        return react_1.default.createElement(exports.ToolbarActionBtn, Object.assign({}, actionProps, props));
+    };
+}
+exports.createToolbarActionBtn = createToolbarActionBtn;
+class ToolbarActionBtnClickEvent extends ide_core_common_1.BasicEvent {
+}
+exports.ToolbarActionBtnClickEvent = ToolbarActionBtnClickEvent;
+const popOverMap = new Map();
+const PopOverComponentWrapper = (props) => {
+    const [context, setContext] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        const disposable = props.delegate.onChangeContext((newValue) => {
+            setContext(newValue);
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, []);
+    const childrenWithProps = react_1.default.Children.map(props.children, (child) => react_1.default.isValidElement(child) ? react_1.default.cloneElement(child, {
+        context,
+    }) : null);
+    return (react_1.default.createElement(react_1.default.Fragment, null, childrenWithProps));
+};
+let ToolbarBtnDelegate = class ToolbarBtnDelegate {
+    constructor(element, actionId, _setState, _getState, context, getPopoverParent, popoverComponent, popoverStyle, popoverId) {
+        this.element = element;
+        this.actionId = actionId;
+        this._setState = _setState;
+        this._getState = _getState;
+        this.context = context;
+        this.getPopoverParent = getPopoverParent;
+        this.popoverComponent = popoverComponent;
+        this.popoverStyle = popoverStyle;
+        this.popoverId = popoverId;
+        this._onClick = new ide_core_common_1.Emitter();
+        this.onClick = this._onClick.event;
+        this._onMouseLeave = new ide_core_common_1.Emitter();
+        this.onMouseLeave = this._onClick.event;
+        this._onMouseEnter = new ide_core_common_1.Emitter();
+        this.onMouseEnter = this._onClick.event;
+        this._onChangeState = new ide_core_common_1.Emitter();
+        this.onChangeState = this._onChangeState.event;
+        this.onChangeContextEvent = new ide_core_common_1.Emitter();
+        this.onChangeContext = this.onChangeContextEvent.event;
+        this._onDidChangePopoverVisibility = new ide_core_common_1.Emitter();
+        this.onDidChangePopoverVisibility = this._onDidChangePopoverVisibility.event;
+        if (this.popoverComponent) {
+            this._popOverElement = popOverMap.get(actionId);
+            this.popOverContainer = element.querySelector('.kt-toolbar-popover');
+        }
+        this.toolbarPopover.onDidRegisterPopoverEvent((e) => {
+            if (e === this.popoverId) {
+                this.popoverComponent = this.toolbarPopover.getComponent(this.popoverId);
+                // 已经激活的状态下重新激活一次，如果没有激活过则不动
+                if (this._popOverElement) {
+                    this.hidePopOver()
+                        .then(() => this.showPopOver());
+                }
+            }
+        });
+    }
+    dispose() {
+        this._onClick.dispose();
+        this._onMouseEnter.dispose();
+        this._onMouseLeave.dispose();
+        if (this.popOverContainer) {
+            this.popOverContainer.remove();
+            this.popOverContainer = undefined;
+        }
+        if (this._popOverClickOutsideDisposer) {
+            this._popOverClickOutsideDisposer.dispose();
+        }
+    }
+    setState(to, title) {
+        const from = this._getState();
+        this._setState(to, title);
+        this._onChangeState.fire({ from, to });
+    }
+    setContext(context) {
+        this.onChangeContextEvent.fire(context);
+    }
+    getRect() {
+        return this.element.getBoundingClientRect();
+    }
+    getPopOverContainer() {
+        return this.popOverContainer;
+    }
+    async showPopOver(style) {
+        if (!this.popOverContainer) {
+            return;
+        }
+        if (!this._popOverElement) {
+            this._popOverElement = new Promise((resolve) => {
+                const div = document.createElement('div');
+                const C = this.popoverComponent;
+                react_dom_1.default.render(react_1.default.createElement(react_providers_1.ConfigProvider, { value: this.context },
+                    react_1.default.createElement(PopOverComponentWrapper, { delegate: this },
+                        react_1.default.createElement(C, null))), div, () => {
+                    resolve(div);
+                });
+            });
+            popOverMap.set(this.actionId, this._popOverElement);
+        }
+        const mergedStyle = Object.assign(Object.assign({}, this.popoverStyle), style);
+        if (mergedStyle.position === 'top') {
+            this.popOverContainer.classList.add('kt-toolbar-popover-top');
+            this.popOverContainer.classList.remove('kt-toolbar-popover-bottom');
+        }
+        else {
+            this.popOverContainer.classList.remove('kt-toolbar-popover-top');
+            this.popOverContainer.classList.add('kt-toolbar-popover-bottom');
+        }
+        this.popOverContainer.remove();
+        const popoverParent = this.getPopoverParent() || this.element;
+        popoverParent.append(this.popOverContainer);
+        const popoverParentRect = popoverParent.getBoundingClientRect();
+        this.popOverContainer.style.setProperty('--button-width', popoverParentRect.width + 'px');
+        let offset = typeof mergedStyle.horizontalOffset === 'number' ? mergedStyle.horizontalOffset : 30;
+        // 如果父容器离右边距很近，防止视图突出去
+        offset = Math.min(offset, window.innerWidth - popoverParentRect.left - popoverParentRect.width - 2);
+        this.popOverContainer.style.setProperty('--offset-size', offset + 'px');
+        this.popOverContainer.classList.add('kt-toolbar-popover-visible');
+        if (mergedStyle.noContainerStyle) {
+            this.popOverContainer.classList.remove('kt-toolbar-popover-default');
+        }
+        else {
+            this.popOverContainer.classList.add('kt-toolbar-popover-default');
+        }
+        const animeDisposer = new dom_1.DomListener(this.popOverContainer, 'animationend', () => {
+            var _a;
+            animeDisposer.dispose();
+            (_a = this.popOverContainer) === null || _a === void 0 ? void 0 : _a.classList.add('kt-toolbar-popover-animationend');
+        });
+        return this._popOverElement.then((ele) => {
+            if (this._popOverClickOutsideDisposer) {
+                this._popOverClickOutsideDisposer.dispose();
+                this._popOverClickOutsideDisposer = undefined;
+            }
+            if (this.popOverContainer && ele.parentElement !== this.popOverContainer) {
+                this.popOverContainer.append(ele);
+            }
+            this._onDidChangePopoverVisibility.fire(true);
+            if (mergedStyle.hideOnClickOutside !== false) {
+                setTimeout(() => {
+                    if (this._popOverClickOutsideDisposer) {
+                        this._popOverClickOutsideDisposer.dispose();
+                        this._popOverClickOutsideDisposer = undefined;
+                    }
+                    const disposer = new ide_core_common_1.Disposable();
+                    disposer.addDispose(new dom_1.DomListener(window, 'click', (e) => {
+                        if (e.target && ele.contains(e.target)) {
+                            return;
+                        }
+                        const rect = ele.getBoundingClientRect();
+                        if (rect.x <= e.clientX && rect.x + rect.width >= e.clientX && rect.y <= e.clientY && rect.y + rect.height >= e.clientY) {
+                            // 点击在区域内，这里防止点击 target 已经被移除导致误判
+                            return;
+                        }
+                        this.hidePopOver();
+                    }));
+                    this._popOverClickOutsideDisposer = disposer;
+                });
+            }
+        });
+    }
+    async hidePopOver() {
+        var _a;
+        if (this._popOverElement) {
+            const ele = await this._popOverElement;
+            react_dom_1.default.unmountComponentAtNode(ele);
+            ele.remove();
+            this._popOverElement = undefined;
+        }
+        if (this._popOverClickOutsideDisposer) {
+            this._popOverClickOutsideDisposer.dispose();
+            this._popOverClickOutsideDisposer = undefined;
+        }
+        this.popOverContainer && this.popOverContainer.classList.remove('kt-toolbar-popover-visible');
+        (_a = this.popOverContainer) === null || _a === void 0 ? void 0 : _a.classList.remove('kt-toolbar-popover-animationend');
+        this._onDidChangePopoverVisibility.fire(false);
+    }
+};
+(0, tslib_1.__decorate)([
+    (0, di_1.Autowired)(types_1.IToolbarPopoverRegistry),
+    (0, tslib_1.__metadata)("design:type", Object)
+], ToolbarBtnDelegate.prototype, "toolbarPopover", void 0);
+ToolbarBtnDelegate = (0, tslib_1.__decorate)([
+    (0, di_1.Injectable)({ multiple: true }),
+    (0, tslib_1.__metadata)("design:paramtypes", [HTMLElement, String, Object, Object, Object, Function, Function, Object, String])
+], ToolbarBtnDelegate);
+//# sourceMappingURL=button.js.map