@opensumi/ide-editor 3.2.5-next-1724148998.0 → 3.2.5-next-1724290408.0

package/lib/browser/editor-scrollbar/index.d.ts

@@ -0,0 +1,69 @@
+import React, { MouseEvent, UIEvent } from 'react';
+export interface ScrollAreaProps {
+    className?: string;
+    onScroll?: (position: ScrollPosition) => any;
+    atTopClassName?: string;
+    style?: any;
+    containerStyle?: any;
+    delegate?: (delegate: IScrollDelegate) => void;
+    forwardedRef: (ref: HTMLDivElement) => void;
+    children: any;
+}
+export interface IScrollDelegate {
+    scrollTo(position: ScrollPosition): void;
+}
+export interface ScrollPosition {
+    top: number;
+    left: number;
+}
+export interface ScrollSizes {
+    scrollHeight: number;
+    offsetHeight: number;
+    offsetWidth: number;
+    scrollWidth: number;
+}
+export declare class Scroll extends React.Component<ScrollAreaProps, any> {
+    ref: HTMLDivElement;
+    container: HTMLDivElement;
+    private thumbV;
+    private trackV;
+    private thumbH;
+    private trackH;
+    private decorationL;
+    private decorationR;
+    private size;
+    private position;
+    private dragging;
+    private draggingStart;
+    private draggingStartPos;
+    private requestFrame;
+    private shouldHideThumb;
+    private isAtTop;
+    onScroll(e: UIEvent<HTMLDivElement>): void;
+    scrollTo(position: ScrollPosition): void;
+    onMouseDownHorizontal(e: MouseEvent<HTMLDivElement>): void;
+    onMouseMoveHorizontal: (e: any) => void;
+    onMouseUpHorizontal: (e: any) => void;
+    onMouseDownOnTrack(e: MouseEvent<HTMLDivElement>): void;
+    calculateXToLeft(x: any): number;
+    onMouseDownVertical(e: MouseEvent<HTMLDivElement>): void;
+    onMouseMoveVertical: (e: any) => void;
+    onMouseUpVertical: (e: any) => void;
+    onMouseDownOnTrackVertical(e: MouseEvent<HTMLDivElement>): void;
+    onMousewheel: (e: WheelEvent) => void;
+    calculateYToTop(y: any): number;
+    componentDidUpdate(): void;
+    componentDidMount(): void;
+    onMouseEnter: () => void;
+    componentWillUnmount(): void;
+    handleWindowResize: () => void;
+    sizeEqual(size1: ScrollSizes, size2: ScrollSizes): boolean;
+    update: (callback?: any) => void;
+    _update(): void;
+    updateScrollBar(): void;
+    hideThumb(): void;
+    showThumb(): void;
+    setCss(): void;
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/browser/editor-scrollbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/browser/editor-scrollbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,GAAG,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAE/C,YAAY,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IAE5C,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,GAAG,CAAC;IACxD,GAAG,EAAE,cAAc,CAAC;IAEpB,SAAS,EAAE,cAAc,CAAC;IAEjC,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAO,CAAC,MAAM,CAAkB;IAEhC,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,WAAW,CAAiB;IAEpC,OAAO,CAAC,IAAI,CAAc;IAE1B,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,gBAAgB,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,eAAe,CAAQ;IAE/B,OAAO,CAAC,OAAO,CAAQ;IAEvB,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAuCnC,QAAQ,CAAC,QAAQ,EAAE,cAAc;IAKjC,qBAAqB,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAWnD,qBAAqB,mBAMnB;IAEF,mBAAmB,mBAOjB;IAEF,kBAAkB,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAYhD,gBAAgB,CAAC,CAAC,KAAA;IAMlB,mBAAmB,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAWjD,mBAAmB,mBAMjB;IAEF,iBAAiB,mBAOf;IAEF,0BAA0B,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAYxD,YAAY,MAAO,UAAU,UAY3B;IAEF,eAAe,CAAC,CAAC,KAAA;IAMjB,kBAAkB;IASlB,iBAAiB;IAcjB,YAAY,aAEV;IAEF,oBAAoB;IAWpB,kBAAkB,aAEhB;IAEF,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,OAAO;IAW1D,MAAM,2BAUJ;IAEF,OAAO;IAcP,eAAe;IAoBf,SAAS;IAOT,SAAS;IAKT,MAAM;IAeN,MAAM;CAqDP"}

package/lib/browser/editor-scrollbar/index.js

@@ -0,0 +1,289 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroll = void 0;
+const tslib_1 = require("tslib");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = tslib_1.__importDefault(require("react"));
+const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
+class Scroll extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.position = {
+            top: 0,
+            left: 0,
+        };
+        this.dragging = false;
+        this.draggingStart = 0;
+        this.draggingStartPos = 0;
+        this.shouldHideThumb = true;
+        this.isAtTop = true;
+        this.onMouseMoveHorizontal = (e) => {
+            if (!this.dragging) {
+                return;
+            }
+            const move = e.pageX - this.draggingStart;
+            this.ref.scrollLeft = this.draggingStartPos + this.calculateXToLeft(move);
+        };
+        this.onMouseUpHorizontal = (e) => {
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.onMouseMoveHorizontal);
+            document.removeEventListener('mouseup', this.onMouseUpHorizontal);
+            if (this.shouldHideThumb) {
+                this.hideThumb();
+            }
+        };
+        this.onMouseMoveVertical = (e) => {
+            if (!this.dragging) {
+                return;
+            }
+            const move = e.pageY - this.draggingStart;
+            this.ref.scrollTop = this.draggingStartPos + this.calculateYToTop(move);
+        };
+        this.onMouseUpVertical = (e) => {
+            this.dragging = false;
+            document.removeEventListener('mousemove', this.onMouseMoveVertical);
+            document.removeEventListener('mouseup', this.onMouseUpVertical);
+            if (this.shouldHideThumb) {
+                this.hideThumb();
+            }
+        };
+        this.onMousewheel = (e) => {
+            // 鼠标滚动滚轮只在有横向滚动条的情况下
+            // 页面有缩放的时候，scrollHeight 可能会小于 clientHeight / offsetHeight
+            if (this.ref.clientHeight >= this.ref.scrollHeight) {
+                if (e.deltaY !== 0) {
+                    // scrollLeft 内部有边界判断
+                    this.ref.scrollLeft += e.deltaY;
+                }
+                if (e.deltaX !== 0) {
+                    this.ref.scrollLeft += e.deltaX;
+                }
+            }
+        };
+        this.onMouseEnter = () => {
+            this.update();
+        };
+        this.handleWindowResize = () => {
+            this.update();
+        };
+        this.update = (callback) => {
+            if (this.requestFrame) {
+                window.cancelAnimationFrame(this.requestFrame);
+            }
+            this.requestFrame = window.requestAnimationFrame(() => {
+                this._update();
+                if (callback) {
+                    callback();
+                }
+            });
+        };
+    }
+    onScroll(e) {
+        this.position = {
+            top: this.ref.scrollTop,
+            left: this.ref.scrollLeft,
+        };
+        if (this.props.onScroll) {
+            this.props.onScroll(this.position);
+        }
+        this.update(() => {
+            const contentWidth = this.ref.scrollWidth;
+            const width = this.ref.offsetWidth;
+            const contentHeight = this.ref.scrollHeight;
+            const height = this.ref.offsetHeight;
+            this.thumbH.style.left = (this.position.left * width) / contentWidth + 'px';
+            this.thumbV.style.top = (this.position.top * height) / contentHeight + 'px';
+        });
+        if (!this.isAtTop && this.ref.scrollTop === 0) {
+            this.isAtTop = true;
+            this.setCss();
+        }
+        else if (this.isAtTop && this.ref.scrollTop !== 0) {
+            this.isAtTop = false;
+            this.setCss();
+        }
+        if (this.ref.scrollLeft > 0) {
+            this.decorationL.style.opacity = String(1);
+            this.decorationR.style.opacity = String(1);
+        }
+        else {
+            this.decorationL.style.opacity = String(0);
+        }
+        if (this.ref.scrollWidth === this.ref.offsetWidth ||
+            this.ref.scrollLeft === this.ref.scrollWidth - this.ref.offsetWidth) {
+            this.decorationR.style.opacity = String(0);
+        }
+    }
+    scrollTo(position) {
+        this.ref.scrollLeft = position.left;
+        this.ref.scrollTop = position.top;
+    }
+    onMouseDownHorizontal(e) {
+        this.dragging = true;
+        if (e.target === this.trackH) {
+            this.onMouseDownOnTrack(e);
+        }
+        this.draggingStart = e.pageX;
+        this.draggingStartPos = this.ref.scrollLeft;
+        document.addEventListener('mousemove', this.onMouseMoveHorizontal);
+        document.addEventListener('mouseup', this.onMouseUpHorizontal);
+    }
+    onMouseDownOnTrack(e) {
+        const track = e.target;
+        const x = e.clientX - track.getBoundingClientRect().left;
+        const contentWidth = this.ref.scrollWidth;
+        const width = this.ref.offsetWidth;
+        const left = (x * contentWidth) / width - 0.5 * width;
+        this.scrollTo({
+            left,
+            top: this.position.top,
+        });
+    }
+    calculateXToLeft(x) {
+        const contentWidth = this.ref.scrollWidth;
+        const width = this.ref.offsetWidth;
+        return (x * contentWidth) / width;
+    }
+    onMouseDownVertical(e) {
+        this.dragging = true;
+        if (e.target === this.trackV) {
+            this.onMouseDownOnTrackVertical(e);
+        }
+        this.draggingStart = e.pageY;
+        this.draggingStartPos = this.ref.scrollTop;
+        document.addEventListener('mousemove', this.onMouseMoveVertical);
+        document.addEventListener('mouseup', this.onMouseUpVertical);
+    }
+    onMouseDownOnTrackVertical(e) {
+        const track = e.target;
+        const x = e.clientY - track.getBoundingClientRect().top;
+        const contentHeight = this.ref.scrollHeight;
+        const height = this.ref.offsetHeight;
+        const top = (x * contentHeight) / height - 0.5 * height;
+        this.scrollTo({
+            left: this.position.left,
+            top,
+        });
+    }
+    calculateYToTop(y) {
+        const contentHeight = this.ref.scrollHeight;
+        const height = this.ref.offsetHeight;
+        return (y * contentHeight) / height;
+    }
+    componentDidUpdate() {
+        this.update();
+        if (this.props.delegate) {
+            this.props.delegate({
+                scrollTo: this.scrollTo.bind(this),
+            });
+        }
+    }
+    componentDidMount() {
+        this.update();
+        window.addEventListener('resize', this.handleWindowResize);
+        if (this.props.delegate) {
+            this.props.delegate({
+                scrollTo: this.scrollTo.bind(this),
+            });
+        }
+        if (this.ref) {
+            this.ref.addEventListener('mouseenter', this.onMouseEnter);
+            this.ref.addEventListener('wheel', this.onMousewheel);
+        }
+    }
+    componentWillUnmount() {
+        if (this.ref) {
+            this.ref.removeEventListener('mouseenter', this.onMouseEnter);
+            this.ref.removeEventListener('wheel', this.onMousewheel);
+        }
+        window.removeEventListener('resize', this.handleWindowResize);
+        if (this.requestFrame) {
+            window.cancelAnimationFrame(this.requestFrame);
+        }
+    }
+    sizeEqual(size1, size2) {
+        return (size1 &&
+            size2 &&
+            size1.offsetHeight === size2.offsetHeight &&
+            size1.scrollHeight === size2.scrollHeight &&
+            size1.offsetWidth === size2.offsetWidth &&
+            size1.scrollWidth === size2.scrollWidth);
+    }
+    _update() {
+        if (this.ref) {
+            if (!this.sizeEqual(this.size, this.ref)) {
+                this.size = {
+                    offsetHeight: this.ref.offsetHeight,
+                    offsetWidth: this.ref.offsetWidth,
+                    scrollWidth: this.ref.scrollWidth,
+                    scrollHeight: this.ref.scrollHeight,
+                };
+                this.updateScrollBar();
+            }
+        }
+    }
+    updateScrollBar() {
+        const contentWidth = this.ref.scrollWidth;
+        const width = this.ref.offsetWidth;
+        if (width < contentWidth) {
+            const thumbHWidth = (width * width) / contentWidth;
+            this.thumbH.style.width = thumbHWidth + 'px';
+            this.trackH.parentElement.style.display = 'block';
+        }
+        else {
+            this.trackH.parentElement.style.display = 'none';
+        }
+        const contentHeight = this.ref.scrollHeight;
+        const height = this.ref.offsetHeight;
+        if (height < contentHeight) {
+            this.thumbV.style.height = (height * height) / contentHeight + 'px';
+            this.trackV.parentElement.style.display = 'block';
+        }
+        else {
+            this.trackV.parentElement.style.display = 'none';
+        }
+    }
+    hideThumb() {
+        this.shouldHideThumb = true;
+        if (!this.dragging) {
+            this.setCss();
+        }
+    }
+    showThumb() {
+        this.shouldHideThumb = false;
+        this.setCss();
+    }
+    setCss() {
+        this.container.className = (0, classnames_1.default)({
+            [index_module_less_1.default.scroll]: true,
+            [index_module_less_1.default['hide-thumb']]: this.shouldHideThumb && !this.dragging,
+        });
+        const clses = {};
+        if (this.props.atTopClassName) {
+            clses[this.props.atTopClassName] = this.isAtTop;
+        }
+        if (this.props.className) {
+            clses[this.props.className] = true;
+        }
+        this.ref.className = (0, classnames_1.default)(clses);
+    }
+    render() {
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(index_module_less_1.default.scroll, index_module_less_1.default['hide-thumb']), ref: (e) => {
+                if (e) {
+                    this.container = e;
+                    this.props.forwardedRef(e);
+                }
+            }, onMouseMove: () => this.showThumb(), onMouseLeave: () => this.hideThumb(), style: this.props.containerStyle },
+            react_1.default.createElement("div", { style: this.props.style, className: (0, classnames_1.default)(this.props.className), onScroll: this.onScroll.bind(this), ref: (e) => e && (this.ref = e), onMouseDown: () => this.update(), onMouseUp: () => this.update() }, this.props.children),
+            react_1.default.createElement("div", { className: index_module_less_1.default['scrollbar-decoration-vertical-l'], ref: (e) => e && (this.decorationL = e) }),
+            react_1.default.createElement("div", { className: index_module_less_1.default['scrollbar-decoration-vertical-r'], ref: (e) => e && (this.decorationR = e) }),
+            react_1.default.createElement("div", { className: index_module_less_1.default['scroll-horizontal'] },
+                react_1.default.createElement("div", { className: index_module_less_1.default['track-horizontal'], ref: (e) => e && (this.trackH = e), onMouseDown: this.onMouseDownHorizontal.bind(this) }),
+                react_1.default.createElement("div", { className: 'kt-editor-scrollbar-thumb-horizontal', onMouseDown: this.onMouseDownHorizontal.bind(this), ref: (e) => e && (this.thumbH = e) })),
+            react_1.default.createElement("div", { className: index_module_less_1.default['scroll-vertical'] },
+                react_1.default.createElement("div", { className: index_module_less_1.default['track-vertical'], ref: (e) => e && (this.trackV = e), onMouseDown: this.onMouseDownVertical.bind(this) }),
+                react_1.default.createElement("div", { className: 'kt-editor-scrollbar-thumb-vertical', onMouseDown: this.onMouseDownVertical.bind(this), ref: (e) => e && (this.thumbV = e) }))));
+    }
+}
+exports.Scroll = Scroll;
+//# sourceMappingURL=index.js.map

package/lib/browser/editor-scrollbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/browser/editor-scrollbar/index.tsx"],"names":[],"mappings":"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"}

package/lib/browser/editor-scrollbar/index.module.less

@@ -0,0 +1,106 @@
+.track-vertical {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 10px;
+}
+.scroll-vertical {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 10px;
+  z-index: var(--stacking-level-editor-tabbar-overlay, 15);
+}
+
+.track-horizontal {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+}
+.scroll-horizontal {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  z-index: var(--stacking-level-editor-tabbar-overlay, 15);
+}
+
+:global(.kt-editor-scrollbar-thumb-vertical) {
+  position: absolute;
+  width: 5px;
+  opacity: 0.8;
+  top: 0;
+  right: 0;
+  transition: opacity 200ms ease-out;
+  background: var(--scrollbarSlider-background);
+  box-shadow: 1px 0 0 var(--scrollbar-shadow);
+
+  &:hover {
+    background: var(--scrollbarSlider-hoverBackground);
+  }
+}
+
+:global(.kt-editor-scrollbar-thumb-horizontal) {
+  position: absolute;
+  height: 5px;
+  left: 0;
+  bottom: 0;
+  opacity: 0.8;
+  transition: opacity 200ms ease-out 200ms;
+  background: var(--scrollbarSlider-background);
+  box-shadow: 1px 0 0 var(--scrollbar-shadow);
+
+  &:hover {
+    background: var(--scrollbarSlider-hoverBackground);
+  }
+}
+
+.scroll {
+  position: relative;
+  height: 100%;
+  > *:first-child::-webkit-scrollbar {
+    display: none !important;
+    background: rgb(50, 50, 50);
+  }
+  > *:first-child {
+    overflow: auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .scrollbar-decoration-vertical-l,
+  .scrollbar-decoration-vertical-r {
+    position: absolute;
+    width: 6px;
+    height: 100%;
+    z-index: var(--stacking-level-overlay-top, 999);
+    top: 0px;
+    opacity: 0;
+  }
+  // rgba(106, 115, 125, 0.2) 0 6px 6px -6px inset
+  .scrollbar-decoration-vertical-l {
+    left: 0px;
+    border-left: 1px solid var(--kt-panelTab-border);
+    box-shadow: 6px 0 4px -4px rgba(106, 115, 125, 0.2) inset;
+  }
+
+  .scrollbar-decoration-vertical-r {
+    right: 0px;
+    border-right: 1px solid var(--kt-panelTab-border);
+    box-shadow: -6px 0 4px -4px rgba(106, 115, 125, 0.2) inset;
+  }
+}
+
+.hide-thumb {
+  :global(.kt-editor-scrollbar-thumb-horizontal) {
+    opacity: 0 !important;
+  }
+  :global(.kt-editor-scrollbar-thumb-vertical) {
+    opacity: 0 !important;
+  }
+}

package/lib/browser/editor.module.less

@@ -73,7 +73,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
       &::after {
         content: '';
@@ -84,7 +84,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
       .editor_action_wrapper {
         margin-left: 8px;
@@ -175,7 +175,7 @@
         left: 0;
         position: absolute;
         display: block;
-        z-index: 0;
+        z-index: var(--stacking-level-background, 0);
       }
     }
   }
@@ -304,7 +304,7 @@
         position: relative;
         background: var(--tab-activeBackground);
         color: var(--tab-activeForeground);
-        z-index: 11;
+        z-index: var(--stacking-level-editor-tabbar-current, 11);
         &::before {
           position: absolute;
           content: '';
@@ -312,7 +312,7 @@
           width: 100%;
           top: -1px;
           left: 0;
-          z-index: 999;
+          z-index: var(--stacking-level-overlay, 800);
           background-color: var(--tab-activeBorderTop);
         }
         .dirty {
@@ -348,7 +348,7 @@
   }
 
   .editorGroupHeader {
-    z-index: 0;
+    z-index: var(--stacking-level-background, 0);
     position: relative;
   }
 
@@ -489,7 +489,7 @@
   .overlay-shadow();
   border-radius: 2px;
   padding: 5px 10px;
-  z-index: 10001;
+  z-index: var(--stacking-level-overlay-top, 1000);
   white-space: nowrap;
   .editor_action_tip_close {
     cursor: pointer;

package/lib/browser/tab.view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.view.d.ts","sourceRoot":"","sources":["../../src/browser/tab.view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,cAAc,EAUf,MAAM,OAAO,CAAC;AAgDf,OAAO,EAAE,WAAW,EAA8B,MAAM,4BAA4B,CAAC;AAIrF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,cAAe,UAAU,sBA2czC,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3F,eAAO,MAAM,aAAa,KAmEzB,CAAC"}
+{"version":3,"file":"tab.view.d.ts","sourceRoot":"","sources":["../../src/browser/tab.view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,cAAc,EAUf,MAAM,OAAO,CAAC;AAgDf,OAAO,EAAE,WAAW,EAA8B,MAAM,4BAA4B,CAAC;AAIrF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,cAAe,UAAU,sBAkdzC,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3F,eAAO,MAAM,aAAa,KAmEzB,CAAC"}

package/lib/browser/tab.view.js

@@ -4,15 +4,15 @@ exports.EditorActions = exports.Tabs = void 0;
 const tslib_1 = require("tslib");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = tslib_1.__importStar(require("react"));
-const ide_components_1 = require("@opensumi/ide-components");
 const ide_core_browser_1 = require("@opensumi/ide-core-browser");
-const ide_core_browser_2 = require("@opensumi/ide-core-browser");
 const actions_1 = require("@opensumi/ide-core-browser/lib/components/actions");
 const constants_1 = require("@opensumi/ide-core-browser/lib/layout/constants");
 const view_id_1 = require("@opensumi/ide-core-browser/lib/layout/view-id");
 const next_1 = require("@opensumi/ide-core-browser/lib/menu/next");
 const react_hooks_1 = require("@opensumi/ide-core-browser/lib/react-hooks");
+const ide_core_common_1 = require("@opensumi/ide-core-common");
 const common_1 = require("../common");
+const editor_scrollbar_1 = require("./editor-scrollbar");
 const editor_module_less_1 = tslib_1.__importDefault(require("./editor.module.less"));
 const title_context_menu_1 = require("./menu/title-context.menu");
 const types_1 = require("./types");
@@ -247,7 +247,7 @@ const Tabs = ({ group }) => {
         const subname = resourceService.getResourceSubname(resource, group.resources);
         return editorTabService.renderEditorTab(react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: tabsLoadingMap[resource.uri.toString()] ? 'loading_indicator' : (0, classnames_1.default)(resource.icon) }, " "),
-            react_1.default.createElement("div", null, resource.name),
+            react_1.default.createElement("div", { tabIndex: 0, role: 'tab', "aria-selected": isCurrent ? 'true' : 'false' }, resource.name),
             subname ? react_1.default.createElement("div", { className: editor_module_less_1.default.subname }, subname) : null,
             decoration.readOnly ? (react_1.default.createElement("span", { className: (0, classnames_1.default)((0, ide_core_browser_1.getExternalIcon)('lock'), editor_module_less_1.default.editor_readonly_icon) })) : null,
             react_1.default.createElement("div", { className: styles_tab_right },
@@ -258,14 +258,14 @@ const Tabs = ({ group }) => {
                 react_1.default.createElement("div", { className: styles_close_tab, onMouseDown: (e) => {
                         e.stopPropagation();
                         group.close(resource.uri);
-                    } }, editorTabService.renderTabCloseComponent(react_1.default.createElement("div", { className: (0, classnames_1.default)((0, ide_core_browser_1.getIcon)('close'), styles_kt_editor_close_icon) }))))), isCurrent);
+                    } }, editorTabService.renderTabCloseComponent(react_1.default.createElement("div", { className: (0, classnames_1.default)((0, ide_core_browser_1.getIcon)('close'), styles_kt_editor_close_icon), tabIndex: 0, role: 'button', "aria-label": (0, ide_core_common_1.formatLocalize)('editor.closeTab.title', resource.name) }))))), isCurrent);
     }, [editorTabService]);
     const renderTabContent = () => {
         const curTabIndex = group.resources.findIndex((resource) => group.currentResource === resource);
         return (react_1.default.createElement("div", { draggable: false, className: (0, classnames_1.default)({
                 [styles_kt_editor_tabs_content]: true,
                 [styles_kt_editor_tabs_current_last]: curTabIndex === group.resources.length - 1,
-            }), ref: contentRef },
+            }), ref: contentRef, role: 'tablist' },
             group.resources.map((resource, i) => {
                 let ref;
                 const decoration = resourceService.getResourceDecoration(resource.uri);
@@ -319,9 +319,9 @@ const Tabs = ({ group }) => {
             wrapMode && (react_1.default.createElement(exports.EditorActions, { className: editor_module_less_1.default.kt_editor_wrap_mode_action, ref: editorActionRef, group: group }))));
     };
     return (react_1.default.createElement("div", { id: view_id_1.VIEW_CONTAINERS.EDITOR_TABS, className: styles_kt_editor_tabs },
-        react_1.default.createElement("div", { className: styles_kt_editor_tabs_scroll_wrapper, ref: tabWrapperRef, onDragOver: handleWrapperDragOver, onDragLeave: handleWrapperDragLeave, onDrop: handleWrapperDrag, onDoubleClick: handleEmptyDBClick }, !wrapMode ? (react_1.default.createElement(ide_components_1.Scrollbars, { tabBarMode: true, forwardedRef: (el) => (el ? (tabContainer.current = el) : null), className: editor_module_less_1.default.kt_editor_tabs_scroll }, renderTabContent())) : (react_1.default.createElement("div", { className: editor_module_less_1.default.kt_editor_wrap_container }, renderTabContent()))),
+        react_1.default.createElement("div", { className: styles_kt_editor_tabs_scroll_wrapper, ref: tabWrapperRef, onDragOver: handleWrapperDragOver, onDragLeave: handleWrapperDragLeave, onDrop: handleWrapperDrag, onDoubleClick: handleEmptyDBClick }, !wrapMode ? (react_1.default.createElement(editor_scrollbar_1.Scroll, { forwardedRef: (el) => (el ? (tabContainer.current = el) : null), className: editor_module_less_1.default.kt_editor_tabs_scroll }, renderTabContent())) : (react_1.default.createElement("div", { className: editor_module_less_1.default.kt_editor_wrap_container }, renderTabContent()))),
         !wrapMode && react_1.default.createElement(exports.EditorActions, { ref: editorActionRef, group: group }),
-        (0, ide_core_browser_2.renderView)(RightExtraContentViewConfig)));
+        (0, ide_core_browser_1.renderView)(RightExtraContentViewConfig)));
 };
 exports.Tabs = Tabs;
 exports.EditorActions = (0, react_1.forwardRef)((props, ref) => {