@mwater/visualization 5.3.2 → 5.4.0

package/lib/ColorComponent.d.ts

@@ -16,7 +16,7 @@ export default class ColorComponent extends React.Component<ColorComponentProps,
     handleReset: () => void;
     handleTransparent: () => void;
     handleAdvanced: () => void;
-    renderPopup(): React.ReactPortal | null;
+    renderPopup(): any;
     colorWellRef: HTMLDivElement | null;
     render(): React.JSX.Element;
 }

package/lib/ColorComponent.js

@@ -71,8 +71,8 @@ class ColorComponent extends react_1.default.Component {
             react_1.default.createElement("div", { style: popupPosition },
                 !this.props.disableReset && (react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleReset },
                     react_1.default.createElement("i", { className: "fa fa-undo" }),
-                    " Reset Color")),
-                react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleAdvanced }, this.state.advanced ? "Basic" : "Advanced"),
+                    T ` Reset Color`)),
+                react_1.default.createElement("button", { type: "button", className: "btn btn-link btn-sm", onClick: this.handleAdvanced }, this.state.advanced ? T `Basic` : T `Advanced`),
                 react_1.default.createElement(CustomColors, { color: this.props.color, onChange: this.props.onChange }),
                 this.state.advanced ? (react_1.default.createElement(react_color_1.SketchPicker, { color: this.props.color || undefined, disableAlpha: true, onChangeComplete: this.handleColor })) : (react_1.default.createElement(react_color_1.SwatchesPicker, { color: this.props.color || undefined, onChangeComplete: this.handleColor })))), document.body);
     }

package/lib/CustomColorsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /** Palettes are groups of 6 colors. Pad with nulls if fewer than 6 colors are provided. */
 export interface CustomColorsContextType {
     customColors: (string | null)[];

package/lib/DateRangeComponent.js

@@ -90,18 +90,18 @@ class DateRangeComponent extends react_1.default.Component {
     };
     getPresets() {
         const presets = [
-            { label: "Today", value: [(0, moment_1.default)(), (0, moment_1.default)()] },
-            { label: "Yesterday", value: [(0, moment_1.default)().subtract(1, "days"), (0, moment_1.default)().subtract(1, "days")] },
-            { label: "Last 7 Days", value: [(0, moment_1.default)().subtract(6, "days"), (0, moment_1.default)()] },
-            { label: "Last 30 Days", value: [(0, moment_1.default)().subtract(29, "days"), (0, moment_1.default)()] },
-            { label: "This Month", value: [(0, moment_1.default)().startOf("month"), (0, moment_1.default)().endOf("month")] },
+            { label: T `Today`, value: [(0, moment_1.default)(), (0, moment_1.default)()] },
+            { label: T `Yesterday`, value: [(0, moment_1.default)().subtract(1, "days"), (0, moment_1.default)().subtract(1, "days")] },
+            { label: T `Last 7 Days`, value: [(0, moment_1.default)().subtract(6, "days"), (0, moment_1.default)()] },
+            { label: T `Last 30 Days`, value: [(0, moment_1.default)().subtract(29, "days"), (0, moment_1.default)()] },
+            { label: T `This Month`, value: [(0, moment_1.default)().startOf("month"), (0, moment_1.default)().endOf("month")] },
             {
-                label: "Last Month",
+                label: T `Last Month`,
                 value: [(0, moment_1.default)().subtract(1, "months").startOf("month"), (0, moment_1.default)().subtract(1, "months").endOf("month")]
             },
-            { label: "This Year", value: [(0, moment_1.default)().startOf("year"), (0, moment_1.default)().endOf("year")] },
+            { label: T `This Year`, value: [(0, moment_1.default)().startOf("year"), (0, moment_1.default)().endOf("year")] },
             {
-                label: "Last Year",
+                label: T `Last Year`,
                 value: [(0, moment_1.default)().subtract(1, "years").startOf("year"), (0, moment_1.default)().subtract(1, "years").endOf("year")]
             }
         ];
@@ -115,7 +115,7 @@ class DateRangeComponent extends react_1.default.Component {
     };
     renderSummary() {
         if (!this.props.value) {
-            return R("span", { className: "text-muted" }, "All Dates");
+            return R("span", { className: "text-muted" }, T `All Dates`);
         }
         const startDate = this.toMoment(this.props.value[0]);
         const endDate = this.toMoment(this.props.value[1]);
@@ -135,7 +135,7 @@ class DateRangeComponent extends react_1.default.Component {
             }
         }, R("ul", { className: "nav nav-pills flex-column" }, lodash_1.default.map(this.getPresets(), (preset) => {
             return R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: this.handlePreset.bind(null, preset) }, preset.label));
-        }), R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) }, "Custom Date Range..."))));
+        }), R("li", { className: "nav-item" }, R("a", { className: "nav-link", style: { padding: 5 }, onClick: () => this.setState({ custom: true }) }, T `Custom Date Range...`))));
     }
     renderCustomDropdown() {
         const startDate = this.toMoment(this.props.value?.[0]);

package/lib/LocaleContextInjector.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 /** Adds the locale to the context */
 const LocaleContextInjector = ({ locale, children }) => {
-    return (react_1.default.createElement(contexts_1.LocaleContext.Provider, { value: locale }, children));
+    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: locale }, children));
 };
 exports.default = LocaleContextInjector;

package/lib/MWaterAddRelatedFormComponent.js

@@ -35,7 +35,7 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const querystring_1 = __importDefault(require("querystring"));
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("./UIComponents"));
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // Link that when clicked popup up a modal window allowing user to select a form
 // with an Site question to the extraTables
 class MWaterAddRelatedFormComponent extends react_1.default.Component {
@@ -65,8 +65,8 @@ class MWaterAddRelatedFormComponent extends react_1.default.Component {
     };
     render() {
         return R("div", null, this.state.waitingForTable
-            ? R("div", null, R("i", { className: "fa fa-spin fa-spinner" }), " Adding...")
-            : R("a", { className: "btn btn-link", onClick: this.handleOpen }, "+ Add Related Survey"), this.state.open
+            ? R("div", null, R("i", { className: "fa fa-spin fa-spinner" }), ` ${T `Adding...`}`)
+            : R("a", { className: "btn btn-link", onClick: this.handleOpen }, T `+ Add Related Survey`), this.state.open
             ? R(AddRelatedFormModalComponent, {
                 table: this.props.table,
                 apiUrl: this.props.apiUrl,
@@ -81,7 +81,7 @@ class MWaterAddRelatedFormComponent extends react_1.default.Component {
 exports.default = MWaterAddRelatedFormComponent;
 /** Actual modal that displays the list of forms */
 class AddRelatedFormModalComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -107,7 +107,7 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
             // Get _id, name, and description
             const items = lodash_1.default.map(forms, (form) => ({
                 name: expressions_1.ExprUtils.localizeString(form.design.name, this.context),
-                desc: `Modified ${(0, moment_1.default)(form.modified.on, moment_1.default.ISO_8601).format("ll")}`,
+                desc: `${T `Modified`} ${(0, moment_1.default)(form.modified.on, moment_1.default.ISO_8601).format("ll")}`,
                 onClick: this.props.onSelect.bind(null, "responses:" + form._id)
             }));
             this.setState({ items });
@@ -117,7 +117,7 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
     }
     renderContents() {
         if (!this.state.items) {
-            return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...");
+            return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spin fa-spinner" }), ` ${T `Loading...`}`);
         }
         let { items } = this.state;
         // Filter by search
@@ -128,7 +128,7 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
         return R("div", null, R("input", {
             type: "text",
             className: "form-control",
-            placeholder: "Search...",
+            placeholder: T `Search...`,
             key: "search",
             style: { marginBottom: 10 },
             value: this.state.search,
@@ -139,7 +139,7 @@ class AddRelatedFormModalComponent extends react_1.default.Component {
         return R(ModalPopupComponent_1.default, {
             showCloseX: true,
             onClose: this.props.onCancel,
-            header: "Add Related Survey"
+            header: T `Add Related Survey`
         }, this.renderContents());
     }
 }

package/lib/MWaterAddRelatedIndicatorComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import React from "react";
 import { Schema } from "@mwater/expressions";
 export interface MWaterAddRelatedIndicatorComponentProps {

package/lib/MWaterAddRelatedIndicatorComponent.js

@@ -9,14 +9,14 @@ const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const querystring_1 = __importDefault(require("querystring"));
 const expressions_1 = require("@mwater/expressions");
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 // List of indicators related to an entity
 class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
-            addingTables: [],
+            addingTables: [], // Set to table ids that have been added
             indicators: null
         };
     }
@@ -74,14 +74,14 @@ class MWaterAddRelatedIndicatorComponent extends react_1.default.Component {
         if (this.props.filter) {
             indicators = lodash_1.default.filter(indicators, (indicator) => filterMatches(this.props.filter, expressions_1.ExprUtils.localizeString(indicator.design.name, this.context)));
         }
-        return R("div", null, R("div", { style: { paddingLeft: 5 }, className: "text-muted" }, "Other Available Indicators. Click to enable. ", R("i", { className: "fa fa-check-circle" }), " = recommended", !this.state.indicators
-            ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), " Loading...")
+        return R("div", null, R("div", { style: { paddingLeft: 5 }, className: "text-muted" }, T `Other Available Indicators. Click to enable. `, R("i", { className: "fa fa-check-circle" }), T ` = recommended`, !this.state.indicators
+            ? R("div", { className: "text-muted" }, R("i", { className: "fa fa-spin fa-spinner" }), T ` Loading...`)
             : undefined, R("div", { style: { paddingLeft: 10 } }, lodash_1.default.map(indicators, (indicator) => {
             const name = expressions_1.ExprUtils.localizeString(indicator.design.name, this.context);
             const desc = expressions_1.ExprUtils.localizeString(indicator.design.desc, this.context);
             // If added, put special message
             if (this.props.schema.getTable(`indicator_values:${indicator._id}`)) {
-                return R("div", { key: indicator._id, style: { cursor: "pointer", padding: 4 }, className: "text-success" }, `${name} added. See above.`);
+                return R("div", { key: indicator._id, style: { cursor: "pointer", padding: 4 }, className: "text-success" }, `${name} ${T `added. See above.`}`);
             }
             return R("div", {
                 key: indicator._id,

package/lib/MWaterAssetSystemsListComponent.d.ts

@@ -4,14 +4,14 @@ import React from "react";
 export declare const MWaterAssetSystemsListComponent: (props: {
     apiUrl: string;
     schema: Schema;
-    client?: string | undefined;
+    client?: string;
     /** User id */
-    user?: string | undefined;
+    user?: string;
     /** Called with table selected */
     onChange: (tableId: string | null) => void;
     extraTables: string[];
     onExtraTableAdd: (tableId: string) => void;
     onExtraTableRemove: (tableId: string) => void;
     /** e.g. "en" */
-    locale?: string | undefined;
+    locale?: string;
 }) => React.JSX.Element;

package/lib/MWaterAssetSystemsListComponent.js

@@ -47,7 +47,7 @@ const MWaterAssetSystemsListComponent = (props) => {
         // Remove from extra tables
         const match = props.extraTables.find((t) => t == `assets:${system.sid}`);
         if (match) {
-            if (confirm("Remove this table? Some widgets may not work correctly.")) {
+            if (confirm(T `Remove this table? Some widgets may not work correctly.`)) {
                 props.onChange(null);
                 props.onExtraTableRemove(match);
             }
@@ -56,7 +56,8 @@ const MWaterAssetSystemsListComponent = (props) => {
     if (!systems || extraTableNeeded) {
         return (react_2.default.createElement("div", null,
             react_2.default.createElement("i", { className: "fa fa-spin fa-spinner" }),
-            " Loading..."));
+            " ",
+            T `Loading...`));
     }
     const renderAssetSystems = () => {
         const items = systems
@@ -72,7 +73,7 @@ const MWaterAssetSystemsListComponent = (props) => {
         return react_2.default.createElement(UIComponents_1.OptionListComponent, { items: items });
     };
     return (react_2.default.createElement("div", null,
-        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: "Search..." }),
+        react_2.default.createElement(bootstrap_1.TextInput, { value: search, onChange: setSearch, placeholder: T `Search...` }),
         renderAssetSystems()));
 };
 exports.MWaterAssetSystemsListComponent = MWaterAssetSystemsListComponent;

package/lib/MWaterCompleteTableSelectComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import React from "react";
 import * as uiComponents from "./UIComponents";
 import { Schema } from "@mwater/expressions";
@@ -27,11 +26,11 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     renderSites(): React.CElement<{
         items: {
             name: string;
-            desc?: string | undefined;
+            desc?: string;
             onClick: () => void;
-            onRemove?: (() => void) | undefined;
+            onRemove?: () => void;
         }[];
-        hint?: string | undefined;
+        hint?: string;
     }, uiComponents.OptionListComponent>;
     renderForms(): React.CElement<any, FormsListComponent>;
     renderIndicators(): React.CElement<any, IndicatorsListComponent>;
@@ -39,54 +38,54 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     renderSweetSense(): React.CElement<{
         items: {
             name: string;
-            desc?: string | undefined;
+            desc?: string;
             onClick: () => void;
-            onRemove?: (() => void) | undefined;
+            onRemove?: () => void;
         }[];
-        hint?: string | undefined;
+        hint?: string;
     }, uiComponents.OptionListComponent>;
     renderTablesets(): React.FunctionComponentElement<{
-        apiUrl: string;
         schema: Schema;
-        client?: string | undefined;
-        user?: string | undefined;
-        onChange: (tableId: string | null) => void;
-        extraTables: string[];
-        onExtraTableAdd: (tableId: string) => void;
-        onExtraTableRemove: (tableId: string) => void;
-        locale?: string | undefined;
+        client: string | undefined;
+        apiUrl: string;
+        user: string | undefined;
+        onChange: any;
+        extraTables: any;
+        onExtraTableAdd: (tableId: any) => any;
+        onExtraTableRemove: (tableId: any) => any;
+        locale: any;
     }>;
     renderMetrics(): React.FunctionComponentElement<{
-        apiUrl: string;
         schema: Schema;
-        client?: string | undefined;
-        user?: string | undefined;
-        onChange: (tableId: string | null) => void;
-        extraTables: string[];
-        onExtraTableAdd: (tableId: string) => void;
-        onExtraTableRemove: (tableId: string) => void;
-        locale?: string | undefined;
+        client: string | undefined;
+        apiUrl: string;
+        user: string | undefined;
+        onChange: any;
+        extraTables: any;
+        onExtraTableAdd: (tableId: any) => any;
+        onExtraTableRemove: (tableId: any) => any;
+        locale: any;
     }>;
     renderAssets(): React.JSX.Element;
     renderLegacyAssets(): React.FunctionComponentElement<{
-        apiUrl: string;
         schema: Schema;
-        client?: string | undefined;
-        user?: string | undefined;
-        onChange: (tableId: string | null) => void;
-        extraTables: string[];
-        onExtraTableAdd: (tableId: string) => void;
-        onExtraTableRemove: (tableId: string) => void;
-        locale?: string | undefined;
+        client: string | undefined;
+        apiUrl: string;
+        user: string | undefined;
+        onChange: any;
+        extraTables: any;
+        onExtraTableAdd: (tableId: any) => any;
+        onExtraTableRemove: (tableId: any) => any;
+        locale: any;
     }>;
     renderOther(): React.CElement<{
         items: {
             name: string;
-            desc?: string | undefined;
+            desc?: string;
             onClick: () => void;
-            onRemove?: (() => void) | undefined;
+            onRemove?: () => void;
         }[];
-        hint?: string | undefined;
+        hint?: string;
     }, uiComponents.OptionListComponent>;
     getSweetSenseTables(): import("@mwater/expressions").Table[];
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;

package/lib/MWaterCompleteTableSelectComponent.js

@@ -39,7 +39,7 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MWaterCustomTablesetListComponent_1 = require("./MWaterCustomTablesetListComponent");
 const MWaterMetricsTableListComponent_1 = require("./MWaterMetricsTableListComponent");
 const MWaterAssetSystemsListComponent_1 = require("./MWaterAssetSystemsListComponent");
-const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
+const expressions_ui_1 = require("@mwater/expressions-ui");
 const sitesOrder = {
     "entities.water_point": 1,
     "entities.sanitation_facility": 2,
@@ -59,7 +59,7 @@ const assetEntities = [
 ];
 // Allows selection of a table. Is the complete list mode of tables
 class MWaterCompleteTableSelectComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -197,8 +197,9 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             react_1.default.createElement(uiComponents.OptionListComponent, { items: items }),
             react_1.default.createElement("div", { className: "text-center mt-2 mb-2" },
                 react_1.default.createElement("button", { className: "btn btn-link", onClick: () => this.setState({ showLegacyAssets: !this.state.showLegacyAssets }) },
-                    this.state.showLegacyAssets ? "Hide" : "Show",
-                    " Legacy Assets")),
+                    this.state.showLegacyAssets ? T `Hide` : T `Show`,
+                    " ",
+                    T `Legacy Assets`)),
             this.state.showLegacyAssets && this.renderLegacyAssets());
     }
     renderLegacyAssets() {
@@ -279,27 +280,27 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
     render() {
         const sweetSenseTables = this.getSweetSenseTables();
         const tabs = [
-            { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), " Sites"], elem: this.renderSites() },
-            { id: "forms", label: [R("i", { className: "fa fa-th-list" }), " Surveys"], elem: this.renderForms() },
+            { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), T ` Sites`], elem: this.renderSites() },
+            { id: "forms", label: [R("i", { className: "fa fa-th-list" }), T ` Surveys`], elem: this.renderForms() },
             {
                 id: "indicators",
-                label: [R("i", { className: "fa fa-check-circle" }), " Indicators"],
+                label: [R("i", { className: "fa fa-check-circle" }), T ` Indicators`],
                 elem: this.renderIndicators()
             },
             {
                 id: "issues",
-                label: [R("i", { className: "fa fa-exclamation-circle" }), " Issues"],
+                label: [R("i", { className: "fa fa-exclamation-circle" }), T ` Issues`],
                 elem: this.renderIssues()
             },
-            { id: "tablesets", label: [R("i", { className: "fa fa-table" }), " Tables"], elem: this.renderTablesets() },
-            { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), " Metrics"], elem: this.renderMetrics() },
-            { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), " Assets"], elem: this.renderAssets() }
+            { id: "tablesets", label: [R("i", { className: "fa fa-table" }), T ` Tables`], elem: this.renderTablesets() },
+            { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), T ` Metrics`], elem: this.renderMetrics() },
+            { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), T ` Assets`], elem: this.renderAssets() }
         ];
         if (sweetSenseTables.length > 0) {
-            tabs.push({ id: "sensors", label: " Sensors", elem: this.renderSweetSense() });
+            tabs.push({ id: "sensors", label: T ` Sensors`, elem: this.renderSweetSense() });
         }
-        tabs.push({ id: "other", label: "Advanced", elem: this.renderOther() });
-        return R("div", null, R("div", { className: "text-muted" }, "Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types."), R(TabbedComponent_1.default, {
+        tabs.push({ id: "other", label: T `Advanced`, elem: this.renderOther() });
+        return R("div", null, R("div", { className: "text-muted" }, T `Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`), R(TabbedComponent_1.default, {
             tabs,
             initialTabId: "sites"
         }));
@@ -308,7 +309,7 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
 exports.default = MWaterCompleteTableSelectComponent;
 // Searchable list of forms
 class FormsListComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -345,7 +346,7 @@ class FormsListComponent extends react_1.default.Component {
                     if (desc) {
                         desc += " - ";
                     }
-                    desc += `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
+                    desc += T `Modified ${(0, moment_1.default)(form.modified?.on, moment_1.default.ISO_8601).format("ll")}`;
                     return {
                         id: form._id,
                         name: expressions_1.ExprUtils.localizeString(form.design.name, null),
@@ -358,7 +359,7 @@ class FormsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(T `Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -387,7 +388,7 @@ class FormsListComponent extends react_1.default.Component {
         forms = lodash_1.default.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`));
         let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !table.deprecated);
         tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
-        return R("div", null, R("label", null, "Included Surveys:"), tables.length > 0
+        return R("div", null, R("label", null, T `Included Surveys:`), tables.length > 0
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
@@ -398,13 +399,13 @@ class FormsListComponent extends react_1.default.Component {
                     };
                 })
             })
-            : R("div", null, "None"), R("br"), R("label", null, "All Surveys:"), !this.state.forms || this.state.forms.length === 0
-            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0Loading...")
+            : R("div", null, T `None`), R("br"), R("label", null, T `All Surveys:`), !this.state.forms || this.state.forms.length === 0
+            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0" + T `Loading...`)
             : [
                 R("input", {
                     type: "text",
                     className: "form-control form-control-sm",
-                    placeholder: "Search...",
+                    placeholder: T `Search...`,
                     key: "search",
                     ref: this.searchRef,
                     style: { maxWidth: "20em", marginBottom: 10 },
@@ -423,7 +424,7 @@ class FormsListComponent extends react_1.default.Component {
 }
 // Searchable list of indicators
 class IndicatorsListComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     addIndicatorConfirmPopup;
     constructor(props) {
         super(props);
@@ -459,7 +460,7 @@ class IndicatorsListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(T `Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -502,7 +503,7 @@ class IndicatorsListComponent extends react_1.default.Component {
             ref: (c) => {
                 this.addIndicatorConfirmPopup = c;
             }
-        }), R("label", null, "Included Indicators:"), tables.length > 0
+        }), R("label", null, T `Included Indicators:`), tables.length > 0
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
@@ -513,13 +514,13 @@ class IndicatorsListComponent extends react_1.default.Component {
                     };
                 })
             })
-            : R("div", null, "None"), R("br"), R("label", null, "All Indicators:"), !this.state.indicators || this.state.indicators.length === 0
-            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0Loading...")
+            : R("div", null, T `None`), R("br"), R("label", null, T `All Indicators:`), !this.state.indicators || this.state.indicators.length === 0
+            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0" + T `Loading...`)
             : [
                 R("input", {
                     type: "text",
                     className: "form-control form-control-sm",
-                    placeholder: "Search...",
+                    placeholder: T `Search...`,
                     key: "search",
                     ref: this.searchRef,
                     style: { maxWidth: "20em", marginBottom: 10 },
@@ -537,7 +538,7 @@ class IndicatorsListComponent extends react_1.default.Component {
     }
 }
 class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -551,11 +552,11 @@ class AddIndicatorConfirmPopupComponent extends react_1.default.Component {
     renderContents() {
         // Show loading if table not loaded
         if (!this.props.schema.getTable(this.state.indicatorTable)) {
-            return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0Loading...");
+            return R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0" + T `Loading...`);
         }
         // Find entity links
         const entityColumns = lodash_1.default.filter(this.props.schema.getColumns(this.state.indicatorTable), (col) => col.join?.toTable?.match(/^entities\./));
-        return R("div", null, R("p", null, `In general, it is better to get indicator values from the related site. Please select the site 
+        return R("div", null, R("p", null, T `In general, it is better to get indicator values from the related site. Please select the site 
 below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
 are certain that you want to use the raw indicator table`), R(uiComponents.OptionListComponent, {
             items: lodash_1.default.map(entityColumns, (entityColumn) => ({
@@ -567,7 +568,7 @@ are certain that you want to use the raw indicator table`), R(uiComponents.Optio
                     return this.setState({ visible: false });
                 }
             }))
-        }), R("br"), R("div", null, R("a", { className: "link-plain", onClick: this.props.onChange.bind(null, this.state.indicatorTable) }, "Use Raw Indicator")));
+        }), R("br"), R("div", null, R("a", { className: "link-plain", onClick: this.props.onChange.bind(null, this.state.indicatorTable) }, T `Use Raw Indicator`)));
     }
     render() {
         if (!this.state.visible) {
@@ -576,13 +577,13 @@ are certain that you want to use the raw indicator table`), R(uiComponents.Optio
         return R(ModalPopupComponent_1.default, {
             showCloseX: true,
             onClose: () => this.setState({ visible: false }),
-            header: "Add Indicator"
+            header: T `Add Indicator`
         }, this.renderContents());
     }
 }
 // Searchable list of issue types
 class IssuesListComponent extends react_1.default.Component {
-    static contextType = contexts_1.LocaleContext;
+    static contextType = expressions_ui_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -615,7 +616,7 @@ class IssuesListComponent extends react_1.default.Component {
         });
     }
     handleTableRemove = (table) => {
-        if (confirm(`Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
+        if (confirm(T `Remove ${expressions_1.ExprUtils.localizeString(table.name, this.context)}? Any widgets that depend on it will no longer work properly.`)) {
             return this.props.onExtraTableRemove(table.id);
         }
     };
@@ -644,7 +645,7 @@ class IssuesListComponent extends react_1.default.Component {
         issueTypes = lodash_1.default.filter(issueTypes || [], (f) => !(this.props.extraTables || []).includes(`issues:${f.id}`));
         let tables = lodash_1.default.filter(this.props.schema.getTables(), (table) => (table.id.match(/^issues:/) || table.id.match(/^issue_events:/)) && !table.deprecated);
         tables = lodash_1.default.sortBy(tables, (t) => t.name.en);
-        return R("div", null, R("label", null, "Included Issues:"), tables.length > 0
+        return R("div", null, R("label", null, T `Included Issues:`), tables.length > 0
             ? R(uiComponents.OptionListComponent, {
                 items: lodash_1.default.map(tables, (table) => {
                     return {
@@ -655,13 +656,13 @@ class IssuesListComponent extends react_1.default.Component {
                     };
                 })
             })
-            : R("div", null, "None"), R("br"), R("label", null, "All Issues:"), !this.state.issueTypes || this.state.issueTypes.length === 0
-            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0Loading...")
+            : R("div", null, T `None`), R("br"), R("label", null, T `All Issues:`), !this.state.issueTypes || this.state.issueTypes.length === 0
+            ? R("div", { className: "alert alert-info" }, R("i", { className: "fa fa-spinner fa-spin" }), "\u00A0", T `Loading...`)
             : [
                 R("input", {
                     type: "text",
                     className: "form-control form-control-sm",
-                    placeholder: "Search...",
+                    placeholder: T `Search...`,
                     key: "search",
                     ref: this.searchRef,
                     style: { maxWidth: "20em", marginBottom: 10 },

package/lib/MWaterCustomTablesetListComponent.d.ts

@@ -4,14 +4,14 @@ import React from "react";
 export declare const MWaterCustomTablesetListComponent: (props: {
     apiUrl: string;
     schema: Schema;
-    client?: string | undefined;
+    client?: string;
     /** User id */
-    user?: string | undefined;
+    user?: string;
     /** Called with table selected */
     onChange: (tableId: string | null) => void;
     extraTables: string[];
     onExtraTableAdd: (tableId: string) => void;
     onExtraTableRemove: (tableId: string) => void;
     /** e.g. "en" */
-    locale?: string | undefined;
+    locale?: string;
 }) => React.JSX.Element;