@mwater/visualization 5.1.0 → 5.3.0

package/lib/maps/MarkersLayer.js

@@ -37,6 +37,7 @@ const mapboxUtils_1 = require("./mapboxUtils");
 const LayerLegendComponent_1 = __importDefault(require("./LayerLegendComponent"));
 const PopupFilterJoinsUtils = __importStar(require("./PopupFilterJoinsUtils"));
 const HoverContent_1 = __importDefault(require("./HoverContent"));
+const layoutOptions_1 = require("../dashboards/layoutOptions");
 class MarkersLayer extends Layer_1.default {
     /** Gets the type of layer definition */
     getLayerDefinitionType() {
@@ -71,11 +72,7 @@ class MarkersLayer extends Layer_1.default {
                 "fill-color": color,
                 "fill-opacity": (design.polygonFillOpacity ?? 0.25) * opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "Polygon"],
-                ["==", ["geometry-type"], "MultiPolygon"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
         });
         // Add polygon outlines and lines
         mapLayers.push({
@@ -88,11 +85,7 @@ class MarkersLayer extends Layer_1.default {
                 "line-width": design.lineWidth != null ? design.lineWidth : 3,
                 "line-opacity": opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "Polygon"],
-                ["==", ["geometry-type"], "MultiPolygon"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "MultiPolygon"]])
         });
         // Add lines
         mapLayers.push({
@@ -105,11 +98,7 @@ class MarkersLayer extends Layer_1.default {
                 "line-width": design.lineWidth != null ? design.lineWidth : 3,
                 "line-opacity": opacity
             },
-            filter: addFilter([
-                "any",
-                ["==", ["geometry-type"], "LineString"],
-                ["==", ["geometry-type"], "MultiLineString"]
-            ])
+            filter: addFilter(["any", ["==", ["geometry-type"], "LineString"], ["==", ["geometry-type"], "MultiLineString"]])
         });
         if (!design.symbol) {
             mapLayers.push({
@@ -165,7 +154,7 @@ class MarkersLayer extends Layer_1.default {
         const exprCompiler = new expressions_1.ExprCompiler(schema);
         // Compile geometry axis
         const geometryExpr = axisBuilder.compileAxis({ axis: design.axes.geometry, tableAlias: "basequery" });
-        // Select _id, location 
+        // Select _id, location
         const basequery = {
             type: "query",
             selects: [
@@ -174,7 +163,7 @@ class MarkersLayer extends Layer_1.default {
                     expr: { type: "field", tableAlias: "basequery", column: schema.getTable(design.table).primaryKey },
                     alias: "id"
                 },
-                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" }, // geometry as the_geom_webmercator
+                { type: "select", expr: geometryExpr, alias: "the_geom_webmercator" } // geometry as the_geom_webmercator
             ],
             from: exprCompiler.compileTable(design.table, "basequery")
         };
@@ -440,7 +429,7 @@ line-width: ` +
                             JSON.stringify(item.value) +
                             "][geometry_type='ST_Polygon'],#layer0[color=" +
                             JSON.stringify(item.value) +
-                            `][geometry_type='ST_MultiPolygon'] { 
+                            `][geometry_type='ST_MultiPolygon'] {
 polygon-fill: ` +
                             item.color +
                             `;\
@@ -459,15 +448,25 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
             const results = {};
             // Popup
             if (hoverOptions.design.hoverOver) {
-                // Create filter using popupFilterJoins
-                const popupFilterJoins = hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table);
-                const popupFilters = PopupFilterJoinsUtils.createPopupFilters(popupFilterJoins, hoverOptions.schema, table, ev.data.id);
+                const exprCompiler = new expressions_1.ExprCompiler(hoverOptions.schema);
                 results.hoverOver = react_1.default.createElement(HoverContent_1.default, {
                     key: ev.data.id,
                     schema: hoverOptions.schema,
                     dataSource: hoverOptions.dataSource,
                     design: hoverOptions.design,
-                    filters: popupFilters
+                    filters: [
+                        {
+                            table,
+                            jsonql: {
+                                type: "op",
+                                op: "=",
+                                exprs: [
+                                    exprCompiler.compileExpr({ expr: { type: "id", table }, tableAlias: "{alias}" }),
+                                    { type: "literal", value: ev.data.id }
+                                ]
+                            }
+                        }
+                    ]
                 });
             }
             return results;
@@ -543,7 +542,7 @@ ${design.polygonBorderColor ? "line-color: " + design.polygonBorderColor + ";" :
                 const WidgetFactory = require("../widgets/WidgetFactory").default;
                 results.popup = new BlocksLayoutManager().renderLayout({
                     items: clickOptions.design.popup.items,
-                    style: "popup",
+                    layoutOptions: (0, layoutOptions_1.getDefaultLayoutOptions)("default"),
                     renderWidget: (options) => {
                         const widget = WidgetFactory.createWidget(options.type);
                         const filters = clickOptions.filters.concat(popupFilters);
@@ -806,7 +805,13 @@ function createMarkersVectorQuery(baseQuery) {
         }
     });
     // Bubble up selects that are not cluster or geometry to the outer query
-    const innerSelects = baseQuery.selects.filter(select => select.alias !== "the_geom_webmercator").map(select => ({ type: "select", expr: { type: "field", tableAlias: "innerquery", column: select.alias }, alias: select.alias }));
+    const innerSelects = baseQuery.selects
+        .filter(select => select.alias !== "the_geom_webmercator")
+        .map(select => ({
+        type: "select",
+        expr: { type: "field", tableAlias: "innerquery", column: select.alias },
+        alias: select.alias
+    }));
     // Create outer query which takes where r <= 3 to limit # of points in a cluster
     // Wrap geometry in ST_Force2D to avoid https://trac.osgeo.org/postgis/ticket/4690 (https://github.com/mWater/mwater-server/issues/495)
     const outerquery = {
@@ -828,7 +833,7 @@ function createMarkersVectorQuery(baseQuery) {
                     ]
                 },
                 alias: "the_geom_webmercator"
-            }, // innerquery.the_geom_webmercator as the_geom_webmercator
+            } // innerquery.the_geom_webmercator as the_geom_webmercator
         ],
         from: { type: "subquery", query: innerquery, alias: "innerquery" },
         where: { type: "op", op: "<=", exprs: [{ type: "field", tableAlias: "innerquery", column: "r" }, 3] }

package/lib/maps/RasterMapViewComponent.d.ts

@@ -1,7 +1,7 @@
-import PropTypes from "prop-types";
 import React, { ReactNode } from "react";
 import LeafletMapComponent from "./LeafletMapComponent";
 import { Schema, DataSource } from "@mwater/expressions";
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign } from "./MapDesign";
 import { MapDataSource } from "./MapDataSource";
@@ -42,9 +42,7 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
     popupContents: ReactNode;
     legendHidden: boolean;
 }> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     leafletMap?: LeafletMapComponent | null;
     constructor(props: any);
     componentDidMount(): void;
@@ -64,15 +62,7 @@ export default class RasterMapViewComponent extends React.Component<RasterMapVie
         locale: string;
         onHide: () => void;
     }>;
-    renderPopup(): React.CElement<{
-        onClose: () => void;
-        showCloseX: boolean;
-        size: string;
-    }, React.Component<{
-        onClose: () => void;
-        showCloseX: boolean;
-        size: string;
-    }, any, any>> | null;
+    renderPopup(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
     render(): React.DetailedReactHTMLElement<{
         style: {
             width: number;

package/lib/maps/RasterMapViewComponent.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -36,9 +35,10 @@ const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib
 const MapUtils = __importStar(require("./MapUtils"));
 const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
 const LegendComponent_1 = __importDefault(require("./LegendComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Component that displays just the map, using raster tile technology */
 class RasterMapViewComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     leafletMap;
     constructor(props) {
         super(props);
@@ -154,7 +154,7 @@ class RasterMapViewComponent extends react_1.default.Component {
                 layerViews: this.props.design.layerViews,
                 filters: this.getCompiledFilters(),
                 dataSource: this.props.dataSource,
-                locale: this.context.locale,
+                locale: this.context,
                 onHide: () => this.setState({ legendHidden: true }),
                 zoom: null
             });

package/lib/maps/RegionSelectComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { IdLiteralComponent } from "@mwater/expressions-ui";
 import { DataSource, Schema } from "@mwater/expressions";
 export interface RegionSelectComponentProps {
     schema: Schema;
@@ -19,5 +20,5 @@ export default class RegionSelectComponent extends React.Component<RegionSelectC
         regionsTable: string;
     };
     handleChange: (id: any) => void;
-    render(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    render(): React.CElement<import("@mwater/expressions-ui/lib/IdLiteralComponent").IdLiteralComponentProps, IdLiteralComponent>;
 }

package/lib/maps/ServerMapDataSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="jquery" />
 import { DataSource, Expr, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { MapDesign, MapLayerView } from "./MapDesign";
@@ -22,7 +21,7 @@ interface ServerMapDataSourceOptions {
     /** map id to use on server */
     mapId: string;
     /** revision to use to allow caching */
-    rev: string;
+    rev: number;
 }
 interface ServerMapLayerDataSourceOptions extends ServerMapDataSourceOptions {
     layerView: MapLayerView;
@@ -66,7 +65,7 @@ interface ServerMapLayerPopupWidgetDataSourceOptions {
     /** map id to use on server */
     mapId: string;
     /** revision to use to allow caching */
-    rev: string;
+    rev: number;
     /** Layer id to use */
     layerId: string;
     /** Popup widget id to use */
@@ -75,7 +74,7 @@ interface ServerMapLayerPopupWidgetDataSourceOptions {
 declare class ServerMapLayerPopupWidgetDataSource implements WidgetDataSource {
     options: ServerMapLayerPopupWidgetDataSourceOptions;
     constructor(options: ServerMapLayerPopupWidgetDataSourceOptions);
-    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): JQuery.jqXHR<any>;
+    getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void;
     getImageUrl(imageId: string, height?: number): string;
 }
 declare class ServerQuickfilterDataSource implements QuickfiltersDataSource {

package/lib/maps/ServerMapDataSource.js

@@ -208,11 +208,11 @@ class ServerMapLayerPopupWidgetDataSource {
         const url = this.options.apiUrl +
             `maps/${this.options.mapId}/layers/${this.options.layerId}/widgets/${this.options.popupWidgetId}/data?` +
             querystring_1.default.stringify(query);
-        return jquery_1.default.getJSON(url, (data) => {
-            return callback(null, data);
+        jquery_1.default.getJSON(url, (data) => {
+            callback(null, data);
         }).fail((xhr) => {
             console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            callback(new Error(xhr.responseText));
         });
     }
     // Get the url to download an image (by id from an image or imagelist column)
@@ -263,11 +263,11 @@ class ServerQuickfilterDataSource {
             headers
         })
             .done((data) => {
-            return callback(null, data);
+            callback(null, data);
         })
             .fail((xhr) => {
             console.log(xhr.responseText);
-            return callback(new Error(xhr.responseText));
+            callback(new Error(xhr.responseText));
         });
     }
 }

package/lib/maps/VectorMapViewComponent.js

@@ -391,7 +391,7 @@ function VectorMapViewComponent(props) {
         props.mapDataSource.getBounds(props.design, getCompiledFilters(), (error, bounds) => {
             setBusy(b => b - 1);
             if (bounds) {
-                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 });
+                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 30, duration: 2500 });
                 // Also record if editable as part of bounds
                 setBounds(bounds);
             }
@@ -420,6 +420,7 @@ function VectorMapViewComponent(props) {
                 props.design.bounds.s != boundsRef.current.s ||
                 props.design.bounds.w != boundsRef.current.w) {
                 map.fitBounds([props.design.bounds.w, props.design.bounds.s, props.design.bounds.e, props.design.bounds.n]);
+                boundsRef.current = props.design.bounds;
             }
         }
     }, [map, props.design.autoBounds, props.design.bounds]);

package/lib/maps/mapSymbols.js

@@ -51,6 +51,7 @@ const chevron_circle_down_png_1 = __importDefault(require("./symbols/font-awesom
 const medkit_png_1 = __importDefault(require("./symbols/font-awesome/medkit.png"));
 const cloud_png_1 = __importDefault(require("./symbols/font-awesome/cloud.png"));
 const beer_png_1 = __importDefault(require("./symbols/font-awesome/beer.png"));
+const cloud_rain_png_1 = __importDefault(require("./symbols/font-awesome/cloud-rain.png"));
 /** Symbols used on the map */
 exports.mapSymbols = [
     {
@@ -163,5 +164,6 @@ exports.mapSymbols = [
     },
     { url: medkit_png_1.default, value: "font-awesome/medkit", label: "Medkit" },
     { url: cloud_png_1.default, value: "font-awesome/cloud", label: "Cloud" },
+    { url: cloud_rain_png_1.default, value: "font-awesome/cloud-rain", label: "Cloud Rain" },
     { url: beer_png_1.default, value: "font-awesome/beer", label: "Cup" }
 ];

package/lib/maps/vectorMaps.d.ts

@@ -2,6 +2,7 @@ import { Map, LngLatBoundsLike } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./VectorMapViewComponent.css";
 import React from "react";
+export declare function setPrintingModeEnabled(val: boolean): void;
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
  * Maps will fall back to leaflet if the key is not set or if set to ""
  */

package/lib/maps/vectorMaps.js

@@ -3,13 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = void 0;
+exports.usePersistedMapBounds = exports.VectorMapLogo = exports.AttributionControl = exports.mergeBaseAndUserStyle = exports.useBaseStyle = exports.useStyleMap = exports.useHoverCursor = exports.useVectorMap = exports.areVectorMapsEnabled = exports.getMapTilerApiKey = exports.setMapTilerApiKey = exports.setPrintingModeEnabled = void 0;
 const maplibre_gl_1 = __importDefault(require("maplibre-gl"));
 const react_1 = require("react");
 const mapSymbols_1 = require("./mapSymbols");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const react_2 = __importDefault(require("react"));
+/** Set to true to enable printing by preserving the drawing buffer */
+let printingModeEnabled = false;
+function setPrintingModeEnabled(val) {
+    printingModeEnabled = val;
+}
+exports.setPrintingModeEnabled = setPrintingModeEnabled;
 /* Hooks and functions related to displaying a vector map */
 let mapTilerApiKey = "";
 /** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
@@ -45,7 +51,8 @@ function useVectorMap(options) {
             return;
         }
         const observer = new IntersectionObserver(function (entries) {
-            setMapDivVisible(entries[0].isIntersecting);
+            // When in printing mode, always visible as we need to render the map
+            setMapDivVisible(entries[0].isIntersecting || printingModeEnabled);
         });
         observer.observe(divRef);
         return () => {
@@ -64,57 +71,64 @@ function useVectorMap(options) {
         if (!mapDivVisible || !divRef) {
             return;
         }
-        const m = new maplibre_gl_1.default.Map({
-            container: divRef,
-            bounds: bounds,
-            scrollZoom: scrollZoom === false ? false : true,
-            dragPan: dragPan === false ? false : true,
-            touchZoomRotate: touchZoomRotate === false ? false : true,
-            attributionControl: false,
-            boxZoom: false,
-            style: {
-                version: 8,
-                layers: [],
-                sources: {}
-            },
-            // Prevent scrolling outside of world bounds
-            maxBounds: [
-                [-179.9, -85],
-                [179.9, 85] // Northeast coordinates
-            ],
-        });
-        setHasWebGLContext(true);
-        // Add listener for losing context
-        m.on("webglcontextlost", () => {
-            console.warn("Lost WebGL context");
-            setHasWebGLContext(false);
-        });
-        // Add zoom controls to the map.
-        m.addControl(new maplibre_gl_1.default.NavigationControl({}), "top-left");
-        // Add scale control
-        const scale = new maplibre_gl_1.default.ScaleControl({
-            unit: "metric"
-        });
-        m.addControl(scale);
-        // Speed up wheel scrolling
-        m.scrollZoom.setWheelZoomRate(1 / 250);
-        // Dynamically load symbols
-        m.on("styleimagemissing", function (ev) {
-            // Check if known
-            const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
-            if (mapSymbol) {
-                m.loadImage(mapSymbol.url, (err, image) => {
-                    if (image && !m.hasImage(mapSymbol.value)) {
-                        m.addImage(mapSymbol.value, image, { sdf: true });
-                    }
-                });
-            }
-        });
-        setMap(m);
-        return () => {
-            m.remove();
-            setHasWebGLContext(false);
-        };
+        try {
+            const m = new maplibre_gl_1.default.Map({
+                container: divRef,
+                bounds: bounds,
+                scrollZoom: scrollZoom === false ? false : true,
+                dragPan: dragPan === false ? false : true,
+                touchZoomRotate: touchZoomRotate === false ? false : true,
+                attributionControl: false,
+                boxZoom: false,
+                style: {
+                    version: 8,
+                    layers: [],
+                    sources: {}
+                },
+                // Prevent scrolling outside of world bounds
+                maxBounds: [
+                    [-179.9, -85],
+                    [179.9, 85] // Northeast coordinates
+                ],
+                preserveDrawingBuffer: printingModeEnabled
+            });
+            setHasWebGLContext(true);
+            // Add listener for losing context
+            m.on("webglcontextlost", () => {
+                console.warn("Lost WebGL context");
+                setHasWebGLContext(false);
+            });
+            // Add zoom controls to the map.
+            m.addControl(new maplibre_gl_1.default.NavigationControl({}), "top-left");
+            // Add scale control
+            const scale = new maplibre_gl_1.default.ScaleControl({
+                unit: "metric"
+            });
+            m.addControl(scale);
+            // Speed up wheel scrolling
+            m.scrollZoom.setWheelZoomRate(1 / 250);
+            // Dynamically load symbols
+            m.on("styleimagemissing", function (ev) {
+                // Check if known
+                const mapSymbol = mapSymbols_1.mapSymbols.find((s) => s.value == ev.id);
+                if (mapSymbol) {
+                    m.loadImage(mapSymbol.url, (err, image) => {
+                        if (image && !m.hasImage(mapSymbol.value)) {
+                            m.addImage(mapSymbol.value, image, { sdf: true });
+                        }
+                    });
+                }
+            });
+            setMap(m);
+            return () => {
+                m.remove();
+                setHasWebGLContext(false);
+            };
+        }
+        catch (e) {
+            console.error("Error loading map", e);
+            alert(T `Error loading map. Please check that your browser and drivers are updated.`);
+        }
     }, [mapReloadCount]);
     return map;
 }
@@ -183,13 +197,13 @@ function useBaseStyle(baseLayer) {
             });
         }
         if (baseLayer == "cartodb_positron") {
-            loadStyle(`https://api.maptiler.com/maps/positron/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/5f972163-6078-4341-982a-5c8bc4447e68/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "cartodb_dark_matter") {
-            loadStyle(`https://api.maptiler.com/maps/darkmatter/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/1d3e957b-c546-4791-b9de-dce203538429/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "bing_road") {
-            loadStyle(`https://api.maptiler.com/maps/streets/style.json?key=${mapTilerApiKey}`);
+            loadStyle(`https://api.maptiler.com/maps/streets-v2/style.json?key=${mapTilerApiKey}`);
         }
         else if (baseLayer == "bing_aerial") {
             // Switched to Bing for superior aerial imagery

package/lib/quickfilter/QuickfilterCompiler.d.ts

@@ -12,5 +12,5 @@ export default class QuickfilterCompiler {
      * See README for values
      */
     compile(design: Quickfilter[] | undefined, values: any[] | null, locks: QuickfilterLock[] | null | undefined): JsonQLFilter[];
-    compileToFilterExpr(expr: any, value: any, multi: any): OpExpr | null;
+    compileToFilterExpr(expr: any, value: any, multi?: boolean): OpExpr | null;
 }

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, LocalizedString, Schema } from "@mwater/expressions";
 import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent";
@@ -52,9 +51,7 @@ interface EnumQuickfilterComponentProps {
 }
 /** Quickfilter for an enum */
 declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     handleSingleChange: (val: any) => any;
     handleMultiChange: (val: any) => any;
     renderSingleSelect(options: any[]): React.FunctionComponentElement<Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<unknown, boolean, import("react-select").GroupBase<unknown>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<unknown> & React.RefAttributes<import("react-select/dist/declarations/src/Select").default<unknown, boolean, import("react-select").GroupBase<unknown>>>>;

package/lib/quickfilter/QuickfiltersComponent.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
 const react_select_1 = __importDefault(require("react-select"));
@@ -14,6 +13,7 @@ const TextLiteralComponent_1 = __importDefault(require("./TextLiteralComponent")
 const DateExprComponent_1 = __importDefault(require("./DateExprComponent"));
 const QuickfilterCompiler_1 = __importDefault(require("./QuickfilterCompiler"));
 const IdArrayQuickfilterComponent_1 = __importDefault(require("./IdArrayQuickfilterComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 /** Displays quick filters and allows their value to be modified */
 class QuickfiltersComponent extends react_1.default.Component {
     renderQuickfilter(item, index) {
@@ -153,7 +153,7 @@ class QuickfiltersComponent extends react_1.default.Component {
 exports.default = QuickfiltersComponent;
 /** Quickfilter for an enum */
 class EnumQuickfilterComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     handleSingleChange = (val) => {
         if (val) {
             return this.props.onValueChange(val);
@@ -206,7 +206,7 @@ class EnumQuickfilterComponent extends react_1.default.Component {
     render() {
         const options = lodash_1.default.map(this.props.options, (opt) => ({
             value: opt.id,
-            label: expressions_1.ExprUtils.localizeString(opt.name, this.context.locale)
+            label: expressions_1.ExprUtils.localizeString(opt.name, this.context)
         }));
         // Determine width, estimating about 8 px per letter with 120px padding
         let width = lodash_1.default.max(options, (o) => o.label.length)?.label?.length;

package/lib/richtext/DropdownPaletteItem.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+export interface DropdownItem {
+    label: ReactNode;
+    value: string;
+    /** If true, this item will be rendered only when "More..." is clicked. */
+    more?: boolean;
+}
+export interface DropdownPaletteItemProps {
+    label: ReactNode;
+    items: DropdownItem[];
+    /** Called with clicked item */
+    onSelect: (value: string) => void;
+    /** should the popup be under or over? */
+    position?: "under" | "over";
+}
+interface DropdownPaletteItemState {
+    open: boolean;
+    moreOpen: boolean;
+}
+/** Palette item that allows picking from dropdown */
+export default class DropdownPaletteItem extends React.Component<DropdownPaletteItemProps, DropdownPaletteItemState> {
+    static defaultProps: {
+        position: string;
+    };
+    constructor(props: DropdownPaletteItemProps);
+    handleMouseDown: (ev: React.MouseEvent) => void;
+    handleMoreClick: (ev: React.MouseEvent) => void;
+    renderItem(item: DropdownItem): React.JSX.Element;
+    renderItems(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export {};