@mwater/visualization 5.0.1 → 5.2.0

package/lib/widgets/ImageWidgetComponent.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent";
 import DropdownWidgetComponent from "./DropdownWidgetComponent";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { WidgetDataSource } from "./WidgetDataSource";
 import { ImageWidgetDesign } from "./ImageWidget";
@@ -30,16 +32,8 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
         onClick: () => void;
     }, HTMLElement>;
     renderEditor(): React.CElement<any, ImageWidgetDesignComponent>;
-    renderExpression(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
-        injectHeight: boolean;
-    }, React.Component<{
-        injectHeight: boolean;
-    }, any, any>> | null;
-    renderContent(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
-        injectHeight: boolean;
-    }, React.Component<{
-        injectHeight: boolean;
-    }, any, any>> | React.CElement<RotatedImageComponentProps, RotatedImageComponent> | null;
+    renderExpression(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | null;
+    renderContent(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent> | React.CElement<RotatedImageComponentProps, RotatedImageComponent> | null;
     render(): React.CElement<import("./DropdownWidgetComponent").DropdownWidgetComponentProps, DropdownWidgetComponent>;
 }
 interface ImageWidgetDesignComponentProps {
@@ -96,13 +90,7 @@ declare class ImageWidgetDesignComponent extends React.Component<ImageWidgetDesi
     renderUrlEditor(): React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement>;
-    render(): React.CElement<{
-        header: string;
-        footer: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    }, React.Component<{
-        header: string;
-        footer: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
 }
 interface RotatedImageComponentProps {
     /** Url of the image */
@@ -114,12 +102,6 @@ interface RotatedImageComponentProps {
     openUrlInSameTab?: boolean;
 }
 declare class RotatedImageComponent extends React.Component<RotatedImageComponentProps> {
-    render(): React.CElement<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, React.Component<{
-        injectWidth: boolean;
-        injectHeight: boolean;
-    }, any, any>>;
+    render(): React.CElement<import("@mwater/react-library/lib/AutoSizeComponent").AutoSizeComponentProps, AutoSizeComponent>;
 }
 export {};

package/lib/widgets/ImageWidgetComponent.js

@@ -37,7 +37,7 @@ const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetCompo
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ImageUploaderComponent_1 = __importDefault(require("./ImageUploaderComponent"));
 const ImagelistCarouselComponent_1 = __importDefault(require("./ImagelistCarouselComponent"));
 class ImageWidgetComponent extends AsyncLoadComponent_1.default {
@@ -257,7 +257,7 @@ class ImageWidgetDesignComponent extends react_1.default.Component {
         });
     };
     renderExpressionEditor() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
             ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
                 schema: this.props.schema,
                 dataSource: this.props.dataSource,

package/lib/widgets/MapWidget.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { WidgetDataSource } from "./WidgetDataSource";
 export default class MapWidget extends Widget {
@@ -36,13 +37,7 @@ declare class MapWidgetComponent extends React.Component<MapWidgetComponentProps
     handleStartEditing: () => void;
     handleEndEditing: () => void;
     handleEditDesignChange: (design: any) => void;
-    renderEditor(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | null;
+    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | null;
     renderContent(design: any, onDesignChange: any, width: any, height: any): React.DetailedReactHTMLElement<{
         style: {
             width: any;

package/lib/widgets/MarkdownWidget.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
 export default class MarkdownWidget extends Widget {
     createViewElement(options: CreateViewElementOptions): React.CElement<any, MarkdownWidgetComponent>;
     isAutoHeight(): boolean;
@@ -20,13 +21,7 @@ declare class MarkdownWidgetComponent extends React.Component<MarkdownWidgetComp
     handleStartEditing: () => void;
     handleEndEditing: () => void;
     handleEditDesignChange: (design: any) => void;
-    renderEditor(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | null;
+    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | null;
     renderContent(design: any): React.CElement<MarkdownWidgetViewComponentProps, MarkdownWidgetViewComponent>;
     render(): React.DetailedReactHTMLElement<{
         onDoubleClick: () => void;

package/lib/widgets/TOCWidget.d.ts

@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 export default class TOCWidget extends Widget {
     createViewElement(options: CreateViewElementOptions): React.CElement<any, TOCWidgetComponent>;
     isAutoHeight(): boolean;
@@ -22,15 +23,7 @@ declare class TOCWidgetComponent extends React.Component {
     constructor(props: any);
     handleStartEditing: () => void;
     handleEndEditing: () => void;
-    renderEditor(): React.CElement<{
-        showCloseX: boolean;
-        header: string;
-        onClose: () => void;
-    }, React.Component<{
-        showCloseX: boolean;
-        header: string;
-        onClose: () => void;
-    }, any, any>> | null;
+    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
     renderContent(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     render(): React.DetailedReactHTMLElement<{
         onDoubleClick: () => void;

package/lib/widgets/charts/ChartWidget.d.ts

@@ -1,7 +1,9 @@
 import PropTypes from "prop-types";
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./../Widget";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import ChartViewComponent from "./ChartViewComponent";
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { WidgetDataSource } from "../WidgetDataSource";
 import Chart from "./Chart";
@@ -57,21 +59,7 @@ declare class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompon
     handleCancelEditing: () => void;
     handleEditDesignChange: (design: any) => void;
     renderChart(design: any, onDesignChange: any, width: any, height: any): React.CElement<import("./ChartViewComponent").ChartViewComponentProps, ChartViewComponent>;
-    renderEditor(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | React.CElement<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, React.Component<{
-        size: string;
-        onCancel: () => void;
-        onAction: () => void;
-    }, any, any>> | null;
+    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
     renderEditLink(): React.DetailedReactHTMLElement<{
         className: string;
         onClick: () => void;

package/lib/widgets/charts/calendar/CalendarChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 class CalendarChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
@@ -67,7 +67,7 @@ class CalendarChartDesignerComponent extends react_1.default.Component {
         this.updateDesign({ cellColor });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.d.ts

@@ -15,7 +15,7 @@ export default class ImageMosaicChart extends Chart {
     }>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[] | null, callback: any): void;
     createViewElement(options: ChartCreateViewElementOptions): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): null;
+    createDataTable(design: any, schema: Schema, dataSource: DataSource, data: any): never[];
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
 }

package/lib/widgets/charts/imagemosaic/ImageMosaicChart.js

@@ -157,7 +157,7 @@ class ImageMosaicChart extends Chart_1.default {
     }
     createDataTable(design, schema, dataSource, data) {
         alert("Not available for Image Mosaics");
-        return null;
+        return [];
     }
     // TODO
     // renderHeaderCell = (column) =>

package/lib/widgets/charts/imagemosaic/ImageMosaicChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const ui = __importStar(require("../../../UIComponents"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 class ImageMosaicChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -52,7 +52,7 @@ class ImageMosaicChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ imageAxis });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/imagemosaic/ImagePopupComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
 export interface ImagePopupComponentProps {
     imageManager: any;
 }
@@ -9,12 +10,6 @@ interface ImagePopupComponentState {
 export default class ImagePopupComponent extends React.Component<ImagePopupComponentProps, ImagePopupComponentState> {
     constructor(props: any);
     show(image: any): any;
-    render(): React.CElement<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, React.Component<{
-        isOpen: boolean;
-        onRequestClose: () => void;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ModalWindowComponent").ModalWindowComponentProps, ModalWindowComponent> | null;
 }
 export {};

package/lib/widgets/charts/layered/LayeredChartDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import TabbedComponent from "@mwater/react-library/lib/TabbedComponent";
 import * as uiComponents from "../../../UIComponents";
 import { DataSource, Schema } from "@mwater/expressions";
 import { LayeredChartDesign } from "./LayeredChartDesign";
@@ -46,35 +47,5 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
     }, HTMLElement> | undefined;
     renderThresholds(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | null;
     renderYRange(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | null;
-    render(): React.CElement<{
-        initialTabId: string;
-        tabs: ({
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<{
-                style: {
-                    paddingBottom: number;
-                };
-            }, HTMLElement>;
-        } | {
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-        })[];
-    }, React.Component<{
-        initialTabId: string;
-        tabs: ({
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<{
-                style: {
-                    paddingBottom: number;
-                };
-            }, HTMLElement>;
-        } | {
-            id: string;
-            label: string;
-            elem: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-        })[];
-    }, any, any>>;
+    render(): React.CElement<any, TabbedComponent>;
 }

package/lib/widgets/charts/layered/LayeredChartLayerDesignerComponent.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import * as uiComponents from "../../../UIComponents";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 export interface LayeredChartLayerDesignerComponentProps {
     design: any;
     schema: Schema;
@@ -46,13 +47,7 @@ export default class LayeredChartLayerDesignerComponent extends React.Component<
     }, HTMLElement> | null;
     renderTable(): React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent>;
     handlexAxisOnlyValuesPresentChange: (xAxisOnlyValuesPresent: boolean) => void;
-    renderXAxis(): (React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | React.CElement<{
-        value: any;
-        onChange: (xAxisOnlyValuesPresent: boolean) => void;
-    }, React.Component<{
-        value: any;
-        onChange: (xAxisOnlyValuesPresent: boolean) => void;
-    }, any, any>> | undefined)[] | undefined;
+    renderXAxis(): (React.CElement<ui.CheckboxProps, ui.Checkbox> | React.CElement<uiComponents.SectionComponentProps, uiComponents.SectionComponent> | undefined)[] | undefined;
     renderColorAxis(): React.DetailedReactHTMLElement<{
         className: string;
     }, HTMLElement> | undefined;

package/lib/widgets/charts/layered/LayeredChartLayerDesignerComponent.js

@@ -37,7 +37,7 @@ const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
 const LayeredChartUtils = __importStar(require("./LayeredChartUtils"));
 const LayeredChartCompiler_1 = __importDefault(require("./LayeredChartCompiler"));
 const uiComponents = __importStar(require("../../../UIComponents"));
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const PopoverHelpComponent_1 = __importDefault(require("@mwater/react-library/lib/PopoverHelpComponent"));
@@ -165,7 +165,7 @@ class LayeredChartLayerDesignerComponent extends react_1.default.Component {
     }
     renderTable() {
         const layer = this.props.design.layers[this.props.index];
-        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(TableSelectComponent_1.default, {
+        return R(uiComponents.SectionComponent, { icon: "fa-database", label: "Data Source" }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: layer.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/pivot/IntersectionDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { PivotChartIntersection } from "./PivotChartDesign";
 import { JsonQLFilter } from "../../../JsonQLFilter";
@@ -19,71 +20,76 @@ export default class IntersectionDesignerComponent extends React.Component<Inter
     handleBackgroundColorOpacityChange: (newValue: any) => any;
     handleFilterChange: (filter: any) => any;
     renderValueAxis(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderNullValue(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | null;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup> | null;
     renderFilter(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderStyling(): React.CElement<{
-        labelMuted: boolean;
-        key: string;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        key: string;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderBackgroundColorConditions(): React.CElement<BackgroundColorConditionsComponentProps, BackgroundColorConditionsComponent>;
     renderBackgroundColorAxis(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderBackgroundColor(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string;
-    }, any, any>> | undefined;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup> | undefined;
     renderBackgroundColorOpacityControl(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | undefined;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup> | undefined;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }
 interface BackgroundColorConditionsComponentProps {
@@ -103,13 +109,14 @@ interface BackgroundColorConditionsComponentProps {
 declare class BackgroundColorConditionsComponent extends React.Component<BackgroundColorConditionsComponentProps> {
     handleAdd: () => void;
     render(): React.CElement<{
-        label: string;
-        labelMuted: boolean;
-        help: string;
-    }, React.Component<{
-        label: string;
-        labelMuted: boolean;
-        help: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
 }
 export {};

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface PivotChartDesignerComponentProps {
     design: any;
@@ -25,12 +26,15 @@ export default class PivotChartDesignerComponent extends React.Component<PivotCh
         className: string;
     }, HTMLElement> | null;
     renderStriping(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>> | null;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup> | null;
     renderSetup(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }

package/lib/widgets/charts/pivot/PivotChartDesignerComponent.js

@@ -32,7 +32,7 @@ const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
-const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 // Designer for overall chart. Has a special setup mode first time it is run
 class PivotChartDesignerComponent extends react_1.default.Component {
@@ -76,7 +76,7 @@ class PivotChartDesignerComponent extends react_1.default.Component {
         return this.updateDesign({ intersections });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/widgets/charts/pivot/PivotChartViewComponent.d.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Schema } from "@mwater/expressions";
 import { JsonQLFilter, WidgetScope } from "../../..";
 import { PivotChartDesign } from "./PivotChartDesign";
@@ -52,28 +53,8 @@ export default class PivotChartViewComponent extends React.Component<PivotChartV
             paddingRight: number;
         };
     }, HTMLElement>;
-    renderEditSegmentModal(): React.CElement<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>> | undefined;
-    renderEditIntersectionModal(): React.CElement<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, React.Component<{
-        title: string;
-        onAction: () => void;
-        onCancel: () => void;
-        size: string;
-    }, any, any>> | undefined;
+    renderEditSegmentModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
+    renderEditIntersectionModal(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | undefined;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: number;