@xh/hoist 57.0.0 → 57.0.1

package/build/types/cmp/input/HoistInputModel.d.ts

@@ -0,0 +1,148 @@
+import { DefaultHoistProps, HoistModel, HoistModelClass } from '@xh/hoist/core';
+import { FieldModel } from '@xh/hoist/cmp/form';
+import { ForwardedRef, ReactElement, FocusEvent } from 'react';
+import './HoistInput.scss';
+/**
+ * A Local Model supporting Input components in Hoist.  This class provides common functionality
+ * around reading, writing, converting, and displaying input values, including support for a "commit"
+ * lifecycle which determines when values being edited should be flushed to any bound model.
+ *
+ * If building a classic data-entry form (i.e. multiple labelled inputs used to enter or edit a
+ * chunk of data), please review and consider the use of Form and FormField components and their
+ * corresponding models. They work together as a system with child HoistInputs to provide
+ * consolidated data initialization and extraction, support for client-side validation, and more.
+ *
+ * HoistInputs can *either* operate in bound mode or in standard controlled mode.
+ *      + If provided with `model` and `bind` props (either directly or via a parent FormField),
+ *        they will will operate in bound mode, reading their value from the model and writing back
+ *        to it on commit (as described below).
+ *      + Otherwise, they will get their value directly via the `value` prop.
+ *
+ * Note that providing a model as a value source may allow for more efficient (re)rendering in a
+ * MobX context. The bound value is only read *within* this control, so that changes to its value
+ * do not cause the parent of this control to re-render.
+ *
+ * Regardless of mode, HoistInputs will call an `onChange` callback prop with the latest value
+ * as they are updated. They also introduce the notion of "committing" a value to the model when the
+ * user has completed a discrete act of data entry. This will vary by input but is commonly marked
+ * by the user blurring the input, selecting a record from a combo, or pressing the <enter> key.
+ * At this time, any specified `onCommit` callback prop will be called and the value will be flushed
+ * back to any bound model.
+ *
+ * For many inputs (e.g. checkbox, select, switchInput, slider) commit always fires at the same time
+ * as the change event. Other inputs such as textInput maintain the distinction described above,
+ * but expose a `commitOnChange` prop to force them to eagerly flush their values on every change.
+ *
+ * Note: Passing a ref to a HoistInput will give you a reference to its underlying HoistInputModel.
+ * This model is mostly used for implementation purposes, but it is also intended to
+ * provide a limited API for application use.  It currently provides access to the underlying DOM
+ * element of the rendered input via its `domEl` property, as well as `focus()`, `blur()`, and
+ * `select()`.
+ *
+ * To create an instance of an Input component using this model use the hook
+ * {@link useHoistInputModel}.
+ */
+export declare class HoistInputModel extends HoistModel {
+    /** Does this input have the focus? */
+    hasFocus: boolean;
+    /** Field (if any) associated with this control. */
+    getField(): FieldModel;
+    /**
+     * Ref to top-most rendered DOM element in this component.
+     *
+     * HoistInput implementations should implement this by placing the `domRef` ref on the
+     * root of the rendered component sub-tree.
+     */
+    get domEl(): HTMLElement;
+    /**
+     * DOM <Input> element on this control, if any.
+     *
+     * If multiple <Input> elements are present, this getter will return the first one.
+     *
+     * Implementations may target a specific input via placing the 'inputRef' ref
+     * on the appropriate element during rendering.  Otherwise the dom will be
+     * searched for the first rendered <input>.
+     */
+    get inputEl(): HTMLInputElement | HTMLTextAreaElement;
+    /** Bound model, if any.*/
+    get model(): HoistModel;
+    internalValue: any;
+    inputRef: import("react").RefObject<HTMLElement> & ((instance: HTMLElement) => void);
+    domRef: import("react").RefObject<HTMLElement> & ((instance: HTMLElement) => void);
+    isDirty: boolean;
+    constructor();
+    afterLinked(): void;
+    /**
+     * Blur focus from this control, if supported.
+     */
+    blur(): void;
+    /**
+     * Bring focus to this control, if supported.
+     */
+    focus(): void;
+    /**
+     * Select all content on this input, if supported.
+     */
+    select(): void;
+    /**
+     * True if this input should commit immediately when its value is changed.
+     * Components can/do provide a prop to override this value.
+     */
+    get commitOnChange(): boolean;
+    /** The value to be rendered internally by control. **/
+    get renderValue(): any;
+    /**
+     * The external value associated with control.
+     * For bound controls, this is the most recent value committed to the Model.
+     */
+    get externalValue(): any;
+    setInternalValue(val: any): void;
+    /**
+     * Set normalized internal value and fire associated change events.
+     * This is the primary method for HoistInput implementations to call on value change.
+     */
+    noteValueChange(val: any): void;
+    /**
+     * Commit the internal value to the external value, fire commit handlers, and synchronize state.
+     */
+    doCommit(): void;
+    /** Hook to convert an internal representation of the value to an appropriate external one. */
+    toExternal(internal: any): any;
+    /** Hook to convert an external representation of the value to an appropriate internal one. */
+    toInternal(external: any): any;
+    /**
+     * To be called when the Component has lost focus. Direct subclasses must call
+     * via a handler on an appropriate rendered element. A default handler implementation is below.
+     */
+    noteBlurred(): void;
+    onBlur: (e: FocusEvent) => void;
+    /**
+     * To be called when the Component gains focus. Direct subclasses must call
+     * via a handler on an appropriate rendered element. A default handler implementation is below.
+     */
+    noteFocused(): void;
+    onFocus: (e: FocusEvent) => void;
+    isValid(externalValue: any): boolean;
+    internalFromExternal(): any;
+    externalFromInternal(): any;
+    externalValueReaction(): {
+        track: () => any;
+        run: (externalVal: any) => void;
+        fireImmediately: boolean;
+    };
+    doCommitOnChangeInternal(): void;
+    doCommitInternal(): void;
+    containsElement(elem: HTMLElement): boolean;
+}
+/**
+ * Hook to render a display component with a HoistInputModel in context.
+ *
+ * Places model in context and composes appropriate
+ * CSS class names for current model state.
+ *
+ * @param component - component to render
+ * @param props - props passed to containing component
+ * @param ref - forwardRef passed to containing component
+ * @param modelSpec - specify to use particular subclass of HoistInputModel
+ */
+export declare function useHoistInputModel(component: any, props: DefaultHoistProps, ref: ForwardedRef<any>, modelSpec?: HoistModelClass<HoistInputModel>): ReactElement;

package/build/types/cmp/input/HoistInputProps.d.ts

@@ -0,0 +1,19 @@
+export interface HoistInputProps {
+    /**
+     * Field or model property name from which this component should read and write its value
+     * in controlled mode. Can be set by parent FormField.
+     */
+    bind?: string;
+    /** True to disable user interaction. Can be set by parent FormField. */
+    disabled?: boolean;
+    /** DOM ID of this input. */
+    id?: string;
+    /** Called when value changes - passed new and prior values. */
+    onChange?: (value: any, oldValue: any) => void;
+    /** Called when value is committed to backing model - passed new and prior values. */
+    onCommit?: (value: any, oldValue: any) => void;
+    /** Tab order for focus control, or -1 to skip. If unset, browser layout-based order. */
+    tabIndex?: number;
+    /** Value of the control, if provided directly. */
+    value?: any;
+}

package/build/types/cmp/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HoistInputModel';
+export * from './HoistInputProps';

package/build/types/cmp/layout/Box.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+export interface BoxComponentProps extends HoistProps, BoxProps {
+}
+/**
+ * A Component that supports flexbox-based layout of its contents.
+ *
+ * Box is the component that provides the core implementation of the LayoutSupport mixin.
+ * It renders a div and merges all layout props to that div's `style` property.
+ *
+ * Access to the internal div is provided via a ref argument.
+ *
+ * VBox and HBox variants support internal vertical (column) and horizontal (row) flex layouts.
+ */
+export declare const Box: import("react").FC<BoxComponentProps>, box: import("@xh/hoist/core").ElementFactory<BoxComponentProps>;
+export declare const VBox: import("react").FC<BoxComponentProps>, vbox: import("@xh/hoist/core").ElementFactory<BoxComponentProps>;
+export declare const HBox: import("react").FC<BoxComponentProps>, hbox: import("@xh/hoist/core").ElementFactory<BoxComponentProps>;

package/build/types/cmp/layout/Frame.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+export interface FrameProps extends HoistProps, BoxProps {
+}
+/**
+ * A Box class that flexes to grow and stretch within its *own* parent via flex:'auto', useful for
+ * creating nested layouts.
+ *
+ * Like Box, Frame provides access to its internal div via a ref argument.
+ *
+ * VFrame and HFrame variants support internal vertical (column) and horizontal (row) flex layouts.
+ */
+export declare const Frame: import("react").FC<FrameProps>, frame: import("@xh/hoist/core").ElementFactory<FrameProps>;
+export declare const VFrame: import("react").FC<FrameProps>, vframe: import("@xh/hoist/core").ElementFactory<FrameProps>;
+export declare const HFrame: import("react").FC<FrameProps>, hframe: import("@xh/hoist/core").ElementFactory<FrameProps>;

package/build/types/cmp/layout/Placeholder.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import './Placeholder.scss';
+export interface PlaceholderProps extends HoistProps, BoxProps {
+}
+/**
+ * A thin wrapper around `Box` with standardized, muted styling.
+ *
+ * Intended as an alternative to masking or other approaches when a portion of an application's
+ * layout is not yet ready to be rendered - e.g. a detail panel without a current record selection.
+ */
+export declare const Placeholder: import("react").FC<PlaceholderProps>, placeholder: import("@xh/hoist/core").ElementFactory<PlaceholderProps>;

package/build/types/cmp/layout/Spacer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+export interface SpacerProps extends HoistProps, BoxProps {
+}
+/**
+ * A component for inserting a fixed-sized spacer along the main axis of its parent container.
+ * Convenience ElemFactories hspacer() and vspacer() each take a pixel size directly.
+ */
+export declare const Spacer: import("react").FC<SpacerProps>, spacer: import("@xh/hoist/core").ElementFactory<SpacerProps>;
+/**
+ * A component that stretches to soak up space along the main axis of its parent container.
+ */
+export declare const Filler: import("react").FC<BoxProps>, filler: import("@xh/hoist/core").ElementFactory<BoxProps>;
+export declare function hspacer(width?: number): import("react").ReactElement<SpacerProps, any>;
+export declare function vspacer(height?: number): import("react").ReactElement<SpacerProps, any>;

package/build/types/cmp/layout/Tags.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const fragment: import("@xh/hoist/core").ElementFactory<any>;
+export declare const iframe: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>>;
+export declare const img: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+export declare const input: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const svg: import("@xh/hoist/core").ElementFactory<import("react").SVGProps<SVGSVGElement>>;
+export declare const textarea: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>;
+export declare const a: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
+export declare const br: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBRElement>, HTMLBRElement>>;
+export declare const code: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
+export declare const div: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const form: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>>;
+export declare const h1: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const h2: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const h3: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const h4: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
+export declare const label: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>;
+export declare const li: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
+export declare const nav: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
+export declare const ol: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>>;
+export declare const option: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>>;
+export declare const p: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const pre: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>>;
+export declare const span: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const strong: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>>;
+export declare const table: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>>;
+export declare const tbody: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
+export declare const td: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
+export declare const th: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;
+export declare const thead: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>>;
+export declare const tr: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>>;
+export declare const ul: import("@xh/hoist/core").ElementFactory<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>;

package/build/types/cmp/layout/TileFrame.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { HoistModel, BoxProps, HoistProps } from '@xh/hoist/core';
+import './TileFrame.scss';
+export interface TileFrameProps extends HoistProps, BoxProps {
+    /**
+     * Desired tile width / height ratio (i.e. desiredRatio: 2 == twice as wide as tall).
+     * The container will strive to meet this ratio, but the final ratio may vary.
+     * Defaults to 1 (i.e. square tiles)
+     */
+    desiredRatio?: number;
+    /** The space between tiles (in px) */
+    spacing?: number;
+    /** Min tile width (in px). */
+    minTileWidth?: number;
+    /** Max tile width (in px). */
+    maxTileWidth?: number;
+    /** Min tile height (in px).*/
+    minTileHeight?: number;
+    /** Max tile height (in px).*/
+    maxTileHeight?: number;
+    /** Callback triggered when the layout configuration changes.*/
+    onLayoutChange?: (layout: {
+        rows: number;
+        cols: number;
+        tileWidth: number;
+        tileHeight: number;
+    }) => any;
+}
+/**
+ * This component renders its children as equally-sized tiles, resized and arranged to fill the
+ * available space within the container while maintaining even padding between tiles and keeping
+ * tile width / height as close to a specified ratio as possible.
+ *
+ * Supports a number of optional constraints on tile dimensions that can be used to produce more
+ * stable layouts. These should be used judiciously, however, as each constraint limits the ability
+ * of the TileFrame to fill its available space.
+ */
+export declare const TileFrame: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<HoistModel>>, tileFrame: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<HoistModel>>;

package/build/types/cmp/layout/Viewport.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+export interface ViewportProps extends HoistProps, BoxProps {
+}
+/**
+ * A container for the top level of the application.
+ * Will stretch to encompass the entire browser.
+ */
+export declare const Viewport: import("react").FC<ViewportProps>, viewport: import("@xh/hoist/core").ElementFactory<ViewportProps>;

package/build/types/cmp/layout/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Box';
+export * from './Frame';
+export * from './Placeholder';
+export * from './Spacer';
+export * from './Tags';
+export * from './TileFrame';
+export * from './Viewport';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PinPadModel } from './PinPadModel';
+/**
+ * Displays a prompt used to get obtain a PIN from the user.
+ *
+ * Uses a custom key pad and digit display.
+ *
+ * @see PinPadModel
+ */
+export declare const PinPad: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<PinPadModel>>, pinPad: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<PinPadModel>>;

package/build/types/cmp/pinpad/PinPadModel.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { HoistModel } from '@xh/hoist/core';
+export interface PinPadConfig {
+    /** The length of the PIN to get from the user, default 4. */
+    pinLength?: number;
+    headerText?: string;
+    subHeaderText?: string;
+}
+export declare class PinPadModel extends HoistModel {
+    disabled: boolean;
+    headerText: string;
+    subHeaderText: string;
+    errorText: string;
+    ref: import("react").RefObject<unknown> & ((instance: unknown) => void);
+    private _enteredDigits;
+    private _deleteWasLast;
+    private _pinLength;
+    constructor(config?: PinPadConfig);
+    /**
+     * The completed PIN entered by the user.  Observe this property to track the state
+     * of user progress.
+     *
+     * @returns null if the user has not finished entering a PIN, otherwise the PIN
+     *      the user entered.
+     */
+    get completedPin(): string;
+    /**
+     * Clear everything entered by the user, allowing the user to start entering a new PIN.
+     */
+    clear(): void;
+    get activeIndex(): number;
+    enterDigit(digit: any): void;
+    deleteDigit(): void;
+    get displayedDigits(): any[];
+}

package/build/types/cmp/pinpad/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PinPad';
+export * from './PinPadModel';

package/build/types/cmp/relativetimestamp/RelativeTimestamp.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+interface RelativeTimestampProps extends HoistProps, BoxProps {
+    /**
+     * Property on context model containing timestamp.
+     * Specify as an alternative to direct `timestamp` prop (and minimize parent re-renders).
+     */
+    bind?: string;
+    /** Date or milliseconds representing the starting time / time to compare. See also `bind`. */
+    timestamp?: Date | number;
+    /** Formatting options */
+    options?: RelativeTimestampOptions;
+}
+export interface RelativeTimestampOptions {
+    /** Allow dates greater than Date.now().*/
+    allowFuture?: boolean;
+    /** Use shorter timestamp text, default true for mobile clients. */
+    short?: boolean;
+    /** Label preceding timestamp.*/
+    prefix?: string;
+    /** Appended to future timestamps. */
+    futureSuffix?: string;
+    /** Appended to past timestamps. */
+    pastSuffix?: string;
+    /** String to return when timestamps are within `epsilon`. */
+    equalString?: string;
+    /** Threshold interval (in seconds) for `equalString`. **/
+    epsilon?: number;
+    /** String to return when timestamp is empty/falsy. */
+    emptyResult?: string;
+    /** Time to which the input timestamp is compared. */
+    relativeTo?: Date | number;
+}
+/**
+ * A component to display the approximate amount of time between a given timestamp and now in a
+ * friendly, human readable format (e.g. '6 minutes ago' or 'two hours from now').
+ *
+ * Automatically updates on a regular interval to stay current.
+ */
+export declare const RelativeTimestamp: import("react").FC<RelativeTimestampProps>, relativeTimestamp: import("@xh/hoist/core").ElementFactory<RelativeTimestampProps>;
+/**
+ * Returns a string describing the approximate amount of time between a given timestamp and the
+ * present moment in a friendly, human readable format.
+ */
+export declare function getRelativeTimestamp(timestamp: Date | number, options?: RelativeTimestampOptions): any;
+export {};

package/build/types/cmp/relativetimestamp/index.d.ts

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

package/build/types/cmp/spinner/Spinner.d.ts

@@ -0,0 +1,16 @@
+import { HoistProps } from '@xh/hoist/core';
+import { ImgHTMLAttributes } from 'react';
+export interface SpinnerProps extends HoistProps, ImgHTMLAttributes<HTMLImageElement> {
+    /** True to return a smaller 20px image vs default 50px. */
+    compact?: boolean;
+}
+/**
+ * Returns an img-based spinner in one of two sizes - default 50px spinner or smaller 20px spinner
+ * when `compact: true`. Used for the platform-specific `Mask` and `LoadingIndicator` components.
+ *
+ * Note that the source images are animated PNGs generated via https://loading.io. These are used
+ * in place of SVG-based options to reduce rendering overhead, especially when accessing an app
+ * via a remote desktop technology such as Citrix (where the spinners bundled with e.g. Blueprint
+ * were observed to cause unpredictable and unexpectedly severe performance issues).
+ */
+export declare const Spinner: import("react").FC<SpinnerProps>, spinner: import("@xh/hoist/core").ElementFactory<SpinnerProps>;

package/build/types/cmp/spinner/index.d.ts

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

package/build/types/cmp/store/StoreCountLabel.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import { Store } from '@xh/hoist/data';
+export interface StoreCountLabelProps extends HoistProps, BoxProps {
+    /** Store to which this component should bind. */
+    store?: Store;
+    /**
+     * True to count nested child records.
+     * If false (default) only root records will be included in count.
+     */
+    includeChildren?: boolean;
+    /** Units label appropriate for records being counted (e.g. "user" yields "50 users"). */
+    unit?: string;
+}
+/**
+ * Displays the number of (post-filtered) records loaded into a Store.
+ */
+export declare const StoreCountLabel: import("react").FC<StoreCountLabelProps>, storeCountLabel: import("@xh/hoist/core").ElementFactory<StoreCountLabelProps>;

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

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { DefaultHoistProps, HoistModel } from '@xh/hoist/core';
+import { FilterTestFn, Store } from '@xh/hoist/data';
+export interface StoreFilterFieldProps extends DefaultHoistProps {
+    /**
+     * Automatically apply the filter to bound store (default true). Applications that need to
+     * combine the filter generated by this component with other filters or run any other custom
+     * logic before filtering their bound store should set this to false.
+     */
+    autoApply?: boolean;
+    /**
+     * Field on optional model to which this component should bind its raw (text) value to persist
+     * across renders. Specify this field to control the state of this component directly or if
+     * deliberately not connecting this component to a Store/GridModel. These are both advanced
+     * use-cases - this prop is typically left unset.
+     */
+    bind?: string;
+    /** Names of field(s) to exclude from search. Cannot be used with `includeFields`. */
+    excludeFields?: string[];
+    /**
+     * Delay (in ms) to buffer filtering of the store after the value changes from user input.
+     * Default 200ms. Set to 0 to filter immediately on each keystroke. Applicable only when
+     * bound to a Store (directly or via a GridModel).
+     */
+    filterBuffer?: number;
+    /**
+     * GridModel whose Store this control should filter. When given a GridModel, this component
+     * will, by default, use the fields for all *visible* columns when matching, as well as any
+     * groupBy field. Do not configure this and `store` on the same component.
+     */
+    gridModel?: GridModel;
+    /**
+     * Names of field(s) to include in search. Required if neither a store nor gridModel are
+     * provided, as otherwise fields cannot be inferred.
+     *
+     * Can be used along with a gridModel to ensure a field is included, regardless of column
+     * visibility. Cannot be used with `excludeFields`.
+     */
+    includeFields?: string[];
+    /** Mode to use when filtering (default 'startWord'). */
+    matchMode?: 'start' | 'startWord' | 'any';
+    /** Optional model for raw value binding - see comments on the `bind` prop for details. */
+    model?: HoistModel;
+    /**
+     * Callback to receive an updated Filter. Typically used in conjunction with `autoApply: false`
+     * in order to manually apply the filter of this component to a store.
+     * NOTE that calls to this function are NOT buffered and will be made on each keystroke.
+     */
+    onFilterChange?: (filter: FilterTestFn) => any;
+    /** Text to display when the input is empty. */
+    placeholder?: string;
+    /**
+     * Store that this control should filter. By default, all fields configured on the Store
+     * will be used for matching. Do not configure this and `gridModel` on the same component.
+     */
+    store?: Store;
+    /** Width of the input in pixels. */
+    width?: number;
+}
+/**
+ * A text input Component that generates a filter function based on simple word-boundary matching of
+ * its value to the value of configured fields on a candidate object. If any field values match, the
+ * object itself is considered a match.
+ *
+ * This component is designed to be bound to a Store via either its `store` OR `gridModel` props.
+ * (If not configured to bind to a specific Store or GridModel, this component will bind by default
+ * to the store of the nearest GridModel found in context.) Binding in this way allows the component
+ * to auto-generate the fields in the store to be included in the filter and to automatically
+ * apply the filter to the Store.
+ *
+ * In cases where the application is combining this filter with other filters, or applying
+ * additional application logic, the filter can be managed manually by setting `autoApply` to
+ * `false` and using the `onFilterChange` callback instead.
+ *
+ * Fields to be searched can be automatically determined from the bound Store or GridModel, and/or
+ * customized via the include/excludeFields props. See prop comments for details.
+ *
+ * This component supports all props available to TextInput and will pass them along to its
+ * underlying TextInput.
+ */
+export declare const StoreFilterField: import("react").FC<StoreFilterFieldProps>, storeFilterField: import("@xh/hoist/core").ElementFactory<StoreFilterFieldProps>;

package/build/types/cmp/store/impl/StoreFilterFieldImplModel.d.ts

@@ -0,0 +1,23 @@
+import { HoistModel } from '@xh/hoist/core';
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { Store } from '@xh/hoist/data';
+/**
+ * @internal
+ */
+export declare class StoreFilterFieldImplModel extends HoistModel {
+    xhImpl: boolean;
+    model: any;
+    gridModel: GridModel;
+    store: Store;
+    filter: any;
+    bufferedApplyFilter: any;
+    constructor();
+    onLinked(): void;
+    get filterText(): any;
+    setFilterText(v: any): void;
+    applyFilter(): void;
+    regenerateFilter(): void;
+    getRegex(searchTerm: any): RegExp;
+    getActiveFields(): string[];
+    getValGetters(fieldName: any): ((record: any) => any)[] | ((rec: any) => any);
+}

package/build/types/cmp/store/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StoreCountLabel';
+export * from './StoreFilterField';

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import { TabContainerModel } from './TabContainerModel';
+export type TabContainerProps = HoistProps<TabContainerModel> & BoxProps;
+/**
+ * Display a set of child Tabs and (optionally) a switcher control.
+ *
+ * By default this TabContainer will install a TabSwitcher above the Tabs to control the currently
+ * displayed Tab. The 'TabContainerModel.switcher' property can be adjusted to place the switcher
+ * control on alternative edges of the container.
+ *
+ * If `switcher` is set to false then no TabSwitcher will be installed.  This setting
+ * is useful for applications that wish to place an associated TabSwitcher elsewhere in the
+ * graphical hierarchy (e.g. a shared menu bar), or control the visible Tab directly via other
+ * means.
+ *
+ * This component's TabContainerModel configures all aspects of this container, including its
+ * children. See that class for more details.
+ */
+export declare const TabContainer: import("react").FC<TabContainerProps>, tabContainer: import("@xh/hoist/core").ElementFactory<TabContainerProps>;