cx 26.0.1 → 26.0.3

package/build/widgets/nav/LinkButton.js

@@ -0,0 +1,110 @@
+import { Widget } from "../../ui/Widget";
+import { Button } from "../Button";
+import { History } from "../../ui/app/History";
+import { Url } from "../../ui/app/Url";
+import { routeAppend } from "../../util/routeAppend";
+import { parseStyle } from "../../util/parseStyle";
+export class LinkButton extends Button {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.activeStyle = parseStyle(this.activeStyle);
+        this.inactiveStyle = parseStyle(this.inactiveStyle);
+        super.init();
+    }
+    declareData() {
+        super.declareData({
+            href: undefined,
+            url: undefined,
+            target: undefined,
+            active: undefined,
+            activeClass: undefined,
+            activeStyle: undefined,
+            inactiveClass: undefined,
+            inactiveStyle: undefined,
+        }, ...arguments);
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.unresolvedHref = data.href;
+        if (typeof data.href === "string") {
+            if (data.unresolvedHref[0] === "+")
+                data.unresolvedHref = routeAppend(context.lastRoute.reverse(), data.href.substring(1));
+            data.href = Url.resolve(data.unresolvedHref);
+        }
+        let active = this.isActive(data);
+        data.stateMods = {
+            disabled: data.disabled,
+            active,
+        };
+        super.prepareData(context, instance);
+        if (active) {
+            if (data.activeClass)
+                data.classNames += " " + data.activeClass;
+            if (data.activeStyle)
+                data.style = {
+                    ...data.style,
+                    ...parseStyle(data.activeStyle),
+                };
+        }
+        else {
+            if (data.inactiveClass)
+                data.classNames += " " + data.inactiveClass;
+            if (data.inactiveStyle)
+                data.style = {
+                    ...data.style,
+                    ...parseStyle(data.inactiveStyle),
+                };
+        }
+    }
+    isActive(data) {
+        if (data.active != null)
+            return data.active;
+        switch (this.match) {
+            default:
+            case "equal":
+                return data.url === data.unresolvedHref;
+            case "prefix":
+                return data.url && data.unresolvedHref && data.url.indexOf(data.unresolvedHref) === 0;
+            case "subroute":
+                return (data.url &&
+                    data.unresolvedHref &&
+                    data.url.indexOf(data.unresolvedHref) === 0 &&
+                    (data.url === data.unresolvedHref || data.url[data.unresolvedHref.length] === "/"));
+        }
+    }
+    attachProps(context, instance, props) {
+        props.onClick = (ev) => {
+            this.handleClick(ev, instance);
+        };
+        super.attachProps(context, instance, props);
+        props.href = instance.data.href;
+        delete props.active;
+        delete props.activeClass;
+        delete props.activeStyle;
+        delete props.inactiveClass;
+        delete props.inactiveStyle;
+    }
+    isValidHtmlAttribute(attr) {
+        if (attr === "url" || attr === "match")
+            return false;
+        return super.isValidHtmlAttribute(attr);
+    }
+    handleClick(e, instance) {
+        let { data } = instance;
+        if (data.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (this.onClick && instance.invoke("onClick", e, instance) === false)
+            return;
+        if (data.href && Url.isLocal(data.href) && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
+            e.preventDefault();
+            History.pushState({}, null, data.href);
+        }
+    }
+}
+LinkButton.prototype.match = "equal";
+LinkButton.prototype.tag = "a";
+Widget.alias("link-button", LinkButton);

package/build/widgets/nav/Menu.d.ts

@@ -0,0 +1,48 @@
+import { RenderingContext } from "../../ui/RenderingContext";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { MenuItem } from "./MenuItem";
+import { MenuSpacer } from "./MenuSpacer";
+export interface MenuConfig extends HtmlElementConfig {
+    /** Set to `true` for horizontal menus. */
+    horizontal?: boolean;
+    /**
+     * Controls size of menu items. Supported values are `xsmall`, `small`, `medium`, `large` or `xlarge`.
+     * For horizontal menus default size is `small` and for vertical it's `medium`.
+     */
+    itemPadding?: string;
+    defaultVerticalItemPadding?: string;
+    defaultHorizontalItemPadding?: string;
+    /** Set to true to put overflow items into a submenu on the right. */
+    overflow?: boolean;
+    /** Icon to be used for the overflow menu. */
+    overflowIcon?: string;
+    /** Base CSS class to be applied to the element. No class is applied by default. */
+    baseClass?: string;
+    /** Show only overflow items. Used internally for overflow menus. */
+    showOnlyOverflowItems?: boolean;
+    /** Auto focus first menu item. */
+    autoFocus?: boolean;
+}
+export declare class Menu extends HtmlElement<MenuConfig, MenuInstance> {
+    baseClass: string;
+    horizontal: boolean;
+    itemPadding: string | boolean;
+    defaultHorizontalItemPadding: string;
+    defaultVerticalItemPadding: string;
+    overflow: boolean;
+    overflowIcon: string;
+    tag: string;
+    showOnlyOverflowItems?: boolean;
+    autoFocus?: boolean;
+    static Item: typeof MenuItem;
+    static Spacer: typeof MenuSpacer;
+    init(): void;
+    prepareData(context: RenderingContext, instance: MenuInstance): void;
+    explore(context: RenderingContext, instance: MenuInstance): void;
+    exploreCleanup(context: RenderingContext, instance: MenuInstance): void;
+    render(context: RenderingContext, instance: MenuInstance, key: string): import("react/jsx-runtime").JSX.Element;
+    add(item: any): void;
+}
+export declare class MenuInstance extends HtmlElementInstance<Menu> {
+    nonOverflownItemCount?: number;
+}

package/build/widgets/nav/Menu.js

@@ -0,0 +1,336 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { FocusManager } from "../../ui/FocusManager";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { VDOM, Widget } from "../../ui/Widget";
+import { isTextInputElement } from "../../util";
+import { debug, menuFlag } from "../../util/Debug";
+import { closest, findFirst, getFocusedElement, isFocusable, isFocusedDeep, isSelfOrDescendant } from "../../util/DOM";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+import { isUndefined } from "../../util/isUndefined";
+import { KeyCode } from "../../util/KeyCode";
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { MenuItem } from "./MenuItem";
+import { MenuSpacer } from "./MenuSpacer";
+/*
+ Functionality:
+ - renders a list of items in a form of horizontal or vertical menu
+ - provides cursor with mouse and keyboard nav
+ - changes focusElement to the first focusable child when cursor is moved using keyboard
+ */
+export class Menu extends HtmlElement {
+    static Item;
+    static Spacer;
+    init() {
+        if (this.itemPadding === true)
+            this.itemPadding = "medium";
+        if (this.horizontal && isUndefined(this.itemPadding))
+            this.itemPadding = this.defaultHorizontalItemPadding;
+        if (!this.horizontal && isUndefined(this.itemPadding))
+            this.itemPadding = this.defaultVerticalItemPadding;
+        super.init();
+        if (this.overflow) {
+            if (!this.horizontal)
+                throw new Error("Overflow works only on horizontal menus.");
+            this.items.push(MenuItem.create({
+                icon: this.overflowIcon,
+                mod: "overflow",
+                items: [
+                    {
+                        type: Menu,
+                        putInto: "dropdown",
+                        items: [...this.items],
+                        showOnlyOverflowItems: true,
+                    },
+                ],
+            }));
+        }
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            ...data.stateMods,
+            horizontal: this.horizontal,
+            vertical: !this.horizontal,
+            overflow: this.overflow,
+            [this.itemPadding + "-item-padding"]: this.itemPadding,
+        };
+        super.prepareData(context, instance);
+    }
+    explore(context, instance) {
+        context.push("lastMenu", this);
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("lastMenu");
+    }
+    render(context, instance, key) {
+        return (_jsx(MenuComponent, { instance: instance, children: this.renderChildren(context, instance) }, key));
+    }
+    add(item) {
+        if (item && (item.tag == "a" || item.tag == "hr")) {
+            let mi = {
+                type: MenuItem,
+                items: item,
+                autoClose: item.tag == "a",
+            };
+            if (isDefined(item.if))
+                mi.if = item.if;
+            if (isDefined(item.visible))
+                mi.visible = item.visible;
+            super.add(mi);
+        }
+        else
+            super.add(...arguments);
+    }
+}
+Menu.prototype.horizontal = false;
+Menu.prototype.defaultVerticalItemPadding = "medium";
+Menu.prototype.defaultHorizontalItemPadding = "small";
+Menu.prototype.icons = false;
+Menu.prototype.overflow = false;
+Menu.prototype.overflowIcon = "drop-down";
+Menu.Item = MenuItem;
+Menu.Spacer = MenuSpacer;
+export class MenuInstance extends HtmlElementInstance {
+}
+class MenuComponent extends VDOM.Component {
+    el = null;
+    isMeasureOverflowDisabled = false;
+    unsubscribeFocusOut;
+    unsubscribeResize;
+    constructor(props) {
+        super(props);
+        this.state = {
+            cursor: null,
+            nonOverflownItemCount: Infinity,
+        };
+        this.ref = (el) => {
+            this.el = el;
+        };
+    }
+    ref;
+    render() {
+        let { instance, children } = this.props;
+        let { data, widget } = instance;
+        let { CSS, baseClass } = widget;
+        this.itemInfo = Array.from({ length: children.length });
+        let parentNonOverflownItemCount = 0;
+        if (widget.showOnlyOverflowItems) {
+            let { parent } = instance;
+            while (parent != null) {
+                if (parent instanceof MenuInstance) {
+                    parentNonOverflownItemCount = parent.nonOverflownItemCount || 0;
+                    break;
+                }
+                parent = parent.parent;
+            }
+        }
+        return (_jsx("ul", { ref: this.ref, className: CSS.expand(data.classNames, CSS.state({
+                pack: this.state.nonOverflownItemCount < children.length - 1,
+            })), style: data.style, onBlur: FocusManager.nudge, onKeyDown: this.onKeyDown.bind(this), children: children.map((content, index) => {
+                let key = content && typeof content == "object" && content.key ? content.key : index;
+                if (content && content.spacer) {
+                    return widget.horizontal && _jsx("li", { className: CSS.element(baseClass, "spacer") }, key);
+                }
+                return (_jsx(MenuItemComponent, { cursor: key === this.state.cursor, hidden: index < parentNonOverflownItemCount ||
+                        (index >= this.state.nonOverflownItemCount && index + 1 != children.length), instance: instance, itemInfo: this.itemInfo, itemKey: key, itemIndex: index, moveCursor: this.moveCursor.bind(this), children: content }, key));
+            }) }));
+    }
+    moveCursor(itemKey) {
+        if (itemKey != this.state.cursor) {
+            debug(menuFlag, "Menu", "moveCursor", itemKey);
+            this.setState({ cursor: itemKey });
+        }
+    }
+    onKeyDown(e) {
+        //ignore the event if it comes from an input element
+        if (isTextInputElement(e.target))
+            return;
+        let { instance } = this.props;
+        let { widget } = instance;
+        let keyCode = e.keyCode;
+        debug(menuFlag, "Menu", "keyDown", this.el, keyCode);
+        let { horizontal } = widget;
+        if (keyCode == KeyCode.tab) {
+            if (horizontal)
+                keyCode = e.shiftKey ? KeyCode.left : KeyCode.up;
+            else
+                keyCode = e.shiftKey ? KeyCode.right : KeyCode.down;
+        }
+        if (this.state.cursor != null) {
+            let cursorIndex = this.itemInfo.findIndex((a) => a.key == this.state.cursor);
+            if (horizontal ? keyCode == KeyCode.left : keyCode == KeyCode.up) {
+                for (let c = cursorIndex - 1; c >= 0; c--)
+                    if (this.itemInfo[c].focusable) {
+                        FocusManager.focusFirst(this.itemInfo[c].el);
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return;
+                    }
+            }
+            if (horizontal ? keyCode == KeyCode.right : keyCode == KeyCode.down) {
+                for (let c = cursorIndex + 1; c < this.itemInfo.length; c++)
+                    if (this.itemInfo[c].focusable) {
+                        FocusManager.focusFirst(this.itemInfo[c].el);
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return;
+                    }
+            }
+        }
+        switch (keyCode) {
+            case KeyCode.home:
+                if (this.itemInfo[0].focusable) {
+                    FocusManager.focusFirst(this.itemInfo[0].el);
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                break;
+            case KeyCode.end:
+                if (this.itemInfo[this.itemInfo.length - 1].focusable) {
+                    FocusManager.focusFirst(this.itemInfo[this.itemInfo.length - 1].el);
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    onFocusOut(elementReceivingFocus) {
+        debug(menuFlag, "Menu", "focusout", this.el, elementReceivingFocus);
+        if (this.el && !isSelfOrDescendant(this.el, elementReceivingFocus))
+            this.moveCursor(null);
+    }
+    componentDidMount() {
+        let { widget } = this.props.instance;
+        if (widget.autoFocus && this.itemInfo.length > 0 && !isFocusedDeep(this.el))
+            FocusManager.focusFirst(this.itemInfo[0].el);
+        if (widget.overflow) {
+            this.measureOverflow();
+            this.unsubscribeResize = ResizeManager.trackElement(this.el, this.measureOverflow.bind(this));
+        }
+        this.unsubscribeFocusOut = FocusManager.onFocusOut(this.el, this.onFocusOut.bind(this));
+    }
+    componentDidUpdate() {
+        this.measureOverflow();
+    }
+    measureOverflow() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        let { CSS, baseClass } = widget;
+        if (!widget.overflow)
+            return;
+        let spacerClass = CSS.element(baseClass, "spacer");
+        let nonOverflownItemCount = 0;
+        let fitItemsWidth = 0;
+        let children = Array.from(this.el.children);
+        let widths = children.map((c) => {
+            if (!(c instanceof HTMLElement))
+                return 0;
+            if (c.classList.contains(spacerClass))
+                return 0;
+            let w = c.offsetWidth;
+            let style = getComputedStyle(c);
+            let marginLeft = style.getPropertyValue("margin-left");
+            if (isString(marginLeft) && marginLeft.endsWith("px"))
+                w += parseFloat(marginLeft);
+            let marginRight = style.getPropertyValue("margin-right");
+            if (isString(marginRight) && marginRight.endsWith("px"))
+                w += parseFloat(marginRight);
+            return w;
+        });
+        let clientWidth = this.el.clientWidth;
+        let overflowWidth = widths[widths.length - 1];
+        for (let i = 0; i < widths.length - 1; i++) {
+            let overflowReduction = i == widths.length - 2 ? 0 : overflowWidth;
+            if (widths[i] + fitItemsWidth > clientWidth - overflowReduction)
+                break;
+            nonOverflownItemCount++;
+            fitItemsWidth += widths[i];
+        }
+        instance.nonOverflownItemCount = nonOverflownItemCount;
+        if (!this.isMeasureOverflowDisabled && this.state.nonOverflownItemCount != nonOverflownItemCount) {
+            this.isMeasureOverflowDisabled = true;
+            this.setState({
+                nonOverflownItemCount,
+            }, () => {
+                this.isMeasureOverflowDisabled = false;
+            });
+        }
+    }
+    componentWillUnmount() {
+        this.unsubscribeFocusOut && this.unsubscribeFocusOut();
+        this.unsubscribeResize && this.unsubscribeResize();
+    }
+}
+Menu.prototype.baseClass = "menu";
+Menu.prototype.tag = "ul";
+Widget.alias("menu", Menu);
+class MenuItemComponent extends VDOM.Component {
+    el = null;
+    constructor(props) {
+        super(props);
+        this.state = { focusable: true };
+    }
+    render() {
+        let { itemInfo, itemIndex, itemKey, instance, cursor, hidden } = this.props;
+        let { widget } = instance;
+        let { CSS, baseClass } = widget;
+        let mods = {
+            cursor: cursor,
+            focusable: this.state.focusable,
+            hidden,
+        };
+        return (_jsx("li", { ref: (c) => {
+                this.el = c;
+                itemInfo[itemIndex] = {
+                    el: c,
+                    focusable: this.state.focusable,
+                    key: itemKey,
+                };
+            }, className: CSS.element(baseClass, "item", mods), onFocus: this.onFocus.bind(this), onMouseDown: this.onMouseDown.bind(this), onKeyDown: this.onKeyDown.bind(this), children: this.props.children }));
+    }
+    onFocus(e) {
+        FocusManager.nudge();
+        debug(menuFlag, "MenuItem", "focus", this.el, e.target);
+        this.props.moveCursor(this.props.itemKey);
+    }
+    onKeyDown(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onKeyDown)
+            instance.invoke("onKeyDown", e, instance);
+    }
+    onMouseDown(e) {
+        e.stopPropagation();
+        //e.preventDefault(); //Causes problems with focusing menu items. Figure out why is this really needed?
+        debug(menuFlag, "MenuItem", "mouseDown", this.el);
+        if (this.state.focusable) {
+            let { itemInfo, itemIndex } = this.props;
+            let el = itemInfo[itemIndex].el;
+            let focusableSubElement = closest(e.target, (domEl) => domEl === el || isFocusable(domEl));
+            if (focusableSubElement == el) {
+                //the user clicked on an unfocusable branch of elements
+                //lets find a focusable child element and focus it
+                //TODO: explain why is this really needed
+                let focusedEl = getFocusedElement();
+                let focusedChild = FocusManager.focusFirst(el);
+                if (focusedChild !== focusedEl) {
+                    debug(menuFlag, "MenuItem", "focusChild", focusedChild, focusedEl);
+                }
+            }
+        }
+    }
+    componentDidMount() {
+        this.componentDidUpdate();
+    }
+    componentDidUpdate() {
+        let { itemInfo, itemIndex, hidden } = this.props;
+        let focusable = !hidden && !!findFirst(this.el, isFocusable);
+        if (focusable !== this.state.focusable) {
+            itemInfo[itemIndex].focusable = focusable;
+            this.setState({ focusable: focusable });
+        }
+    }
+}

package/build/widgets/nav/MenuItem.d.ts

@@ -0,0 +1,68 @@
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { DropdownConfig } from "../overlay/Dropdown";
+import { KeyboardShortcut } from "../../ui/keyboardShortcuts";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+import { Config } from "../../ui/Prop";
+export interface MenuItemConfig extends HtmlElementConfig {
+    baseClass?: string;
+    hoverFocusTimeout?: number;
+    clickToOpen?: boolean;
+    hoverToOpen?: boolean;
+    horizontal?: boolean;
+    arrow?: BooleanProp;
+    dropdownOptions?: Partial<DropdownConfig>;
+    showCursor?: boolean;
+    pad?: boolean;
+    placement?: string;
+    placementOrder?: string;
+    autoClose?: boolean;
+    icons?: boolean;
+    icon?: StringProp;
+    keyboardShortcut?: KeyboardShortcut | false;
+    tooltip?: string | Config;
+    openOnFocus?: boolean;
+    disabled?: BooleanProp;
+    checked?: BooleanProp;
+    confirm?: Prop<string | Config>;
+    checkedIcon?: string;
+    uncheckedIcon?: string;
+    padding?: string;
+    hideCursor?: boolean;
+    dropdown?: any;
+}
+export declare class MenuItemInstance extends HtmlElementInstance<MenuItem> {
+    horizontal?: boolean;
+    padding?: string;
+    icons?: boolean;
+    parentPositionChangeEvent?: any;
+}
+export declare class MenuItem extends HtmlElement<MenuItemConfig, MenuItemInstance> {
+    baseClass: string;
+    hoverFocusTimeout: number;
+    clickToOpen: boolean;
+    hoverToOpen: boolean;
+    horizontal: boolean;
+    arrow: BooleanProp;
+    dropdownOptions: Partial<DropdownConfig> | null;
+    showCursor: boolean;
+    pad: boolean;
+    placement: string | null;
+    placementOrder: string | null;
+    autoClose: boolean;
+    checkedIcon: string;
+    uncheckedIcon: string;
+    keyboardShortcut: KeyboardShortcut | false;
+    openOnFocus: boolean;
+    hideCursor?: boolean;
+    checked?: BooleanProp;
+    padding?: string;
+    dropdown?: any;
+    init(): void;
+    declareData(): void;
+    explore(context: RenderingContext, instance: MenuItemInstance): void;
+    exploreCleanup(context: RenderingContext, instance: MenuItemInstance): void;
+    render(context: RenderingContext, instance: MenuItemInstance, key: string): import("react/jsx-runtime").JSX.Element;
+    add(element: any): void;
+    addText(text: any): void;
+}