@xh/hoist 82.0.1 → 82.0.3

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

@@ -0,0 +1,79 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, PlainObject } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import 'codemirror/addon/fold/brace-fold.js';
+import 'codemirror/addon/fold/foldcode.js';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/lint/lint.css';
+import 'codemirror/addon/lint/lint.js';
+import 'codemirror/addon/scroll/simplescrollbars.css';
+import 'codemirror/addon/scroll/simplescrollbars.js';
+import 'codemirror/addon/search/searchcursor.js';
+import 'codemirror/addon/selection/mark-selection.js';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/dracula.css';
+import './CodeInput.scss';
+export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
+    /** True to focus the control on render. */
+    autoFocus?: boolean;
+    /** False to not commit on every change/keystroke, default true. */
+    commitOnChange?: boolean;
+    /**
+     * Configuration object with any properties supported by the CodeMirror API.
+     * @see {@link https://codemirror.net/doc/manual.html#api_configuration|CodeMirror Docs}
+     */
+    editorProps?: PlainObject;
+    /**
+     * True to enable case-insensitive searching within the input. Default false, except in
+     * fullscreen mode, where search will be shown unless explicitly *disabled*. Note that
+     * enabling search forces the display of a toolbar, regardless of `showToolbar` prop.
+     */
+    enableSearch?: boolean;
+    /**
+     * Callback to autoformat the code. Given the unformatted code, this should return a
+     * properly-formatted copy.
+     */
+    formatter?: (str: string) => string;
+    /**
+     * A CodeMirror linter to provide error detection and hinting in the gutter.
+     */
+    linter?: (text: string) => any[];
+    /**
+     * A CodeMirror language mode - default none (plain-text). See the CodeMirror docs
+     * ({@link https://codemirror.net/mode/}) regarding available modes.
+     * Applications must import any mode they wish to enable.
+     */
+    mode?: string;
+    /**
+     * True to prevent user modification of editor contents, while still allowing user to
+     * focus, select, and copy contents.
+     */
+    readonly?: boolean;
+    /** True (default) to display a copy button at bottom-right of input. */
+    showCopyButton?: boolean;
+    /**
+     * True (default) to display autoformat button at bottom-right of input. Requires a
+     * `formatter` to be configured and content to be editable (!readonly, !disabled).
+     */
+    showFormatButton?: boolean;
+    /** True (default) to display fullscreen button at bottom-right of input. */
+    showFullscreenButton?: boolean;
+    /**
+     * True to display action buttons and/or find functionality in a dedicated bottom toolbar.
+     * Default is false unless enableSearch==true or in fullscreen mode. When false, enabled
+     * action buttons show only when the input focused and float in the bottom-right corner.
+     */
+    showToolbar?: boolean;
+}
+/**
+ * Code-editor style input, powered by CodeMirror. Displays a gutter with line numbers, mono-spaced
+ * styling, and custom key handlers (e.g. tab to indent). Can be customized with options and
+ * language modes supported by the underlying CodeMirror library {@link https://codemirror.net/}.
+ *
+ * Note Hoist also provides a preconfigured {@link JsonInput} component for editing JSON.
+ *
+ * TODO - understanding sizing spec / requirements for component vs. generated CodeMirror.
+ * Reconcile LayoutSupport with width/height props. https://github.com/xh/hoist-react/issues/327
+ */
+export declare const CodeInput: import("react").FC<CodeInputProps>, codeInput: import("@xh/hoist/core").ElementFactory<CodeInputProps>;

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

@@ -0,0 +1,118 @@
+import { PopperBoundary, PopperModifierOverrides } from '@blueprintjs/core';
+import { TimePickerProps } from '@blueprintjs/datetime';
+import { ReactDayPickerSingleProps } from '@blueprintjs/datetime/src/common/reactDayPickerProps';
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, Some } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { Position } from '@xh/hoist/kit/blueprint';
+import { LocalDate } from '@xh/hoist/utils/datetime';
+import type { Property } from 'csstype';
+import { ReactElement, ReactNode } from 'react';
+import './DateInput.scss';
+export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps {
+    value?: Date | LocalDate;
+    /** Props passed to ReactDayPicker component, as per DayPicker docs. */
+    dayPickerProps?: ReactDayPickerSingleProps['dayPickerProps'];
+    /** Enable using the DatePicker popover. Default true. */
+    enablePicker?: boolean;
+    /** Enable using the text control to enter date as text. Default true. */
+    enableTextInput?: boolean;
+    /** True to show a "clear" button aligned to the right of the control. Default false. */
+    enableClear?: boolean;
+    /**
+     * MomentJS format string for date display. Defaults to `YYYY-MM-DD HH:mm:ss`,
+     * with default presence of time components determined by the timePrecision prop.
+     */
+    formatString?: string;
+    /**
+     * MomentJS format string(s) for date parsing. Defaults to the format string, followed by an
+     * additional set of common variants.  Default presence of time components in these strings is
+     * determined by the timePrecision prop.  Formats will be evaluated in priority order specified
+     * as described here: https://momentjs.com/guides/#/parsing/multiple-formats/
+     */
+    parseStrings?: Some<string>;
+    /**
+     * Month to display in calendar popover on first render.
+     *
+     * If unspecified will default to the month of the current value (if present) or closest
+     * valid value.
+     */
+    initialMonth?: Date | LocalDate;
+    /** Icon to display inline on the left side of the input. */
+    leftIcon?: ReactElement;
+    /**
+     * Element to display inline on the right side of the input. Note if provided, this will
+     * take the place of the (default) calendar-picker button and (optional) clear button.
+     */
+    rightElement?: ReactNode;
+    /**
+     * Maximum (inclusive) valid date that can be entered by the user via the calendar picker or
+     * keyboard.  Will reset any out-of-bounds manually entered input to `null`.
+     *
+     * Note that this does not prevent the application from setting a value for this control
+     * programmatically out of this range.  It is also distinct from FormModel based validation,
+     * which will flag an invalid date in a Form. For Form usages, it may be advisable to set
+     * validation constraints in addition to this property.
+     */
+    maxDate?: Date | LocalDate;
+    /**
+     * Minimum (inclusive) valid date that can be entered by the user via the calendar picker or
+     * keyboard.  Will reset any out-of-bounds manually entered input to `null`.
+     *
+     * See note re. validation on maxDate, above.
+     */
+    minDate?: Date | LocalDate;
+    /** Text to display when control is empty. */
+    placeholder?: string;
+    /**
+     * Position for calendar popover, as per Blueprint docs.
+     * @see https://blueprintjs.com/docs/#datetime/dateinput
+     */
+    popoverPosition?: Position;
+    /** Boundary for calendar popover, as per Popper.js docs. Defaults to viewport. */
+    popoverBoundary?: PopperBoundary;
+    /** Modifiers for calendar popover, as per Blueprint docs. Defaults to null */
+    popoverModifiers?: PopperModifierOverrides;
+    /** Container DOM element to render the calendar popover inside. Defaults to document body. */
+    portalContainer?: HTMLElement;
+    /** True to select contents when control receives focus. */
+    selectOnFocus?: boolean;
+    /** True to show a bar with Today + Clear buttons at bottom of date picker popover. */
+    showActionsBar?: boolean;
+    /** True to show the picker upon focusing the input. */
+    showPickerOnFocus?: boolean;
+    /**
+     * True to parse any dates entered via the text input with moment's "strict" mode enabled.
+     * This ensures that the input entry matches the format(s) specified by `parseStrings` exactly.
+     * If it does not, the input will be considered invalid and the value set to `null`.
+     * @see https://momentjs.com/guides/#/parsing/strict-mode/
+     */
+    strictInputParsing?: boolean;
+    /** Alignment of entry text within control, default 'left'. */
+    textAlign?: Property.TextAlign;
+    /**
+     * Props passed to the TimePicker, as per Blueprint docs.
+     * @see https://blueprintjs.com/docs/#datetime/dateinput
+     */
+    timePickerProps?: TimePickerProps;
+    /**
+     * The precision of time selection that accompanies the calendar.
+     * If undefined, control will not show time. Ignored when valueType is localDate.
+     */
+    timePrecision?: 'second' | 'minute';
+    /**
+     * Type of value to publish. Defaults to 'date'. The use of 'localDate' is often a good
+     * choice for use cases where there is no time component.
+     * @see LocalDate - the class that will be published when localDate mode.
+     */
+    valueType?: 'date' | 'localDate';
+}
+/**
+ * A Calendar Control for choosing a Date.
+ *
+ * By default this control emits dates with the time component cleared (set to midnight), but this
+ * can be customized via the timePrecision prop to support editing of a date and time together.
+ *
+ * The calendar popover can be opened via the built-in button or up/down arrow keyboard shortcuts.
+ */
+export declare const DateInput: import("react").FC<DateInputProps>, dateInput: import("@xh/hoist/core").ElementFactory<DateInputProps>;

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

@@ -0,0 +1,8 @@
+import '@xh/hoist/desktop/register';
+import 'codemirror/mode/javascript/javascript';
+import { CodeInputProps } from './CodeInput';
+export type JsonInputProps = CodeInputProps;
+/**
+ * Code-editor style input for editing and validating JSON, powered by CodeMirror.
+ */
+export declare const JsonInput: import("react").FC<CodeInputProps>, jsonInput: import("@xh/hoist/core").ElementFactory<CodeInputProps>;

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

@@ -0,0 +1,79 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { NumericPrecision, ZeroPad } from '@xh/hoist/format';
+import type { Property } from 'csstype';
+import { KeyboardEventHandler, ReactElement, ReactNode, Ref } from 'react';
+export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps {
+    value?: number;
+    /** True to focus the control on render. */
+    autoFocus?: boolean;
+    /** True to commit on every change/keystroke, default false. */
+    commitOnChange?: boolean;
+    /** True to insert commas in displayed value. */
+    displayWithCommas?: boolean;
+    /** True to convert entries suffixed with k/m/b to thousands/millions/billions. */
+    enableShorthandUnits?: 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;
+    /**
+     * Minimum value. Note that this will govern the smallest value that this control can produce
+     * via user input. Smaller values passed to it via props or a bound model will still be displayed.
+     */
+    min?: number;
+    /**
+     * Maximum value. Note that this will govern the largest value that this control can produce
+     * via user input. Larger values passed to it via props or a bound model will still be displayed.
+     */
+    max?: number;
+    /** Minor step size for increment/decrement handling. */
+    minorStepSize?: number;
+    /** Major step size for increment/decrement handling. */
+    majorStepSize?: number;
+    /** Callback for normalized keydown event. */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** Text to display when control is empty. */
+    placeholder?: string;
+    /** Max decimal precision of the value, defaults to 4. */
+    precision?: NumericPrecision;
+    /** Element to display inline on the right side of the input. */
+    rightElement?: ReactNode;
+    /**
+     * Scale factor to apply when converting between the internal and external value. Useful for
+     * cases such as handling a percentage value where the user would expect to see or input 20 but
+     * the external value the input is bound to should be 0.2. Must be a factor of 10.
+     * Defaults to 1 (no scaling applied).
+     */
+    scaleFactor?: number;
+    /** True to select contents when control receives focus. */
+    selectOnFocus?: boolean;
+    /** Standard step size for increment/decrement handling. */
+    stepSize?: number;
+    /** Alignment of entry text within control, default 'right'. */
+    textAlign?: Property.TextAlign;
+    /**
+     * Text appended to the rendered value within control when not editing.
+     * Can be used to append e.g. "%" or a unit without need for an external right label.
+     */
+    valueLabel?: string;
+    /** @see NumberFormatOptions.zeroPad */
+    zeroPad?: ZeroPad;
+}
+/**
+ * Number input, with optional support for formatting of display value, shorthand units, and more.
+ *
+ * This component is built on the Blueprint NumericInput and gets default increment/decrement
+ * functionality from that component, based on the three stepSize props.
+ *
+ * This Hoist component hides the up/down buttons by default but keeps the keyboard handling.
+ * Users can use the following keys to increment/decrement:
+ *
+ *      ↑/↓           by one step
+ *      Shift + ↑/↓   by one major step
+ *      Alt + ↑/↓     by one minor step
+ *
+ * Set the corresponding stepSize prop(s) to null to disable this feature.
+ */
+export declare const NumberInput: import("react").FC<NumberInputProps>, numberInput: import("@xh/hoist/core").ElementFactory<NumberInputProps>;

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

@@ -0,0 +1,125 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, LayoutProps, SelectOption, StyleProps, Thunkable } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
+import { ReactNode } from 'react';
+import './Picker.scss';
+export interface PickerProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
+    /**
+     * Preset list of options for selection. Elements can be either a primitive or an object.
+     * Primitives will be displayed via toString().
+     * Objects must have a `label` property for display and a `value` property.
+     * The `labelField` and `valueField` props can customize which fields are used.
+     */
+    options?: Array<SelectOption | any>;
+    /** Field on provided options for sourcing each option's display text (default `label`). */
+    labelField?: string;
+    /** Field on provided options for sourcing each option's value (default `value`). */
+    valueField?: string;
+    /** True to allow entry/selection of multiple values. */
+    enableMulti?: boolean;
+    /**
+     * Value to use when the input is empty. Defaults to `[]` when `enableMulti` is true,
+     * and `null` otherwise.
+     */
+    emptyValue?: any;
+    /**
+     * True to allow clearing the current selection. In multi-select mode, shows a "Clear"
+     * action in the popover footer. In single-select mode, clicking the already-selected
+     * option deselects it.
+     */
+    enableClear?: boolean;
+    /**
+     * True to show a "Select All" action in the multi-select popover footer.
+     * Only effective when `enableMulti` is true. Defaults to false.
+     */
+    enableSelectAll?: boolean;
+    /**
+     * True to include a text filter input at the top of the popover to narrow the options list.
+     * Defaults to true when the option count exceeds `filterThreshold`.
+     */
+    enableFilter?: boolean;
+    /** Number of options above which the filter input is shown by default. Defaults to 8. */
+    filterThreshold?: number;
+    /**
+     * Singular noun describing each option (e.g. "state", "region"). When set, used in the
+     * default multi-select button text (e.g. "3 states", "All regions") and the popover
+     * footer count. Automatically pluralized as needed via {@link pluralize}.
+     */
+    displayNoun?: string;
+    /**
+     * Text shown on the trigger button when no value is selected. Defaults to a
+     * pluralized form of `displayNoun` if provided (e.g. "States..."), or 'Select...'
+     */
+    placeholder?: string;
+    /** True (default) to style trigger button background and borders to match inputs. */
+    styleButtonAsInput?: boolean;
+    /** True to render in a compact mode with reduced sizing for space-constrained contexts. */
+    compact?: boolean;
+    /**
+     * Props forwarded to the trigger button. Use this to customize the button's appearance,
+     * including `icon`, `rightIcon`, `intent`, `minimal`, `outlined`, `tooltip`, and any other
+     * {@link ButtonProps}.
+     *
+     * Defaults to `{minimal: true, outlined: true, rightIcon: Icon.chevronDown()}`.
+     */
+    buttonProps?: Partial<ButtonProps>;
+    /**
+     * True (default for single mode) to close the popover after a selection.
+     * Defaults to false in multi mode.
+     */
+    closeOnSelect?: boolean;
+    /** Placement of the popover relative to the trigger. Defaults to 'bottom-left'. */
+    popoverPosition?: string;
+    /**
+     * True to render a minimal popover without an arrow or visual separation from the trigger.
+     * Defaults to false, displaying the popover with an arrow and slight offset.
+     */
+    popoverMinimal?: boolean;
+    /** Width of the popover content in pixels. */
+    popoverWidth?: number;
+    /** True to render borders between option rows. Defaults to false. */
+    rowBorders?: boolean;
+    /** True to use alternating backgrounds for option rows. Defaults to false. */
+    stripeRows?: boolean;
+    /** Maximum height of the options list before scrolling. Defaults to 300. */
+    maxMenuHeight?: number;
+    /**
+     * Height of each option row in pixels. Used for virtual scrolling when rendering large
+     * option lists. Must match the rendered height of each option row.
+     * Defaults to 18 in compact mode, 30 otherwise.
+     */
+    optionHeight?: number;
+    /**
+     * True to use virtualized (windowed) rendering for the options list via react-window.
+     * This significantly improves performance for large option sets by only rendering visible
+     * rows. Defaults to true when the option count exceeds 100.
+     */
+    enableVirtual?: Thunkable<boolean>;
+    /**
+     * Function to render the text displayed on the trigger button for the current selection.
+     * Receives an array of selected option objects, the full list of option objects, and the
+     * configured `displayNoun` (if any). Return a ReactNode for display. Overrides the default
+     * button text, including any `displayNoun`-based summary. Does not replace the button
+     * itself — use `buttonProps` to customize the button's icon, intent, or other properties.
+     */
+    buttonTextRenderer?: (selectedOpts: SelectOption[], allOpts: SelectOption[], displayNoun: string) => ReactNode;
+    /**
+     * Function to render each option row in the popover list.
+     * Receives the option object and whether it is currently selected.
+     * Should return a ReactNode.
+     */
+    optionRenderer?: (opt: SelectOption, isSelected: boolean) => ReactNode;
+}
+/**
+ * An input control that presents its options in a popover dropdown, triggered by a button
+ * displaying the current value or a summary. Supports single and multi-select modes.
+ *
+ * Designed for space-constrained areas such as toolbars, where a traditional Select component
+ * (especially in multi-select "tag picker" mode) is too large. In multi mode, this component
+ * displays a compact summary (e.g. "3 selected") rather than concatenating all selected labels.
+ *
+ * This component does not use react-select. It renders a simple, scrollable list of options
+ * with check indicators, making it lightweight and easy to style.
+ */
+export declare const Picker: import("react").FC<PickerProps>, picker: import("@xh/hoist/core").ElementFactory<PickerProps>;

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

@@ -0,0 +1,21 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { HoistProps, HSide } from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import './RadioInput.scss';
+export interface RadioInputProps extends HoistProps, HoistInputProps {
+    /** True to display each radio button inline with each other. */
+    inline?: boolean;
+    /** Placement of each option's label relative its radio button, default 'right'. */
+    labelSide?: HSide;
+    /** Array of available options */
+    options: (RadioOption | any)[];
+}
+export interface RadioOption {
+    value: any;
+    label?: string;
+    disabled?: boolean;
+}
+/**
+ * An input for managing Radio Buttons.
+ */
+export declare const RadioInput: import("react").FC<RadioInputProps>, radioInput: import("@xh/hoist/core").ElementFactory<RadioInputProps>;

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

@@ -0,0 +1,144 @@
+import { HoistInputProps } from '@xh/hoist/cmp/input';
+import { Awaitable, HoistProps, LayoutProps, PlainObject, 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;
+    /**
+     * Value to use when the input is empty (default `null`).
+     * Recommended usage is `[]` when `enableMulti` is true to ensure value is always an array.
+     */
+    emptyValue?: any;
+    /** 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
+     * 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) => ReactNode;
+    /** 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) => ReactNode;
+    /** 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?: (opt: SelectOption) => 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 { HoistProps, LayoutProps, 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>;