jsl-ui 9.28.7 → 10.0.0

package/lib/components/select/SelectDDAreaComponent.d.ts

@@ -1,4 +1,4 @@
-import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
 import { ISelectComponentOptions, SelectComponent } from "./SelectComponent";
 import { EventHandler } from "../../interaction/eventhandler";
 interface IDDArguments {
@@ -9,24 +9,30 @@ export declare class SelectDDAreaComponent implements IJSLComponent {
     private options;
     private component;
     private args;
-    private static ESCAPE_KEY;
-    private static DOWN_KEY;
-    private static UP_KEY;
-    private static ENTER_KEY;
-    private static TAB_KEY;
     onRender: EventHandler<any[], void>;
     private filteredData;
     private renderedData;
     private dom;
     private scrollContainer;
-    private isScrolling;
+    private renderer;
+    private virtualList;
+    private searchText;
+    private optionPositions;
+    private optionCount;
     constructor(options: ISelectComponentOptions<any>, component: SelectComponent, args: IDDArguments);
+    onInit(renderer: JSLRender): void;
     onCreate(node: IJSLVNode): void;
     render(): IJSLVNode;
     navigateDown(): void;
     navigateUp(): void;
     search(term: string): void;
     clearSearch(): void;
+    private isGroup;
+    private renderRow;
     private focusFirst;
+    private navigate;
+    private scrollToFocus;
+    private selectFocused;
+    private keydown;
 }
 export {};

package/lib/components/select/SelectDDAreaComponent.js

@@ -1,303 +1,262 @@
 import { VirtualRenderComponent } from "../virtual-render/VirtualRenderComponent";
 import { EventHandler } from "../../interaction/eventhandler";
-function isInternetExplorer() {
-    return window.navigator.userAgent.indexOf("MSIE ") > 0 || !!window.navigator.userAgent.match(/Trident.*rv\:11\./);
-}
 export class SelectDDAreaComponent {
     constructor(options, component, args) {
+        var _a;
         this.options = options;
         this.component = component;
         this.args = args;
         this.onRender = new EventHandler();
-        this.isScrolling = false;
-        if (args.searchTxt) {
-            this.search(args.searchTxt);
+        this.optionPositions = new Map();
+        this.optionCount = 0;
+        this.searchText = (_a = args.searchTxt) !== null && _a !== void 0 ? _a : "";
+        if (this.searchText) {
+            this.search(this.searchText);
         }
         this.focusFirst();
+        this.virtualList = new VirtualRenderComponent({
+            class: "sel-dd-items" + (options.multiple ? " multiple" : ""),
+            data: [], rowHeight: options.rowHeight,
+            style: "height:100%;", viewportSizeInPX: args.renderHeight,
+            bufferSizeInPx: options.rowHeight * 2,
+            renderRow: arg => this.renderRow(arg.rowData, arg.index)
+        });
     }
+    onInit(renderer) { this.renderer = renderer; }
     onCreate(node) {
-        var _a, _b;
         this.dom = node.dom;
         this.scrollContainer = this.dom.querySelector(".sel-dd-items");
-        let item = this.component.getSelected();
-        if (item != null) {
-            if (Array.isArray(item)) {
-                item = item[0];
-            }
-            if (item != null) {
-                const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-                const idx = d.indexOf(item);
-                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-            }
-        }
-        //bugfix for IE -> blur event of search box is called when user clicks scroll bar
-        if (isInternetExplorer()) {
-            this.scrollContainer.addEventListener("scroll", (e) => {
-                this.isScrolling = true;
-                setTimeout(() => {
-                    this.isScrolling = false;
-                    this.dom.querySelector(".sel-search input").focus();
-                }, 20);
-            });
-            this.scrollContainer.addEventListener("mousedown", (e) => {
-                if (e.offsetX > this.scrollContainer.clientWidth || e.offsetY > this.scrollContainer.clientHeight) {
-                    this.isScrolling = true;
-                    setTimeout(() => {
-                        this.isScrolling = false;
-                        this.dom.querySelector(".sel-search input").focus();
-                    }, 20);
-                }
-            });
-        }
+        this.scrollToFocus();
+        this.renderer.refresh();
     }
     render() {
-        var _a;
+        var _a, _b, _c, _d;
         let data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
         if (this.options.groupProperty != null) {
-            const sortedData = [...data];
-            sortedData.sort((a, b) => {
-                return a[this.options.groupProperty] < b[this.options.groupProperty] ? -1
-                    : a[this.options.groupProperty] > b[this.options.groupProperty] ? 1 : (data.indexOf(a) - data.indexOf(b) // preserve order if it is for same group
-                    );
-            });
+            const property = this.options.groupProperty;
+            const sorted = [...data].sort((a, b) => a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0);
             data = [];
-            let prevGroupVal = NaN;
-            for (const x of sortedData) {
-                if (x[this.options.groupProperty] !== prevGroupVal) {
-                    // create group entry
-                    data.push({ __isGroup: true, __groupValue: x[this.options.groupProperty] });
-                    prevGroupVal = x[this.options.groupProperty];
+            let hasGroup = false;
+            let group;
+            for (const item of sorted) {
+                if (!hasGroup || item[property] !== group) {
+                    group = item[property];
+                    hasGroup = true;
+                    data.push({ __isGroup: true, __groupValue: group });
                 }
-                data.push(x);
+                data.push(item);
             }
         }
-        this.onRender.notify(data);
         this.renderedData = data;
-        const ddNode = {
-            tag: "div", animation: this.options.enableAnimation ? { attr: "opacity", from: "0", to: "1", duration: 400 } : undefined, children: [
+        this.optionPositions.clear();
+        this.optionCount = 0;
+        for (const item of data) {
+            if (!this.isGroup(item)) {
+                this.optionPositions.set(item, ++this.optionCount);
+            }
+        }
+        const focusedIndex = data.indexOf(this.component.getFocus());
+        const activeId = focusedIndex >= 0 ? this.component.getListId() + "-option-" + focusedIndex : undefined;
+        this.virtualList.setData(data);
+        this.onRender.notify(data);
+        const label = (_d = (_c = (_b = this.options.ariaLabel) !== null && _b !== void 0 ? _b : this.options.placeholder) !== null && _c !== void 0 ? _c : this.options.placehoder) !== null && _d !== void 0 ? _d : "Options";
+        return {
+            tag: "div", attr: {
+                class: "sel-dd-panel" + (this.options.enableAnimation ? " sel-dd-animate" : ""),
+                keydown: (event) => this.keydown(event)
+            }, children: [
                 {
-                    tag: "div", attr: { class: "sel-search", style: this.options.enableSearch ? undefined : "height:0;padding:0;margin:0;border:none;" },
-                    children: [
-                        {
+                    tag: "div", attr: { class: "sel-search", hidden: this.options.enableSearch ? undefined : "hidden" },
+                    children: [{
                             tag: "input", attr: {
-                                type: "text", value: this.args.searchTxt, placeholder: "Search", blur: (e) => {
-                                    e.preventDefault();
-                                    if (isInternetExplorer()) {
-                                        requestAnimationFrame(() => {
-                                            if (!this.isScrolling) {
-                                                this.component.close();
-                                            }
-                                        });
-                                    }
-                                    else {
-                                        this.component.close();
-                                    }
-                                    return false;
-                                }, input: (e, node) => {
-                                    if (!this.options.enableSearch) {
-                                        return false;
-                                    }
-                                    const term = node.dom.value;
-                                    if (!term) {
-                                        this.clearSearch();
-                                    }
-                                    else {
-                                        this.search(term);
-                                    }
-                                }, keydown: (e, node) => {
-                                    var _a;
-                                    if (!this.options.enableKeyboard) {
-                                        return;
-                                    }
-                                    if (e.which === SelectDDAreaComponent.ESCAPE_KEY) {
-                                        node.dom.blur();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.DOWN_KEY) {
-                                        this.navigateDown();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.UP_KEY) {
-                                        this.navigateUp();
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.ENTER_KEY) { // TODO: multiselect
-                                        // e.preventDefault();
-                                        // e.stopPropagation();
-                                        // e.stopImmediatePropagation();
-                                        let focus = this.component.getFocus();
-                                        if (focus == null) {
-                                            // if only 1 result is left then auto select this entry
-                                            const d = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
-                                            if (d.length === 1) {
-                                                focus = d[0];
-                                            }
-                                        }
-                                        if (this.options.multiple) {
-                                            if (focus != null) {
-                                                const currentSelection = this.component.getSelected();
-                                                if (currentSelection.indexOf(focus) >= 0) {
-                                                    currentSelection.splice(currentSelection.indexOf(focus), 1);
-                                                }
-                                                else {
-                                                    currentSelection.push(focus);
-                                                }
-                                                this.component.setSelected(currentSelection);
-                                            }
-                                        }
-                                        else {
-                                            if (focus != null) {
-                                                this.component.setSelected(focus);
-                                            }
-                                            node.dom.blur();
-                                        }
-                                    }
-                                    else if (e.which === SelectDDAreaComponent.TAB_KEY) {
-                                        e.preventDefault();
-                                        node.dom.blur();
-                                    }
-                                }
+                                type: "text", autocomplete: "off", spellcheck: "false",
+                                value: this.searchText, placeholder: this.options.searchPlaceholder,
+                                role: "combobox", "aria-autocomplete": "list", "aria-expanded": "true",
+                                "aria-controls": this.component.getListId(), "aria-activedescendant": activeId,
+                                "aria-label": this.options.searchPlaceholder,
+                                input: (event) => { this.search(event.target.value); }
                             }
-                        }
-                    ]
+                        }]
                 },
-                new VirtualRenderComponent({
-                    class: "sel-dd-items" + (this.options.multiple ? " multiple" : ""), data,
-                    style: this.options.enableSearch ? "height:calc(100% - 1.8rem)" : "height:100%",
-                    viewportSizeInPX: this.args.renderHeight + 20,
-                    bufferSizeInPx: 20,
-                    renderRow: (args) => {
-                        const result = { tag: "div", attr: { class: "sel-dd-item" } };
-                        if (this.options.groupProperty && args.rowData.__isGroup) {
-                            result.attr.class += " sel-dd-group";
-                            const groupValue = args.rowData.__groupValue;
-                            const groupArgs = {
-                                groupValue, node: result
-                            };
-                            const resGroup = this.options.onRenderGroup(groupArgs);
-                            if (resGroup != null) {
-                                result.children = [resGroup];
-                            }
-                            result.attr.mousedown = (evt) => {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                                evt.stopImmediatePropagation();
-                            };
-                            return result;
-                        }
-                        const renderArg = {
-                            data: args.rowData,
-                            node: result,
-                            isFocused: this.component.getFocus() === args.rowData,
-                            isSelected: this.options.multiple ?
-                                this.component.getSelected().indexOf(args.rowData) >= 0 :
-                                this.component.getSelected() === args.rowData,
-                            isCurrent: false
-                        };
-                        if (renderArg.isFocused) {
-                            result.attr.class += " focused";
-                        }
-                        if (renderArg.isSelected) {
-                            result.attr.class += " selected";
-                        }
-                        result.attr.mousedown = (evt) => {
-                            if (this.options.multiple) {
-                                evt.preventDefault();
-                                evt.stopPropagation();
-                                evt.stopImmediatePropagation();
-                                const currentSelection = this.component.getSelected();
-                                if (currentSelection.indexOf(args.rowData) >= 0) {
-                                    currentSelection.splice(currentSelection.indexOf(args.rowData), 1);
-                                    this.component.setSelected(currentSelection);
-                                }
-                                else {
-                                    this.component.setSelected(args.rowData);
-                                }
-                            }
-                            else {
-                                this.component.setSelected(args.rowData);
-                            }
-                        };
-                        const res = this.options.onRender(renderArg);
-                        if (res != null) {
-                            result.children = [res];
-                        }
-                        return result;
-                    },
-                    rowHeight: this.options.rowHeight
-                })
+                {
+                    tag: "div", attr: {
+                        id: this.component.getListId(), class: "sel-listbox", role: "listbox",
+                        tabindex: this.options.enableSearch ? "-1" : "0",
+                        "aria-label": label, "aria-multiselectable": this.options.multiple ? "true" : undefined,
+                        "aria-activedescendant": this.options.enableSearch ? undefined : activeId
+                    }, children: [
+                        this.virtualList,
+                        { tag: "div", attr: { class: "sel-empty", role: "status", hidden: data.length ? "hidden" : undefined }, content: this.options.emptyText }
+                    ]
+                }
             ]
         };
-        return ddNode;
     }
-    navigateDown() {
-        var _a, _b, _c;
-        const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-        let selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
-        if (selItem == null) {
-            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
-            return;
+    navigateDown() { this.navigate(1); }
+    navigateUp() { this.navigate(-1); }
+    search(term) {
+        var _a;
+        this.searchText = term;
+        this.filteredData = term ? this.options.data.filter(item => this.options.matchSearch(item, term)) : null;
+        if (this.scrollContainer) {
+            this.scrollContainer.scrollTop = 0;
         }
-        if (Array.isArray(selItem)) {
-            selItem = selItem[0];
+        if (this.virtualList) {
+            this.virtualList.State.scrollPos = 0;
         }
-        let idx = d.indexOf(selItem);
-        if (idx < 0) {
-            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+        this.focusFirst();
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.refresh();
+    }
+    clearSearch() { this.search(""); }
+    isGroup(item) { return this.options.groupProperty != null && (item === null || item === void 0 ? void 0 : item.__isGroup) === true; }
+    renderRow(item, index) {
+        var _a, _b;
+        const result = { tag: "div", attr: { class: "sel-dd-item" } };
+        if (this.isGroup(item)) {
+            result.attr.class += " sel-dd-group";
+            result.attr.role = "presentation";
+            const args = { groupValue: item.__groupValue, node: result };
+            const rendered = this.options.onRenderGroup(args);
+            if (rendered != null) {
+                result.children = [rendered];
+            }
+            result.attr.mousedown = (event) => { event.preventDefault(); return false; };
+            return result;
         }
-        else {
-            while (idx < d.length - 1) {
-                idx++;
-                if (!d[idx].__isGroup) {
-                    this.component.setFocus(d[idx]);
-                    this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-                    break;
-                }
+        const selected = this.options.multiple ?
+            ((_a = this.component.getSelected()) !== null && _a !== void 0 ? _a : []).indexOf(item) >= 0 :
+            this.component.getSelected() === item;
+        const focused = this.component.getFocus() === item;
+        result.attr = {
+            ...result.attr, id: this.component.getListId() + "-option-" + index,
+            class: result.attr.class + (selected ? " selected" : "") + (focused ? " focused" : ""),
+            role: "option", "aria-selected": String(selected),
+            "aria-setsize": this.optionCount, "aria-posinset": this.optionPositions.get(item),
+            mousedown: (event) => { event.preventDefault(); return false; },
+            click: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.component.setFocus(item);
+                this.selectFocused();
+                return false;
+            }
+        };
+        const renderArg = { data: item, node: result, isCurrent: false, isFocused: focused, isSelected: selected };
+        if (this.options.onRender) {
+            const rendered = this.options.onRender(renderArg);
+            if (rendered != null) {
+                result.children = [rendered];
             }
         }
+        else {
+            result.content = String((_b = item[this.options.textColumn]) !== null && _b !== void 0 ? _b : "");
+        }
+        return result;
     }
-    navigateUp() {
+    focusFirst() {
+        var _a;
+        const data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
+        const selected = this.component.getSelected();
+        const item = Array.isArray(selected) ? selected[0] : selected;
+        this.component.setFocus(data.indexOf(item) >= 0 ? item : this.options.focusFirstItem ? data[0] : null);
+    }
+    navigate(direction) {
         var _a, _b, _c;
-        const d = (_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data;
-        let selItem = (_c = this.component.getFocus()) !== null && _c !== void 0 ? _c : this.component.getSelected();
-        if (selItem == null) {
-            this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
+        const data = ((_b = (_a = this.renderedData) !== null && _a !== void 0 ? _a : this.filteredData) !== null && _b !== void 0 ? _b : this.options.data).filter(item => !this.isGroup(item));
+        if (!data.length) {
             return;
         }
-        if (Array.isArray(selItem)) {
-            selItem = selItem[0];
+        const index = data.indexOf(this.component.getFocus());
+        this.component.setFocus(data[index < 0 ? (direction < 0 ? data.length - 1 : 0) : Math.max(0, Math.min(data.length - 1, index + direction))]);
+        this.scrollToFocus();
+        (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.refresh();
+    }
+    scrollToFocus() {
+        var _a, _b;
+        const index = (_b = (_a = this.renderedData) === null || _a === void 0 ? void 0 : _a.indexOf(this.component.getFocus())) !== null && _b !== void 0 ? _b : -1;
+        if (index < 0 || !this.scrollContainer) {
+            return;
         }
-        let idx = d.indexOf(selItem);
-        while (idx > 0) {
-            idx--;
-            if (!d[idx].__isGroup) {
-                this.component.setFocus(d[idx]);
-                this.scrollContainer.scrollTop = this.options.rowHeight * idx;
-                return;
-            }
+        const top = index * this.options.rowHeight;
+        const bottom = top + this.options.rowHeight;
+        const height = this.scrollContainer.clientHeight;
+        let scroll = this.scrollContainer.scrollTop;
+        if (top < scroll) {
+            scroll = top;
         }
-        this.component.setFocus(d.filter((x) => !x.__isGroup)[0]);
-    }
-    search(term) {
-        var _a, _b, _c, _d;
-        const oldLen = (_b = (_a = this.filteredData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        this.filteredData = this.options.data.filter((d) => this.options.matchSearch(d, term));
-        const newLen = (_d = (_c = this.filteredData) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
-        if (oldLen !== newLen && this.scrollContainer != null) {
-            this.scrollContainer.scrollTop = 0;
+        else if (bottom > scroll + height) {
+            scroll = Math.max(0, bottom - height);
         }
-        this.focusFirst();
+        this.scrollContainer.scrollTop = scroll;
+        this.virtualList.State.scrollPos = scroll;
     }
-    clearSearch() {
-        this.filteredData = null;
-        this.focusFirst();
+    selectFocused() {
+        var _a, _b;
+        let item = this.component.getFocus();
+        if (item == null) {
+            const data = (_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data;
+            if (data.length === 1) {
+                item = data[0];
+            }
+        }
+        if (item == null) {
+            return;
+        }
+        if (this.options.multiple) {
+            const selected = [...(_b = this.component.getSelected()) !== null && _b !== void 0 ? _b : []];
+            const index = selected.indexOf(item);
+            if (index >= 0) {
+                if (!this.options.allowEmpty && selected.length === 1) {
+                    return;
+                }
+                selected.splice(index, 1);
+            }
+            else {
+                selected.push(item);
+            }
+            this.component.setSelected(selected);
+        }
+        else {
+            this.component.setSelected(item);
+            this.component.close();
+        }
     }
-    focusFirst() {
-        var _a;
-        if (this.options.focusFirstItem && (this.component.getSelected() == null || this.component.getSelected().length === 0)) /* TODO multiselect */ {
-            this.component.setFocus(((_a = this.filteredData) !== null && _a !== void 0 ? _a : this.options.data)[0]);
+    keydown(event) {
+        var _a, _b;
+        if (event.isComposing || !this.options.enableKeyboard) {
+            return false;
+        }
+        const key = event.key;
+        if (key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.component.close();
+        }
+        else if (key === "Tab") {
+            // Continue native tabbing from the field's position, including dialog traps.
+            this.component.close();
+        }
+        else if (key === "ArrowDown" || key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.navigate(key === "ArrowDown" ? 1 : -1);
+        }
+        else if (key === "Home" || key === "End") {
+            if (this.options.enableSearch && !event.ctrlKey) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const data = ((_a = this.renderedData) !== null && _a !== void 0 ? _a : []).filter(item => !this.isGroup(item));
+            this.component.setFocus(data[key === "Home" ? 0 : data.length - 1]);
+            this.scrollToFocus();
+            (_b = this.renderer) === null || _b === void 0 ? void 0 : _b.refresh();
+        }
+        else if (key === "Enter" || key === " " && !this.options.enableSearch) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.selectFocused();
         }
+        return false;
     }
 }
-SelectDDAreaComponent.ESCAPE_KEY = 27;
-SelectDDAreaComponent.DOWN_KEY = 40;
-SelectDDAreaComponent.UP_KEY = 38;
-SelectDDAreaComponent.ENTER_KEY = 13;
-SelectDDAreaComponent.TAB_KEY = 9;