cx 26.0.1 → 26.0.3

package/build/widgets/ProgressBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { isNumber } from "../util/isNumber";
+export class ProgressBar extends Widget {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData({
+            disabled: undefined,
+            text: undefined,
+            value: undefined,
+        }, ...args);
+    }
+    render(context, instance, key) {
+        let { widget, data } = instance;
+        let { text, value, disabled } = data;
+        let { CSS, baseClass } = widget;
+        if (!isNumber(value))
+            value = 0;
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state({ disabled })), style: data.style, children: [_jsx("div", { className: CSS.element(this.baseClass, "indicator"), style: {
+                        width: `${(value > 1 ? 1 : value < 0 ? 0 : value) * 100}%`,
+                    } }), _jsx("div", { className: CSS.element(this.baseClass, "label"), children: text })] }, key));
+    }
+}
+ProgressBar.prototype.styled = true;
+ProgressBar.prototype.disabled = false;
+ProgressBar.prototype.baseClass = "progressbar";

package/build/widgets/Resizer.d.ts

@@ -0,0 +1,30 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import { NumberProp } from "../ui/Prop";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig, WidgetStyleConfig } from "../ui/Widget";
+export interface ResizerConfig extends WidgetConfig, WidgetStyleConfig {
+    /** Make resizer horizontal. */
+    horizontal?: boolean;
+    /** Use the element after the the resizer for size measurements. */
+    forNextElement?: boolean;
+    /** A binding for the new size. */
+    size?: NumberProp;
+    /** Default value that will be set when the user double click on the resizer. */
+    defaultSize?: NumberProp;
+    /** Minimum size of the element. */
+    minSize?: NumberProp;
+    /** Maximum size of the element. */
+    maxSize?: NumberProp;
+}
+export declare class Resizer extends Widget<ResizerConfig> {
+    baseClass: string;
+    horizontal?: boolean;
+    forNextElement?: boolean;
+    defaultSize?: NumberProp | null;
+    minSize?: NumberProp;
+    maxSize?: NumberProp;
+    constructor(config?: ResizerConfig);
+    declareData(...args: Record<string, unknown>[]): void;
+    render(context: RenderingContext, instance: Instance<Resizer>, key: string): React.ReactNode;
+}

package/build/widgets/Resizer.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VDOM, Widget } from "../ui/Widget";
+import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
+export class Resizer extends Widget {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            size: undefined,
+            defaultSize: undefined,
+            minSize: undefined,
+            maxSize: undefined,
+        });
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return _jsx(ResizerCmp, { instance: instance, data: data }, key);
+    }
+}
+Resizer.prototype.baseClass = "resizer";
+Resizer.prototype.styled = true;
+Resizer.prototype.horizontal = false;
+Resizer.prototype.forNextElement = false;
+Resizer.prototype.defaultSize = null;
+Resizer.prototype.minSize = 0;
+Resizer.prototype.maxSize = 1e6;
+class ResizerCmp extends VDOM.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            dragged: false,
+            offset: 0,
+        };
+    }
+    shouldComponentUpdate(props, state) {
+        return state != this.state;
+    }
+    render() {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        let { baseClass, CSS } = widget;
+        return (_jsx("div", { ref: (el) => {
+                this.el = el;
+            }, className: CSS.expand(data.classNames, CSS.state({
+                vertical: !widget.horizontal,
+                horizontal: widget.horizontal,
+            })), style: data.style, onDoubleClick: (e) => {
+                instance.set("size", data.defaultSize);
+            }, onMouseDown: (e) => {
+                let initialPosition = getCursorPos(e);
+                this.setState({ dragged: true, initialPosition });
+            }, onMouseUp: (e) => {
+                this.setState({ dragged: false });
+            }, onMouseMove: this.startCapture.bind(this), onMouseLeave: this.startCapture.bind(this), children: _jsx("div", { className: CSS.element(baseClass, "handle", { dragged: this.state.dragged }), style: {
+                    left: !widget.horizontal ? this.state.offset : 0,
+                    top: widget.horizontal ? this.state.offset : 0,
+                } }) }));
+    }
+    startCapture(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (this.state.dragged && !this.hasCapture) {
+            this.hasCapture = true;
+            captureMouseOrTouch(e, this.onHandleMove.bind(this), this.onDragComplete.bind(this), this.state.initialPosition, widget.horizontal ? "row-resize" : "col-resize");
+        }
+    }
+    onHandleMove(e, initialPosition) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        let currentPosition = getCursorPos(e);
+        const offset = !widget.horizontal
+            ? currentPosition.clientX - initialPosition.clientX
+            : currentPosition.clientY - initialPosition.clientY;
+        let size = this.getNewSize(0);
+        let newSize = this.getNewSize(offset);
+        let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
+        this.setState({ offset: allowedOffset });
+    }
+    getNewSize(offset) {
+        let { instance, data } = this.props;
+        let { horizontal, forNextElement } = instance.widget;
+        if (!this.el ||
+            (!forNextElement && !this.el.previousElementSibling) ||
+            (forNextElement && !this.el.nextElementSibling))
+            return 0;
+        let newSize;
+        if (horizontal) {
+            if (forNextElement)
+                newSize = this.el.nextElementSibling.offsetHeight - offset;
+            else
+                newSize = this.el.previousElementSibling.offsetHeight + offset;
+        }
+        else {
+            if (forNextElement)
+                newSize = this.el.nextElementSibling.offsetWidth - offset;
+            else
+                newSize = this.el.previousElementSibling.offsetWidth + offset;
+        }
+        return Math.max(data.minSize, Math.min(newSize, data.maxSize));
+    }
+    onDragComplete() {
+        this.hasCapture = false;
+        let { instance } = this.props;
+        instance.set("size", this.getNewSize(this.state.offset));
+        this.setState({
+            dragged: false,
+            offset: 0,
+        });
+    }
+}

package/build/widgets/Sandbox.d.ts

@@ -0,0 +1,40 @@
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding } from "../data/Binding";
+import { ExposedValueView } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+export interface SandboxConfig extends PureContainerConfig {
+    /** Binding to the object that holds sandbox data. */
+    storage: WritableProp<Record<string, any>>;
+    /** Key used to identify the sandbox instance within the storage. */
+    key?: StringProp;
+    /** Alias for `key`. */
+    accessKey?: StringProp;
+    /** Alias used to expose sandbox data. Default is `$page`. */
+    recordName?: string;
+    /** Alias for `recordName`. */
+    recordAlias?: string;
+    /** Indicate that parent store data should not be mutated. */
+    immutable?: boolean;
+    /** Indicate that sandbox store data should not be mutated. */
+    sealed?: boolean;
+}
+export interface SandboxInstance extends Instance {
+    store: ExposedValueView;
+}
+export declare class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+    storage: WritableProp<Record<string, any>>;
+    key?: StringProp;
+    recordName?: string;
+    recordAlias?: string;
+    accessKey?: StringProp;
+    immutable?: boolean;
+    sealed?: boolean;
+    storageBinding: Binding;
+    init(): void;
+    initInstance(context: RenderingContext, instance: SandboxInstance): void;
+    applyParentStore(instance: SandboxInstance): void;
+    declareData(...args: Record<string, unknown>[]): void;
+    prepareData(context: RenderingContext, instance: SandboxInstance): void;
+}

package/build/widgets/Sandbox.js

@@ -0,0 +1,54 @@
+import { Widget } from "../ui/Widget";
+import { PureContainerBase } from "../ui/PureContainer";
+import { Binding } from "../data/Binding";
+import { ExposedValueView } from "../data/ExposedValueView";
+export class Sandbox extends PureContainerBase {
+    init() {
+        if (this.recordAlias)
+            this.recordName = this.recordAlias;
+        if (this.accessKey)
+            this.key = this.accessKey;
+        this.storageBinding = Binding.get(this.storage);
+        super.init();
+    }
+    initInstance(context, instance) {
+        instance.store = new ExposedValueView({
+            store: instance.parentStore,
+            containerBinding: this.storageBinding,
+            key: null,
+            recordName: this.recordName,
+            immutable: this.immutable,
+        });
+        super.initInstance(context, instance);
+    }
+    applyParentStore(instance) {
+        instance.store.setStore(instance.parentStore);
+    }
+    declareData(...args) {
+        super.declareData({
+            storage: undefined,
+            key: undefined,
+        }, ...args);
+    }
+    prepareData(context, instance) {
+        var { store, data } = instance;
+        if (store.getKey() !== data.key) {
+            //when navigating to a page using the same widget tree as the previous page
+            //everything needs to be reinstantiated, e.g. user/1 => user/2
+            instance.store = new ExposedValueView({
+                store: store,
+                containerBinding: this.storageBinding,
+                key: data.key,
+                recordName: this.recordName,
+                immutable: this.immutable,
+                sealed: this.sealed,
+            });
+            instance.clearChildrenCache();
+        }
+        super.prepareData(context, instance);
+    }
+}
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+Widget.alias("sandbox", Sandbox);

package/build/widgets/Section.d.ts

@@ -0,0 +1,52 @@
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { ContainerBase, StyledContainerConfig } from "../ui/Container";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
+import { Create } from "../util/Component";
+export interface SectionConfig extends StyledContainerConfig {
+    id?: Prop<string | number>;
+    /** Add default padding to the section body. Default is `true`. */
+    pad?: BooleanProp;
+    /** A custom style which will be applied to the header. */
+    headerStyle?: StyleProp;
+    /** Additional CSS class to be applied to the header. */
+    headerClass?: ClassProp;
+    /** A custom style which will be applied to the body. */
+    bodyStyle?: StyleProp;
+    /** Additional CSS class to be applied to the section body. */
+    bodyClass?: ClassProp;
+    /** A custom style which will be applied to the footer. */
+    footerStyle?: StyleProp;
+    /** Additional CSS class to be applied to the footer. */
+    footerClass?: ClassProp;
+    /** Section's title. */
+    title?: StringProp;
+    /** Contents that should go in the header. */
+    header?: Create<typeof Widget>;
+    /** Contents that should go in the footer. */
+    footer?: Create<typeof Widget>;
+    /** Title heading level (1-6) */
+    hLevel?: number;
+}
+export declare class Section extends ContainerBase<SectionConfig, Instance> {
+    headerStyle?: StyleProp;
+    footerStyle?: StyleProp;
+    bodyStyle?: StyleProp;
+    title?: StringProp;
+    header?: Create<typeof Widget>;
+    footer?: Create<typeof Widget>;
+    hLevel?: number;
+    pad?: BooleanProp;
+    baseClass: string;
+    init(): void;
+    add(item: any): void;
+    declareData(...args: Record<string, unknown>[]): void;
+    initComponents(context: RenderingContext, instance: Instance): void;
+    getHeader(): Widget | null;
+    getFooter(): Widget | null;
+    prepareData(context: RenderingContext, instance: Instance): void;
+    initInstance(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): React.ReactNode;
+}

package/build/widgets/Section.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, getContent } from "../ui/Widget";
+import { ContainerBase } from "../ui/Container";
+import { Heading } from "./Heading";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+export class Section extends ContainerBase {
+    init() {
+        if (isString(this.headerStyle))
+            this.headerStyle = parseStyle(this.headerStyle);
+        if (isString(this.footerStyle))
+            this.footerStyle = parseStyle(this.footerStyle);
+        if (isString(this.bodyStyle))
+            this.bodyStyle = parseStyle(this.bodyStyle);
+        super.init();
+    }
+    add(item) {
+        if (item && item.putInto == "header")
+            this.header = {
+                ...item,
+                putInto: null,
+            };
+        else if (item && item.putInto == "footer")
+            this.footer = {
+                ...item,
+                putInto: null,
+            };
+        else
+            super.add(item);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            id: undefined,
+            headerStyle: { structured: true },
+            headerClass: { structured: true },
+            bodyStyle: { structured: true },
+            bodyClass: { structured: true },
+            footerStyle: { structured: true },
+            footerClass: { structured: true },
+        });
+    }
+    initComponents(context, instance) {
+        super.initComponents(context, instance, {
+            header: this.getHeader(),
+            footer: this.getFooter(),
+        });
+    }
+    getHeader() {
+        if (this.title)
+            return Widget.create(Heading, {
+                text: this.title,
+                level: this.hLevel,
+            });
+        if (this.header)
+            return Heading.create(this.header);
+        return null;
+    }
+    getFooter() {
+        if (this.footer)
+            return Widget.create(this.footer);
+        return null;
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        data.stateMods = {
+            ...data.stateMods,
+            pad: this.pad,
+        };
+        super.prepareData(context, instance);
+    }
+    initInstance(context, instance) {
+        instance.eventHandlers = instance.getJsxEventProps();
+        super.initInstance(context, instance);
+    }
+    render(context, instance, key) {
+        let { data, components } = instance;
+        let eventHandlers = instance.eventHandlers;
+        let header, footer;
+        let { CSS, baseClass } = this;
+        if (components?.header) {
+            header = (_jsx("header", { className: CSS.expand(CSS.element(baseClass, "header"), data.headerClass), style: data.headerStyle, children: getContent(components.header.render(context)) }));
+        }
+        if (components?.footer) {
+            footer = (_jsx("footer", { className: CSS.expand(CSS.element(baseClass, "footer"), data.footerClass), style: data.footerStyle, children: getContent(components.footer.render(context)) }));
+        }
+        return (_jsxs("section", { className: data.classNames, style: data.style, id: data.id, ...eventHandlers, children: [header, _jsx("div", { className: CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass), style: data.bodyStyle, children: this.renderChildren(context, instance) }), footer] }, key));
+    }
+}
+Section.prototype.styled = true;
+Section.prototype.pad = true;
+Section.prototype.baseClass = "section";
+Section.prototype.hLevel = 3;

package/build/widgets/autoFocus.d.ts

@@ -0,0 +1 @@
+export declare function autoFocus(el: HTMLElement | undefined | null, component: any): void;

package/build/widgets/autoFocus.js

@@ -0,0 +1,9 @@
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+export function autoFocus(el, component) {
+    let data = component.props.data || component.props.instance.data;
+    let autoFocusValue = el && data.autoFocus;
+    if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent())
+        FocusManager.focus(el);
+    component.autoFocusValue = autoFocusValue;
+}

package/build/widgets/cx.d.ts

@@ -0,0 +1,2 @@
+export declare function cx(typeName: any, props?: any, ...children: any[]): any;
+export declare function react(config: any): any;

package/build/widgets/cx.js

@@ -0,0 +1,53 @@
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { flattenProps } from "../ui/flattenProps";
+let htmlFactoryCache = {};
+function getHtmlElementFactory(tagName) {
+    let factory = htmlFactoryCache[tagName];
+    if (factory)
+        return factory;
+    return (htmlFactoryCache[tagName] = createComponentFactory(() => { }, (config) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)), { tag: tagName }));
+}
+export function cx(typeName, props, ...children) {
+    if (isArray(typeName))
+        return typeName;
+    if (isFunction(typeName) && isUndefined(props))
+        return createFunctionalComponent((config) => typeName(flattenProps(config)));
+    if (typeName.type || typeName.$type)
+        return typeName;
+    if (children && children.length == 0)
+        children = [];
+    if (children && children.length == 1)
+        children = children[0];
+    if (typeName == "cx")
+        return children;
+    if (typeName == "react")
+        return react(children);
+    if (isString(typeName) && typeName[0] == typeName[0].toLowerCase())
+        typeName = getHtmlElementFactory(typeName);
+    return {
+        $type: typeName,
+        $props: props,
+        jsxAttributes: props && Object.keys(props),
+        children,
+    };
+}
+export function react(config) {
+    if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config))
+        return config;
+    if (isArray(config))
+        return config.map(react);
+    let type = config.$type;
+    if (isComponentFactory(type) && type.$meta && type.$meta.tag)
+        type = type.$meta.tag;
+    if (isArray(config.children))
+        return VDOM.createElement(type, config.$props, ...config.children.map(react));
+    return VDOM.createElement(type, config.$props, react(config.children));
+}

package/build/widgets/drag-drop/DragHandle.d.ts

@@ -0,0 +1,12 @@
+import { StyledContainerBase, StyledContainerConfig } from '../../ui/Container';
+import { RenderingContext } from '../../ui/RenderingContext';
+import { Instance } from '../../ui/Instance';
+export interface DragHandleConfig extends StyledContainerConfig {
+    /** Base CSS class to be applied to the element. Defaults to 'draghandle'. */
+    baseClass?: string;
+}
+export declare class DragHandle extends StyledContainerBase<DragHandleConfig> {
+    constructor(config?: DragHandleConfig);
+    explore(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+}

package/build/widgets/drag-drop/DragHandle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from '../../ui/Widget';
+import { StyledContainerBase } from '../../ui/Container';
+import { ddHandle } from '../drag-drop/ops';
+import { isArray } from '../../util/isArray';
+export class DragHandle extends StyledContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    explore(context, instance) {
+        if (isArray(context.dragHandles))
+            context.dragHandles.push(instance);
+        super.explore(context, instance);
+    }
+    render(context, instance, key) {
+        const { data } = instance;
+        return (_jsx("div", { className: data.classNames, style: data.style, onTouchStart: ddHandle, onMouseDown: ddHandle, onTouchMove: ddHandle, onMouseMove: ddHandle, onTouchEnd: ddHandle, onMouseUp: ddHandle, children: this.renderChildren(context, instance) }, key));
+    }
+}
+DragHandle.prototype.styled = true;
+DragHandle.prototype.baseClass = 'draghandle';
+Widget.alias('draghandle', DragHandle);

package/build/widgets/drag-drop/DragSource.d.ts

@@ -0,0 +1,55 @@
+/** @jsxImportSource react */
+import { ContainerBase, ContainerConfig } from "../../ui/Container";
+import { Instance } from "../../ui/Instance";
+import { StringProp, StyleProp, ClassProp, Config } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface DragSourceConfig extends ContainerConfig {
+    /**
+     * Data about the drag source that can be used by drop zones to test if
+     * drag source is acceptable and to perform drop operations.
+     */
+    data?: any;
+    /**
+     * Set to true to hide the element while being dragged.
+     * Use if drop zones are configured to expand to indicate where drop will occur.
+     */
+    hideOnDrag?: boolean;
+    /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
+    handled?: boolean;
+    /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
+    baseClass?: string;
+    onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => any;
+    onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: Instance) => void;
+    id?: StringProp;
+    /** Custom contents to be displayed during drag & drop operation. */
+    clone?: Config;
+    /** CSS styles to be applied to the clone of the element being dragged. */
+    cloneStyle?: StyleProp;
+    /** CSS styles to be applied to the element being dragged. */
+    draggedStyle?: StyleProp;
+    /** Additional CSS class to be applied to the clone of the element being dragged. */
+    cloneClass?: ClassProp;
+    /** Additional CSS class to be applied to the element being dragged. */
+    draggedClass?: ClassProp;
+}
+export interface DragSourceInstance extends Instance<DragSource> {
+    dragHandles: any[];
+}
+export declare class DragSource extends ContainerBase<DragSourceConfig, DragSourceInstance> {
+    styled: boolean;
+    baseClass: string;
+    hideOnDrag: boolean;
+    handled: boolean;
+    data: any;
+    clone?: Config;
+    cloneStyle: any;
+    draggedStyle: any;
+    onDragStart?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => any;
+    onDragEnd?: (e: React.MouseEvent | React.TouchEvent, instance: DragSourceInstance) => void;
+    constructor(config?: DragSourceConfig);
+    init(): void;
+    declareData(): void;
+    explore(context: RenderingContext, instance: DragSourceInstance): void;
+    exploreCleanup(context: RenderingContext, instance: DragSourceInstance): void;
+    render(context: RenderingContext, instance: DragSourceInstance, key: string): import("react/jsx-runtime").JSX.Element;
+}