@mwater/visualization 5.0.0 → 5.1.0

package/lib/maps/MapDesignerComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { MapDesign } from "./MapDesign";
@@ -18,12 +17,6 @@ export interface MapDesignerComponentProps {
     enableQuickfilters?: boolean;
 }
 export default class MapDesignerComponent extends React.Component<MapDesignerComponentProps> {
-    static childContextTypes: {
-        activeTables: PropTypes.Requireable<string[]>;
-    };
-    getChildContext(): {
-        activeTables: string[];
-    };
     handleAttributionChange: (text: any) => void;
     handleAutoBoundsChange: (value: any) => void;
     handleShowLayerSwitcherChange: (value: any) => void;
@@ -31,9 +24,5 @@ export default class MapDesignerComponent extends React.Component<MapDesignerCom
     handleConvertToMarkersMap: () => void;
     handleInitialLegendDisplayChange: (value: any) => void;
     renderOptionsTab(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            padding: number;
-        };
-    }, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/maps/MapDesignerComponent.js

@@ -27,7 +27,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 TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
@@ -42,14 +41,8 @@ const MapUtils = __importStar(require("./MapUtils"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
 const immer_1 = __importDefault(require("immer"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
 class MapDesignerComponent extends react_1.default.Component {
-    static childContextTypes = { activeTables: prop_types_1.default.arrayOf(prop_types_1.default.string.isRequired) };
-    getChildContext() {
-        return {
-            // Pass active tables down to table select components so they can present a shorter list
-            activeTables: MapUtils.getFilterableTables(this.props.design, this.props.schema)
-        };
-    }
     handleAttributionChange = (text) => {
         const design = { ...this.props.design, attribution: text };
         return this.props.onDesignChange(design);
@@ -152,10 +145,10 @@ class MapDesignerComponent extends react_1.default.Component {
                 }))
             });
         }
-        return R("div", { style: { padding: 5 } }, R(TabbedComponent_1.default, {
-            initialTabId: "layers",
-            tabs
-        }));
+        const activeTables = MapUtils.getFilterableTables(this.props.design, this.props.schema);
+        return (react_1.default.createElement(expressions_ui_1.ActiveTablesContext.Provider, { value: activeTables },
+            react_1.default.createElement("div", { style: { padding: 5 } },
+                react_1.default.createElement(TabbedComponent_1.default, { initialTabId: "layers", tabs: tabs }))));
     }
 }
 exports.default = MapDesignerComponent;

package/lib/maps/MarkersLayerDesignerComponent.js

@@ -33,7 +33,7 @@ const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const AxisComponent_1 = __importDefault(require("./../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../ColorComponent"));
-const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const expressions_ui_2 = require("@mwater/expressions-ui");
 const EditPopupComponent_1 = __importDefault(require("./EditPopupComponent"));
 const ZoomLevelsComponent_1 = __importDefault(require("./ZoomLevelsComponent"));
 const MarkerSymbolSelectComponent_1 = __importDefault(require("./MarkerSymbolSelectComponent"));
@@ -86,7 +86,7 @@ class MarkersLayerDesignerComponent extends react_1.default.Component {
         return this.update({ lineWidth });
     };
     renderTable() {
-        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(TableSelectComponent_1.default, {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), R("div", { style: { marginLeft: 10 } }, R(expressions_ui_2.TableSelectComponent, {
             schema: this.props.schema,
             value: this.props.design.table,
             onChange: this.handleTableChange,

package/lib/maps/PopupFilterJoinsUtils.d.ts

@@ -12,4 +12,9 @@ import { JsonQLFilter } from "..";
 export declare function createPopupFilters(popupFilterJoins: {
     [tableId: string]: Expr;
 }, schema: Schema, layerTable: any, rowId: any, useWithin?: boolean): JsonQLFilter[];
-export declare function createDefaultPopupFilterJoins(table: any): {};
+export declare function createDefaultPopupFilterJoins(table: any): {
+    [x: number]: {
+        table: any;
+        type: string;
+    };
+};

package/lib/maps/PopupFilterJoinsUtils.js

@@ -30,7 +30,7 @@ function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWith
                     type: "op",
                     op: "within",
                     table,
-                    exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr), valueType: "id", value: rowId }]
+                    exprs: [expr, { type: "literal", idTable: exprUtils.getExprIdTable(expr) ?? undefined, valueType: "id", value: rowId }]
                 };
                 filters.push({ table, jsonql: exprCompiler.compileExpr({ expr: filterExpr, tableAlias: "{alias}" }) });
             }
@@ -83,9 +83,10 @@ function createPopupFilters(popupFilterJoins, schema, layerTable, rowId, useWith
 exports.createPopupFilters = createPopupFilters;
 // Create default popup filter joins where the join is just the id (not used for choropleth since that needs to join to admin_regions)
 function createDefaultPopupFilterJoins(table) {
-    const popupFilterJoins = {};
     // Return id of row for a simple match
-    popupFilterJoins[table] = { table, type: "id" };
+    const popupFilterJoins = {
+        [table]: { table, type: "id" }
+    };
     return popupFilterJoins;
 }
 exports.createDefaultPopupFilterJoins = createDefaultPopupFilterJoins;

package/lib/maps/RegionSelectComponent.d.ts

@@ -19,37 +19,5 @@ export default class RegionSelectComponent extends React.Component<RegionSelectC
         regionsTable: string;
     };
     handleChange: (id: any) => void;
-    render(): React.CElement<{
-        value: string | number | null | undefined;
-        onChange: (id: any) => void;
-        idTable: string;
-        schema: Schema;
-        dataSource: DataSource;
-        placeholder: string | undefined;
-        orderBy: {
-            expr: {
-                type: string;
-                tableAlias: string;
-                column: string;
-            };
-            direction: string;
-        }[];
-        filter: import("@mwater/jsonql").JsonQLOp | undefined;
-    }, React.Component<{
-        value: string | number | null | undefined;
-        onChange: (id: any) => void;
-        idTable: string;
-        schema: Schema;
-        dataSource: DataSource;
-        placeholder: string | undefined;
-        orderBy: {
-            expr: {
-                type: string;
-                tableAlias: string;
-                column: string;
-            };
-            direction: string;
-        }[];
-        filter: import("@mwater/jsonql").JsonQLOp | undefined;
-    }, any, any>>;
+    render(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 }

package/lib/maps/UtfGridLayer.js

@@ -59,7 +59,7 @@ module.exports = leaflet_1.default.Layer.extend({
         this._cache = {};
         //Find a unique id in window we can use for our callbacks
         //Required for jsonP
-        var i = 0;
+        let i = 0;
         while (window["lu" + i]) {
             i++;
         }

package/lib/maps/VectorMapViewComponent.js

@@ -27,14 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VectorMapViewComponent = void 0;
-const lodash_1 = __importDefault(require("lodash"));
+const lodash_1 = __importStar(require("lodash"));
 const react_1 = __importStar(require("react"));
 const react_2 = require("react");
 const LayerFactory_1 = __importDefault(require("./LayerFactory"));
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
 const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
 const MapUtils_1 = require("./MapUtils");
-const memoizedDebounce_1 = require("../memoizedDebounce");
 require("maplibre-gl/dist/maplibre-gl.css");
 require("./VectorMapViewComponent.css");
 const LayerSwitcherComponent_1 = require("./LayerSwitcherComponent");
@@ -104,6 +103,7 @@ function VectorMapViewComponent(props) {
             filters: getCompiledFilters()
         });
         if (!results) {
+            setHoverContents(null);
             return;
         }
         // Handle popup first
@@ -111,9 +111,6 @@ function VectorMapViewComponent(props) {
             setHoverContents(results.hoverOver);
         }
     });
-    const handleLayerHoverDebounced = (0, memoizedDebounce_1.memoizedDebounce)((layerViewId, ev) => {
-        handleLayerHover(layerViewId, ev);
-    }, 250, { leading: true, trailing: false }, (layerViewId, ev) => ev.data.id);
     /** Handle a click on a layer */
     const handleLayerClick = (0, useStableCallback_1.useStableCallback)((layerViewId, ev) => {
         const layerView = props.design.layerViews.find(lv => lv.id == layerViewId);
@@ -394,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: 3000 });
+                map.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 });
                 // Also record if editable as part of bounds
                 setBounds(bounds);
             }
@@ -456,39 +453,34 @@ function VectorMapViewComponent(props) {
         if (!map) {
             return;
         }
-        const removes = [];
-        for (const clickHandler of layerClickHandlers) {
-            const onEnter = (ev) => {
-                if (!ev.features || !ev.features[0].properties) {
+        const layers = layerClickHandlers.map(clickHandler => clickHandler.mapLayerId);
+        const onEnter = (ev) => {
+            let f = map.queryRenderedFeatures(ev.point, { layers });
+            if (f.length) {
+                if (f[0].layer.type === 'fill' && f[0].layer.paint?.['fill-color']?.toString() == 'rgba(0,0,0,0)') {
                     lastFeature.current = undefined;
                     setHoverContents(null);
                     return;
                 }
-                if (ev.features[0].properties.id !== lastFeature.current) {
+                if (lastFeature.current !== f[0].properties.id) {
+                    lastFeature.current = f[0].properties.id;
                     setHoverContents(null);
-                    lastFeature.current = ev.features[0].properties.id;
+                    const handler = (0, lodash_1.find)(layerClickHandlers, { mapLayerId: f[0].layer.id });
+                    handleLayerHover(handler.layerViewId, {
+                        data: f[0].properties,
+                        event: ev
+                    });
                 }
-                handleLayerHoverDebounced(clickHandler.layerViewId, {
-                    data: ev.features[0].properties,
-                    event: ev
-                });
-            };
-            const onLeave = (ev) => {
+            }
+            else {
                 lastFeature.current = undefined;
                 setHoverContents(null);
-            };
-            map.on("mousemove", clickHandler.mapLayerId, onEnter);
-            map.on("mouseleave", clickHandler.mapLayerId, onLeave);
-            removes.push(() => {
-                map.off("mousemove", clickHandler.mapLayerId, onEnter);
-                map.off("mouseleave", clickHandler.mapLayerId, onLeave);
-            });
-        }
-        return () => {
-            for (const remove of removes) {
-                remove();
             }
         };
+        map.on("mousemove", onEnter);
+        return () => {
+            map.off("mousemove", onEnter);
+        };
     }, [map, layerClickHandlers]);
     function renderLegend() {
         if (legendHidden) {

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -57,192 +57,8 @@ declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterCo
     };
     handleSingleChange: (val: any) => any;
     handleMultiChange: (val: any) => any;
-    renderSingleSelect(options: any[]): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & 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>>>>;
-    renderMultiSelect(options: any[]): React.FunctionComponentElement<Omit<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}, "value" | "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<unknown, boolean, import("react-select").GroupBase<unknown>>, "required" | "id" | "name" | "value" | "form" | "className" | "autoFocus" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "isClearable" | "theme" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
-        tabIndex?: number | undefined;
-        options?: import("react-select").OptionsOrGroups<unknown, import("react-select").GroupBase<unknown>> | undefined;
-        placeholder?: React.ReactNode;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        styles?: import("react-select").StylesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        isLoading?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isRtl?: boolean | undefined;
-        isMulti?: boolean | undefined;
-        controlShouldRenderValue?: boolean | undefined;
-        loadingMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        noOptionsMessage?: ((obj: {
-            inputValue: string;
-        }) => React.ReactNode) | undefined;
-        backspaceRemovesValue?: boolean | undefined;
-        blurInputOnSelect?: boolean | undefined;
-        captureMenuScroll?: boolean | undefined;
-        classNames?: import("react-select").ClassNamesConfig<unknown, boolean, import("react-select").GroupBase<unknown>> | undefined;
-        closeMenuOnSelect?: boolean | undefined;
-        closeMenuOnScroll?: boolean | ((event: Event) => boolean) | undefined;
-        components?: Partial<import("react-select/dist/declarations/src/components").SelectComponents<unknown, boolean, import("react-select").GroupBase<unknown>>> | undefined;
-        escapeClearsValue?: boolean | undefined;
-        filterOption?: ((option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, inputValue: string) => boolean) | null | undefined;
-        formatGroupLabel?: ((group: import("react-select").GroupBase<unknown>) => React.ReactNode) | undefined;
-        getOptionLabel?: import("react-select").GetOptionLabel<unknown> | undefined;
-        getOptionValue?: import("react-select").GetOptionValue<unknown> | undefined;
-        isOptionDisabled?: ((option: unknown, selectValue: import("react-select").Options<unknown>) => boolean) | undefined;
-        isSearchable?: boolean | undefined;
-        minMenuHeight?: number | undefined;
-        maxMenuHeight?: number | undefined;
-        menuIsOpen?: boolean | undefined;
-        menuPlacement?: import("react-select").MenuPlacement | undefined;
-        menuPosition?: import("react-select").MenuPosition | undefined;
-        menuShouldBlockScroll?: boolean | undefined;
-        menuShouldScrollIntoView?: boolean | undefined;
-        openMenuOnFocus?: boolean | undefined;
-        openMenuOnClick?: boolean | undefined;
-        pageSize?: number | undefined;
-        screenReaderStatus?: ((obj: {
-            count: number;
-        }) => string) | undefined;
-        tabSelectsValue?: boolean | undefined;
-        unstyled?: boolean | undefined;
-    } & {}> & 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>>>>;
+    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>>>>;
+    renderMultiSelect(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>>>>;
     render(): React.DetailedReactHTMLElement<{
         style: {
             display: "inline-block";

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -152,7 +152,7 @@ class QuickfilterDesignComponent extends react_1.default.Component {
             table: this.state.table,
             value: this.props.design.expr,
             onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]
+            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
         }))), this.props.design.expr
             ? R("div", { className: "mb-3", key: "label" }, R("label", { className: "text-muted" }, "Label"), R("input", {
                 type: "text",