@xh/hoist 57.0.0 → 57.0.1

package/build/types/cmp/ag-grid/AgGridModel.d.ts

@@ -0,0 +1,183 @@
+import { HoistModel, PlainObject, SizingMode, Some } from '@xh/hoist/core';
+import { GridSorterLike } from '../grid/GridSorter';
+import type { ColumnApi, GridApi, SortDirection } from '@xh/hoist/kit/ag-grid';
+export interface AgGridModelConfig {
+    sizingMode?: SizingMode;
+    /** True to highlight the currently hovered row. */
+    showHover?: boolean;
+    /** True to render row borders. */
+    rowBorders?: boolean;
+    /** True to render row borders. */
+    cellBorders?: boolean;
+    /** True to render cell borders. */
+    stripeRows?: boolean;
+    /** True to highlight the focused cell with a border. */
+    showCellFocus?: boolean;
+    /** True to suppress display of the grid's header row. */
+    hideHeaders?: boolean;
+    /** @internal */
+    xhImpl?: boolean;
+}
+/**
+ * @see https://www.ag-grid.com/javascript-grid-column-definitions/#saving-and-restoring-column-state
+ */
+export interface AgGridColumnState {
+    isPivot: boolean;
+    /** State of each column in the grid. */
+    columns: any[];
+}
+export interface AgGridColumnSortState {
+    colId: string;
+    sort?: SortDirection;
+    sortIndex: number;
+}
+export interface AgGridMiscState {
+    /** Identifier of the currently open tool panel in the side bar*/
+    panelId: string;
+}
+export interface AgGridState {
+    columnState?: AgGridColumnState;
+    sortState?: AgGridColumnSortState[];
+    expandState?: any;
+    filterState?: any[];
+    miscState?: AgGridMiscState;
+    errors?: Record<string, string>;
+}
+/**
+ * Model for an AgGrid, provides reactive support for setting grid styling as well as access to the
+ * ag-Grid API and Column API references for interacting with ag-Grid.
+ *
+ * Also provides a series of utility methods that are generally useful when managing grid state.
+ * This includes the ability to get and set the full state of the grid in a serializable form,
+ * allowing applications to save "views" of the grid.
+ */
+export declare class AgGridModel extends HoistModel {
+    static AUTO_GROUP_COL_ID: string;
+    sizingMode: SizingMode;
+    rowBorders: boolean;
+    stripeRows: boolean;
+    cellBorders: boolean;
+    showHover: boolean;
+    showCellFocus: boolean;
+    hideHeaders: boolean;
+    agApi: GridApi;
+    agColumnApi: ColumnApi;
+    private _prevSortBy;
+    constructor({ sizingMode, showHover, rowBorders, cellBorders, stripeRows, showCellFocus, hideHeaders, xhImpl }?: AgGridModelConfig);
+    /** True if the grid fully initialized and its state can be queried/mutated. */
+    get isReady(): boolean;
+    /**
+     * Retrieves the current state of the grid via ag-Grid APIs. This state is returned in a
+     * serializable form and can be later restored via setState.
+     *
+     * @param excludeColumn - true to exclude the column state
+     * @param excludeSort - true to exclude the sort state
+     * @param excludeExpand - true to exclude the expand state
+     * @param excludeFilter - true to exclude the filter state
+     * @param excludeMisc - true to exclude any additional miscellaneous state
+     */
+    getState(opts?: {
+        excludeColumnState?: boolean;
+        excludeSortState?: boolean;
+        excludeExpandState?: boolean;
+        excludeFilterState?: boolean;
+        excludeMiscState?: boolean;
+    }): AgGridState;
+    /**
+     * Sets the current state of the grid. This method should generally only be used with an object
+     * returned by getState.
+     *
+     * Calls to this method should be made after the columns have been set in the grid.
+     *
+     * Some of the state may be data-dependent. Specifically the expandState and filterState. It is
+     * recommended that applications wait until the data has been loaded in the grid before setting
+     * the state if including those elements. This method can be called immediately after the data
+     * has been loaded via agApi.setRowData
+     */
+    setState(state: AgGridState): void;
+    getMiscState(): AgGridMiscState;
+    /**
+     * Sets the grid state which doesn't fit into the other buckets.
+     */
+    setMiscState(miscState: AgGridMiscState): void;
+    /**
+     * @returns Current filter state of the grid.
+     * @see https://www.ag-grid.com/javascript-grid-filtering/#get-set-all-filter-models
+     */
+    getFilterState(): PlainObject;
+    /**
+     * Sets the grid filter state.
+     * Note that this state may be data-dependent, depending on the types of filter being used.
+     */
+    setFilterState(filterState: any): void;
+    /**
+     * @returns current sort state of the grid.
+     * @see https://www.ag-grid.com/javascript-grid-sorting/#sorting-api
+     */
+    getSortState(): AgGridColumnSortState[];
+    /**
+     * Sets the grid sort state.
+     */
+    setSortState(sortState: AgGridColumnSortState[]): void;
+    /** @returns current column state of the grid, including pivot mode */
+    getColumnState(): AgGridColumnState;
+    /** Sets the columns state of the grid. */
+    setColumnState(colState: AgGridColumnState): void;
+    /**
+     * Sets the sort state on the grid's column state
+     */
+    applySortBy(value: Some<GridSorterLike>): void;
+    /** @returns the current row expansion state of the grid in a serializable form. */
+    getExpandState(): any;
+    /**
+     * Sets the grid row expansion state
+     * @param expandState - grid expand state retrieved via getExpandState()
+     */
+    setExpandState(expandState: any): void;
+    /** @returns list of selected row node ids */
+    getSelectedRowNodeIds(): string[];
+    /**
+     * Sets the selected row node ids. Any rows currently selected which are not in the list will be
+     * deselected.
+     *
+     * @param ids - row node ids to mark as selected
+     */
+    setSelectedRowNodeIds(ids: string[]): void;
+    /**
+     * @returns the id of the first row in the grid, after sorting and filtering, which
+     *      has data associated with it (i.e. not a group or other synthetic row).
+     */
+    getFirstSelectableRowNodeId(): string;
+    /**
+     * @returns the first row in the grid, after sorting and filtering, which
+     *  has data associated with it (i.e. not a group or other synthetic row).
+     */
+    getFirstSelectableRowNode(): PlainObject;
+    /**
+     * Sets the data used for rows which appear pinned to the top of the grid
+     * @param data - the data to pin at the top of the grid
+     */
+    setPinnedTopRowData(data: PlainObject[]): void;
+    /**
+     * @returns row data pinned to the top of the grid
+     */
+    getPinnedTopRowData(): PlainObject[];
+    /**
+     * Sets the data used for rows which appear pinned to the bottom of the grid
+     * @param data - the data to pin at the bottom of the grid
+     */
+    setPinnedBottomRowData(data: PlainObject[]): void;
+    /**
+     * @returns row data pinned to the bottom of the grid
+     */
+    getPinnedBottomRowData(): any[];
+    handleGridReady({ api, columnApi }: {
+        api: any;
+        columnApi: any;
+    }): void;
+    handleGridUnmount(): void;
+    private getPinnedRowData;
+    private getPivotColumnId;
+    private getGroupNodePath;
+    private throwIfNotReady;
+}

package/build/types/cmp/ag-grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AgGridModel';
+export * from './AgGrid';

package/build/types/cmp/badge/Badge.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps, Intent } from '@xh/hoist/core';
+import './Badge.scss';
+export interface BadgeProps extends HoistProps, BoxProps {
+    /** Sets fontsize to half that of parent element (default false). */
+    compact?: boolean;
+    intent?: Intent;
+}
+/**
+ * Badge indicator, generally displayed inline with text/title, showing a count or other small
+ * indicator that something is new or has content.
+ */
+export declare const Badge: import("react").FC<BadgeProps>, badge: import("@xh/hoist/core").ElementFactory<BadgeProps>;

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

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

package/build/types/cmp/chart/Chart.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BoxProps, HoistProps } from '@xh/hoist/core';
+import { ChartModel } from './ChartModel';
+import './Chart.scss';
+export interface ChartProps extends HoistProps<ChartModel>, BoxProps {
+    /**
+     * Ratio of width-to-height of displayed chart.  If defined and greater than 0, the chart will
+     * respect this ratio within the available space.  Otherwise, the chart will stretch on both
+     * dimensions to take up all available space.
+     */
+    aspectRatio?: number;
+}
+/**
+ * Wrapper Component for a Highcharts chart. Provides basic rendering / lifecycle management
+ * as well as configuration and theme defaults. The chart's core configuration should be sourced
+ * from a ChartModel prop passed to this component.
+ */
+export declare const Chart: import("react").FC<ChartProps>, chart: import("@xh/hoist/core").ElementFactory<ChartProps>;

package/build/types/cmp/chart/ChartModel.d.ts

@@ -0,0 +1,48 @@
+import { HoistModel, PlainObject, Some } from '@xh/hoist/core';
+interface ChartConfig {
+    /** The initial highchartsConfig for this chart. */
+    highchartsConfig: PlainObject;
+    /** The initial data series to be displayed. */
+    series?: Some<any>;
+    /** True to showContextMenu.  Defaults to true.  Desktop only. */
+    showContextMenu?: boolean;
+    /** @internal */
+    xhImpl?: boolean;
+}
+/**
+ * Model to hold and maintain the configuration and data series for a Highcharts chart.
+ */
+export declare class ChartModel extends HoistModel {
+    highchartsConfig: PlainObject;
+    series: any[];
+    showContextMenu: boolean;
+    /**
+     * The HighCharts instance currently being displayed. This may be used for reading
+     * information about the chart, but any mutations to the chart should
+     * be done via {@link setHighchartsConfig} or {@link setSeries}.
+     */
+    highchart: any;
+    constructor(config?: ChartConfig);
+    /**
+     *  Update the Highcharts instance configuration.
+     *
+     *  See also {@link updateHighchartsConfig} for a method that will allow updating individual
+     *  properties in this object.
+     *
+     *  @param config - Highcharts configuration object. May include any Highcharts options other
+     *      than `series`, which should be set via `setSeries()`.
+     */
+    setHighchartsConfig(config: any): void;
+    /**
+     * Merge new properties settings into the Highcharts configuration (Deep merge)
+     *
+     * @param update - Updates to Highcharts configuration settings.  May include any
+     *      Highcharts options other than `series`, which should be set via `setSeries()`.
+     */
+    updateHighchartsConfig(update: any): void;
+    /** @param series - one or more data series to be charted. */
+    setSeries(series: any | any[]): void;
+    /** Remove all series from this chart. */
+    clear(): void;
+}
+export {};

package/build/types/cmp/chart/impl/copyToClipboard.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copy the chart in it's current state to the clipboard.
+ * Works only on webkit based browsers.
+ * @internal
+ */
+export declare function installCopyToClipboard(Highcharts: any): void;

package/build/types/cmp/chart/impl/zoomout.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Transform the "select right-to-left" gesture into "zoom out" for charts with x-axis zooming.
+ * Gesture can be used in place of the default "reset zoom" button.
+ */
+export declare function installZoomoutGesture(Highcharts: any): void;

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

@@ -0,0 +1,2 @@
+export * from './Chart';
+export * from './ChartModel';

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;
+    };
+};