import { FieldModel } from '@xh/hoist/cmp/form';
import { DefaultHoistProps, HoistModel, HoistModelClass } from '@xh/hoist/core';
import { FocusEvent, ForwardedRef, ReactElement } 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> & import("react").RefCallback<HTMLElement>;
    domRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
    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;