@xh/hoist 57.0.0 → 57.0.2

package/build/types/desktop/cmp/input/Select.d.ts

@@ -0,0 +1,139 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, PlainObject, Awaitable, SelectOption } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactElement, ReactNode } from 'react';
+import './Select.scss';
+export declare const MENU_PORTAL_ID = "xh-select-input-portal";
+export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
+    /** True to focus the control on render. */
+    autoFocus?: boolean;
+    /**
+     * Function to return a "create a new option" string prompt. Requires `enableCreate` true.
+     * Passed current query input.
+     */
+    createMessageFn?: (query: string) => string;
+    /** True (default) to close the menu after each selection. */
+    closeMenuOnSelect?: boolean;
+    /** True to show a "clear" button at the right of the control. */
+    enableClear?: boolean;
+    /** True to accept and commit input values not present in options or returned by a query. */
+    enableCreate?: boolean;
+    /**
+     * True (default) to enable type-to-search keyboard input. False to disable keyboard input,
+     * showing the dropdown menu on click.
+     */
+    enableFilter?: boolean;
+    /** True to allow entry/selection of multiple values - "tag picker" style. */
+    enableMulti?: boolean;
+    /**
+     * True to enable tooltips on selected values. Enable when the space
+     * available to the select component might not support showing the value's full text.
+     */
+    enableTooltips?: boolean;
+    /**
+     * True to use react-windowed-select for improved performance on large option lists.
+     * See https://github.com/jacobworrel/react-windowed-select/.
+     *
+     * Currently only supported when the enableCreate and queryFn props are not specified.
+     * These options require the use of specialized 'Async' or 'Creatable' selects from the
+     * underlying react-select library which are not fully implemented in react-windowed-select.
+     *
+     * Applications should use this option with care.
+     */
+    enableWindowed?: boolean;
+    /**
+     * Function called to filter available options for a given query string input.
+     * Used for filtering of options provided by `options` prop when `enableFilter` is true.
+     * Not to be confused with `queryFn` prop, used in asynchronous mode.
+     *
+     * Provided function should take an option and a query value and return a boolean.
+     * Defaults to a case-insensitive match on word starts.
+     */
+    filterFn?: (opt: SelectOption, inputVal: string) => boolean;
+    /**
+     * True to hide the dropdown indicator, i.e. the down-facing arrow at the right of the Select.
+     * Defaults to true on tablets, false on desktop.
+     */
+    hideDropdownIndicator?: boolean;
+    /** True to suppress the default check icon rendered for the currently selected option. */
+    hideSelectedOptionCheck?: boolean;
+    /**
+     * True to hide options in the drop down menu if they have been selected.
+     * Defaults to same as enableMulti.
+     */
+    hideSelectedOptions?: boolean;
+    /** Field on provided options for sourcing each option's display text (default `label`). */
+    labelField?: string;
+    /** Icon to display inline on the left side of the input. */
+    leftIcon?: ReactElement;
+    /** Function to return loading message during an async query. Passed current query input. */
+    loadingMessageFn?: (query: string) => string;
+    /** Maximum height of the menu before scrolling. Defaults to 300px. */
+    maxMenuHeight?: number;
+    /** Placement of the dropdown menu relative to the input control. */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
+    /** Width in pixels for the dropdown menu - if unspecified, defaults to control width. */
+    menuWidth?: number;
+    /** Function to return message indicating no options loaded. Passed current query input. */
+    noOptionsMessageFn?: (query: string) => string;
+    /** True to auto-open the dropdown menu on input focus. */
+    openMenuOnFocus?: boolean;
+    /**
+     * Function to render options in the dropdown list. Called for each option object (which
+     * will contain at minimum a value and label field, as well as any other fields present in
+     * the source objects).
+     */
+    optionRenderer?: (SelectOption: any) => ReactNode;
+    /**
+     * Preset list of options for selection. Elements can be either a primitive or an object.
+     * Primitives will be displayed via toString().
+     * Objects must have either:
+     *      + A `label` property for display and a `value` property
+     *      + A `label` property and an `options` property containing an array of sub-options
+     *        to be grouped beneath the option. These sub-options must be either primitives or
+     *        `label`:`value` pairs. Deeper nesting is unsupported.
+     *
+     * See also `queryFn` to  supply options via an async query (i.e. from the server) instead
+     * of up-front in this prop.
+     */
+    options?: Array<SelectOption | any>;
+    /** Text to display when control is empty. */
+    placeholder?: string;
+    /**
+     * Delay (in ms) to buffer calls to the async queryFn. Defaults to 300.
+     */
+    queryBuffer?: number;
+    /**
+     * Async function to return a list of options for a given query string input.
+     * Replaces the `options` prop - use one or the other.
+     *
+     * For providing external (e.g. server-side) options based on user inputs. Not to be
+     * confused with `filterFn`, which should be used to filter through local options when
+     * not in async mode.
+     */
+    queryFn?: (query: string) => Awaitable<Array<SelectOption | any>>;
+    /**
+     * Escape-hatch props passed directly to react-select. Use with care - not all props
+     * in the react-select API are guaranteed to be supported by this Hoist component,
+     * and providing them directly can interfere with the implementation of this class.
+     */
+    rsOptions?: PlainObject;
+    /** True to select contents when control receives focus. */
+    selectOnFocus?: boolean;
+    /** Field on provided options for sourcing each option's value (default `value`). */
+    valueField?: string;
+}
+/**
+ * A managed wrapper around the React-Select combobox/dropdown component.
+ *
+ * Supports advanced options such as:
+ *      + Asynchronous queries
+ *      + Multiple selection
+ *      + Custom dropdown option renderers
+ *      + User-created ad-hoc entries
+ *      + Use of the library react-windowed-select for improved performance on large option lists.
+ *
+ * See {@link https://react-select.com|React}
+ * See {@link https://github.com/jacobworrel/react-windowed-select}
+ */
+export declare const Select: import("react").FC<SelectProps>, select: import("@xh/hoist/core").ElementFactory<SelectProps>;

package/build/types/desktop/cmp/input/Slider.d.ts

@@ -0,0 +1,33 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, Some } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactNode } from 'react';
+import './Slider.scss';
+export interface SliderProps extends HoistProps, HoistInputProps, LayoutProps {
+    value?: Some<number>;
+    /** Maximum value */
+    max?: number;
+    /** Minimum value */
+    min?: number;
+    /**
+     * Callback to render each label, passed the number value for that label point.
+     * If true, labels will use number value formatted to labelStepSize decimal places.
+     * If false, labels will not be shown.
+     */
+    labelRenderer?: boolean | ((value: number) => ReactNode);
+    /** Increment between successive labels. Must be greater than zero. Defaults to 1. */
+    labelStepSize?: number;
+    /** Increment between values. Must be greater than zero. Defaults to 1. */
+    stepSize?: number;
+    /**
+     * True to render a solid bar between min and current values (for simple slider) or between
+     * handles (for range slider). Defaults to true.
+     */
+    showTrackFill?: boolean;
+    /** True to render in a vertical orientation. */
+    vertical?: boolean;
+}
+/**
+ * A slider input to edit either a single number or an array of two (for a range).
+ */
+export declare const Slider: import("react").FC<SliderProps>, slider: import("@xh/hoist/core").ElementFactory<SliderProps>;

package/build/types/desktop/cmp/input/SwitchInput.d.ts

@@ -0,0 +1,21 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, HSide, StyleProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactNode } from 'react';
+import './SwitchInput.scss';
+export interface SwitchInputProps extends HoistProps, HoistInputProps, StyleProps {
+    value?: boolean;
+    /** True if the control should appear as an inline element (defaults to true). */
+    inline?: boolean;
+    /**
+     * Label displayed adjacent to the control itself.
+     * Can be used with or without an additional overall label as provided by FormField.
+     */
+    label?: ReactNode;
+    /** Placement of the inline label relative to the control itself, default 'right'. */
+    labelSide?: HSide;
+}
+/**
+ * Switch (toggle) control for non-nullable boolean values.
+ */
+export declare const SwitchInput: import("react").FC<SwitchInputProps>, switchInput: import("@xh/hoist/core").ElementFactory<SwitchInputProps>;

package/build/types/desktop/cmp/input/TextArea.d.ts

@@ -0,0 +1,26 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { LayoutProps, HoistProps, StyleProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { Ref } from 'react';
+import './TextArea.scss';
+export interface TextAreaProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+    value?: string;
+    /** True to focus the control on render. */
+    autoFocus?: boolean;
+    /** True to commit on every change/keystroke, default false. */
+    commitOnChange?: boolean;
+    /** Ref handler that receives HTML <input> element backing this component. */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Callback for normalized keydown event. */
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /** True to select contents when control receives focus. */
+    selectOnFocus?: boolean;
+    /** True to allow browser spell check, default false. */
+    spellCheck?: boolean;
+    /** Text to display when control is empty. */
+    placeholder?: string;
+}
+/**
+ * A multi-line text input.
+ */
+export declare const TextArea: import("react").FC<TextAreaProps>, textArea: import("@xh/hoist/core").ElementFactory<TextAreaProps>;

package/build/types/desktop/cmp/input/TextInput.d.ts

@@ -0,0 +1,55 @@
+import { HoistInputModel, HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, HSide, LayoutProps, StyleProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactElement, ReactNode, Ref, FocusEvent } from 'react';
+export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+    value?: string;
+    /**
+     *  HTML `autocomplete` attribute to set on underlying <input> element.
+     *
+     *  Defaults to 'off' for fields of type text and 'new-password' for fields of type 'password'
+     *  to defeat browser auto-completion, which is typically not desired in Hoist applications.
+     *  Set to 'on' or a more specific autocomplete token to enable.
+     *
+     * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attribute
+     * @see https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+     */
+    autoComplete?: string;
+    /** True to focus the control on render. */
+    autoFocus?: boolean;
+    /** True to commit on every change/keystroke, default false. */
+    commitOnChange?: boolean;
+    /** True to show a "clear" button as the right element. default false */
+    enableClear?: boolean;
+    /** Ref handler that receives HTML <input> element backing this component. */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Icon to display inline on the left side of the input. */
+    leftIcon?: ReactElement;
+    /** Callback for normalized keydown event. */
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /** Text to display when control is empty. */
+    placeholder?: string;
+    /** Element to display inline on the right side of the input. */
+    rightElement?: ReactNode;
+    /** True to display with rounded caps. */
+    round?: boolean;
+    /** True to select contents when control receives focus. */
+    selectOnFocus?: boolean;
+    /** Alignment of entry text within control, default 'left'. */
+    textAlign?: HSide;
+    /** True to allow browser spell check, default false. */
+    spellCheck?: boolean;
+    /** Underlying HTML <input> element type. */
+    type?: 'text' | 'password';
+}
+/**
+ * A single-line text input with additional support for embedded icons/elements.
+ */
+export declare const TextInput: import("react").FC<TextInputProps>, textInput: import("@xh/hoist/core").ElementFactory<TextInputProps>;
+export declare class TextInputModel extends HoistInputModel {
+    xhImpl: boolean;
+    get commitOnChange(): any;
+    onChange: (ev: any) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+    onFocus: (ev: FocusEvent) => void;
+}

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

@@ -0,0 +1,12 @@
+export * from './ButtonGroupInput';
+export * from './Checkbox';
+export * from './CodeInput';
+export * from './DateInput';
+export * from './JsonInput';
+export * from './NumberInput';
+export * from './RadioInput';
+export * from './Select';
+export * from './Slider';
+export * from './SwitchInput';
+export * from './TextArea';
+export * from './TextInput';

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooser.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import './LeftRightChooser.scss';
+import { LeftRightChooserModel } from './LeftRightChooserModel';
+export interface LeftRightChooserProps extends HoistProps<LeftRightChooserModel>, BoxProps {
+}
+/**
+ * A component for moving a list of items between two arbitrary groups. By convention, the left
+ * group represents 'available' items and the right group represents 'selected' items.
+ * A nested panel is also available to display a more in-depth description for any selected item.
+ * @see LeftRightChooserModel
+ */
+export declare const LeftRightChooser: import("react").FC<LeftRightChooserProps>, leftRightChooser: import("@xh/hoist/core").ElementFactory<LeftRightChooserProps>;

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooserFilter.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HoistProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { LeftRightChooserModel } from './LeftRightChooserModel';
+export interface LeftRightChooserFilterProps extends HoistProps<LeftRightChooserModel> {
+    /** Names of fields in chooser on which to filter. Defaults to ['text', 'group'] */
+    fields?: string[];
+    /** True to prevent regex start line anchor from being added. */
+    anyMatch?: boolean;
+}
+/**
+ * A Component that can bind to a LeftRightChooser and filter both lists
+ * based on simple text matching in selected fields.
+ */
+export declare const LeftRightChooserFilter: import("react").FC<LeftRightChooserFilterProps>, leftRightChooserFilter: import("@xh/hoist/core").ElementFactory<LeftRightChooserFilterProps>;

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooserModel.d.ts

@@ -0,0 +1,83 @@
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { HoistModel, HSide } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { FilterTestFn, StoreRecord } from '@xh/hoist/data';
+export interface LeftRightChooserConfig {
+    data?: LeftRightChooserItem[];
+    /** True to globally prevent the user from moving items between sides. */
+    readonly?: boolean;
+    /** Callback for when items change sides. */
+    onChange?: () => void;
+    /** Placeholder group value when an item has no group. */
+    ungroupedName?: string;
+    /** True to display the count of items on each side in the header. */
+    showCounts?: boolean;
+    leftTitle?: string;
+    leftSorted?: boolean;
+    leftGroupingEnabled?: boolean;
+    leftGroupingExpanded?: boolean;
+    leftEmptyText?: string;
+    rightTitle?: string;
+    rightSorted?: boolean;
+    rightGroupingEnabled?: boolean;
+    rightGroupingExpanded?: boolean;
+    rightEmptyText?: string;
+    xhImpl?: boolean;
+}
+/** Data record object for a LeftRightChooser value item. */
+export interface LeftRightChooserItem {
+    /** Primary label for the item. */
+    text: string;
+    /** Value that the item represents. */
+    value: any;
+    /** User-friendly, longer description of the item. */
+    description?: string;
+    /** Grid group in which to show the item. */
+    group?: string;
+    /** Initial side of the item - default 'left'. */
+    side?: HSide;
+    /** True to prevent the user from moving the item between sides. */
+    locked?: boolean;
+    exclude?: boolean;
+}
+/**
+ * A Model for managing the state of a LeftRightChooser.
+ */
+export declare class LeftRightChooserModel extends HoistModel {
+    leftModel: GridModel;
+    rightModel: GridModel;
+    readonly: boolean;
+    onChange: () => void;
+    hasDescription: boolean;
+    leftGroupingEnabled: boolean;
+    rightGroupingEnabled: boolean;
+    leftGroupingExpanded: boolean;
+    rightGroupingExpanded: boolean;
+    private _hasGrouping;
+    private _ungroupedName;
+    private _data;
+    private _lastSelectedSide;
+    /**
+     * Filter for data rows to determine if they should be shown.
+     * Useful for helping users find values of interest in a large pool of rows.
+     *
+     * Note that this will *not* affect the actual 'value' property, which will continue
+     * to include unfiltered records.
+     *
+     * @see LeftRightChooserFilter - a component to easily control this field.
+     * @param fn - predicate function for filtering.
+     */
+    setDisplayFilter(fn: FilterTestFn): void;
+    /** Currently 'selected' values on the right hand side. */
+    get rightValues(): any[];
+    /** Currently 'selected' values on the left hand side. */
+    get leftValues(): any[];
+    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
+    setData(data: LeftRightChooserItem[]): void;
+    moveRows(rows: StoreRecord[]): void;
+    private getTextColRenderer;
+    private preprocessData;
+    private onRowDoubleClicked;
+    private syncSelectionReaction;
+    private refreshStores;
+}

package/build/types/desktop/cmp/leftrightchooser/impl/ChooserToolbar.d.ts

@@ -0,0 +1,3 @@
+import { LeftRightChooserModel } from '../LeftRightChooserModel';
+/** @internal */
+export declare const chooserToolbar: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<LeftRightChooserModel>>;

package/build/types/desktop/cmp/leftrightchooser/impl/Description.d.ts

@@ -0,0 +1,3 @@
+import { LeftRightChooserModel } from '../LeftRightChooserModel';
+/** @internal */
+export declare const description: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<LeftRightChooserModel>>;

package/build/types/desktop/cmp/leftrightchooser/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LeftRightChooser';
+export * from './LeftRightChooserModel';
+export * from './LeftRightChooserFilter';

package/build/types/desktop/cmp/loadingindicator/LoadingIndicator.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { Corner, HoistProps, Some, TaskObserver } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import './LoadingIndicator.scss';
+export interface LoadingIndicatorProps extends HoistProps {
+    /** TaskObserver(s) that should be monitored to determine if the Indicator should be displayed. */
+    bind?: Some<TaskObserver>;
+    /** Position of the indicator relative to its containing component. */
+    corner?: Corner;
+    /** True to display the indicator. */
+    isDisplayed?: boolean;
+    /** Max characters allowed in message, after which it will be elided. Default 30. */
+    maxMessageLength?: number;
+    /** Optional text to be displayed - can also be sourced from bound TaskObserver. */
+    message?: string;
+    /** True (default) to display with an animated spinner. */
+    spinner?: boolean;
+}
+/**
+ * A minimal / unobtrusive LoadingIndicator displaying an optional spinner and/or message to signal
+ * that a longer-running operation is in progress, without using a modal Mask. Can be explicitly
+ * shown or bound to one or more TaskObservers
+ *
+ * Note that the Panel component's `loadingIndicator` prop provides a common and convenient way to
+ * add an indicator to a Panel without needing to manually create or manage this component.
+ */
+export declare const LoadingIndicator: import("react").FC<LoadingIndicatorProps>, loadingIndicator: import("@xh/hoist/core").ElementFactory<LoadingIndicatorProps>;

package/build/types/desktop/cmp/loadingindicator/index.d.ts

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

package/build/types/desktop/cmp/mask/Mask.d.ts

@@ -0,0 +1,27 @@
+import { HoistProps, Some, TaskObserver } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactNode, MouseEvent } from 'react';
+import './Mask.scss';
+export interface MaskProps extends HoistProps {
+    /** Task(s) that should be monitored to determine if the mask should be displayed. */
+    bind?: Some<TaskObserver>;
+    /** True (default) to contain mask within its parent, false to fill the viewport. */
+    inline?: boolean;
+    /** True to display mask. */
+    isDisplayed?: boolean;
+    /** Optional text to be displayed. */
+    message?: ReactNode;
+    /** Click handler **/
+    onClick?: (e: MouseEvent) => void;
+    /** True to display a spinning image.  Default false. */
+    spinner?: boolean;
+}
+/**
+ * Mask with optional spinner and text.
+ *
+ * The mask can be explicitly controlled via props or bound to a Task.
+ *
+ * Note that the Panel component's `mask` prop provides a common and convenient method for masking
+ * sections of the UI without needing to manually create or manage this component.
+ */
+export declare const Mask: import("react").FC<MaskProps>, mask: import("@xh/hoist/core").ElementFactory<MaskProps>;

package/build/types/desktop/cmp/mask/index.d.ts

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

package/build/types/desktop/cmp/modalsupport/ModalSupport.d.ts

@@ -0,0 +1,16 @@
+import '@xh/hoist/desktop/register';
+import './ModalSupport.scss';
+import { ModalSupportModel } from './ModalSupportModel';
+/**
+ * A ModalSupport container provides the ability for its child component to expand into a modal
+ * state, without requiring its contents to re-render.  All of the child component's state is
+ * preserved when toggling between inline and modal views.
+ *
+ * State and DOM refs are managed via a ModalSupportModel, which must be provided.
+ *
+ * Not intended for application use.  Instead, make use of the modal support provided by
+ * {@link Panel}
+ *
+ * @internal
+ */
+export declare const modalSupport: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ModalSupportModel>>;

package/build/types/desktop/cmp/modalsupport/ModalSupportModel.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { HoistModel } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+export interface ModalSupportConfig {
+    width?: string | number;
+    height?: string | number;
+    defaultModal?: boolean;
+    canOutsideClickClose?: boolean;
+}
+/**
+ * Core Model for a ModalSupport component.
+ * This model will place its component's child in 1 of 2 managed DOM nodes (either modal or inline)
+ */
+export declare class ModalSupportModel extends HoistModel {
+    xhImpl: boolean;
+    isModal: boolean;
+    width: string | number;
+    height: string | number;
+    canOutsideClickClose: boolean;
+    inlineRef: import("react").RefObject<HTMLElement> & ((instance: HTMLElement) => void);
+    modalRef: import("react").RefObject<HTMLElement> & ((instance: HTMLElement) => void);
+    hostNode: HTMLElement;
+    constructor({ width, height, defaultModal, canOutsideClickClose }?: ModalSupportConfig);
+    /**
+     * @returns Empty div set to inherit all styling from its parent
+     */
+    createHostNode(): HTMLElement;
+    toggleIsModal(): void;
+    destroy(): void;
+}

package/build/types/desktop/cmp/modalsupport/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModalSupport';
+export * from './ModalSupportModel';

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

@@ -0,0 +1,60 @@
+import { BoxProps, HoistProps, Some, TaskObserver } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ReactElement, ReactNode } from 'react';
+import './Panel.scss';
+import { PanelModel } from './PanelModel';
+import { HotkeyConfig } from '@xh/hoist/kit/blueprint';
+import { ContextMenuSpec } from '../contextmenu/ContextMenu';
+export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'title'> {
+    /** True to style panel header (if displayed) with reduced padding and font-size. */
+    compactHeader?: boolean;
+    /** 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;
+    /** Context Menu to show on context clicking this panel. */
+    contextMenu?: ContextMenuSpec;
+    /**
+     * Specification of hotkeys as prescribed by blueprint.
+     * @see useHotkeys() for more information on accepted values for this prop.
+     */
+    hotkeys?: HotkeyConfig[];
+    /**
+     * LoadingIndicator to render on this panel. Set to:
+     *   + a ReactElement specifying a LoadingIndicator,
+     *   + true for a default LoadingIndicator,
+     *   + one or more tasks 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';
+    /**
+     * Mask to render on this panel. Set to:
+     *   + a ReactElement specifying a Mask instance,
+     *   + true for a default mask,
+     *   + one or more tasks 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';
+    /**
+     * A toolbar to be docked at the top of the panel.
+     * If specified as an array, items will be passed as children to a Toolbar component.
+     */
+    tbar?: Some<ReactNode>;
+    /**
+     * A toolbar to be docked at the top of the panel.
+     * If specified as an array, items will be passed as children to a Toolbar component.
+     */
+    bbar?: Some<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.
+ *
+ * Panels also support resizing and collapsing their contents via its `model` prop. Provide an
+ * optional `PanelModel` config as a prop to enable and customize these features.
+ *
+ * A Panel will accept a ref argument to provide access to its top level DOM element.
+ */
+export declare const Panel: import("react").FC<PanelProps>, panel: import("@xh/hoist/core").ElementFactory<PanelProps>;