cx 25.11.1 → 26.0.2

package/build/widgets/nav/MenuItem.js

@@ -0,0 +1,364 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Cx } from "../../ui/Cx";
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { findFirstChild, isFocusable, isSelfOrDescendant, closest, isFocusedDeep, isFocused } from "../../util/DOM";
+import { Dropdown } from "../overlay/Dropdown";
+import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
+import { debug, menuFlag } from "../../util/Debug";
+import DropdownIcon from "../icons/drop-down";
+import { Icon } from "../Icon";
+import { Localization } from "../../ui/Localization";
+import { KeyCode } from "../../util/KeyCode";
+import { registerKeyboardShortcut } from "../../ui/keyboardShortcuts";
+import { getActiveElement } from "../../util/getActiveElement";
+import { tooltipMouseLeave, tooltipMouseMove, tooltipParentWillUnmount, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { yesNo } from "../overlay/alerts";
+import { isTextInputElement, stopPropagation } from "../../util";
+import { unfocusElement } from "../../ui/FocusManager";
+export class MenuItemInstance extends HtmlElementInstance {
+}
+export class MenuItem extends HtmlElement {
+    init() {
+        if (this.hideCursor)
+            this.showCursor = false;
+        super.init();
+    }
+    declareData() {
+        super.declareData(...arguments, {
+            icon: undefined,
+            disabled: undefined,
+            checked: false,
+            arrow: undefined,
+            confirm: undefined,
+        });
+    }
+    explore(context, instance) {
+        instance.horizontal = this.horizontal;
+        let { lastMenu } = context;
+        if (lastMenu) {
+            instance.horizontal = lastMenu.horizontal;
+            instance.padding = lastMenu.itemPadding;
+            instance.icons = lastMenu.icons;
+        }
+        instance.parentPositionChangeEvent = context.parentPositionChangeEvent;
+        if (!instance.padding && this.pad == true)
+            instance.padding = "medium";
+        if (this.padding)
+            instance.padding = this.padding;
+        context.push("lastMenuItem", this);
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("lastMenuItem");
+    }
+    render(context, instance, key) {
+        return (_jsx(MenuItemComponent, { instance: instance, data: instance.data, children: instance.data.text ? _jsx("span", { children: instance.data.text }) : this.renderChildren(context, instance) }, key));
+    }
+    add(element) {
+        if (element && typeof element == "object" && element.putInto == "dropdown") {
+            this.dropdown = { ...element };
+            delete this.dropdown.putInto;
+        }
+        else
+            super.add(...arguments);
+    }
+    addText(text) {
+        this.add({
+            type: HtmlElement,
+            tag: "span",
+            text: text,
+        });
+    }
+}
+MenuItem.prototype.baseClass = "menuitem";
+MenuItem.prototype.hoverFocusTimeout = 500;
+MenuItem.prototype.hoverToOpen = false;
+MenuItem.prototype.clickToOpen = false;
+MenuItem.prototype.horizontal = true;
+MenuItem.prototype.arrow = false;
+MenuItem.prototype.dropdownOptions = null;
+MenuItem.prototype.showCursor = true;
+MenuItem.prototype.pad = true;
+MenuItem.prototype.placement = null; //default dropdown placement
+MenuItem.prototype.placementOrder = null; //allowed menu placements
+MenuItem.prototype.autoClose = false;
+MenuItem.prototype.checkedIcon = "check";
+MenuItem.prototype.uncheckedIcon = "dummy";
+MenuItem.prototype.keyboardShortcut = false;
+MenuItem.prototype.openOnFocus = true;
+Widget.alias("submenu", MenuItem);
+Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
+class MenuItemComponent extends VDOM.Component {
+    validateDropdownPosition;
+    unregisterKeyboardShortcut;
+    offParentPositionChange;
+    constructor(props) {
+        super(props);
+        this.state = {
+            dropdownOpen: false,
+        };
+    }
+    getDefaultPlacementOrder(horizontal) {
+        return horizontal
+            ? "down-right down down-left up-right up up-left"
+            : "right-down right right-up left-down left left-up";
+    }
+    getDropdown() {
+        let { horizontal, widget, parentPositionChangeEvent } = this.props.instance;
+        if (!this.dropdown && widget.dropdown) {
+            this.dropdown = Widget.create(Dropdown, {
+                matchWidth: false,
+                placementOrder: widget.placementOrder || this.getDefaultPlacementOrder(horizontal),
+                trackScroll: true,
+                inline: true,
+                onClick: stopPropagation,
+                ...widget.dropdownOptions,
+                relatedElement: this.el.parentElement,
+                placement: widget.placement,
+                onKeyDown: this.onDropdownKeyDown.bind(this),
+                onMouseDown: stopPropagation,
+                items: widget.dropdown,
+                parentPositionChangeEvent,
+                pipeValidateDropdownPosition: (cb) => {
+                    this.validateDropdownPosition = cb;
+                },
+                onDismissAfterScroll: () => {
+                    this.closeDropdown();
+                    return false;
+                },
+            });
+        }
+        return this.dropdown;
+    }
+    render() {
+        let { instance, data, children } = this.props;
+        let { widget } = instance;
+        let { CSS, baseClass } = widget;
+        let dropdown = this.state.dropdownOpen && (_jsx(Cx, { widget: this.getDropdown(), options: { name: "submenu" }, parentInstance: instance, subscribe: true }));
+        let arrow = data.arrow && _jsx(DropdownIcon, { className: CSS.element(baseClass, "arrow") });
+        let icon = null;
+        let checkbox = widget.checked != null;
+        if (checkbox) {
+            data.icon = data.checked ? widget.checkedIcon : widget.uncheckedIcon;
+        }
+        if (data.icon) {
+            icon = (_jsx("div", { className: CSS.element(baseClass, "button"), onClick: (e) => {
+                    e.preventDefault();
+                    if (!instance.set("checked", !data.checked))
+                        this.onClick(e);
+                }, onMouseDown: (e) => {
+                    if (checkbox)
+                        e.stopPropagation();
+                }, children: Icon.render(data.icon, { className: CSS.element(baseClass, "icon") }) }));
+        }
+        let empty = !children || (Array.isArray(children) && children.length == 0);
+        let classNames = CSS.expand(data.classNames, CSS.state({
+            open: this.state.dropdownOpen,
+            horizontal: instance.horizontal,
+            vertical: !instance.horizontal,
+            arrow: data.arrow,
+            cursor: widget.showCursor,
+            [instance.padding + "-padding"]: instance.padding,
+            icon: !!icon || instance.icons,
+            disabled: data.disabled,
+            empty,
+        }));
+        if (empty)
+            children = _jsx("span", { className: CSS.element(baseClass, "baseline"), children: "\u00A0" });
+        return (_jsxs("div", { className: classNames, style: data.style, tabIndex: !data.disabled && (widget.dropdown || widget.onClick || widget.checked) ? 0 : undefined, ref: (el) => {
+                this.el = el;
+            }, onKeyDown: this.onKeyDown.bind(this), onMouseDown: this.onMouseDown.bind(this), onMouseEnter: this.onMouseEnter.bind(this), onMouseLeave: this.onMouseLeave.bind(this), onFocus: this.onFocus.bind(this), onClick: this.onClick.bind(this), onBlur: this.onBlur.bind(this), children: [children, icon, arrow, dropdown] }));
+    }
+    componentDidUpdate() {
+        if (this.state.dropdownOpen && this.validateDropdownPosition) {
+            this.validateDropdownPosition();
+        }
+    }
+    componentDidMount() {
+        let { widget } = this.props.instance;
+        if (widget.keyboardShortcut)
+            this.unregisterKeyboardShortcut = registerKeyboardShortcut(widget.keyboardShortcut, (e) => {
+                this.el.focus(); //open the dropdown
+                this.onClick(e); //execute the onClick handler
+            });
+        tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
+    }
+    onDropdownKeyDown(e) {
+        debug(menuFlag, "MenuItem", "dropdownKeyDown");
+        let { horizontal } = this.props.instance;
+        if (e.keyCode == KeyCode.esc ||
+            (!isTextInputElement(e.currentTarget) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))) {
+            FocusManager.focus(this.el);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    clearAutoFocusTimer() {
+        if (this.autoFocusTimerId) {
+            debug(menuFlag, "MenuItem", "autoFocusCancel");
+            clearTimeout(this.autoFocusTimerId);
+            delete this.autoFocusTimerId;
+        }
+    }
+    onMouseEnter(e) {
+        debug(menuFlag, "MenuItem", "mouseEnter", this.el);
+        let { widget } = this.props.instance;
+        if (widget.dropdown && !this.state.dropdownOpen) {
+            this.clearAutoFocusTimer();
+            if (widget.hoverToOpen)
+                FocusManager.focus(this.el);
+            else if (!widget.clickToOpen) {
+                // Automatically open the dropdown only if parent menu is focused
+                let commonParentMenu = closest(this.el, (el) => el.tagName == "UL" && el.contains(getActiveElement()));
+                if (commonParentMenu)
+                    this.autoFocusTimerId = setTimeout(() => {
+                        delete this.autoFocusTimerId;
+                        if (!this.state.dropdownOpen) {
+                            debug(menuFlag, "MenuItem", "hoverFocusTimeout:before", this.el);
+                            FocusManager.focus(this.el);
+                            debug(menuFlag, "MenuItem", "hoverFocusTimeout:after", this.el, getActiveElement());
+                        }
+                    }, widget.hoverFocusTimeout);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        tooltipMouseMove(e, this.props.instance, widget.tooltip);
+    }
+    onMouseLeave(e) {
+        let { widget } = this.props.instance;
+        if (widget.dropdown) {
+            debug(menuFlag, "MenuItem", "mouseLeave", this.el);
+            this.clearAutoFocusTimer();
+            if (widget.hoverToOpen && document.activeElement == this.el)
+                unfocusElement(this.el);
+        }
+        tooltipMouseLeave(e, this.props.instance, widget.tooltip);
+    }
+    onKeyDown(e) {
+        debug(menuFlag, "MenuItem", "keyDown", this.el);
+        let { horizontal, widget } = this.props.instance;
+        if (widget.dropdown) {
+            if (!this.state.dropdownOpen &&
+                e.target == this.el &&
+                (e.keyCode == KeyCode.enter || (horizontal ? e.keyCode == KeyCode.down : e.keyCode == KeyCode.right))) {
+                this.openDropdown(() => {
+                    let focusableChild = findFirstChild(this.el, isFocusable);
+                    if (focusableChild)
+                        FocusManager.focus(focusableChild);
+                });
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (e.keyCode == KeyCode.esc) {
+                if (!isFocused(this.el)) {
+                    FocusManager.focus(this.el);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                this.closeDropdown();
+            }
+        }
+        else {
+            if (e.keyCode == KeyCode.enter && widget.onClick)
+                this.onClick(e);
+        }
+    }
+    onMouseDown(e) {
+        let { widget } = this.props.instance;
+        if (widget.dropdown) {
+            e.stopPropagation();
+            if (this.state.dropdownOpen && !widget.hoverToOpen)
+                this.closeDropdown();
+            else {
+                //IE sometimes does not focus parent on child click
+                if (!isFocusedDeep(this.el))
+                    FocusManager.focus(this.el);
+                this.openDropdown();
+                //If one of the elements is auto focused prevent stealing focus
+                if (isFocusedDeep(this.el))
+                    e.preventDefault();
+            }
+        }
+    }
+    openDropdown(callback) {
+        let { widget } = this.props.instance;
+        if (widget.dropdown) {
+            if (!this.state.dropdownOpen) {
+                this.setState({
+                    dropdownOpen: true,
+                }, callback);
+                //hide tooltip if dropdown is open
+                tooltipMouseLeave(null, this.props.instance, widget.tooltip);
+            }
+            else if (callback)
+                callback(this.state);
+        }
+    }
+    onClick(e) {
+        e.stopPropagation();
+        let { instance } = this.props;
+        let { data } = instance;
+        if (data.disabled) {
+            e.preventDefault();
+            return;
+        }
+        let { widget } = instance;
+        if (widget.dropdown)
+            e.preventDefault();
+        //prevent navigation
+        else {
+            instance.set("checked", !instance.data.checked);
+            if (widget.onClick) {
+                if (data.confirm) {
+                    yesNo(data.confirm).then((btn) => {
+                        if (btn == "yes")
+                            instance.invoke("onClick", null, instance);
+                    });
+                }
+                else
+                    instance.invoke("onClick", e, instance);
+            }
+        }
+        if (widget.autoClose)
+            unfocusElement(this.el, true);
+    }
+    onFocus() {
+        let { widget } = this.props.instance;
+        if (widget.dropdown) {
+            oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+            debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
+            this.clearAutoFocusTimer();
+            if (widget.openOnFocus)
+                this.openDropdown();
+        }
+    }
+    onBlur() {
+        FocusManager.nudge();
+    }
+    closeDropdown() {
+        this.setState({
+            dropdownOpen: false,
+        });
+        delete this.initialScreenPosition;
+    }
+    onFocusOut(focusedElement) {
+        debug(menuFlag, "MenuItem", "focusout", this.el, focusedElement);
+        this.clearAutoFocusTimer();
+        if (this.el && !isSelfOrDescendant(this.el, focusedElement)) {
+            debug(menuFlag, "MenuItem", "closing dropdown", this.el, focusedElement);
+            this.closeDropdown();
+        }
+    }
+    componentWillUnmount() {
+        this.clearAutoFocusTimer();
+        offFocusOut(this);
+        if (this.offParentPositionChange)
+            this.offParentPositionChange();
+        if (this.unregisterKeyboardShortcut)
+            this.unregisterKeyboardShortcut();
+        tooltipParentWillUnmount(this.props.instance);
+    }
+}

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

@@ -0,0 +1,13 @@
+import { Widget, WidgetConfig } from "../../ui/Widget";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface MenuSpacerConfig extends WidgetConfig {
+}
+export declare class MenuSpacer extends Widget<MenuSpacerConfig> {
+    isMenuSpacer: boolean;
+    render(context: RenderingContext, instance: Instance, key: string): {
+        key: boolean;
+        atomic: boolean;
+        spacer: boolean;
+    };
+}

package/build/widgets/nav/MenuSpacer.js

@@ -0,0 +1,11 @@
+import { Widget } from "../../ui/Widget";
+export class MenuSpacer extends Widget {
+    render(context, instance, key) {
+        return {
+            key: true,
+            atomic: true,
+            spacer: true
+        };
+    }
+}
+MenuSpacer.prototype.isMenuSpacer = true;

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

@@ -0,0 +1,14 @@
+import { RouteBase, RouteConfig } from './Route';
+import { StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+export interface RedirectRouteConfig extends RouteConfig {
+    /** Redirection URL. */
+    redirect?: StringProp;
+}
+export declare class RedirectRoute extends RouteBase<RedirectRouteConfig> {
+    redirect?: StringProp;
+    checkVisible(context: RenderingContext, instance: Instance, data: any): boolean;
+    declareData(): void;
+    prepareData(context: RenderingContext, instance: Instance): void;
+}

package/build/widgets/nav/RedirectRoute.js

@@ -0,0 +1,30 @@
+import { Widget } from '../../ui/Widget';
+import { RouteBase } from './Route';
+import { History } from '../../ui/app/History';
+import { Url } from '../../ui/app/Url';
+import { routeAppend } from "../../util/routeAppend";
+export class RedirectRoute extends RouteBase {
+    checkVisible(context, instance, data) {
+        if (!data.visible)
+            return false;
+        if (!data.url && !data.route)
+            return true;
+        return super.checkVisible(context, instance, data);
+    }
+    declareData() {
+        super.declareData(...arguments, {
+            redirect: undefined
+        });
+    }
+    prepareData(context, instance) {
+        super.prepareData(context, instance);
+        var { data } = instance;
+        if (data.redirect && data.redirect[0] === '+')
+            data.redirect = routeAppend(context.lastRoute.reverse(), data.redirect.substring(1));
+        if (data.redirect && History.store)
+            History.replaceState({}, null, Url.resolve(data.redirect));
+        else
+            instance.set('url', data.redirect);
+    }
+}
+Widget.alias('redirect-route', RedirectRoute);

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

@@ -0,0 +1,40 @@
+import { PureContainerBase, PureContainerConfig } from "../../ui/PureContainer";
+import { StringProp, BooleanProp, Prop } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+export interface RouteConfig extends PureContainerConfig {
+    /** Url binding. Bind this to the global `url` variable. */
+    url?: StringProp;
+    /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+    route?: string;
+    /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+    path?: string;
+    /** Name used to expose local data. Defaults to `$route`. */
+    recordName?: string;
+    /** Match route even if given `route` is only a prefix of the current `url`. */
+    prefix?: BooleanProp;
+    /** Parameters mapping */
+    params?: Prop<any>;
+    /** Parameter name mapping */
+    map?: Record<string, string>;
+}
+export declare class RouteBase<Config extends RouteConfig = RouteConfig> extends PureContainerBase<Config> {
+    url?: string;
+    route: string;
+    path?: string;
+    prefix?: boolean;
+    recordName: string;
+    params?: Prop<any>;
+    map?: Record<string, string>;
+    matcher?: any;
+    init(): void;
+    initInstance(context: RenderingContext, instance: Instance): void;
+    applyParentStore(instance: Instance): void;
+    declareData(...args: any[]): void;
+    checkVisible(context: RenderingContext, instance: Instance, data: any): boolean;
+    prepareData(context: RenderingContext, instance: Instance): void;
+    explore(context: RenderingContext, instance: Instance): void;
+    exploreCleanup(context: RenderingContext, instance: Instance): void;
+}
+export declare class Route extends RouteBase<RouteConfig> {
+}

package/build/widgets/nav/Route.js

@@ -0,0 +1,94 @@
+import { Widget } from "../../ui/Widget";
+import { PureContainerBase } from "../../ui/PureContainer";
+import RouteMatcher from "route-parser";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { routeAppend } from "../../util/routeAppend";
+// Base class for extending with custom Config types
+export class RouteBase extends PureContainerBase {
+    init() {
+        if (this.path)
+            this.route = this.path;
+        super.init();
+        if (this.route && this.route[0] !== "+")
+            this.matcher = new RouteMatcher(this.route + (this.prefix ? "(*remainder)" : ""));
+    }
+    initInstance(context, instance) {
+        instance.store = new ReadOnlyDataView({
+            store: instance.parentStore,
+        });
+        super.initInstance(context, instance);
+    }
+    applyParentStore(instance) {
+        instance.store.setStore(instance.parentStore);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            url: undefined,
+        });
+    }
+    checkVisible(context, instance, data) {
+        if (!data.visible)
+            return false;
+        if (data.url !== instance.cached.url) {
+            instance.cached.url = data.url;
+            let matcher = this.matcher;
+            let route = this.route;
+            if (this.route[0] === "+") {
+                route = routeAppend(context.lastRoute.route, this.route.substring(1));
+                if (!instance.cached.matcher || instance.cached.route !== route)
+                    instance.cached.matcher = new RouteMatcher(route + (this.prefix ? "(*remainder)" : ""));
+                matcher = instance.cached.matcher;
+            }
+            instance.cached.result = matcher.match(data.url);
+            instance.cached.matcher = matcher;
+            instance.cached.route = data.route = route;
+        }
+        if (!instance.cached.result)
+            return false;
+        return super.checkVisible(context, instance, data);
+    }
+    prepareData(context, instance) {
+        super.prepareData(context, instance);
+        const { store, cached } = instance;
+        store.setData({
+            [this.recordName]: cached.result,
+        });
+        //TODO: Replace comparison with deepEquals
+        if (this.params && this.params.bind) {
+            var params = store.get(this.params.bind);
+            if (JSON.stringify(params) != JSON.stringify(cached.result)) {
+                store.set(this.params.bind, cached.result);
+            }
+        }
+        if (this.map) {
+            for (var key in cached.result) {
+                var binding = this.map[key];
+                if (binding)
+                    store.set(binding, cached.result[key]);
+            }
+        }
+    }
+    explore(context, instance) {
+        context.push("lastRoute", {
+            route: instance.cached.route,
+            result: instance.cached.result,
+            reverse: function (data) {
+                return instance.cached.matcher.reverse({
+                    ...instance.cached.result,
+                    remainder: "",
+                    ...data,
+                });
+            },
+        });
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        context.pop("lastRoute");
+    }
+}
+RouteBase.prototype.recordName = "$route";
+RouteBase.prototype.prefix = false;
+// Closed type for direct usage
+export class Route extends RouteBase {
+}
+Widget.alias("route", Route);

package/build/widgets/nav/Route.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/widgets/nav/Route.spec.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "cx/jsx-runtime";
+import { Route } from "./Route";
+import { Store } from "../../data/Store";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+import assert from "assert";
+describe("Route", () => {
+    it("matching works for ~/widgets/color-pickers", () => {
+        let widget = (_jsx("cx", { children: _jsx(Route, { url: "~/widgets/color-pickers", route: "~/widgets/color-pickers", children: _jsx("div", {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert(tree && !Array.isArray(tree));
+        assert.equal(tree.type, "div");
+    });
+});

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

@@ -0,0 +1,55 @@
+import { VDOM } from "../../ui/Widget";
+import { Container, ContainerConfig } from "../../ui/Container";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+export interface ScrollerConfig extends ContainerConfig {
+    /** Base CSS class. Default is `hscroller`. */
+    baseClass?: string;
+    horizontal?: BooleanProp;
+    vertical?: BooleanProp;
+    scrollIntoViewSelector?: StringProp;
+}
+export declare class Scroller extends Container {
+    baseClass: string;
+    styled: boolean;
+    horizontal?: any;
+    vertical?: any;
+    scrollIntoViewSelector?: any;
+    init(): void;
+    declareData(...args: any[]): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+}
+interface HScrollerComponentProps {
+    widget: Scroller;
+    data: any;
+    children?: any;
+}
+interface HScrollerComponentState {
+    scrollable: boolean;
+}
+export declare class HScrollerComponent extends VDOM.Component<HScrollerComponentProps, HScrollerComponentState> {
+    el?: HTMLElement | null;
+    clip?: HTMLElement | null;
+    scroller?: HTMLElement | null;
+    content?: HTMLElement | null;
+    unsubscribeResize?: () => void;
+    doScroll?: any;
+    stopScrolling: () => void;
+    scrollLeft: (e: any) => void;
+    scrollRight: (e: any) => void;
+    scrollUp: (e: any) => void;
+    scrollDown: (e: any) => void;
+    constructor(props: HScrollerComponentProps);
+    render(): import("react/jsx-runtime").JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    scroll(e: any, direction: string): void;
+    scrollIntoView(): void;
+}
+export declare class HScroller extends Scroller {
+}
+export declare class VScroller extends Scroller {
+}
+export {};