@xh/hoist 82.0.1 → 82.0.2

package/build/types/cmp/chart/theme/Dark.d.ts

@@ -0,0 +1,216 @@
+/**
+ * @internal
+ */
+export declare const DarkTheme: {
+    colors: string[];
+    chart: {
+        backgroundColor: string;
+        style: {
+            fontFamily: string;
+        };
+        plotBorderColor: string;
+        resetZoomButton: {
+            theme: {
+                fill: string;
+                stroke: string;
+                style: {
+                    color: string;
+                };
+                r: number;
+            };
+        };
+    };
+    title: {
+        style: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    subtitle: {
+        style: {
+            color: string;
+        };
+    };
+    xAxis: {
+        gridLineColor: string;
+        gridLineWidth: number;
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+            };
+        };
+        lineColor: string;
+        minorGridLineColor: string;
+        tickColor: string;
+        tickLength: number;
+        title: {
+            style: {
+                color: string;
+            };
+        };
+    };
+    yAxis: {
+        alternateGridColor: string;
+        gridLineColor: string;
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+            };
+        };
+        lineColor: string;
+        lineWidth: number;
+        minorGridLineColor: string;
+        tickColor: string;
+        tickLength: number;
+        tickWidth: number;
+        title: {
+            style: {
+                color: string;
+            };
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        style: {
+            color: string;
+        };
+    };
+    plotOptions: {
+        series: {
+            dataLabels: {
+                color: string;
+            };
+            marker: {
+                lineColor: string;
+            };
+        };
+        boxplot: {
+            fillColor: string;
+        };
+        candlestick: {
+            lineColor: string;
+        };
+        errorbar: {
+            color: string;
+        };
+    };
+    legend: {
+        itemStyle: {
+            color: string;
+        };
+        itemHoverStyle: {
+            color: string;
+        };
+        itemHiddenStyle: {
+            color: string;
+        };
+    };
+    labels: {
+        style: {
+            color: string;
+        };
+    };
+    navigation: {
+        buttonOptions: {
+            symbolStroke: string;
+            symbolStrokeWidth: number;
+            symbolSize: number;
+            theme: {
+                fill: string;
+                'stroke-width': number;
+                stroke: string;
+                r: number;
+                states: {
+                    hover: {
+                        fill: string;
+                        stroke: string;
+                    };
+                    select: {
+                        fill: string;
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        menuStyle: {
+            background: string;
+            border: string;
+            padding: string;
+            boxShadow: string;
+        };
+        menuItemStyle: {
+            fontWeight: string;
+            background: string;
+            color: string;
+        };
+        menuItemHoverStyle: {
+            fontWeight: string;
+            background: string;
+            color: string;
+        };
+    };
+    rangeSelector: {
+        buttonTheme: {
+            fill: string;
+            stroke: string;
+            'stroke-width': number;
+            style: {
+                color: string;
+            };
+            states: {
+                hover: {
+                    fill: string;
+                    stroke: string;
+                    style: {
+                        color: string;
+                    };
+                };
+                select: {
+                    fill: string;
+                    stroke: string;
+                    style: {
+                        color: string;
+                    };
+                };
+            };
+        };
+        inputBoxBorderColor: string;
+        inputStyle: {
+            backgroundColor: string;
+            color: string;
+        };
+        labelStyle: {
+            color: string;
+        };
+    };
+    navigator: {
+        handles: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        outlineColor: string;
+        outlineWidth: number;
+        maskFill: string;
+        series: {
+            color: string;
+            lineColor: string;
+            fillOpacity: number;
+        };
+        xAxis: {
+            gridLineColor: string;
+        };
+    };
+    scrollbar: {
+        barBackgroundColor: string;
+        barBorderColor: string;
+        buttonArrowColor: string;
+        buttonBackgroundColor: string;
+        buttonBorderColor: string;
+        rifleColor: string;
+        trackBackgroundColor: string;
+        trackBorderColor: string;
+    };
+};

package/build/types/cmp/chart/theme/Light.d.ts

@@ -0,0 +1,193 @@
+/**
+ * @internal
+ */
+export declare const LightTheme: {
+    chart: {
+        backgroundColor: string;
+        style: {
+            fontFamily: string;
+        };
+        plotBorderColor: string;
+        resetZoomButton: {
+            theme: {
+                fill: string;
+                stroke: string;
+                style: {
+                    color: string;
+                };
+                r: number;
+            };
+        };
+    };
+    title: {
+        style: {
+            color: string;
+            fontSize: string;
+        };
+    };
+    subtitle: {
+        style: {
+            color: string;
+        };
+    };
+    xAxis: {
+        gridLineColor: string;
+        gridLineWidth: number;
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+            };
+        };
+        lineColor: string;
+        tickColor: string;
+        tickLength: number;
+        title: {
+            style: {
+                color: string;
+            };
+        };
+    };
+    yAxis: {
+        alternateGridColor: string;
+        gridLineColor: string;
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+            };
+        };
+        lineColor: string;
+        lineWidth: number;
+        tickColor: string;
+        tickLength: number;
+        tickWidth: number;
+        title: {
+            style: {
+                color: string;
+            };
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        style: {
+            color: string;
+        };
+    };
+    legend: {
+        itemStyle: {
+            color: string;
+        };
+        itemHoverStyle: {
+            color: string;
+        };
+        itemHiddenStyle: {
+            color: string;
+        };
+    };
+    labels: {
+        style: {
+            color: string;
+        };
+    };
+    navigation: {
+        buttonOptions: {
+            symbolStroke: string;
+            symbolStrokeWidth: number;
+            symbolSize: number;
+            theme: {
+                fill: string;
+                'stroke-width': number;
+                stroke: string;
+                r: number;
+                states: {
+                    hover: {
+                        fill: string;
+                        stroke: string;
+                    };
+                    select: {
+                        fill: string;
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        menuStyle: {
+            background: string;
+            border: string;
+            padding: string;
+            boxShadow: string;
+        };
+        menuItemStyle: {
+            fontWeight: string;
+            background: string;
+            color: string;
+        };
+        menuItemHoverStyle: {
+            fontWeight: string;
+            background: string;
+            color: string;
+        };
+    };
+    rangeSelector: {
+        buttonTheme: {
+            fill: string;
+            stroke: string;
+            'stroke-width': number;
+            style: {
+                color: string;
+            };
+            states: {
+                hover: {
+                    fill: string;
+                    stroke: string;
+                    style: {
+                        color: string;
+                    };
+                };
+                select: {
+                    fill: string;
+                    stroke: string;
+                    style: {
+                        color: string;
+                    };
+                };
+            };
+        };
+        inputBoxBorderColor: string;
+        inputStyle: {
+            backgroundColor: string;
+            color: string;
+        };
+        labelStyle: {
+            color: string;
+        };
+    };
+    navigator: {
+        handles: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        outlineColor: string;
+        outlineWidth: number;
+        maskFill: string;
+        series: {
+            color: string;
+            lineColor: string;
+        };
+        xAxis: {
+            gridLineColor: string;
+        };
+    };
+    scrollbar: {
+        barBackgroundColor: string;
+        barBorderColor: string;
+        buttonArrowColor: string;
+        buttonBackgroundColor: string;
+        buttonBorderColor: string;
+        rifleColor: string;
+        trackBackgroundColor: string;
+        trackBorderColor: string;
+    };
+};

package/build/types/cmp/clock/Clock.d.ts

@@ -0,0 +1,25 @@
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+export interface ClockProps extends HoistProps, BoxProps {
+    /** String to display if the timezone is invalid or an offset cannot be fetched. */
+    errorString?: string;
+    /** A moment.js format string. @see {@link https://momentjs.com/docs/#/displaying/format/} */
+    format?: string;
+    /** Prefix prepended to the displayed time. */
+    prefix?: string;
+    /** Suffix appended to the displayed time. */
+    suffix?: string;
+    /**
+     * Timezone ID. The user's local system time will be used if omitted.
+     * @see {@link https://docs.oracle.com/middleware/12212/wcs/tag-ref/MISC/TimeZones.html}
+     */
+    timezone?: string;
+    /** Frequency (ms) for updating the displayed time. Defaults to once a second. */
+    updateInterval?: number;
+}
+/**
+ * A component to display the current time.
+ *
+ * Automatically updates on a regular interval to stay current. Supports displaying time in an
+ * alternate timezone (fetching the requested zone offset from the server as required).
+ */
+export declare const Clock: import("react").FC<ClockProps>, clock: import("@xh/hoist/core").ElementFactory<ClockProps>;

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

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

package/build/types/cmp/dataview/DataView.d.ts

@@ -0,0 +1,21 @@
+import { HoistProps, LayoutProps, TestSupportProps } from '@xh/hoist/core';
+import type { GridOptions } from '@xh/hoist/kit/ag-grid';
+import './DataView.scss';
+import { DataViewModel } from './DataViewModel';
+export interface DataViewProps<M extends DataViewModel = DataViewModel> extends HoistProps<M>, LayoutProps, TestSupportProps {
+    /**
+     * Options for ag-Grid's API.
+     *
+     * This constitutes an 'escape hatch' for applications that need to get to the underlying
+     * ag-Grid API. It should be used with care. Settings made here might be overwritten and/or
+     * interfere with the implementation of this component and its use of the ag-Grid API.
+     *
+     * Note that changes to these options after the component's initial render will be ignored.
+     */
+    agOptions?: GridOptions;
+}
+/**
+ * A DataView is a specialized version of the Grid component. It displays its data within a
+ * single column, using a configured component for rendering each item.
+ */
+export declare const DataView: import("react").FC<DataViewProps<DataViewModel>>, dataView: import("@xh/hoist/core").ElementFactory<DataViewProps<DataViewModel>>;

package/build/types/cmp/dataview/DataViewModel.d.ts

@@ -0,0 +1,117 @@
+import { RowClickedEvent, RowDoubleClickedEvent, RowHeightParams } from '@xh/hoist/kit/ag-grid';
+import { ColumnRenderer, GridConfig, GridModel, GroupRowRenderer, RowClassFn, RowClassRuleFn, GridSorterLike, GridContextMenuSpec, GridGroupSortFn } from '@xh/hoist/cmp/grid';
+import { HoistModel, LoadSpec, PlainObject, Some } from '@xh/hoist/core';
+import { Store, StoreConfig, StoreRecord, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';
+import { ReactNode } from 'react';
+/**
+ * Configuration for a DataView.
+ */
+export interface DataViewConfig {
+    /** A Store instance, or a config to create one. */
+    store?: Store | StoreConfig;
+    /** Renderer to use for each data row. */
+    renderer?: ColumnRenderer;
+    /** Row height (in px) for each item displayed in the view, or a function which returns a number.*/
+    itemHeight?: number | ItemHeightFn;
+    /** Field(s) by which to do full-width row grouping. */
+    groupBy?: Some<string>;
+    /** Height (in px) of a group row. */
+    groupRowHeight?: number;
+    /** Function used to render group rows. */
+    groupRowRenderer?: GroupRowRenderer;
+    /** True (default) to show a count of group member rows within each full-width group row. */
+    showGroupRowCounts?: boolean;
+    /**
+     * Function to use to sort full-row groups.  Called with two group values to compare
+     * in the form of a standard JS comparator.  Default is an ascending string sort.
+     * Set to `null` to prevent sorting of groups.
+     */
+    groupSortFn?: GridGroupSortFn;
+    /** Sort specification. */
+    sortBy?: Some<GridSorterLike>;
+    /** Specification of selection behavior. Defaults to 'single' (desktop) and 'disabled' (mobile) */
+    selModel?: StoreSelectionModel | StoreSelectionConfig | 'single' | 'multiple' | 'disabled';
+    /** Text/HTML to display if view has no records.*/
+    emptyText?: ReactNode;
+    /** True (default) to hide empty text until after the Store has been loaded at least once. */
+    hideEmptyTextBeforeLoad?: boolean;
+    /** True to highlight the currently hovered row.*/
+    showHover?: boolean;
+    /** True to render row borders.*/
+    rowBorders?: boolean;
+    /** True to use alternating backgrounds for rows.*/
+    stripeRows?: boolean;
+    /**
+     * Array of RecordActions, dividers, or token strings with which to create a context menu.
+     * May also be specified as a function returning same.
+     */
+    contextMenu?: GridContextMenuSpec;
+    /**
+     * Closure to generate CSS class names for a row.
+     * NOTE that, once added, classes will *not* be removed if the data changes.
+     * Use `rowClassRules` instead if StoreRecord data can change across refreshes.
+     */
+    rowClassFn?: RowClassFn;
+    /**
+     * Object keying CSS class names to functions determining if they should be added or
+     * removed from the row. See Ag-Grid docs on "row styles" for details.
+     */
+    rowClassRules?: Record<string, RowClassRuleFn>;
+    /**
+     * Callback when a row is clicked. (Note that the event received may be null - e.g. for clicks
+     * on full-width group rows.)
+     */
+    onRowClicked?: (e: RowClickedEvent) => void;
+    /**
+     * Callback when a row is double-clicked. (Note that the event received may be null - e.g. for
+     * clicks on full-width group rows.)
+     */
+    onRowDoubleClicked?: (e: RowDoubleClickedEvent) => void;
+    /**
+     * "Escape hatch" object to pass directly to GridModel. Note these options may be used
+     * / overwritten by the framework itself, and are not all guaranteed to be compatible
+     * with its usages of GridModel.
+     */
+    gridOptions?: Omit<GridConfig, keyof DataViewConfig>;
+}
+export type ItemHeightFn = (params: {
+    record: StoreRecord;
+    dataViewModel: DataViewModel;
+    agParams: RowHeightParams;
+}) => number;
+/**
+ * DataViewModel is a wrapper around GridModel, which shows sorted data in a single column,
+ * using a configured component for rendering each item.
+ *
+ * This is the primary app entry-point for specifying DataView component options and behavior.
+ */
+export declare class DataViewModel extends HoistModel {
+    gridModel: GridModel;
+    itemHeight: number | ItemHeightFn;
+    groupRowHeight: number;
+    constructor(config: DataViewConfig);
+    get store(): Store;
+    get empty(): boolean;
+    get selModel(): StoreSelectionModel;
+    get hasSelection(): boolean;
+    get selectedRecords(): StoreRecord[];
+    get selectedRecord(): StoreRecord;
+    get selectedId(): import("@xh/hoist/data").StoreRecordId;
+    get groupBy(): string[];
+    get sortBy(): import("@xh/hoist/cmp/grid").GridSorter[];
+    selectAsync(records: Some<StoreRecordOrId>, opts?: {
+        ensureVisible?: boolean;
+        clearSelection?: boolean;
+    }): Promise<void>;
+    preSelectFirstAsync(): Promise<void>;
+    selectFirstAsync(opts?: {
+        ensureVisible?: boolean;
+    }): Promise<void>;
+    ensureSelectionVisibleAsync(): Promise<void>;
+    doLoadAsync(loadSpec: LoadSpec): Promise<any>;
+    loadData(rawData: any[], rawSummaryData?: PlainObject): void;
+    updateData(rawData: PlainObject[] | StoreTransaction): import("@xh/hoist/data").StoreChangeLog;
+    clear(): void;
+    setGroupBy(colIds: Some<string>): void;
+    setSortBy(sorters: Some<GridSorterLike>): void;
+}

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

@@ -0,0 +1,2 @@
+export * from './DataView';
+export * from './DataViewModel';

package/build/types/cmp/error/ErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import { ErrorBoundaryModel } from './ErrorBoundaryModel';
+/**
+ * A wrapper component that will catch an otherwise unhandled React lifecycle error from any child
+ * component, preventing such an error from bringing down the entire app. Upon catching an error,
+ * this comp will swap out its children with an `ErrorMessage` component (or other configured
+ * renderer), giving the user the chance to report the exception and optionally try again.
+ *
+ * This wrapper will automatically only catch and handle exceptions that occur during the React
+ * lifecycle, but applications that wish to use this component to display other caught exceptions
+ * may explicitly use it to handle those exceptions.
+ */
+export declare const ErrorBoundary: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<ErrorBoundaryModel>>, errorBoundary: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ErrorBoundaryModel>>;

package/build/types/cmp/error/ErrorBoundaryModel.d.ts

@@ -0,0 +1,43 @@
+import { ExceptionHandlerOptions, HoistModel } from '@xh/hoist/core';
+import { ReactNode } from 'react';
+export interface ErrorBoundaryConfig {
+    /**
+     * Config for {@link XH.handleException}, or a custom function to handle any error caught by
+     * the boundary. Defaults to `{showAlert: false}`.
+     */
+    errorHandler?: ExceptionHandlerOptions | ((e: unknown) => void);
+    /**
+     * Function to render any error caught by the boundary - return will be rendered in lieu of the
+     * component's normal children. Defaults to a platform-appropriate {@link ErrorMessage}.
+     */
+    errorRenderer?: (e: unknown) => ReactNode;
+}
+export declare class ErrorBoundaryModel extends HoistModel {
+    errorHandler: ExceptionHandlerOptions | ((e: unknown) => void);
+    errorRenderer: (e: unknown) => ReactNode;
+    /**
+     * Caught error being displayed instead of the content.
+     * Null if content rendering normally.
+     */
+    error: unknown;
+    constructor(config?: ErrorBoundaryConfig);
+    /**
+     * Handle the exception and replace the contents of the component with a rendered error.
+     *
+     * This method does not need to be called for React Lifecycle events that occur within its
+     * rendered content - that is handled automatically by the component. It is publicly available
+     * for apps that wish to use this component to handle and display other caught exceptions.
+     *
+     * For exceptions that have already been handled, call {@link showError} instead.
+     */
+    handleError(e: unknown): void;
+    /**
+     * Replace the contents of the component with a rendered error.
+     *
+     * Note that unlike {@link handleError} this method will *not* report or take any other action
+     * on the error. It is intended for use with exceptions that have already been handled.
+     */
+    showError(e: unknown): void;
+    /** Reset this component to clear the current error and attempt to re-render its contents. */
+    clear(): void;
+}

package/build/types/cmp/error/ErrorMessage.d.ts

@@ -0,0 +1,42 @@
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import type { ButtonProps as DesktopButtonProps } from '@xh/hoist/desktop/cmp/button';
+import type { ButtonProps as MobileButtonProps } from '@xh/hoist/mobile/cmp/button';
+import { ReactNode } from 'react';
+import './ErrorMessage.scss';
+export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
+    /**
+     * If provided, will render a "Retry" button that calls this function.
+     * Use `actionButtonProps` for further control over this button.
+     */
+    actionFn?: (error: unknown) => void;
+    /**
+     * If provided, component will render an inline action button - prompting to user to take some
+     * action that might resolve the error, such as retrying a failed data load.
+     */
+    actionButtonProps?: DesktopButtonProps | MobileButtonProps;
+    /**
+     * If provided, will render a "Details" button that calls this function.
+     * Use `detailsButtonProps` for further control over this button.  Default false.
+     */
+    detailsFn?: (error: unknown) => void;
+    /**
+     * If provided, component will render an inline details button.
+     */
+    detailsButtonProps?: DesktopButtonProps | MobileButtonProps;
+    /**
+     * Error to display. If undefined, this component will look for an error property on its model.
+     * If no error is found, this component will not be displayed.
+     */
+    error?: unknown;
+    /**
+     * Message to display for the error.
+     * Defaults to the error, or any 'message' property contained within it.
+     */
+    message?: ReactNode;
+    /** Optional title to display above the message. */
+    title?: ReactNode;
+}
+/**
+ * Component for displaying an error with standardized styling.
+ */
+export declare const ErrorMessage: import("react").FC<ErrorMessageProps>, errorMessage: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;

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

@@ -0,0 +1,3 @@
+export * from './ErrorBoundary';
+export * from './ErrorBoundaryModel';
+export * from './ErrorMessage';