@xh/hoist 82.0.1 → 82.0.3

package/build/types/mobile/cmp/navigator/Navigator.d.ts

@@ -0,0 +1,8 @@
+import '@xh/hoist/mobile/register';
+import './Navigator.scss';
+import { NavigatorModel } from './NavigatorModel';
+/**
+ * Top-level Component within an application, responsible for rendering a stack of
+ * pages and managing transitions between pages.
+ */
+export declare const Navigator: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<NavigatorModel>>, navigator: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<NavigatorModel>>;

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -0,0 +1,62 @@
+import { HoistModel, RefreshMode, RenderMode } from '@xh/hoist/core';
+import { Swiper } from 'swiper/types';
+import '@xh/hoist/mobile/register';
+import { PageConfig, PageModel } from './PageModel';
+export interface NavigatorConfig {
+    /** Configs for PageModels, representing all supported pages within this Navigator/App. */
+    pages: PageConfig[];
+    /**
+     * True to enable activity tracking of page views (default false).
+     * Viewing of each page will be tracked with the `oncePerSession` flag, to avoid duplication.
+     */
+    track?: boolean;
+    /** True to enable 'pull down to refresh' functionality. */
+    pullDownToRefresh?: boolean;
+    /**
+     * Time (in milliseconds) for the transition between pages on route change.
+     * Defaults to 500.
+     */
+    transitionMs?: number;
+    /**
+     * Strategy for rendering pages. Can be set per-page via `PageModel.renderMode`.
+     * See enum for description of supported modes.
+     */
+    renderMode?: RenderMode;
+    /**
+     * Strategy for refreshing pages. Can be set per-page via `PageModel.refreshMode`.
+     * See enum for description of supported modes.
+     */
+    refreshMode?: RefreshMode;
+}
+/**
+ * Model for handling stack-based navigation between pages.
+ * Provides support for routing based navigation.
+ */
+export declare class NavigatorModel extends HoistModel {
+    disableAppRefreshButton: boolean;
+    stack: PageModel[];
+    pages: PageConfig[];
+    track: boolean;
+    pullDownToRefresh: boolean;
+    transitionMs: number;
+    renderMode: RenderMode;
+    refreshMode: RefreshMode;
+    private _swiper;
+    private _callback;
+    private _touchStartX;
+    get activePageId(): string;
+    get activePage(): PageModel;
+    get activePageIdx(): number;
+    get allowSlideNext(): boolean;
+    get allowSlidePrev(): boolean;
+    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
+    /**
+     * @param callback - function to execute (once) after the next page transition.
+     */
+    setCallback(callback: () => void): void;
+    /** @internal */
+    setSwiper(swiper: Swiper): void;
+    /** @internal */
+    onPageChange: () => void;
+    private onRouteChange;
+}

package/build/types/mobile/cmp/navigator/PageModel.d.ts

@@ -0,0 +1,61 @@
+import { Content, HoistModel, HoistProps, RefreshMode, RenderMode } from '@xh/hoist/core';
+import '@xh/hoist/mobile/register';
+import { NavigatorModel } from './NavigatorModel';
+export interface PageConfig {
+    /** Unique ID. Must match a configured Router5 route name. */
+    id: string;
+    /** Content to be rendered on this page. */
+    content: Content;
+    /** Props to be passed to page upon creation. */
+    props?: HoistProps;
+    /**
+     * Strategy for rendering this Page. If null, will default to its Navigator's mode.
+     * See enum for description of supported modes.
+     */
+    renderMode?: RenderMode;
+    /**
+     * Strategy for refreshing this Page. If null, will default to its Navigator's mode. See
+     * enum for description of supported modes.
+     */
+    refreshMode?: RefreshMode;
+    /**
+     * Don't allow the Page route to be arrived at in a new browser session.  Non-linkable
+     * routes are unwound to a safe starting point at the start of a new session.
+     */
+    disableDirectLink?: boolean;
+    /** Hide any visible app refresh button when at this Page. */
+    disableAppRefreshButton?: boolean;
+    /**
+     * Parent NavigatorModel. Provided by the navigator when constructing these models -
+     * no need to specify manually.
+     */
+    navigatorModel?: NavigatorModel;
+}
+/**
+ * Model for a Page within a Navigator. Specifies the actual content (i.e. page)
+ * to be rendered for a given route.
+ *
+ * This model is not typically created directly within applications. Instead, specify a
+ * configuration for it via the `NavigatorModel.pages` constructor config.
+ */
+export declare class PageModel extends HoistModel {
+    id: string;
+    content: Content;
+    props: HoistProps;
+    disableDirectLink: boolean;
+    disableAppRefreshButton: boolean;
+    navigatorModel: any;
+    refreshContextModel: any;
+    errorBoundaryModel: any;
+    private _renderMode;
+    private _refreshMode;
+    /**
+     * A generated key which combines the id and sorted props to identify the page in the stack.
+     * The returned string is stable for a given id and props.
+     */
+    get key(): string;
+    get renderMode(): RenderMode;
+    get refreshMode(): RefreshMode;
+    get isActive(): boolean;
+    constructor({ id, navigatorModel, content, props, renderMode, refreshMode, disableDirectLink, disableAppRefreshButton }: PageConfig);
+}

package/build/types/mobile/cmp/navigator/impl/GestureRefresh.d.ts

@@ -0,0 +1,8 @@
+import './GestureRefresh.scss';
+import { GestureRefreshModel } from './GestureRefreshModel';
+/**
+ * Wrap the Navigator with gesture that triggers a refresh by pulling down.
+ *
+ * @internal
+ */
+export declare const gestureRefresh: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<GestureRefreshModel>>;

package/build/types/mobile/cmp/navigator/impl/GestureRefreshModel.d.ts

@@ -0,0 +1,16 @@
+import { HoistModel } from '@xh/hoist/core';
+/**
+ * @internal
+ */
+export declare class GestureRefreshModel extends HoistModel {
+    navigatorModel: any;
+    refreshProgress: any;
+    get refreshStarted(): boolean;
+    get refreshCompleted(): boolean;
+    refreshStart(): void;
+    refreshEnd(): void;
+    constructor();
+    onDragStart: (e: any) => void;
+    onDrag: (e: any) => void;
+    onDragEnd: (e: any) => void;
+}

package/build/types/mobile/cmp/navigator/impl/Page.d.ts

@@ -0,0 +1,12 @@
+import { PageModel } from '../PageModel';
+import './Page.scss';
+/**
+ * Wrapper for contents to be shown within a Navigator. This Component is used by Navigator's
+ * internal implementation to:
+ *
+ *  - Mount/unmount its contents according to `PageModel.renderMode`.
+ *  - Track and trigger refreshes according to `PageModel.refreshMode`.
+ *
+ * @internal
+ */
+export declare const page: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<PageModel>>;

package/build/types/mobile/cmp/navigator/impl/Utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ */
+export declare function hasScrollableParent(e: TouchEvent, axis: 'horizontal' | 'vertical'): boolean;
+export declare function findScrollableParent(e: TouchEvent, axis: 'horizontal' | 'vertical'): HTMLElement;
+export declare function isScrollableEl(el: HTMLElement, axis: 'horizontal' | 'vertical'): boolean;
+export declare function hasDraggableParent(e: TouchEvent, direction: 'up' | 'right' | 'down' | 'left'): boolean;
+export declare function findDraggableParent(e: TouchEvent, direction: 'up' | 'right' | 'down' | 'left'): HTMLElement;
+export declare function isDraggableEl(el: HTMLElement, direction: 'up' | 'right' | 'down' | 'left'): boolean;

package/build/types/mobile/cmp/navigator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Navigator';
+export * from './NavigatorModel';

package/build/types/mobile/cmp/panel/DialogPanel.d.ts

@@ -0,0 +1,16 @@
+import '@xh/hoist/mobile/register';
+import './DialogPanel.scss';
+import { PanelProps } from './Panel';
+export interface DialogPanelProps extends PanelProps {
+    /** Is the dialog panel shown.  */
+    isOpen?: boolean;
+}
+/**
+ * Wraps a Panel in a fullscreen floating Dialog.
+ *
+ * These views do not participate in navigation or routing, and are used for showing fullscreen
+ * views outside of the Navigator / TabContainer context.
+ *
+ * @see FullscreenPanel for a true fullscreen, non-floating alternative.
+ */
+export declare const DialogPanel: import("react").FC<DialogPanelProps>, dialogPanel: import("@xh/hoist/core").ElementFactory<DialogPanelProps>;

package/build/types/mobile/cmp/panel/Panel.d.ts

@@ -0,0 +1,43 @@
+import { BoxProps, TaskObserver, Some, HoistProps, ElementFactory } from '@xh/hoist/core';
+import '@xh/hoist/mobile/register';
+import { ReactNode, ReactElement } from 'react';
+import './Panel.scss';
+export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
+    /** A toolbar to be docked at the bottom of the panel. */
+    bbar?: ReactNode;
+    /** CSS class name specific to the panel's header. */
+    headerClassName?: string;
+    /** Items to be added to the right-side of the panel's header. */
+    headerItems?: ReactNode[];
+    /** An icon placed at the left-side of the panel's header. */
+    icon?: ReactElement;
+    /**
+     * Mask to render on this panel. Set to:
+     *   + a ReactElement specifying a Mask instance,
+     *   + true for a default mask,
+     *   + one or more TaskObservers for a default load mask bound to the tasks
+     *   + the string 'onLoad' for a default load mask bound to the loading of the current model.
+     */
+    mask?: Some<TaskObserver> | ReactElement | boolean | 'onLoad';
+    /**
+     * LoadingIndicator to render on this panel. Set to:
+     *   + a ReactElement specifying a LoadingIndicator,
+     *   + true for a default LoadingIndicator,
+     *   + one or more TaskObservers for a default LoadingIndicator bound to the tasks
+     *   + the string 'onLoad' for a default LoadingIndicator bound to the loading of the current model.
+     */
+    loadingIndicator?: Some<TaskObserver> | ReactElement | boolean | 'onLoad';
+    /** Additional props to pass to the inner frame hosting child `items`. */
+    contentBoxProps?: BoxProps;
+    /** Allow the panel content area to scroll vertically. */
+    scrollable?: boolean;
+    /** A toolbar to be docked at the top of the panel. */
+    tbar?: ReactNode;
+    /** Title text added to the panel's header. */
+    title?: ReactNode;
+}
+/**
+ * A Panel container builds on the lower-level layout components to offer a header element
+ * w/standardized styling, title, and Icon as well as support for top and bottom toolbars.
+ */
+export declare const Panel: import("react").FC<PanelProps>, panel: ElementFactory<PanelProps>;

package/build/types/mobile/cmp/panel/impl/PanelHeader.d.ts

@@ -0,0 +1,6 @@
+import { PanelProps } from '../Panel';
+/**
+ * A standardized header for a Panel component
+ * @internal
+ */
+export declare const panelHeader: import("@xh/hoist/core").ElementFactory<PanelProps>;

package/build/types/mobile/cmp/panel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Panel';
+export * from './DialogPanel';

package/build/types/mobile/cmp/pinpad/impl/PinPad.d.ts

@@ -0,0 +1,9 @@
+import { PinPadModel } from '@xh/hoist/cmp/pinpad';
+import '@xh/hoist/mobile/register';
+import './PinPad.scss';
+/**
+ * Mobile Implementation of PinPad.
+ *
+ * @internal
+ */
+export declare const pinPadImpl: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<PinPadModel>>;

package/build/types/mobile/cmp/popover/Popover.d.ts

@@ -0,0 +1,33 @@
+import { Content, HoistProps, PlainObject } from '@xh/hoist/core';
+import '@xh/hoist/mobile/register';
+import './Popover.scss';
+export interface PopoverProps extends HoistProps {
+    /** Component to display inside the popover */
+    content: Content;
+    /** Whether the popover is visible. Passing this prop puts the popover in controlled mode */
+    isOpen?: boolean;
+    /**
+     * Callback invoked in controlled mode when the popover open state _would_ change due to
+     * user interaction.
+     */
+    onInteraction?: (nextOpenState: boolean) => void;
+    /** True to disable user interaction */
+    disabled?: boolean;
+    /** Whether to display a semi-transparent backdrop behind the popover */
+    backdrop?: boolean;
+    /** The position (relative to the target) at which the popover should appear. Default 'auto' */
+    position?: 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left-bottom' | 'left' | 'left-top' | 'auto';
+    /** Optional className applied to the popover content wrapper. */
+    popoverClassName?: string;
+    /** Escape hatch to provide additional options to the PopperJS implementation */
+    popperOptions?: PlainObject;
+}
+/**
+ * Popovers display floating content next to a target element.
+ *
+ * The API is based on a stripped-down version of Blueprint's Popover component
+ * that is used on Desktop. Popover is built on top of the Popper.js library.
+ *
+ * @see https://popper.js.org/
+ */
+export declare const Popover: import("react").FC<PopoverProps>, popover: import("@xh/hoist/core").ElementFactory<PopoverProps>;

package/build/types/mobile/cmp/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

package/build/types/mobile/cmp/store/impl/StoreFilterField.d.ts

@@ -0,0 +1,6 @@
+import '@xh/hoist/mobile/register';
+/**
+ * Mobile implementation of StoreFilterField.
+ * @internal
+ */
+export declare function storeFilterFieldImpl(props: any): import("react").ReactElement<import("@xh/hoist/mobile/cmp/input").TextInputProps, any>;

package/build/types/mobile/cmp/tab/impl/Tab.d.ts

@@ -0,0 +1,13 @@
+import { TabModel } from '@xh/hoist/cmp/tab';
+import '@xh/hoist/mobile/register';
+import './Tabs.scss';
+/**
+ * @internal
+ *
+ * Wrapper for contents to be shown within a TabContainer. This Component is used by TabContainer's
+ * internal implementation to:
+ *
+ *   - Mount/unmount its contents according to `TabModel.renderMode`.
+ *   - Track and trigger refreshes according to `TabModel.refreshMode`.
+ */
+export declare const tab: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<TabModel>>;

package/build/types/mobile/cmp/tab/impl/TabContainer.d.ts

@@ -0,0 +1,9 @@
+import '@xh/hoist/mobile/register';
+import './Tabs.scss';
+import { TabContainerProps } from '@xh/hoist/cmp/tab';
+/**
+ * Mobile Implementation of TabContainer.
+ *
+ * @internal
+ */
+export declare function tabContainerImpl({ model, className, testId, ...props }: TabContainerProps): import("react").ReactElement<any, any>;

package/build/types/mobile/cmp/toolbar/Toolbar.d.ts

@@ -0,0 +1,11 @@
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import '@xh/hoist/mobile/register';
+import './Toolbar.scss';
+export interface ToolbarProps extends HoistProps, BoxProps {
+    /** Set to true to vertically align the items of this toolbar */
+    vertical?: boolean;
+}
+/**
+ * A toolbar with built-in styling and padding.
+ */
+export declare const Toolbar: import("react").FC<ToolbarProps>, toolbar: import("@xh/hoist/core").ElementFactory<ToolbarProps>;

package/build/types/mobile/cmp/toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,7 @@
+import '@xh/hoist/mobile/register';
+import './Toolbar.scss';
+/**
+ * Convenience component to insert a pre-styled separator | between Toolbar items.
+ */
+export declare const ToolbarSeparator: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>, toolbarSeparator: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>;
+export declare const ToolbarSep: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>, toolbarSep: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>;

package/build/types/mobile/cmp/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toolbar';
+export * from './ToolbarSeparator';

package/build/types/mobile/cmp/zoneGrid/impl/ZoneMapper.d.ts

@@ -0,0 +1,16 @@
+import '@xh/hoist/mobile/register';
+import { ZoneMapperModel } from '@xh/hoist/cmp/zoneGrid/impl/ZoneMapperModel';
+import './ZoneMapper.scss';
+/**
+ * Hoist UI for user selection and discovery of available ZoneGrid columns, enabled via the
+ * `ZoneGridModel.zoneMapperModel` config option.
+ *
+ * This component displays an example of each of the four zones, with the available columns for
+ * the currently selected zone displayed in a list below. Users can toggle column visibility
+ * and labels for each zone to construct a custom layout for the grid rows.
+ *
+ * It is not necessary to manually create instances of this component within an application.
+ *
+ * @internal
+ */
+export declare const ZoneMapper: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<ZoneMapperModel>>, zoneMapper: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ZoneMapperModel>>;

package/build/types/mobile/register.d.ts

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

package/build/types/mobx/decorators.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Decorator to mark a property as observable and also provide a simple MobX action of the
+ * form `setPropName()`.
+ *
+ * This decorator is especially useful for creating observable properties that are intended to be
+ * bound to UI components that will both display and set the property.
+ *
+ * Use `@bindable.ref` for a version of the function that will mark the property as observable by
+ * reference. This will use the similarly named `@observable.ref` decorator in the core MobX API.
+ */
+export declare const bindable: any;

package/build/types/mobx/index.d.ts

@@ -0,0 +1,5 @@
+import { action, autorun, comparer, computed, extendObservable, observable, override, reaction, runInAction, toJS, trace, untracked, when } from 'mobx';
+import { observer } from 'mobx-react-lite';
+export { action, autorun, comparer, computed, extendObservable, observable, observer, override, reaction, runInAction, toJS, trace, untracked, when };
+export * from './decorators';
+export * from './overrides';

package/build/types/mobx/overrides.d.ts

@@ -0,0 +1,14 @@
+import { AnnotationsMap, CreateObservableOptions } from 'mobx';
+/**
+ * An enhanced version of the native mobx makeObservable.
+ */
+export declare function makeObservable(target: any, annotations?: AnnotationsMap<any, never>, options?: CreateObservableOptions): any;
+/**
+ * An enhanced version of the native mobx isObservableProp
+ */
+export declare function isObservableProp(target: any, propertyKey: string): boolean;
+/**
+ * Check that if a class property was annotated with `@bindable` or `@observable` that
+ * makeObservable was actually called on the instance.  Log error on fail.
+ */
+export declare function checkMakeObservable(target: any): void;

package/build/types/promise/Promise.d.ts

@@ -0,0 +1,108 @@
+import { Thunkable, ExceptionHandlerOptions, TaskObserver, TrackOptions, Some, Awaitable } from '@xh/hoist/core';
+/**
+ * Enhancements to the Global Promise object.
+ * Merged in to definition here and implemented on the prototype below.
+ */
+declare global {
+    interface Promise<T> {
+        /**
+         * Version of `then()` that wraps the callback in a MobX action, for use in a Promise chain
+         * that modifies MobX observables.
+         */
+        thenAction<TResult>(onFulfilled: (value: T) => Awaitable<TResult>): Promise<TResult>;
+        /**
+         * Version of `catch()` that will only catch certain exceptions.
+         *
+         * @param selector - closure that takes an exception and returns a boolean. May also be
+         *      specified as an exception name or list of names. Only exceptions passing this
+         *      selector will be handled by this method.
+         * @param fn - catch handler
+         */
+        catchWhen<TResult = undefined>(selector: ((e: unknown) => boolean) | Some<string>, fn?: (reason: unknown) => Awaitable<TResult>): Promise<T | TResult>;
+        /**
+         * Version of `catch()` that passes the error onto Hoist's default exception handler for
+         * convention-driven logging and alerting. Typically called last in a Promise chain.
+         */
+        catchDefault(options?: ExceptionHandlerOptions): Promise<T | undefined>;
+        /**
+         * Version of `catchDefault()` that will only catch certain exceptions.
+         */
+        catchDefaultWhen(selector: ((e: unknown) => boolean) | Some<string>, options: ExceptionHandlerOptions): Promise<T | undefined>;
+        /**
+         * Wait on a potentially async function before passing on the original value.
+         * Useful when we want to block and do something on the promise chain, but do not want to
+         * manipulate the values being passed through.
+         *
+         * @param onFulfillment - function to receive the pass-through value when ready.
+         */
+        tap(onFulfillment: (value: T) => any): Promise<T>;
+        /**
+         * Return a promise that will resolve a specified delay after this promise resolves.
+         *
+         * @param interval - delay in milliseconds.
+         */
+        wait(interval: number): Promise<T>;
+        /**
+         * Return a promise that will reject if this promise has not been settled after the
+         * specified interval has passed.
+         */
+        timeout(spec: PromiseTimeoutSpec): Promise<T>;
+        /**
+         * Link this promise to an instance of a {@link TaskObserver}. See that class for details
+         * on what it provides and how it can be used to coordinate masking and progress messages
+         * on one or more async operations.
+         */
+        linkTo(spec: PromiseLinkSpec): Promise<T>;
+        /**
+         * Track a Promise (with timing) via Hoist activity tracking.
+         * @param options - TrackOptions, or simply a message string.
+         */
+        track(options: TrackOptions | string): Promise<T>;
+    }
+}
+/**
+ * Timeout interval in ms, or an object specifying the interval and an optional message to be used
+ * for any exception thrown on timeout.
+ */
+export type PromiseTimeoutSpec = number | {
+    interval: number;
+    message?: string;
+};
+/**
+ * TaskObserver to track execution of a Promise, or an object specifying one with an optional
+ * message to show while pending and/or optional flag to skip (e.g. for conditional masking).
+ */
+export type PromiseLinkSpec = TaskObserver | {
+    observer: TaskObserver;
+    message?: string;
+    omit?: Thunkable<boolean>;
+};
+/**
+ * Return a promise that will resolve after the specified amount of time.
+ *
+ * This method serves as a lightweight way to start a promise chain for any code.
+ *
+ * @param interval - milliseconds to delay (default 0). Note that the actual delay will be subject
+ *      to the minimum delay for `setTimeout()` in the browser.
+ */
+export declare function wait<T>(interval?: number): Promise<T>;
+/**
+ * Return a promise that will resolve after a condition has been met, or reject if timed out.
+ * @param condition - function returning true when expected condition is met.
+ * @param interval - milliseconds to wait between checks (default 50). Note that the actual time
+ *      will be subject to the minimum delay for `setTimeout()` in the browser.
+ * @param timeout - milliseconds after which the Promise should be rejected (default 5000).
+ */
+export declare function waitFor(condition: () => boolean, { interval, timeout }?: {
+    interval?: number;
+    timeout?: number;
+}): Promise<void>;
+/**
+ * Return a promise that resolves immediately.
+ * @param value - the value to be returned by the resulting Promise.
+ */
+export declare function resolve<T>(value?: T): Promise<T>;
+/**
+ * Return a promise that never resolves.
+ */
+export declare function never<T>(): Promise<T>;

package/build/types/promise/index.d.ts

@@ -0,0 +1 @@
+export * from './Promise';