@mwater/visualization 5.5.0 → 5.6.0

package/lib/quickfilter/QuickfiltersComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const react_select_1 = __importDefault(require("react-select"));
 const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
@@ -25,9 +24,10 @@ class QuickfiltersComponent extends react_1.default.Component {
         let values = this.props.values || [];
         let itemValue = values[index];
         // Translate label
-        const label = this.props.translate?.(item.label) ?? item.label;
+        const label = this.props.translate?.(item.label ?? "") ?? item.label ?? "";
+        const exprCleaner = new expressions_2.ExprCleaner(this.props.schema);
         // Clean expression first
-        const expr = new expressions_2.ExprCleaner(this.props.schema).cleanExpr(item.expr);
+        const expr = exprCleaner.cleanExpr(item.expr);
         // Do not render if nothing
         if (!expr) {
             return null;
@@ -37,6 +37,22 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (!type) {
             return null;
         }
+        // If this quickfilter is text or text[] and has subsequent merged quickfilters, gather their expressions
+        let exprsToPass = [expr];
+        if (["text", "text[]"].includes(type)) {
+            for (let i2 = index + 1; i2 < this.props.design.length; i2++) {
+                const nextItem = this.props.design[i2];
+                if (nextItem.merged) {
+                    const cleaned = exprCleaner.cleanExpr(nextItem.expr);
+                    if (cleaned) {
+                        exprsToPass.push(cleaned);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
         // Determine if locked
         const lock = lodash_1.default.find(this.props.locks || [], (lock) => lodash_1.default.isEqual(lock.expr, expr));
         if (lock) {
@@ -73,67 +89,19 @@ class QuickfiltersComponent extends react_1.default.Component {
         const otherQuickfilterFilters = compiler.compile(otherDesign, otherValues, otherLocks);
         const filters = (this.props.filters || []).concat(otherQuickfilterFilters);
         if (["enum", "enumset"].includes(type)) {
-            return R(EnumQuickfilterComponent, {
-                key: JSON.stringify(item),
-                label,
-                schema: this.props.schema,
-                options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr),
-                value: itemValue,
-                onValueChange,
-                multi: item.multi
-            });
+            return react_1.default.createElement(EnumQuickfilterComponent, { key: JSON.stringify(item), label: label, schema: this.props.schema, options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr), value: itemValue, onValueChange: onValueChange, multi: item.multi });
         }
         if (type === "text") {
-            return R(TextQuickfilterComponent, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                quickfiltersDataSource: this.props.quickfiltersDataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(TextQuickfilterComponent, { key: JSON.stringify(item), index: index, label: label, expr: exprsToPass, schema: this.props.schema, quickfiltersDataSource: this.props.quickfiltersDataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         if (["date", "datetime"].includes(type)) {
-            return R(DateQuickfilterComponent, {
-                key: JSON.stringify(item),
-                label,
-                expr,
-                schema: this.props.schema,
-                value: itemValue,
-                onValueChange
-            });
+            return react_1.default.createElement(DateQuickfilterComponent, { key: JSON.stringify(item), label: label, expr: expr, schema: this.props.schema, value: itemValue, onValueChange: onValueChange });
         }
         if (type === "id[]") {
-            return R(IdArrayQuickfilterComponent_1.default, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(IdArrayQuickfilterComponent_1.default, { key: JSON.stringify(item), index: index, label: label, expr: expr, schema: this.props.schema, dataSource: this.props.dataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         if (type === "text[]") {
-            return R(TextArrayQuickfilterComponent, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                quickfiltersDataSource: this.props.quickfiltersDataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(TextArrayQuickfilterComponent, { key: JSON.stringify(item), index: index, label: label, expr: exprsToPass, schema: this.props.schema, quickfiltersDataSource: this.props.quickfiltersDataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         return null;
     }
@@ -141,15 +109,14 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (!this.props.design || this.props.design.length === 0) {
             return null;
         }
-        return R("div", {
-            style: {
+        return (react_1.default.createElement("div", { style: {
                 borderTop: !this.props.hideTopBorder ? "solid 1px #E8E8E8" : undefined,
                 borderBottom: "solid 1px #E8E8E8",
                 padding: 5
-            }
-        }, lodash_1.default.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)), this.props.onHide
-            ? R("button", { className: "btn btn-sm btn-link", onClick: this.props.onHide }, R("i", { className: "fa fa-angle-double-up" }))
-            : undefined);
+            } },
+            lodash_1.default.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)),
+            this.props.onHide ? (react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: this.props.onHide },
+                react_1.default.createElement("i", { className: "fa fa-angle-double-up" }))) : undefined));
     }
 }
 exports.default = QuickfiltersComponent;
@@ -173,37 +140,20 @@ class EnumQuickfilterComponent extends react_1.default.Component {
         }
     };
     renderSingleSelect(options) {
-        return R(react_select_1.default, {
-            placeholder: T `All`,
-            value: lodash_1.default.findWhere(options, { value: this.props.value }) || null,
-            options,
-            isClearable: true,
-            onChange: (value) => {
+        return react_1.default.createElement(react_select_1.default, { placeholder: T `All`, value: lodash_1.default.findWhere(options, { value: this.props.value }) || null, options: options, isClearable: true, onChange: (value) => {
                 if (this.props.onValueChange) {
                     return this.handleSingleChange(value?.value);
                 }
-            },
-            isDisabled: this.props.onValueChange == null,
-            styles: {
+            }, isDisabled: this.props.onValueChange == null, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     renderMultiSelect(options) {
-        return R(react_select_1.default, {
-            placeholder: T `All`,
-            value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)),
-            isClearable: true,
-            isMulti: true,
-            options,
-            onChange: this.props.onValueChange ? this.handleMultiChange : undefined,
-            isDisabled: this.props.onValueChange == null,
-            styles: {
+        return react_1.default.createElement(react_select_1.default, { placeholder: T `All`, value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)), isClearable: true, isMulti: true, options: options, onChange: this.props.onValueChange ? this.handleMultiChange : undefined, isDisabled: this.props.onValueChange == null, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     render() {
         const options = lodash_1.default.map(this.props.options, (opt) => ({
@@ -214,46 +164,39 @@ class EnumQuickfilterComponent extends react_1.default.Component {
         let width = lodash_1.default.max(options, (o) => o.label.length)?.label?.length;
         width = width ? width * 8 + 120 : 280;
         const minWidth = width > 280 || this.props.multi ? "280px" : `${width}px`;
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth, verticalAlign: "middle" } }, this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth, verticalAlign: "middle" } }, this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 // Quickfilter for a text value
 class TextQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
-            value: this.props.value,
-            onChange: this.props.onValueChange,
-            schema: this.props.schema,
-            expr: this.props.expr,
-            index: this.props.index,
-            multi: this.props.multi,
-            quickfiltersDataSource: this.props.quickfiltersDataSource,
-            filters: this.props.filters
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(TextLiteralComponent_1.default, { value: this.props.value, onChange: this.props.onValueChange, schema: this.props.schema, expr: this.props.expr, index: this.props.index, multi: this.props.multi, quickfiltersDataSource: this.props.quickfiltersDataSource, filters: this.props.filters })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 // Quickfilter for a date value
 class DateQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(DateExprComponent_1.default, {
-            datetime: new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime",
-            value: this.props.value,
-            onChange: this.props.onValueChange
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(DateExprComponent_1.default, { datetime: new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime", value: this.props.value, onChange: this.props.onValueChange })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 /** Quickfilter for a text value */
 class TextArrayQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
-            value: this.props.value,
-            onChange: this.props.onValueChange,
-            schema: this.props.schema,
-            expr: this.props.expr,
-            index: this.props.index,
-            multi: this.props.multi,
-            quickfiltersDataSource: this.props.quickfiltersDataSource,
-            filters: this.props.filters
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(TextLiteralComponent_1.default, { value: this.props.value, onChange: this.props.onValueChange, schema: this.props.schema, expr: this.props.expr, index: this.props.index, multi: this.props.multi, quickfiltersDataSource: this.props.quickfiltersDataSource, filters: this.props.filters })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }

package/lib/quickfilter/TextLiteralComponent.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-import { Schema } from "@mwater/expressions";
+import { Expr, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource";
 export interface TextLiteralComponentProps {
-    value?: any;
-    onChange?: any;
+    value?: string | string[] | null;
+    onChange?: (value: string | string[] | null) => void;
     schema: Schema;
     /** See QuickfiltersDataSource */
     quickfiltersDataSource: QuickfiltersDataSource;
-    expr: any;
+    /**
+     * One or more expressions whose values should be combined into a single option list.
+     * Each subsequent expression represents another quickfilter that is merged with this one.
+     * The first expression is the main quickfilter, and the subsequent expressions are merged with it.
+     */
+    expr: Expr[];
     index: number;
     /** true to display multiple values */
     multi?: boolean;
@@ -19,47 +24,18 @@ export interface TextLiteralComponentProps {
  * The expression can be type `text` or `text[]`
  */
 export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
-    handleSingleChange: (val: any) => any;
-    handleMultipleChange: (val: any) => any;
-    getOptions: (input: any, cb: any) => void;
-    renderSingle(): React.FunctionComponentElement<{
-        key: string;
-        placeholder: string;
-        value: {
-            value: any;
-            label: any;
-        } | null;
-        loadOptions: (input: any, cb: any) => void;
-        onChange: ((val: any) => any) | undefined;
-        isClearable: boolean;
-        defaultOptions: boolean;
-        isDisabled: boolean;
-        noOptionsMessage: () => string;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    renderMultiple(): React.FunctionComponentElement<{
-        placeholder: string;
-        value: {
-            value: unknown;
-            label: unknown;
-        }[] | null;
-        key: string;
-        isMulti: boolean;
-        loadOptions: (input: any, cb: any) => void;
-        defaultOptions: boolean;
-        onChange: ((val: any) => any) | undefined;
-        isClearable: boolean;
-        isDisabled: boolean;
-        noOptionsMessage: () => string;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-        };
-    }, HTMLElement>;
+    handleSingleChange: (val: any) => void | undefined;
+    handleMultipleChange: (val: any) => void | undefined;
+    /**
+     * Load the options for the select. If multiple expressions are supplied, each
+     * is queried independently and the union of the results (unique values) is
+     * returned.
+     */
+    getOptions: (input: string, cb: (rows: {
+        value: string;
+        label: string;
+    }[]) => void) => void;
+    renderSingle(): React.JSX.Element;
+    renderMultiple(): React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/quickfilter/TextLiteralComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const async_1 = __importDefault(require("react-select/async"));
 const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
@@ -15,114 +14,118 @@ const expressions_2 = require("@mwater/expressions");
 class TextLiteralComponent extends react_1.default.Component {
     handleSingleChange = (val) => {
         const value = val ? val.value || null : null; // Blank is null
-        return this.props.onChange(value);
+        return this.props.onChange?.(value);
     };
     handleMultipleChange = (val) => {
         const value = val ? lodash_1.default.pluck(val, "value") : [];
         if (value.length > 0) {
-            return this.props.onChange(value);
+            return this.props.onChange?.(value);
         }
         else {
-            return this.props.onChange(null);
+            return this.props.onChange?.(null);
         }
     };
+    /**
+     * Load the options for the select. If multiple expressions are supplied, each
+     * is queried independently and the union of the results (unique values) is
+     * returned.
+     */
     getOptions = (input, cb) => {
-        // Determine type of expression
-        const filters = (this.props.filters || []).slice();
-        const exprUtils = new expressions_2.ExprUtils(this.props.schema);
-        const exprType = exprUtils.getExprType(this.props.expr);
-        // Create query to get matches
-        const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
-        if (!this.props.expr.table) {
+        // Normalise to array so we can treat single and multiple uniformly
+        const exprs = this.props.expr;
+        // Keep the unique set of text values that come back from each expression
+        const uniqueValues = new Set();
+        // Early exit if no expressions
+        if (exprs.length === 0) {
+            cb([]);
             return;
         }
-        // Add filter for input (simple if just text)
-        if (exprType === "text") {
-            if (input) {
-                filters.push({
-                    table: this.props.expr.table,
-                    jsonql: {
-                        type: "op",
-                        op: "~*",
-                        exprs: [
-                            exprCompiler.compileExpr({ expr: this.props.expr, tableAlias: "{alias}" }),
-                            escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-                        ]
-                    }
-                });
+        let remaining = exprs.length;
+        // Helper that is called after each async query completes
+        const maybeFinish = () => {
+            remaining -= 1;
+            if (remaining === 0) {
+                const result = Array.from(uniqueValues).map((value) => ({ value, label: value }));
+                cb(result);
             }
-        }
-        else if (exprType === "text[]") {
-            // Special filter for text[]
-            if (input) {
-                filters.push({
-                    table: "values",
-                    jsonql: {
-                        type: "op",
-                        op: "~*",
-                        exprs: [
-                            { type: "field", tableAlias: "{alias}", column: "value" },
-                            "^" + escapeRegex(input) // Don't use _.escapeRegExp as adds weird backslashes that postgres doesn't like
-                        ]
-                    }
-                });
+        };
+        // Execute a query for each expression
+        for (let i = 0; i < exprs.length; i++) {
+            const expr = exprs[i];
+            // Clone base filters for this expression so that each expression gets its own copy
+            const filters = (this.props.filters || []).slice();
+            const exprUtils = new expressions_2.ExprUtils(this.props.schema);
+            const exprType = exprUtils.getExprType(expr);
+            // Create query to get matches
+            const exprCompiler = new expressions_1.ExprCompiler(this.props.schema);
+            const exprTable = exprUtils.getExprTable(expr);
+            if (!exprTable) {
+                maybeFinish();
+                return;
             }
-        }
-        else {
-            return;
-        }
-        // Execute query
-        this.props.quickfiltersDataSource.getValues(this.props.index, this.props.expr, filters, null, 250, (err, values) => {
-            if (err) {
+            // Add filter for the input text depending on expression type
+            if (exprType === "text") {
+                if (input) {
+                    filters.push({
+                        table: exprTable,
+                        jsonql: {
+                            type: "op",
+                            op: "~*",
+                            exprs: [
+                                exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }),
+                                escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+                            ]
+                        }
+                    });
+                }
+            }
+            else if (exprType === "text[]") {
+                if (input) {
+                    filters.push({
+                        table: "values",
+                        jsonql: {
+                            type: "op",
+                            op: "~*",
+                            exprs: [
+                                { type: "field", tableAlias: "{alias}", column: "value" },
+                                "^" + escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+                            ]
+                        }
+                    });
+                }
+            }
+            else {
+                // Unsupported type – skip this expression
+                maybeFinish();
                 return;
             }
-            // Filter null and blank
-            values = lodash_1.default.filter(values, (value) => value);
-            return cb(lodash_1.default.map(values, (value) => ({
-                value,
-                label: value
-            })));
-        });
+            // Execute the data source query for this expression
+            this.props.quickfiltersDataSource.getValues(this.props.index + i, // Index of this quickfilter in the design
+            expr, filters, null, 250, (err, values = []) => {
+                if (!err && values) {
+                    // Filter out null / blank and add to unique set
+                    lodash_1.default.filter(values, (v) => v).forEach((v) => uniqueValues.add(v));
+                }
+                maybeFinish();
+            });
+        }
     };
     renderSingle() {
         const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null;
-        return R(async_1.default, {
-            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-            placeholder: T `All`,
-            value: currentValue,
-            loadOptions: this.getOptions,
-            onChange: this.props.onChange ? this.handleSingleChange : undefined,
-            isClearable: true,
-            defaultOptions: true,
-            isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => T `Type to search`,
-            styles: {
+        return react_1.default.createElement(async_1.default, { key: JSON.stringify(this.props.filters), placeholder: T `All`, value: currentValue, loadOptions: this.getOptions, onChange: this.props.onChange ? this.handleSingleChange : undefined, isClearable: true, defaultOptions: true, isDisabled: this.props.onChange == null, noOptionsMessage: () => T `Type to search`, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     renderMultiple() {
         const currentValue = this.props.value ? lodash_1.default.map(this.props.value, (v) => ({ value: v, label: v })) : null;
-        return R(async_1.default, {
-            placeholder: T `All`,
-            value: currentValue,
-            key: JSON.stringify(this.props.filters), // Include to force a change when filters change
-            isMulti: true,
-            loadOptions: this.getOptions,
-            defaultOptions: true,
-            onChange: this.props.onChange ? this.handleMultipleChange : undefined,
-            isClearable: true,
-            isDisabled: this.props.onChange == null,
-            noOptionsMessage: () => T `Type to search`,
-            styles: {
+        return react_1.default.createElement(async_1.default, { placeholder: T `All`, value: currentValue, key: JSON.stringify(this.props.filters), isMulti: true, loadOptions: this.getOptions, defaultOptions: true, onChange: this.props.onChange ? this.handleMultipleChange : undefined, isClearable: true, isDisabled: this.props.onChange == null, noOptionsMessage: () => T `Type to search`, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     render() {
-        return R("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle());
+        return react_1.default.createElement("div", { style: { width: "100%" } }, this.props.multi ? this.renderMultiple() : this.renderSingle());
     }
 }
 exports.default = TextLiteralComponent;

package/lib/widgets/MapWidget.js

@@ -123,9 +123,11 @@ class MapWidgetComponent extends react_1.default.Component {
             dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
         }
         const handleDesignChange = (d) => this.setState({ transientDesign: d });
+        // Only allow single click to edit if there are no layers
+        const handleClick = this.props.onDesignChange != null && this.state.editDesign === null && this.props.design.layerViews.length == 0 ? this.handleStartEditing : undefined;
         // Wrap in a simple widget
-        return react_1.default.createElement("div", null,
+        return (react_1.default.createElement("div", { onClick: handleClick, style: { position: "relative", width: this.props.width } },
             this.props.onDesignChange != null ? this.renderEditor() : undefined,
-            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
+            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height))));
     }
 }

package/lib/widgets/text/ExprItemEditorComponent.d.ts

@@ -10,6 +10,7 @@ export interface ExprItemEditorComponentProps {
     exprItem: HtmlItemExpr;
     /** Called with expr item */
     onChange: (exprItem: HtmlItemExpr) => void;
+    /** Optional table that will be filtered to have a single row present. Widget designer should optionally account for this */
     singleRowTable?: string;
 }
 interface ExprItemEditorComponentState {
@@ -22,13 +23,7 @@ export default class ExprItemEditorComponent extends React.Component<ExprItemEdi
     handleIncludeLabelChange: (value: any) => void;
     handleLabelTextChange: (ev: any) => void;
     handleFormatChange: (ev: any) => void;
-    renderFormat(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            paddingBottom: number;
-        };
-    }, HTMLElement>;
+    renderFormat(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};