jsl-ui 9.29.0 → 10.0.0

package/lib/components/stack-panel/SplitterComponent.js

@@ -1,124 +1,107 @@
 import "./SplitterStyle.scss";
 export class SplitterComponent {
-    constructor(options) {
-        // tslint:disable-next-line: variable-name
+    constructor(options = {}) {
+        this.options = options;
         this._is_splitter = true;
-        this.options = options !== null && options !== void 0 ? options : {};
-        if (this.options.minSizesInPX == null) {
-            this.options.minSizesInPX = [];
-        }
-        if (this.options.minSizesInPX[0] == null) {
-            this.options.minSizesInPX[0] = 0;
+        this.State = {};
+    }
+    isEqual(node) { return Object.getPrototypeOf(node) === Object.getPrototypeOf(this); }
+    render() {
+        var _a;
+        return { tag: "div", attr: { class: "split-comp", tabindex: "0", role: "separator", "aria-label": (_a = this.options.ariaLabel) !== null && _a !== void 0 ? _a : "Resize panels",
+                pointerdown: (e) => {
+                    if (e.button !== 0 || !this.panels()) {
+                        return false;
+                    }
+                    e.preventDefault();
+                    this.State.dom.focus();
+                    const [a, b] = this.panels();
+                    this.State.drag = { id: e.pointerId, start: this.vertical() ? e.clientY : e.clientX, first: this.size(a), total: this.size(a) + this.size(b) };
+                    this.State.dom.setPointerCapture(e.pointerId);
+                    return false;
+                },
+                pointermove: (e) => {
+                    var _a;
+                    if (((_a = this.State.drag) === null || _a === void 0 ? void 0 : _a.id) === e.pointerId) {
+                        this.resize(this.State.drag.first + (this.vertical() ? e.clientY : e.clientX) - this.State.drag.start, this.State.drag.total);
+                    }
+                    return false;
+                },
+                pointerup: () => { this.finish(); return false; }, pointercancel: () => { this.finish(); return false; },
+                lostpointercapture: () => { this.finish(); return false; },
+                keydown: (e) => {
+                    var _a;
+                    const keys = this.vertical() ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+                    const direction = keys.indexOf(e.key);
+                    if (direction < 0 && e.key !== "Home" && e.key !== "End") {
+                        return false;
+                    }
+                    const panels = this.panels();
+                    if (!panels) {
+                        return false;
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const total = this.size(panels[0]) + this.size(panels[1]);
+                    this.resize(e.key === "Home" ? 0 : e.key === "End" ? total : this.size(panels[0]) + (direction ? 1 : -1) * (e.shiftKey ? 50 : 10), total);
+                    (_a = this.options.onResizeDone) === null || _a === void 0 ? void 0 : _a.notify({ size1InPX: this.size(panels[0]) });
+                    return false;
+                }
+            } };
+    }
+    onCreate(node) { this.State.dom = node.dom; this.updateAria(); }
+    onRemove() { this.State.drag = undefined; this.State.dom = undefined; }
+    vertical() { var _a; return (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.parentElement.classList.contains("vstackpanel"); }
+    panels() {
+        var _a, _b;
+        const a = (_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.previousElementSibling, b = (_b = this.State.dom) === null || _b === void 0 ? void 0 : _b.nextElementSibling;
+        return a && b ? [a, b] : undefined;
+    }
+    size(el) { return this.vertical() ? el.getBoundingClientRect().height : el.getBoundingClientRect().width; }
+    resize(value, total) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const panels = this.panels();
+        if (!panels) {
+            return;
         }
-        if (this.options.minSizesInPX[1] == null) {
-            this.options.minSizesInPX[1] = 0;
+        const min = (_a = this.options.minSizesInPX) !== null && _a !== void 0 ? _a : [], max = (_b = this.options.maxSizesInPX) !== null && _b !== void 0 ? _b : [];
+        const low = Math.max((_c = min[0]) !== null && _c !== void 0 ? _c : 0, total - ((_d = max[1]) !== null && _d !== void 0 ? _d : total));
+        const high = Math.min((_e = max[0]) !== null && _e !== void 0 ? _e : total, total - ((_f = min[1]) !== null && _f !== void 0 ? _f : 0));
+        if (low > high) {
+            return;
         }
-        if (this.options.maxSizesInPX == null) {
-            this.options.maxSizesInPX = [];
+        const first = Math.max(low, Math.min(high, value)), dimension = this.vertical() ? "height" : "width";
+        panels.forEach((panel, index) => { panel.style.flex = "0 0 auto"; panel.style[dimension] = (index ? total - first : first) + "px"; });
+        this.updateAria();
+        (_g = this.options.onResize) === null || _g === void 0 ? void 0 : _g.notify();
+    }
+    updateAria() {
+        if (!this.State.dom) {
+            return;
         }
-        if (!SplitterComponent.listenerRegistered) {
-            SplitterComponent.listenerRegistered = true;
-            this.registerListener();
+        this.State.dom.setAttribute("aria-orientation", this.vertical() ? "horizontal" : "vertical");
+        const panels = this.panels();
+        if (!panels) {
+            return;
         }
+        const total = this.size(panels[0]) + this.size(panels[1]);
+        this.State.dom.setAttribute("aria-valuemin", "0");
+        this.State.dom.setAttribute("aria-valuemax", "100");
+        this.State.dom.setAttribute("aria-valuenow", String(Math.round(this.size(panels[0]) / Math.max(1, total) * 100)));
     }
-    isEqual(node) {
-        return this.__proto__ === node.__proto__;
-    }
-    render() {
-        return { tag: "div", attr: { class: "split-comp" } };
-    }
-    registerListener() {
-        let dragStartX = 0;
-        let draggedEl;
-        let elLeft;
-        let elRight;
-        let elLeftWidth;
-        let elRightWidth;
-        let isDown;
-        function mousemove(e) {
-            var _a;
-            if (!isDown) {
-                return;
-            }
-            e.preventDefault();
-            // e.stopPropagation();
-            // e.stopImmediatePropagation();
-            let x;
-            const orientation = draggedEl.parentElement.classList.contains("vstackpanel") ? "vertical" : "horizontal";
-            const component = draggedEl._component;
-            if (orientation === "horizontal") {
-                x = e.pageX != null ? e.pageX : e.touches[0].pageX;
-            }
-            else {
-                x = e.pageY != null ? e.pageY : e.touches[0].pageY;
-            }
-            const delta = dragStartX - x;
-            if ((elLeftWidth - delta) < component.options.minSizesInPX[0] ||
-                (elRightWidth + delta) < component.options.minSizesInPX[1]) {
-                return;
-            }
-            if ((elLeftWidth - delta) > component.options.maxSizesInPX[0] ||
-                (elRightWidth + delta) > component.options.maxSizesInPX[1]) {
-                return;
-            }
-            if (orientation === "horizontal") {
-                elLeft.style.width = (elLeftWidth - delta) + "px";
-                elRight.style.width = (elRightWidth + delta) + "px";
-            }
-            else {
-                elLeft.style.height = (elLeftWidth - delta) + "px";
-                elRight.style.height = (elRightWidth + delta) + "px";
-            }
-            (_a = component.options.onResize) === null || _a === void 0 ? void 0 : _a.notify();
+    finish() {
+        var _a, _b;
+        if (!this.State.drag) {
+            return;
         }
-        function mouseup(e) {
-            var _a;
-            isDown = false;
-            // document.removeEventListener("mousemove", mousemove);
-            // document.removeEventListener("touchmove", mousemove);
-            document.removeEventListener("mouseup", mousedown);
-            document.removeEventListener("touchend", mousedown);
-            const component = draggedEl._component;
-            const area1 = draggedEl.previousElementSibling;
-            const args = {};
-            if (area1 != null) {
-                args.size1InPX = area1.getBoundingClientRect().width;
-            }
-            (_a = component.options.onResizeDone) === null || _a === void 0 ? void 0 : _a.notify(args);
+        const id = this.State.drag.id;
+        this.State.drag = undefined;
+        if ((_a = this.State.dom) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(id)) {
+            this.State.dom.releasePointerCapture(id);
         }
-        function mousedown(e) {
-            if (e.target.classList.contains("split-comp")) {
-                isDown = true;
-                const orientation = e.target.parentElement.classList.contains("vstackpanel") ? "vertical" : "horizontal";
-                if (orientation === "horizontal") {
-                    dragStartX = e.pageX != null ? e.pageX : e.touches[0].pageX;
-                }
-                else {
-                    dragStartX = e.pageY != null ? e.pageY : e.touches[0].pageY;
-                }
-                draggedEl = e.target;
-                elLeft = draggedEl.previousElementSibling;
-                elRight = draggedEl.nextElementSibling;
-                if (elLeft != null && elRight != null) {
-                    if (orientation === "horizontal") {
-                        elLeftWidth = elLeft.getBoundingClientRect().width;
-                        elRightWidth = elRight.getBoundingClientRect().width;
-                    }
-                    else {
-                        elLeftWidth = elLeft.getBoundingClientRect().height;
-                        elRightWidth = elRight.getBoundingClientRect().height;
-                    }
-                    document.body.addEventListener("mousemove", mousemove, { passive: false });
-                    document.body.addEventListener("touchmove", mousemove, { passive: false });
-                    document.body.addEventListener("mouseup", mouseup, false);
-                    document.body.addEventListener("touchend", mouseup, false);
-                }
-            }
+        const panels = this.panels();
+        if (panels) {
+            (_b = this.options.onResizeDone) === null || _b === void 0 ? void 0 : _b.notify({ size1InPX: this.size(panels[0]) });
         }
-        document.addEventListener("mousedown", mousedown);
-        document.addEventListener("touchstart", mousedown);
-        document.removeEventListener("mousemove", mousemove);
-        document.removeEventListener("touchmove", mousemove);
     }
 }
-SplitterComponent.listenerRegistered = false;

package/lib/components/stack-panel/SplitterStyle.scss

@@ -1,45 +1,9 @@
-.stackpanel-comp.hstackpanel > .split-comp {
-    width: 14px !important;
-    background: #d5d5d5;
-    cursor: w-resize;
-    position: relative;
-
-    &::before {
-        height: 4rem;
-        background: #696969;
-        width: 7px;
-        position: absolute;
-        top: calc(50% - 2rem);
-        content: "";
-        left: 3px;
-        border-radius: 3px;
-    }
-
-    &:hover {
-        box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
-    }
-}
-
-.stackpanel-comp.vstackpanel > .split-comp {
-    height: 14px !important;
-    flex-basis: 14px;
-    flex-grow: 0;
-    background: #d5d5d5;
-    cursor: n-resize;
-    position: relative;
-
-    &::before {
-        background: #696969;
-        height: 7px;
-        width: 4rem;
-        position: absolute;
-        left: calc(50% - 2rem);
-        content: "";
-        top: 3px;
-        border-radius: 3px;
-    }
-
-    &:hover {
-        box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.3);
-    }
-}
+@import "../../ui/theme.css";
+.stackpanel-comp > .split-comp { position: relative; flex: 0 0 12px; align-self: stretch; background: var(--jsl-color-surface-subtle); touch-action: none; user-select: none; outline-offset: -2px; }
+.split-comp::before { content: ""; position: absolute; border-radius: 999px; background: var(--jsl-color-border); }
+.hstackpanel > .split-comp { cursor: col-resize; }
+.hstackpanel > .split-comp::before { width: 3px; height: 32px; max-height: 80%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
+.vstackpanel > .split-comp { cursor: row-resize; }
+.vstackpanel > .split-comp::before { height: 3px; width: 32px; max-width: 80%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
+.split-comp:hover::before, .split-comp:focus-visible::before { background: var(--jsl-color-accent); }
+.split-comp:focus-visible { outline: 2px solid var(--jsl-color-focus); }

package/lib/components/stack-panel/StackPanelComponent.js

@@ -36,13 +36,13 @@ export class StackPanelComponent {
         if (this.options.sizes != null && this.options.sizes[idx] != null) {
             const s = this.options.sizes[idx];
             if (s === "*") {
-                return undefined;
+                return "flex:1 1 0";
             }
             if (this.options.orientation === "vertical") {
-                return "height: " + s;
+                return "flex:0 0 auto;height: " + s;
             }
             else {
-                return "width:" + s;
+                return "flex:0 0 auto;width:" + s;
             }
         }
         return "flex-grow:1;";

package/lib/components/stack-panel/StackPanelStyle.scss

@@ -1,53 +1,11 @@
-
-.stackpanel-comp.hstackpanel {
-  position: relative;
+@import "../../ui/theme.css";
+.stackpanel-comp { display: flex; min-width: 0; min-height: 0; box-sizing: border-box; }
+.stackpanel-comp.hstackpanel { flex-direction: row; width: 100%; }
+.stackpanel-comp.vstackpanel { flex-direction: column; }
+.stackpanel-comp.wrap { flex-wrap: wrap; }
+.stackpanel-comp > div:not(.split-comp) { min-width: 0; min-height: 0; box-sizing: border-box; }
+@media (max-width: 70em) {
+    .stackpanel-comp.hstackpanel.responsive { flex-direction: column; }
+    .stackpanel-comp.hstackpanel.responsive > div:not(.split-comp) { width: auto !important; flex: 0 0 auto !important; }
+    .stackpanel-comp.hstackpanel.responsive > .split-comp { display: none; }
 }
-
-@media (max-width: 70em) {
-  .stackpanel-comp.hstackpanel.responsive > div {
-    width: auto!important;
-  }
-}
-
-.stackpanel-comp.hstackpanel:not(.responsive) {
-  // flex-grow: 1;
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-
-// .stackpanel-comp.hstackpanel:not(.responsive) > div {
-//   display: flex;
-// }
-
-@media (min-width: 70em) {
-
-  .stackpanel-comp.hstackpanel {
-    // flex-grow: 1;
-    position: relative;
-    display: flex;
-    width: 100%;
-  }
-  
-}
-
-.stackpanel-comp.wrap {
-  flex-wrap: wrap;
-}
-
-.stackpanel-comp.vstackpanel {
-    position: relative;
-}
-
-// .stackpanel-comp.vstackpanel > div {
-//     display: block;
-//   }
-
-.stackpanel-comp.vstackpanel > div {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
-  }

package/lib/components/tabs/TabsComponent.d.ts

@@ -8,6 +8,9 @@ export interface ITabItemOption {
     onCreate?: () => IJSLVNode | string | IJSLComponent;
     canClose?: boolean;
     onClosing?: () => boolean;
+    /** Accessible name for an icon-only or custom header. */
+    ariaLabel?: string;
+    closeButtonLabel?: string;
 }
 export interface ITabOptions {
     tabs?: ITabItemOption[];
@@ -18,11 +21,14 @@ export interface ITabOptions {
     onSelect?: (index?: number) => boolean | void;
     maxHeight?: string;
     preserveContent?: boolean;
+    ariaLabel?: string;
 }
 export declare class TabsComponent implements IJSLComponent {
     private options?;
     State: {
-        selectedIndex: any;
+        selectedIndex: number;
+        id?: string;
+        created?: WeakSet<ITabItemOption>;
     };
     private renderer;
     constructor(options?: ITabOptions);
@@ -34,7 +40,17 @@ export declare class TabsComponent implements IJSLComponent {
     GetByID(id: string): ITabItemOption;
     closeTabIndex(index: number, raiseSelectEvent?: boolean): boolean;
     onInit(renderer: JSLRender): void;
+    onCreate(): void;
+    /** Select programmatically without raising onSelect, including -1 for no selection. */
     SetSelectedTab(index: number): void;
+    private selectFromUser;
+    private onTabKeydown;
+    private requestRefresh;
+    private revealTab;
+    private createContent;
+    private isValidIndex;
+    private firstEnabledIndex;
+    private triggerId;
     private toNode;
     private checkForDuplicateIds;
 }