cx 26.0.1 → 26.0.3

package/build/widgets/nav/Scroller.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../Icon";
+import { VDOM } from "../../ui/Widget";
+import { Container } from "../../ui/Container";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { isString, scrollElementIntoView } from "../../util";
+export class Scroller extends Container {
+    init() {
+        if (!this.vertical)
+            this.horizontal = true; //default
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            scrollIntoViewSelector: undefined,
+        });
+    }
+    render(context, instance, key) {
+        return (_jsx(HScrollerComponent, { widget: this, data: instance.data, children: this.renderChildren(context, instance) }, key));
+    }
+}
+Scroller.prototype.styled = true;
+Scroller.prototype.baseClass = "scroller";
+export class HScrollerComponent extends VDOM.Component {
+    unsubscribeResize;
+    stopScrolling;
+    scrollLeft;
+    scrollRight;
+    scrollUp;
+    scrollDown;
+    constructor(props) {
+        super(props);
+        this.stopScrolling = () => {
+            delete this.doScroll;
+        };
+        this.scrollLeft = (e) => this.scroll(e, "left");
+        this.scrollRight = (e) => this.scroll(e, "right");
+        this.scrollUp = (e) => this.scroll(e, "up");
+        this.scrollDown = (e) => this.scroll(e, "down");
+        this.state = { scrollable: false };
+    }
+    render() {
+        let { data, children, widget } = this.props;
+        let { CSS, baseClass } = widget;
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({
+                scrollable: this.state.scrollable,
+                horizontal: widget.horizontal,
+                vertical: widget.vertical,
+            })), style: data.style, ref: (el) => {
+                this.el = el;
+            }, children: [widget.horizontal && (_jsx("div", { className: CSS.element(baseClass, "left-arrow"), onMouseDown: this.scrollLeft, onTouchStart: this.scrollLeft, onMouseUp: this.stopScrolling, onTouchEnd: this.stopScrolling, children: Icon.render("drop-down", { className: CSS.element(baseClass, "icon") }) })), widget.horizontal && (_jsx("div", { className: CSS.element(baseClass, "right-arrow"), onMouseDown: this.scrollRight, onTouchStart: this.scrollRight, onMouseUp: this.stopScrolling, onTouchEnd: this.stopScrolling, children: Icon.render("drop-down", { className: CSS.element(baseClass, "icon") }) })), widget.vertical && (_jsx("div", { className: CSS.element(baseClass, "top-arrow"), onMouseDown: this.scrollUp, onTouchStart: this.scrollUp, onMouseUp: this.stopScrolling, onTouchEnd: this.stopScrolling, children: Icon.render("drop-down", { className: CSS.element(baseClass, "icon") }) })), widget.vertical && (_jsx("div", { className: CSS.element(baseClass, "bottom-arrow"), onMouseDown: this.scrollDown, onTouchStart: this.scrollDown, onMouseUp: this.stopScrolling, onTouchEnd: this.stopScrolling, children: Icon.render("drop-down", { className: CSS.element(baseClass, "icon") }) })), _jsx("div", { className: CSS.element(baseClass, "clip"), ref: (el) => {
+                        this.clip = el;
+                    }, children: _jsx("div", { className: CSS.element(baseClass, "scroller"), ref: (el) => {
+                            this.scroller = el;
+                        }, children: _jsx("div", { className: CSS.element(baseClass, "content"), ref: (el) => {
+                                this.content = el;
+                            }, children: children }) }) })] }));
+    }
+    componentDidMount() {
+        this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
+        this.componentDidUpdate();
+    }
+    componentDidUpdate() {
+        let { widget } = this.props;
+        let scrollable = false;
+        if (widget.horizontal) {
+            let scrollSize = this.scroller.offsetHeight - this.scroller.clientHeight;
+            this.scroller.style.marginBottom = `${-scrollSize}px`;
+            if (this.content.scrollWidth > this.clip.clientWidth)
+                scrollable = true;
+        }
+        if (widget.vertical) {
+            let scrollSize = this.scroller.offsetWidth - this.scroller.clientWidth;
+            this.scroller.style.marginRight = `${-scrollSize}px`;
+            if (this.content.scrollHeight > this.clip.clientHeight)
+                scrollable = true;
+        }
+        if (scrollable != this.state.scrollable)
+            this.setState({ scrollable });
+        this.scrollIntoView();
+    }
+    componentWillUnmount() {
+        this.unsubscribeResize();
+    }
+    scroll(e, direction) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.doScroll = () => {
+            if (!this.scroller)
+                return;
+            switch (direction) {
+                case "left":
+                    this.scroller.scrollLeft -= 10;
+                    break;
+                case "right":
+                    this.scroller.scrollLeft += 10;
+                    break;
+                case "up":
+                    this.scroller.scrollTop -= 10;
+                    break;
+                case "down":
+                    this.scroller.scrollTop += 10;
+                    break;
+            }
+            if (this.doScroll)
+                requestAnimationFrame(this.doScroll);
+        };
+        this.doScroll();
+    }
+    scrollIntoView() {
+        let { data, widget } = this.props;
+        let { scrollIntoViewSelector } = data;
+        if (isString(scrollIntoViewSelector)) {
+            let child = this.el?.querySelector(scrollIntoViewSelector);
+            if (child)
+                scrollElementIntoView(child, widget.vertical, widget.horizontal);
+        }
+    }
+}
+export class HScroller extends Scroller {
+}
+HScroller.prototype.horizontal = true;
+export class VScroller extends Scroller {
+}
+VScroller.prototype.vertical = true;

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

@@ -0,0 +1,3 @@
+import { MenuItem } from './MenuItem';
+export declare class Submenu extends MenuItem {
+}

package/build/widgets/nav/Submenu.js

@@ -0,0 +1,3 @@
+import { MenuItem } from './MenuItem';
+export class Submenu extends MenuItem {
+}

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

@@ -0,0 +1,40 @@
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "../HtmlElement";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+export interface TabConfig extends HtmlElementConfig {
+    /** A value to be written to the `value` property if the tab is clicked. */
+    tab?: Prop<string | number>;
+    /**
+     * Value of the currently selected tab.
+     * If `value` is equal to `tab`, the tab appears active.
+     */
+    value?: StringProp;
+    /** Set to `true` to disable selection. */
+    disabled?: BooleanProp;
+    /** Base CSS class to be applied to the element. No class is applied by default. */
+    baseClass?: string;
+    /** Name of the HTML element to be rendered. Default is `div`. */
+    tag?: string;
+    /**
+     * Determines if tab should receive focus on `mousedown` event.
+     * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+     */
+    focusOnMouseDown?: boolean;
+    /** Set to true to set the default tab. */
+    default?: boolean;
+}
+export declare class Tab extends HtmlElement<TabConfig> {
+    baseClass: string;
+    tag: string;
+    focusOnMouseDown: boolean;
+    default: boolean;
+    shape?: string;
+    onMouseDown?: any;
+    onClick?: any;
+    declareData(): void;
+    prepareData(context: RenderingContext, instance: HtmlElementInstance): void;
+    isValidHtmlAttribute(attrName: string): string | false;
+    attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any): void;
+    handleClick(e: any, instance: Instance): void;
+}

package/build/widgets/nav/Tab.js

@@ -0,0 +1,66 @@
+import { Widget } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
+export class Tab extends HtmlElement {
+    declareData() {
+        super.declareData({
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+        }, ...arguments);
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            active: data.tab == data.value,
+            disabled: data.disabled,
+            shape: this.shape,
+        };
+        if (this.default && isUndefined(data.value))
+            instance.set("value", data.tab);
+        super.prepareData(context, instance);
+    }
+    isValidHtmlAttribute(attrName) {
+        switch (attrName) {
+            case "value":
+            case "tab":
+            case "text":
+            case "disabled":
+            case "default":
+                return false;
+            default: return super.isValidHtmlAttribute(attrName);
+        }
+    }
+    attachProps(context, instance, props) {
+        super.attachProps(context, instance, props);
+        let { data } = instance;
+        if (!data.disabled) {
+            props.href = "#";
+            delete props.value;
+            props.onMouseDown = (e) => {
+                if (this.onMouseDown)
+                    instance.invoke("onMouseDown", e, instance);
+                preventFocusOnTouch(e);
+            };
+            props.onClick = (e) => this.handleClick(e, instance);
+        }
+    }
+    handleClick(e, instance) {
+        if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        let { data } = instance;
+        if (data.disabled)
+            return;
+        instance.set("value", data.tab);
+    }
+}
+Tab.prototype.baseClass = "tab";
+Tab.prototype.tag = "a";
+Tab.prototype.focusOnMouseDown = false;
+Tab.prototype.default = false;
+Widget.alias("tab", Tab);

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

@@ -0,0 +1,10 @@
+export * from './Route';
+export * from './RedirectRoute';
+export * from './Tab';
+export * from './Link';
+export * from './LinkButton';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuSpacer';
+export * from './Submenu';
+export * from './Scroller';

package/build/widgets/nav/index.js

@@ -0,0 +1,10 @@
+export * from './Route';
+export * from './RedirectRoute';
+export * from './Tab';
+export * from './Link';
+export * from './LinkButton';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuSpacer';
+export * from './Submenu';
+export * from './Scroller';

package/build/widgets/overlay/ContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { Dropdown, DropdownConfig } from "./Dropdown";
+import { View } from "../../data/View";
+import { Instance } from "../../ui/Instance";
+export interface ContextMenuConfig extends DropdownConfig {
+}
+export declare class ContextMenu extends Dropdown {
+    constructor(config?: ContextMenuConfig);
+}
+export declare const openContextMenu: (e: React.MouseEvent, content: any, storeOrInstance?: View | Instance, options?: any) => () => void;

package/build/widgets/overlay/ContextMenu.js

@@ -0,0 +1,31 @@
+import { Dropdown } from "./Dropdown";
+import { getCursorPos } from "./captureMouse";
+export class ContextMenu extends Dropdown {
+    constructor(config) {
+        super(config);
+    }
+}
+ContextMenu.prototype.trackMouse = true;
+ContextMenu.prototype.dismissOnFocusOut = true;
+ContextMenu.prototype.firstChildDefinesWidth = true;
+ContextMenu.prototype.matchWidth = false;
+ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
+ContextMenu.prototype.offset = 0;
+ContextMenu.prototype.autoFocus = true;
+ContextMenu.prototype.autoFocusFirstChild = false;
+ContextMenu.prototype.focusable = true;
+export const openContextMenu = (e, content, storeOrInstance, options) => {
+    e.preventDefault();
+    e.stopPropagation();
+    let position = getCursorPos(e);
+    let menu = ContextMenu.create({
+        relatedElement: e.currentTarget,
+        mousePosition: {
+            x: position.clientX,
+            y: position.clientY,
+        },
+        trackMouse: true,
+        items: content,
+    });
+    return menu.open(storeOrInstance, options);
+};

package/build/widgets/overlay/Dropdown.d.ts

@@ -0,0 +1,120 @@
+import { OverlayBase, OverlayConfig, OverlayInstance } from "./Overlay";
+import { StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface DropdownConfig extends OverlayConfig {
+    /** Placement option for the dropdown relative to the trigger element. */
+    placement?: StringProp | null;
+    /** Offset distance from the trigger element. */
+    offset?: number;
+    /** Match the dropdown width to the trigger element. */
+    matchWidth?: boolean;
+    /** Match the dropdown max-width to the trigger element. */
+    matchMaxWidth?: boolean;
+    /** Placement preference order. */
+    placementOrder?: string;
+    /** Constrain the dropdown within the viewport. */
+    constrain?: boolean;
+    /** Positioning strategy - "fixed", "absolute", or "auto". */
+    positioning?: string;
+    /** Use touch-friendly positioning on touch devices. */
+    touchFriendly?: boolean;
+    /** Show an arrow pointing to the trigger element. */
+    arrow?: boolean;
+    /** Add padding around the dropdown. */
+    pad?: boolean;
+    /** Element explosion distance for positioning. */
+    elementExplode?: number;
+    /** Padding from screen edges. */
+    screenPadding?: number;
+    /** First child element defines the height. */
+    firstChildDefinesHeight?: boolean;
+    /** First child element defines the width. */
+    firstChildDefinesWidth?: boolean;
+    /** The dropdown will be automatically closed if the page is scrolled a certain distance. */
+    closeOnScrollDistance?: number;
+    /** The element to position the dropdown relative to. */
+    relatedElement?: Element;
+    /** Callback to resolve the related element. */
+    onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
+    /** Callback to measure natural content size. */
+    onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => {
+        width?: number;
+        height?: number;
+    });
+    /** Callback when dropdown mounts. */
+    onDropdownDidMount?: string;
+    /** Callback to validate dropdown position. */
+    pipeValidateDropdownPosition?: string;
+    /** Callback when dropdown is dismissed after scroll. */
+    onDismissAfterScroll?: string;
+    /** Track mouse position for dropdowns. */
+    trackMouse?: boolean;
+    /** Track mouse X position. */
+    trackMouseX?: boolean;
+    /** Track mouse Y position. */
+    trackMouseY?: boolean;
+    /** Cover the related element with dropdown. */
+    cover?: boolean;
+}
+export declare class DropdownInstance<WidgetType extends DropdownBase<any, any> = Dropdown> extends OverlayInstance<WidgetType> {
+    mousePosition?: any;
+    parentPositionChangeEvent?: any;
+    initialScreenPosition?: any;
+    relatedElement?: HTMLElement;
+    needsBeacon?: boolean;
+}
+export declare class DropdownBase<Config extends DropdownConfig = DropdownConfig, InstanceType extends DropdownInstance<any> = DropdownInstance<any>> extends OverlayBase<Config, InstanceType> {
+    trackMouse?: boolean;
+    trackMouseX?: boolean;
+    trackMouseY?: boolean;
+    offset: number;
+    matchWidth?: boolean;
+    matchMaxWidth?: boolean;
+    placementOrder: string;
+    placement?: StringProp | null;
+    constrain?: boolean;
+    positioning?: string;
+    touchFriendly?: boolean;
+    arrow?: boolean;
+    elementExplode?: number;
+    screenPadding: number;
+    firstChildDefinesHeight?: boolean;
+    firstChildDefinesWidth?: boolean;
+    closeOnScrollDistance: number;
+    relatedElement?: HTMLElement;
+    onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
+    onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => {
+        width?: number;
+        height?: number;
+    });
+    onDropdownDidMount?: string;
+    pipeValidateDropdownPosition?: string;
+    onDismissAfterScroll?: string;
+    onKeyDown?: string;
+    cover?: boolean;
+    mousePosition?: any;
+    mouseTrap?: boolean;
+    createDelay?: number;
+    init(): void;
+    declareData(...args: any[]): void;
+    initInstance(context: RenderingContext, instance: InstanceType): void;
+    explore(context: RenderingContext, instance: InstanceType): void;
+    exploreCleanup(context: RenderingContext, instance: InstanceType): void;
+    overlayDidMount(instance: InstanceType, component: any): void;
+    overlayDidUpdate(instance: InstanceType, component: any): void;
+    overlayWillUnmount(instance: InstanceType, component: any): void;
+    dismissAfterScroll(data: any, instance: InstanceType, component: any): void;
+    updateDropdownPosition(instance: InstanceType, component: any): void;
+    applyFixedPositioningPlacementStyles(style: any, placement: string, contentSize: any, rel: any, el: HTMLElement, noAuto: boolean): void;
+    applyAbsolutePositioningPlacementStyles(style: any, placement: string, contentSize: any, rel: any, el: HTMLElement, noAuto: boolean): void;
+    applyPositioningPlacementStyles(style: any, placement: string, contentSize: any, parentBounds: any, el: HTMLElement, noAuto: boolean): void;
+    setDirectionClass(component: any, placement: string): void;
+    measureNaturalDropdownSize(instance: InstanceType, component: any): any;
+    findOptimalPlacement(contentSize: any, target: any, placement: string, lastPlacement: any): any;
+    handleKeyDown(e: React.KeyboardEvent, instance: InstanceType): void;
+    renderContents(context: RenderingContext, instance: InstanceType): any[];
+    render(context: RenderingContext, instance: InstanceType, key: string): any[];
+    getOverlayContainer(): HTMLElement;
+}
+export declare class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {
+}