jsl-ui 9.28.7 → 10.0.0

package/lib/components/tabs/TabsComponent.js

@@ -8,183 +8,307 @@ export class TabsComponent {
         this.State = { selectedIndex: null };
         this.options = (_a = this.options) !== null && _a !== void 0 ? _a : {};
         this.options.tabs = (_b = this.options.tabs) !== null && _b !== void 0 ? _b : [];
-        this.options.selectedIndex = (_c = this.options.selectedIndex) !== null && _c !== void 0 ? _c : 0;
+        this.options.selectedIndex = (_c = this.options.selectedIndex) !== null && _c !== void 0 ? _c : this.firstEnabledIndex();
     }
     getActiveTabIndex() {
         var _a;
-        return (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
+        const index = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
+        if (index === -1) {
+            return -1;
+        }
+        return this.isValidIndex(index) ? index : this.firstEnabledIndex();
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a;
         this.checkForDuplicateIds();
-        let index = -1;
-        const activeIndex = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex;
-        if (activeIndex > -1 &&
-            this.options.tabs[activeIndex].content == null &&
-            this.options.tabs[activeIndex].onCreate) {
-            this.options.tabs[activeIndex].content = this.options.tabs[activeIndex].onCreate();
-        }
-        const tabs = [];
-        for (let idx = 0; idx < this.options.tabs.length; idx++) {
-            if (!this.options.tabs[idx].id) {
-                this.options.tabs[idx].id = helper.newDomGuid();
-            }
-            if (idx === activeIndex) {
-                tabs.push({
-                    tag: "div", attr: {
-                        class: "tab-content " + ((_b = this.options.contentClass) !== null && _b !== void 0 ? _b : ""),
-                        style: { "max-height": ((_c = this.options.maxHeight) !== null && _c !== void 0 ? _c : "100%") },
-                        id: this.options.tabs[idx].id
-                    },
-                    children: [this.toNode(this.options.tabs[idx].content)]
-                });
-            }
-            else if (this.options.preserveContent) {
-                tabs.push({
-                    tag: "div", attr: {
-                        class: "tab-content tab-hidden " + ((_d = this.options.contentClass) !== null && _d !== void 0 ? _d : ""),
-                        style: { "max-height": ((_e = this.options.maxHeight) !== null && _e !== void 0 ? _e : "100%") },
-                        id: this.options.tabs[idx].id
-                    },
-                    children: [this.toNode(this.options.tabs[idx].content)]
-                });
-            }
+        this.State.id = this.State.id || helper.newDomGuid();
+        for (const tab of this.options.tabs) {
+            tab.id = tab.id || helper.newDomGuid();
         }
+        const activeIndex = this.getActiveTabIndex();
+        const focusIndex = ((_a = this.options.tabs[activeIndex]) === null || _a === void 0 ? void 0 : _a.enabled) !== false && activeIndex >= 0
+            ? activeIndex : this.firstEnabledIndex();
+        this.createContent(activeIndex);
         return {
-            tag: "div", attr: { class: "stabcomponent " + (this.options.class || ""), style: this.options.style }, children: [
+            tag: "div",
+            attr: { class: "stabcomponent " + (this.options.class || ""), style: this.options.style },
+            children: [
                 {
-                    tag: "div", attr: { class: "tab-header-row" }, children: this.options.tabs.map((x) => {
-                        index++;
-                        const currIndex = index;
+                    tag: "div", attr: {
+                        class: "tab-header-row", role: "tablist",
+                        id: this.State.id + "-tablist",
+                        "aria-label": this.options.ariaLabel || "Tabs",
+                        "aria-orientation": "horizontal",
+                        tabindex: focusIndex === -1 ? "0" : undefined
+                    }, children: this.options.tabs.map((tab, index) => {
+                        const active = index === activeIndex;
+                        const disabled = tab.enabled === false;
+                        const label = tab.ariaLabel || (typeof tab.header === "string" ? tab.header : "Tab " + (index + 1));
                         return {
                             tag: "div", attr: {
-                                class: "tab-item " + (index === activeIndex ? "active " : "") + (this.options.tabs[currIndex].enabled === false ? "disabled " : ""),
-                                click: (evt) => {
-                                    var _a;
-                                    if ((_a = this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
-                                        this.SetSelectedTab(currIndex);
-                                        if (this.options.onSelect) {
-                                            this.options.onSelect(currIndex);
-                                        }
-                                    }
-                                }
+                                id: this.State.id + "-item-" + tab.id,
+                                class: "tab-item " + (active ? "active " : "") + (disabled ? "disabled" : ""),
+                                role: "presentation"
                             }, children: [
-                                { tag: "span", attr: { style: "vertical-align: middle; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline;" }, children: [this.toNode(x.header, "span")] },
-                                this.options.tabs[index].canClose
-                                    ?
-                                        {
-                                            tag: "div", attr: {
-                                                class: "close-button", click: (evt) => {
-                                                    var _a;
-                                                    if ((_a = this.options.tabs[currIndex].enabled) !== null && _a !== void 0 ? _a : true) {
-                                                        evt.stopPropagation();
-                                                        this.closeTabIndex(currIndex, true);
-                                                    }
-                                                }
-                                            }, content: "X"
-                                        }
-                                    :
-                                        undefined
+                                {
+                                    tag: "button", attr: {
+                                        id: this.triggerId(tab), class: "tab-trigger", type: "button",
+                                        role: "tab", disabled: disabled ? "disabled" : undefined,
+                                        tabindex: index === focusIndex ? "0" : "-1",
+                                        "aria-selected": String(active),
+                                        "aria-disabled": disabled ? "true" : undefined,
+                                        "aria-controls": tab.id,
+                                        "aria-label": tab.ariaLabel,
+                                        click: () => this.selectFromUser(index),
+                                        keydown: (event) => this.onTabKeydown(event, index)
+                                    }, children: [{
+                                            tag: "span", attr: { class: "tab-label" },
+                                            children: [this.toNode(tab.header, "span")]
+                                        }]
+                                },
+                                tab.canClose ? {
+                                    tag: "button", attr: {
+                                        class: "close-button", type: "button",
+                                        "aria-label": tab.closeButtonLabel || "Close " + label,
+                                        title: tab.closeButtonLabel || "Close " + label,
+                                        tabindex: index === focusIndex ? "0" : "-1",
+                                        disabled: disabled ? "disabled" : undefined,
+                                        click: (event) => {
+                                            event.stopPropagation();
+                                            if (!disabled) {
+                                                this.closeTabIndex(index, true);
+                                            }
+                                        },
+                                        keydown: (event) => this.onTabKeydown(event, index)
+                                    }
+                                } : undefined
                             ]
                         };
                     })
-                }, ...tabs
+                },
+                {
+                    tag: "div", attr: { class: "tab-panels" },
+                    // Stable panel shells keep ARIA links valid and preserve mounted content.
+                    children: this.options.tabs.map((tab, index) => {
+                        var _a, _b;
+                        return ({
+                            tag: "div", attr: {
+                                id: tab.id,
+                                class: "tab-content " + (index === activeIndex ? "" : "tab-hidden ") + ((_a = this.options.contentClass) !== null && _a !== void 0 ? _a : ""),
+                                style: { "max-height": (_b = this.options.maxHeight) !== null && _b !== void 0 ? _b : "100%" },
+                                role: "tabpanel", "aria-labelledby": this.triggerId(tab),
+                                tabindex: "0",
+                                hidden: index !== activeIndex ? "hidden" : undefined
+                            }, children: index === activeIndex || this.options.preserveContent
+                                ? [this.toNode(tab.content)] : []
+                        });
+                    })
+                }
             ]
         };
     }
     AddTab(tabItem) {
         var _a;
+        this.checkForDuplicateIds([...this.options.tabs, tabItem]);
+        const wasEmpty = this.options.tabs.length === 0;
         tabItem.enabled = (_a = tabItem.enabled) !== null && _a !== void 0 ? _a : true;
+        tabItem.id = tabItem.id || helper.newDomGuid();
         this.options.tabs.push(tabItem);
-        this.checkForDuplicateIds();
-        return this.options.tabs.length - 1;
-    }
-    EnableAll() {
-        for (let i = 0; i < this.options.tabs.length; i++) {
-            this.options.tabs[i].enabled = true;
-        }
-        if (this.renderer != null) {
-            this.renderer.refresh();
+        const index = this.options.tabs.length - 1;
+        if (wasEmpty) {
+            this.SetSelectedTab(index);
         }
         else {
-            refresh();
+            this.requestRefresh();
         }
+        return index;
     }
-    DisableAll() {
-        for (let i = 0; i < this.options.tabs.length; i++) {
-            this.options.tabs[i].enabled = false;
-        }
-        if (this.renderer != null) {
-            this.renderer.refresh();
+    EnableAll() {
+        for (const tab of this.options.tabs) {
+            tab.enabled = true;
         }
-        else {
-            refresh();
+        this.requestRefresh();
+    }
+    DisableAll() {
+        for (const tab of this.options.tabs) {
+            tab.enabled = false;
         }
+        this.requestRefresh();
     }
     GetByID(id) {
-        return this.options.tabs.filter((f) => f.id === id)[0];
+        return this.options.tabs.find(tab => tab.id === id);
     }
     closeTabIndex(index, raiseSelectEvent) {
-        var _a, _b;
-        // console.log("closing tab index " + index);
-        if (this.options.tabs[index].onClosing) {
-            if (this.options.tabs[index].onClosing() === false) {
-                return false;
-            }
+        var _a, _b, _c, _d, _e;
+        if (!this.isValidIndex(index)) {
+            return false;
         }
-        this.options.tabs = this.options.tabs.filter((_, currIdx) => currIdx !== index);
-        let newSelectedIndex = (_b = (_a = this.State.selectedIndex) !== null && _a !== void 0 ? _a : this.options.selectedIndex) !== null && _b !== void 0 ? _b : 0;
-        if (this.options.tabs.length <= newSelectedIndex) {
-            newSelectedIndex--;
-            this.SetSelectedTab(newSelectedIndex);
+        const closing = this.options.tabs[index];
+        if (((_a = closing.onClosing) === null || _a === void 0 ? void 0 : _a.call(closing)) === false) {
+            this.requestRefresh();
+            return false;
         }
-        if (raiseSelectEvent) {
-            if (this.options.onSelect) {
-                this.options.onSelect(newSelectedIndex);
+        const activeIndex = this.getActiveTabIndex();
+        const trigger = document.getElementById(this.triggerId(closing));
+        const restoreFocus = !!((_b = trigger === null || trigger === void 0 ? void 0 : trigger.parentElement) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement));
+        this.options.tabs = this.options.tabs.filter((_, tabIndex) => tabIndex !== index);
+        let next = activeIndex;
+        if (index < activeIndex) {
+            next--;
+        }
+        else if (index === activeIndex) {
+            next = this.options.tabs.findIndex((tab, tabIndex) => tabIndex >= index && tab.enabled !== false);
+            if (next === -1) {
+                for (let previous = Math.min(index - 1, this.options.tabs.length - 1); previous >= 0; previous--) {
+                    if (this.options.tabs[previous].enabled !== false) {
+                        next = previous;
+                        break;
+                    }
+                }
             }
         }
+        this.SetSelectedTab(next);
+        if (raiseSelectEvent) {
+            (_d = (_c = this.options).onSelect) === null || _d === void 0 ? void 0 : _d.call(_c, next);
+        }
+        if (restoreFocus) {
+            const focusIndex = next >= 0 && ((_e = this.options.tabs[next]) === null || _e === void 0 ? void 0 : _e.enabled) !== false ? next : this.firstEnabledIndex();
+            this.requestRefresh(focusIndex);
+        }
         return true;
     }
-    // public onCreate(node: IJSLVNode) {
-    //     this.ref = node.dom as HTMLDivElement;
-    // }
-    // public onUpdate(node: IJSLVNode) {
-    //     this.ref = node.dom as HTMLDivElement;
-    // }
     onInit(renderer) {
         this.renderer = renderer;
     }
+    onCreate() {
+        this.revealTab();
+    }
+    /** Select programmatically without raising onSelect, including -1 for no selection. */
     SetSelectedTab(index) {
-        var _a;
-        if (((_a = this.options.tabs[index]) === null || _a === void 0 ? void 0 : _a.onCreate) != null && this.options.tabs[index].content == null) {
-            this.options.tabs[index].content = this.options.tabs[index].onCreate();
+        if (index !== -1 && !this.isValidIndex(index)) {
+            return;
         }
-        this.options.selectedIndex = index;
         this.State.selectedIndex = index;
-        if (this.renderer != null) {
+        this.options.selectedIndex = index;
+        this.createContent(index);
+        this.requestRefresh();
+    }
+    selectFromUser(index) {
+        var _a, _b;
+        if (!this.isValidIndex(index) || this.options.tabs[index].enabled === false) {
+            return false;
+        }
+        if (((_b = (_a = this.options).onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, index)) === false) {
+            this.requestRefresh(this.getActiveTabIndex());
+            return false;
+        }
+        this.SetSelectedTab(index);
+        return true;
+    }
+    onTabKeydown(event, index) {
+        var _a, _b;
+        if (event.altKey || event.ctrlKey || event.metaKey || ((_a = this.options.tabs[index]) === null || _a === void 0 ? void 0 : _a.enabled) === false) {
+            return;
+        }
+        const enabled = this.options.tabs.map((tab, tabIndex) => tab.enabled !== false ? tabIndex : -1)
+            .filter(tabIndex => tabIndex !== -1);
+        let next;
+        const position = enabled.indexOf(index);
+        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            const forward = (event.key === "ArrowRight") !== rtl;
+            next = enabled[(position + (forward ? 1 : -1) + enabled.length) % enabled.length];
+        }
+        else if (event.key === "Home") {
+            next = enabled[0];
+        }
+        else if (event.key === "End") {
+            next = enabled[enabled.length - 1];
+        }
+        else if (event.key === "Delete" && ((_b = this.options.tabs[index]) === null || _b === void 0 ? void 0 : _b.canClose)) {
+            event.preventDefault();
+            this.closeTabIndex(index, true);
+            return;
+        }
+        else {
+            return; // Native Enter and Space activate the tab or close button.
+        }
+        event.preventDefault();
+        if (next != null && this.selectFromUser(next)) {
+            this.requestRefresh(next);
+        }
+    }
+    requestRefresh(focusIndex) {
+        if (this.renderer) {
             this.renderer.refresh();
         }
         else {
             refresh();
         }
+        this.revealTab(focusIndex);
     }
-    toNode(content, tag) {
-        if (content == null) {
-            return undefined;
-        }
-        if (typeof content === "string") {
-            return { tag: tag !== null && tag !== void 0 ? tag : "div", content };
+    revealTab(focusIndex) {
+        const tab = this.options.tabs[focusIndex !== null && focusIndex !== void 0 ? focusIndex : this.getActiveTabIndex()];
+        if (!tab) {
+            if (focusIndex != null) {
+                const listId = this.State.id + "-tablist";
+                requestAnimationFrame(() => { var _a; return (_a = document.getElementById(listId)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+            }
+            return;
         }
-        return content;
+        const id = this.triggerId(tab);
+        requestAnimationFrame(() => {
+            const trigger = document.getElementById(id);
+            const item = trigger === null || trigger === void 0 ? void 0 : trigger.parentElement;
+            const row = item === null || item === void 0 ? void 0 : item.parentElement;
+            if (!trigger || !row) {
+                return;
+            }
+            if (focusIndex != null && !trigger.disabled) {
+                trigger.focus({ preventScroll: true });
+            }
+            const itemRect = item.getBoundingClientRect();
+            const rowRect = row.getBoundingClientRect();
+            if (itemRect.left < rowRect.left) {
+                row.scrollLeft += itemRect.left - rowRect.left;
+            }
+            else if (itemRect.right > rowRect.right) {
+                row.scrollLeft += itemRect.right - rowRect.right;
+            }
+        });
     }
-    checkForDuplicateIds() {
-        if (this.options.tabs == null || this.options.tabs.length === 0) {
+    createContent(index) {
+        const tab = this.options.tabs[index];
+        if (!tab || tab.content != null || !tab.onCreate) {
             return;
         }
-        const ids = {};
-        for (const tab of this.options.tabs) {
-            if (tab.id && ids[tab.id] !== undefined) {
-                throw new Error("Tab Control has duplicate id " + tab.id);
+        this.State.created = this.State.created || new WeakSet();
+        if (!this.State.created.has(tab)) {
+            tab.content = tab.onCreate();
+            this.State.created.add(tab);
+        }
+    }
+    isValidIndex(index) {
+        return Number.isInteger(index) && index >= 0 && index < this.options.tabs.length;
+    }
+    firstEnabledIndex() {
+        return this.options.tabs.findIndex(tab => tab.enabled !== false);
+    }
+    triggerId(tab) {
+        this.State.id = this.State.id || helper.newDomGuid();
+        return this.State.id + "-tab-" + tab.id;
+    }
+    toNode(content, tag = "div") {
+        return typeof content === "string" ? { tag, content } : content;
+    }
+    checkForDuplicateIds(tabs = this.options.tabs) {
+        const ids = new Set();
+        for (const tab of tabs) {
+            if (tab.id) {
+                if (ids.has(tab.id)) {
+                    throw new Error("Tab Control has duplicate id " + tab.id);
+                }
+                ids.add(tab.id);
             }
         }
     }

package/lib/components/tabs/TabsStyle.scss

@@ -1,76 +1,139 @@
-
-.stabcomponent {
-    .tab-header-row {
-        display: flex;
-        .tab-item {
-            display: inline-block;
-            margin-right: 0.1rem;
-            padding: 0.5rem 0.5rem 0.5rem 0.5rem;
-            box-sizing: border-box;
-            border: 1px solid transparent;
-            border-radius: 4px 4px 0 0;
-            text-decoration: none;
-            border-color: #C0C0C0;
-            border-bottom: 1px solid #ddd;
-            vertical-align: middle;
-            vertical-align: -webkit-baseline-middle;
-            vertical-align: -moz-middle-with-baseline;
-            cursor: pointer;
-
-            &:hover {
-                background:#c9e2f9;
-                color: black;
-            }
-
-            .close-button {
-                background: linear-gradient(#d9d8d6, #d9d8d6);
-                border: 1px solid #88898d;
-                border-radius: 0.2rem;
-                color: #000;
-                cursor: pointer;
-                float: right;
-                padding: 0.3rem;
-                min-width: 1rem;
-                text-align: center;
-                margin-left: 0.5rem;
-                margin-right: -0.5rem;
-
-                &:hover {
-                    color: #000;
-                    border-color: #000;
-                    background: linear-gradient(#ff634b, #ff3313);
-                }
-            }
-        }
-
-        .active {
-            cursor: default;
-            background: #3B99FF;
-            color: white;
-            font-weight: bold;
-            border: 1px solid rgb(116, 116, 116);
-            border-bottom-color: transparent;
-        }
-
-        .disabled {
-            cursor: default;
-            color: #88898d;
-            background: #d9d8d6;
-            
-            &:hover {
-                color: #88898d;
-                background: #d9d8d6;
-            }
-        }
-    }
-
-    .tab-content {
-        max-height: calc(100vh - 9.6rem);
-        overflow:auto;
-        border:1px solid #C0C0C0;
-    }
-
-    .tab-hidden {
-        display: none;
-    }
+@import "../../ui/theme.css";
+
+.stabcomponent {
+    min-width: 0;
+    max-width: 100%;
+    color: var(--jsl-color-text);
+
+    > .tab-header-row {
+        display: flex;
+        align-items: stretch;
+        gap: 0.25rem;
+        min-width: 0;
+        overflow-x: auto;
+        overscroll-behavior-inline: contain;
+        scrollbar-width: thin;
+        border-bottom: 1px solid var(--jsl-tabs-border, var(--jsl-color-border-subtle));
+    }
+
+    > .tab-header-row > .tab-item {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        gap: 0.125rem;
+        position: relative;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        border-radius: 0.375rem 0.375rem 0 0;
+        background: transparent;
+        color: var(--jsl-tabs-text, var(--jsl-color-text-secondary));
+
+        &:hover {
+            background: var(--jsl-tabs-hover-surface, var(--jsl-color-surface-hover));
+            color: var(--jsl-color-text);
+        }
+
+        &.active {
+            border-bottom-color: var(--jsl-tabs-accent, var(--jsl-color-accent));
+            color: var(--jsl-tabs-active-text, var(--jsl-color-text));
+        }
+
+        &.disabled {
+            border-bottom-color: transparent;
+            background: transparent;
+            color: var(--jsl-color-disabled-text);
+            cursor: not-allowed;
+        }
+    }
+
+    .tab-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        box-sizing: border-box;
+        min-height: 2.5rem;
+        min-width: 0;
+        padding: 0.625rem 0.875rem;
+        margin: 0;
+        border: 0;
+        border-radius: 0.375rem;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.5;
+        text-align: start;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .tab-trigger:disabled { cursor: not-allowed; }
+    .tab-trigger:focus-visible,
+    > .tab-header-row > .tab-item > .close-button:focus-visible,
+    > .tab-header-row:focus-visible {
+        outline: 2px solid var(--jsl-color-focus);
+        outline-offset: -3px;
+    }
+
+    .tab-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        white-space: nowrap;
+    }
+
+    > .tab-header-row > .tab-item > .close-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0;
+        margin: 0 0.5rem 0 -0.375rem;
+        border: 0;
+        border-radius: 0.25rem;
+        background: transparent;
+        color: var(--jsl-color-text-muted);
+        cursor: pointer;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            width: 0.625rem;
+            height: 1.5px;
+            border-radius: 1px;
+            background: currentColor;
+            transform: rotate(45deg);
+        }
+        &::after { transform: rotate(-45deg); }
+        &:hover { background: var(--jsl-color-surface-selected); color: var(--jsl-color-text); }
+        &:disabled { color: var(--jsl-color-disabled-text); background: transparent; cursor: not-allowed; }
+    }
+
+    > .tab-panels {
+        min-width: 0;
+        background: var(--jsl-tabs-surface, var(--jsl-color-surface));
+    }
+
+    > .tab-panels > .tab-content {
+        box-sizing: border-box;
+        min-width: 0;
+        padding: 1rem;
+        overflow: auto;
+        overflow-wrap: anywhere;
+        overscroll-behavior: contain;
+        line-height: 1.6;
+
+        &:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: -2px; }
+        &.tab-hidden,
+        &[hidden] { display: none; }
+    }
 }