@luomus/laji-form 15.1.27 → 15.1.29

package/dist/styles.css

@@ -2077,7 +2077,7 @@ body .laji-form {
 	border-radius: 2px;
 	line-height: 12.5px;
 }
-.laji-form .form-control:not(textarea), .laji-form .rw-widget-picker.rw-widget-container, .laji-form .rw-combobox > .rw-widget-container, .laji-form .autosuggest-wrapper:not(.laji-form-enum-range), .laji-form .rw-datetimepicker, .laji-form .tristate-buttons .btn {
+.laji-form .form-control:not(textarea), .laji-form .rw-widget-picker.rw-widget-container, .laji-form .rw-combobox > .rw-widget-container, .laji-form .rw-datetimepicker, .laji-form .tristate-buttons .btn {
 	height: 25px;
 }
 .laji-form .form-control-feedback {

package/lib/components/LajiForm.d.ts

@@ -84,7 +84,10 @@ export interface FormContext {
     googleApiKey: string;
     notifier: Notifier;
     apiClient: ApiClient;
-    Label: React.Component;
+    Label: React.ComponentType<{
+        label?: string;
+        id: string;
+    }>;
     formDataTransformers?: any[];
     _parentLajiFormId?: number;
     mediaMetadata?: MediaMetadata;

package/lib/components/fields/EnumRangeArrayField.d.ts

@@ -1,5 +1,9 @@
-export default class EnumRangeArrayField extends React.Component<any, any, any> {
-    static propTypes: {
+/// <reference types="react" />
+import * as PropTypes from "prop-types";
+import { FieldProps, JSONSchemaArray, JSONSchemaString } from "../../types";
+declare function EnumRangeArrayField(props: FieldProps<JSONSchemaArray<JSONSchemaString>>): JSX.Element | null;
+declare namespace EnumRangeArrayField {
+    var propTypes: {
         uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
             "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
                 range: PropTypes.Requireable<string>;
@@ -10,18 +14,5 @@ export default class EnumRangeArrayField extends React.Component<any, any, any>
         }>>;
         formData: PropTypes.Requireable<any[]>;
     };
-    static getName(): string;
-    constructor(props: any);
-    setRef: (elem: any) => void;
-    autosuggestRef: any;
-    onInputChange: ({ target: { value } }: {
-        target: {
-            value: any;
-        };
-    }, reason: any, callback: any) => any;
-    onSuggestionSelected: (suggestion: any) => void;
-    onUnsuggestedSelected: (value: any) => void;
-    onChange: (formData: any, reason: any) => void;
 }
-import * as React from "react";
-import * as PropTypes from "prop-types";
+export default EnumRangeArrayField;

package/lib/components/fields/EnumRangeArrayField.js

@@ -1,89 +1,37 @@
 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const PropTypes = require("prop-types");
-const react_dom_1 = require("react-dom");
-const BaseComponent_1 = require("../BaseComponent");
 const utils_1 = require("../../utils");
-const AutosuggestWidget_1 = require("../widgets/AutosuggestWidget");
-const TagArrayField_1 = require("./TagArrayField");
-let EnumRangeArrayField = class EnumRangeArrayField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.setRef = (elem) => {
-            this.autosuggestRef = elem;
-        };
-        this.onInputChange = ({ target: { value } }, reason, callback) => {
-            this.setState({ value }, callback);
-            if (reason === "click") {
-                const tagComponent = this.autosuggestRef.autosuggestRef.inputElem;
-                const tagComponentElem = react_dom_1.findDOMNode(tagComponent);
-                const input = tagComponentElem.querySelector("input");
-                if (input) {
-                    input.focus();
-                }
-            }
-            return value;
-        };
-        this.onSuggestionSelected = (suggestion) => {
-            this.setState({ value: "" }, () => {
-                this.onChange([...(this.props.formData || []), suggestion.value], "suggestion selected");
-            });
-        };
-        this.onUnsuggestedSelected = (value) => {
-            this.setState({ value: "" }, () => {
-                this.onChange([...(this.props.formData || []), value], "unsuggested selected");
-            });
-        };
-        this.onChange = (formData, reason) => {
-            function onlyUnique(value, index, self) {
-                return self.indexOf(value) === index;
-            }
-            formData = formData.filter(onlyUnique);
-            if (reason !== "remove" && reason !== "suggestion selected" && reason !== "unsuggested selected") {
-                this.setState({ value: "" });
-                return;
-            }
-            this.setState({ value: "" }, () => {
-                this.props.onChange(formData);
-            });
-        };
-        this.state = { value: "" };
-    }
-    static getName() { return "EnumRangeArrayField"; }
-    render() {
-        const { range } = utils_1.getUiOptions(this.props.uiSchema);
-        const autosuggestOptions = {
-            autosuggestField: range,
-            onSuggestionSelected: this.onSuggestionSelected,
-            onConfirmUnsuggested: this.onConfirmUnsuggested,
-            id: this.props.idSchema.$id,
-            value: this.state.value,
-            controlledValue: true,
-            minFetchLength: 0,
-            wrapperClassName: "laji-form-enum-range",
-            inputProps: {
-                value: this.state.value,
-                that: this,
-                InputComponent: EnumRangeInputInjection,
-                onChange: this.onInputChange,
-                tags: this.props.formData,
-                id: this.props.idSchema.$id
-            },
-            allowNonsuggestedValue: false
-        };
-        const { Label } = this.props.formContext;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Label, { label: this.props.schema.title, id: this.props.idSchema.$id }),
-            React.createElement(AutosuggestWidget_1.Autosuggest, Object.assign({}, this.props, { onChange: undefined }, autosuggestOptions, { ref: this.setRef }))));
-    }
-};
+const react_1 = require("react");
+const SelectWidget_1 = require("../widgets/SelectWidget");
+const options = {};
+const schema = { type: "array", items: { type: "string" } };
+function EnumRangeArrayField(props) {
+    const { onChange: propsOnChange } = props;
+    const { range } = utils_1.getUiOptions(props.uiSchema);
+    const onChange = react_1.useCallback((value) => {
+        propsOnChange(value);
+    }, [propsOnChange]);
+    const getEnumOptionsAsync = react_1.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        const enums = yield props.formContext.apiClient.fetchCached(`/metadata/ranges/${range}`);
+        return enums.map(({ value }) => ({ value, label: value }));
+    }), [props.formContext.apiClient, range]);
+    const { Label } = props.formContext;
+    return React.createElement(React.Fragment, null,
+        React.createElement(Label, { label: props.schema.title, id: props.idSchema.$id }),
+        React.createElement(SelectWidget_1.default, { getEnumOptionsAsync: getEnumOptionsAsync, schema: schema, onChange: onChange, value: props.formData, options: options }));
+}
+exports.default = EnumRangeArrayField;
 EnumRangeArrayField.propTypes = {
     uiSchema: PropTypes.shape({
         "ui:options": PropTypes.shape({
@@ -95,21 +43,3 @@ EnumRangeArrayField.propTypes = {
     }).isRequired,
     formData: PropTypes.array
 };
-EnumRangeArrayField = __decorate([
-    BaseComponent_1.default
-], EnumRangeArrayField);
-exports.default = EnumRangeArrayField;
-class EnumRangeInputInjection extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.onInputChange = e => {
-            this.props.onChange(e);
-        };
-        this.onChange = (tags, reason) => {
-            this.props.that.onChange(tags, reason);
-        };
-    }
-    render() {
-        return React.createElement(TagArrayField_1.TagInputComponent, Object.assign({}, this.props, { formContext: this.props.that.props.formContext, onChange: this.onChange, onInputChange: this.onInputChange }));
-    }
-}

package/lib/components/widgets/CheckboxWidget.js

@@ -46,12 +46,6 @@ class CheckboxWidget extends React.Component {
         this.onGroupKeyDown = this.props.formContext.utils.keyboardClick((e) => {
             this.getToggleMode(this.props) && this.toggle(e);
         }, [" "]);
-        // onTrueKeyDown = this.props.formContext.utils.keyboardClick(() => {
-        // 	if (this.props.disabled || this.props.readonly) {
-        // 		return;
-        // 	}
-        // 	this.onChange(true);
-        // }, [" "]);
         this.onTrueKeyDown = (e) => {
             const { key } = e;
             if (key === " ") {

package/lib/components/widgets/SelectWidget.d.ts

@@ -1,13 +1,21 @@
 /// <reference types="react" />
+import { EnumOptionsType as _EnumOptionsType } from "@rjsf/utils";
 import { JSONSchemaArray, JSONSchemaEnum, JSONSchemaEnumOneOf, WidgetProps } from "../../types";
+declare type EnumOptionsType<T = string | undefined> = Omit<_EnumOptionsType, "value"> & {
+    value: T;
+};
+declare type SelectWidgetCustomProps = {
+    includeEmpty?: boolean;
+    getEnumOptionsAsync?: () => Promise<EnumOptionsType<string>[]>;
+};
 declare type SingleSelectWidgetProps = Omit<WidgetProps<JSONSchemaEnum>, "value" | "onChange"> & {
     value?: string;
     onChange: (value?: string) => void;
-};
+} & SelectWidgetCustomProps;
 declare type MultiSelectWidgetProps = Omit<WidgetProps<JSONSchemaArray<JSONSchemaEnumOneOf>>, "value" | "onChange"> & {
     value?: string[];
     onChange: (value?: string[]) => void;
-};
+} & SelectWidgetCustomProps;
 declare type SelectWidgetProps = SingleSelectWidgetProps | MultiSelectWidgetProps;
 export default function SelectWidget(props: SelectWidgetProps): JSX.Element | null;
 export {};

package/lib/components/widgets/SelectWidget.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 // import * as PropTypes from "prop-types";
@@ -6,8 +15,9 @@ const ReactContext_1 = require("../../ReactContext");
 const utils_1 = require("../../utils");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const Spinner = require("react-spinner");
 const useRangeIncrementor = (length, defaultIdx) => {
-    const [idx, _setIdx] = React.useState(defaultIdx);
+    const [idx, _setIdx] = react_1.useState(defaultIdx);
     const setIdx = react_1.useCallback((idx) => {
         let nextIdx = idx;
         if (idx === undefined || idx < 0 || length === 0) {
@@ -40,7 +50,6 @@ function getEnumOptions(enumOptions, uiSchema, includeEmpty = true) {
     }
 }
 function SelectWidget(props) {
-    // export default function SelectWidget(props: SelectWidgetProps): Widget<JSONSchemaEnum | JSONSchemaArray<JSONSchemaEnumOneOf>> {
     return props.schema.type === "array" ? React.createElement(SearchableMultiDrowndown, Object.assign({}, props)) : React.createElement(SearchableDrowndown, Object.assign({}, props));
 }
 exports.default = SelectWidget;
@@ -53,12 +62,12 @@ function SearchableDrowndown(props) {
     const enumOptions = React.useMemo(() => 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     getEnumOptions(options.enumOptions, uiSchema, includeEmpty), [options.enumOptions, uiSchema, includeEmpty]);
-    const [inputValue, setInputValue] = React.useState(value
+    const [inputValue, setInputValue] = react_1.useState(value
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         ? enumOptions.find(item => item.value === value).label
         : "");
-    const [inputTouched, setInputTouched] = React.useState(false);
-    const [filterTerm, setFilterTerm] = React.useState("");
+    const [inputTouched, setInputTouched] = react_1.useState(false);
+    const [filterTerm, setFilterTerm] = react_1.useState("");
     const onInputChange = react_1.useCallback((e) => {
         const { value } = e.target;
         setInputValue(value);
@@ -74,9 +83,7 @@ function SearchableDrowndown(props) {
     }, [filterTerm, enumOptions]);
     const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
     const { FormControl } = theme;
-    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, value !== undefined && value !== ""
-        ? displayedEnums.findIndex(item => item.value === value)
-        : 0);
+    const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, getDefaultActiveIdx(displayedEnums, value));
     const onItemSelected = react_1.useCallback((item) => {
         onChange(item.value);
         setInputValue(item.label);
@@ -113,8 +120,13 @@ function SearchableDrowndown(props) {
                 activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
                 e.preventDefault();
                 break;
+            case "Escape":
+                setInputValue("");
+                setActiveIdx(getDefaultActiveIdx(displayedEnums, value));
+                e.preventDefault();
+                break;
         }
-    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, onItemSelected]);
+    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, onItemSelected, setActiveIdx, value]);
     const onFocus = react_1.useCallback(() => {
         var _a;
         show();
@@ -129,12 +141,21 @@ function SearchableDrowndown(props) {
         }))));
 }
 function SearchableMultiDrowndown(props) {
-    const { id, disabled, readonly, value, uiSchema, options, onChange, } = props;
-    const enumOptions = React.useMemo(() => 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    getEnumOptions(options.enumOptions, uiSchema, false), [options.enumOptions, uiSchema]);
-    const [inputValue, setInputValue] = React.useState("");
-    const [filterTerm, setFilterTerm] = React.useState("");
+    const { id, disabled, readonly, value, uiSchema, options, onChange, getEnumOptionsAsync } = props;
+    // const enumOptions = React.useMemo(() =>
+    // 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    // 	getEnumOptions(options.enumOptions!, uiSchema, false),
+    // [options.enumOptions, uiSchema]);
+    const [enumOptions, setEnumOptions] = react_1.useState(getEnumOptionsAsync
+        ? undefined
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        : getEnumOptions(options.enumOptions, uiSchema, false));
+    const [inputValue, setInputValue] = react_1.useState("");
+    const [filterTerm, setFilterTerm] = react_1.useState("");
+    const [loading, setLoading] = react_1.useState(undefined);
+    const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
     const onInputChange = react_1.useCallback((e) => {
         const { value } = e.target;
         setInputValue(value);
@@ -143,6 +164,9 @@ function SearchableMultiDrowndown(props) {
         setFilterTerm(inputValue);
     }, [inputValue]);
     const displayedEnums = React.useMemo(() => {
+        if (!enumOptions) {
+            return [];
+        }
         const notAlreadySelected = (value === null || value === void 0 ? void 0 : value.length)
             ? enumOptions.filter(({ value: enumValue }) => !value.includes(enumValue))
             : enumOptions;
@@ -151,9 +175,6 @@ function SearchableMultiDrowndown(props) {
                 || label.toLowerCase().match(filterTerm.toLowerCase()))
             : notAlreadySelected;
     }, [filterTerm, enumOptions, value]);
-    const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
-    const containerRef = React.useRef(null);
-    const inputRef = React.useRef(null);
     const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, undefined);
     const onItemSelected = react_1.useCallback((item) => {
         var _a;
@@ -167,6 +188,48 @@ function SearchableMultiDrowndown(props) {
         setInputValue("");
         setActiveIdx(undefined);
     }, [onChange, setActiveIdx, value]);
+    const [isFocused, setFocused, setBlurred] = utils_1.useBooleanSetter(false);
+    const loadEnums = react_1.useCallback(() => {
+        const asyncOp = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const enums = yield getEnumOptionsAsync();
+                setEnumOptions(enums);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        setLoading(true);
+        void asyncOp();
+    }, [getEnumOptionsAsync]);
+    const prevEnumOptions = utils_1.usePrevious(enumOptions);
+    // If the enums are async loaded, this effect takes care of opening the
+    // dropdown once the enums are loaded, if the input if still focused.
+    react_1.useEffect(() => {
+        if (!getEnumOptionsAsync) {
+            return;
+        }
+        if (isFocused && !(prevEnumOptions === null || prevEnumOptions === void 0 ? void 0 : prevEnumOptions.length) && (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.length)) {
+            show();
+        }
+    }, [prevEnumOptions, enumOptions, isFocused, show, getEnumOptionsAsync]);
+    // If there is a pre-existing value (or a value is updated from parent after component is rendered) and we are async,
+    // load the enums.
+    react_1.useEffect(() => {
+        if ((value === null || value === void 0 ? void 0 : value.length) && getEnumOptionsAsync && !enumOptions && !loading) {
+            loadEnums();
+        }
+    }, [enumOptions, getEnumOptionsAsync, loadEnums, loading, value === null || value === void 0 ? void 0 : value.length]);
+    const onFocus = react_1.useCallback(() => {
+        setFocused();
+        if (!(enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.length) && getEnumOptionsAsync) {
+            void loadEnums();
+        }
+        else {
+            show();
+        }
+    }, [enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.length, getEnumOptionsAsync, loadEnums, setFocused, show]);
     const onBlur = react_1.useCallback((e) => {
         // Fixes the problem when user tries to click an enum item, `setOpen(false)`
         // hides the enum list, so the elem list item is hidden before the click, thus never
@@ -174,6 +237,7 @@ function SearchableMultiDrowndown(props) {
         if (e.relatedTarget && utils_1.isDescendant(containerRef.current, e.relatedTarget)) {
             return;
         }
+        setBlurred();
         hide();
         if (activeIdx !== undefined && displayedEnums[activeIdx]) {
             onItemSelectedByBlur(displayedEnums[activeIdx]);
@@ -181,7 +245,7 @@ function SearchableMultiDrowndown(props) {
         else {
             setInputValue("");
         }
-    }, [activeIdx, displayedEnums, hide, onItemSelectedByBlur]);
+    }, [activeIdx, displayedEnums, hide, onItemSelectedByBlur, setBlurred]);
     const onKeyDown = react_1.useCallback((e) => {
         switch (e.key) {
             case "ArrowDown":
@@ -196,6 +260,11 @@ function SearchableMultiDrowndown(props) {
                 activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
                 e.preventDefault();
                 break;
+            case "Escape":
+                setInputValue("");
+                setActiveIdx(undefined);
+                e.preventDefault();
+                break;
             case "Backspace":
                 if (inputValue === "" && (value === null || value === void 0 ? void 0 : value.length)) {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -204,7 +273,7 @@ function SearchableMultiDrowndown(props) {
                 }
                 break;
         }
-    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, inputValue, onChange, onItemSelected, value]);
+    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, inputValue, onChange, onItemSelected, setActiveIdx, value]);
     /* eslint-disable @typescript-eslint/no-non-null-assertion */
     const onDelete = react_1.useCallback((enu) => {
         const filtered = value.filter(v => v !== enu.value);
@@ -219,13 +288,14 @@ function SearchableMultiDrowndown(props) {
         }
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [inputRef]);
-    const wrapperClassNames = utils_1.classNames("laji-form-multiselect-input-wrapper", isOpen && "laji-form-multiselect-input-wrapper-focus", (readonly || disabled) && "laji-form-multiselect-input-wrapper-readonly");
+    const wrapperClassNames = utils_1.classNames("laji-form-multiselect-input-wrapper", isOpen && "laji-form-multiselect-input-wrapper-focus", isOpen && "input-highlight", (readonly || disabled) && "laji-form-multiselect-input-wrapper-readonly");
     return (React.createElement("div", { onBlur: onBlur, onKeyDown: onKeyDown, ref: containerRef, className: "laji-form-multiselect", style: { position: "relative" } },
-        React.createElement("div", { className: wrapperClassNames, tabIndex: -1, onFocus: redirectFocusToInput },
-            React.createElement("ul", { style: { listStyle: "none", display: "inline-block" } }, (value || []).map(v => enumOptions.find(({ value: _value }) => v === _value))
-                .map((enu) => React.createElement(SelectedMultiValue, { key: enu.value, onDelete: onDelete, readonly: readonly || disabled }, enu))),
-            React.createElement("input", { disabled: disabled || readonly, id: id, onFocus: show, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef })),
-        React.createElement(Caret, { onFocus: show }),
+        React.createElement("div", { className: wrapperClassNames, tabIndex: -1, onFocus: redirectFocusToInput, style: { cursor: "text" } },
+            React.createElement("ul", { style: { listStyle: "none", display: "inline-block" } }, value && enumOptions && value.map(v => enumOptions.find(({ value: _value }) => v === _value) || ({ value: v, label: v }))
+                .map(enu => React.createElement(SelectedMultiValue, { key: enu.value, onDelete: onDelete, readonly: readonly || disabled }, enu))),
+            React.createElement("input", { disabled: disabled || readonly, id: id, onFocus: onFocus, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
+            loading && React.createElement(Spinner, null)),
+        React.createElement(Caret, { onFocus: onFocus }),
         React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute", zIndex: 99999 }, tabIndex: -1 }, displayedEnums.map((oneOf, idx) => {
             var _a;
             return (React.createElement(ListItem, { key: (_a = oneOf.value) !== null && _a !== void 0 ? _a : "", onSelected: onItemSelected, active: idx === activeIdx }, oneOf));
@@ -245,3 +315,6 @@ function ListItem({ onSelected, active, children }) {
     }, [children, onSelected]);
     return (React.createElement("div", { onClick: onClick, className: utils_1.classNames("laji-form-dropdown-item", active && "active"), tabIndex: -1 }, children.label));
 }
+const getDefaultActiveIdx = (displayedEnums, value) => value !== undefined && value !== ""
+    ? displayedEnums.findIndex(item => item.value === value)
+    : 0;

package/lib/utils.d.ts

@@ -170,4 +170,5 @@ export declare function translate(translations: ByLang, key: string, params?: {
  * @returns [stateValue, setTrue, setFalse]
  */
 export declare function useBooleanSetter(value: boolean): [boolean, () => void, () => void];
+export declare function usePrevious<T>(value: T): T | undefined;
 export {};

package/lib/utils.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bsSizeToPixels = exports.canAdd = exports.stringifyKeyCombo = exports.decapitalizeFirstLetter = exports.capitalizeFirstLetter = exports.getKeyHandlerTargetId = exports.isDescendant = exports.getBootstrapCols = exports.getNestedUiFieldsList = exports.updateTailUiSchema = exports.getNestedTailUiSchema = exports.keyboardClick = exports.formDataEquals = exports.formDataIsEmpty = exports.filterItemIdsDeeply = exports.filterItemId = exports.filterLajiFormId = exports.syncScroll = exports._syncScroll = exports.shouldSyncScroll = exports.focusAndScroll = exports.focusById = exports.getSchemaElementById = exports.findNearestParentSchemaElemId = exports.focusNextInput = exports.getNextInput = exports.getNextInputInInputs = exports.ReactUtils = exports.findNearestParentTabbableElem = exports.findNearestParentSchemaElem = exports.canFocusNextInput = exports.isTabbableInput = exports.getTabbableFields = exports.isSelect = exports.isMultiSelect = exports.getReactComponentName = exports.parseJSONPointer = exports.isEmptyString = exports.isNullOrUndefined = exports.getInnerUiSchema = exports.getUiOptions = exports.immutableDelete = exports.getUpdateObjectFromJSONPointer = exports.getUpdateObjectFromJSONPath = exports.propertyHasData = exports.hasData = exports.getDefaultFormState = exports.isDefaultData = exports.isHidden = exports.isObject = void 0;
-exports.useBooleanSetter = exports.translate = exports.classNames = exports.getTitle = exports.toJSONPointer = exports.getReversedFormDataIndex = exports.getFormDataIndex = exports.getIdxWithoutOffset = exports.getIdxWithOffset = exports.constructTranslations = exports.filteredErrors = exports.highlightElem = exports.findPointerForLajiFormId = exports.removeLajiFormIds = exports.getAllLajiFormIdsDeeply = exports.addLajiFormIds = exports.getFieldUUID = exports.getUUID = exports.assignUUID = exports.updateFormDataWithJSONPointer = exports.uiSchemaJSONPointer = exports.schemaJSONPointer = exports.idSchemaIdToJSONPointer = exports.JSONPointerToId = exports.checkJSONPointer = exports.parseUiSchemaFromFormDataPointer = exports.parseSchemaFromFormDataPointer = exports.triggerParentComponent = exports.bringRemoteFormData = exports.checkArrayRules = exports.checkRules = exports.formatErrorMessage = exports.formatValue = exports.dictionarify = exports.injectButtons = exports.updateSafelyWithJSONPointer = exports.updateSafelyWithJSONPath = exports.filter = exports.scrollIntoViewIfNeeded = exports.getScrollPositionForScrollIntoViewIfNeeded = exports.getWindowScrolled = exports.applyFunction = exports.pixelsToBsSize = void 0;
+exports.usePrevious = exports.useBooleanSetter = exports.translate = exports.classNames = exports.getTitle = exports.toJSONPointer = exports.getReversedFormDataIndex = exports.getFormDataIndex = exports.getIdxWithoutOffset = exports.getIdxWithOffset = exports.constructTranslations = exports.filteredErrors = exports.highlightElem = exports.findPointerForLajiFormId = exports.removeLajiFormIds = exports.getAllLajiFormIdsDeeply = exports.addLajiFormIds = exports.getFieldUUID = exports.getUUID = exports.assignUUID = exports.updateFormDataWithJSONPointer = exports.uiSchemaJSONPointer = exports.schemaJSONPointer = exports.idSchemaIdToJSONPointer = exports.JSONPointerToId = exports.checkJSONPointer = exports.parseUiSchemaFromFormDataPointer = exports.parseSchemaFromFormDataPointer = exports.triggerParentComponent = exports.bringRemoteFormData = exports.checkArrayRules = exports.checkRules = exports.formatErrorMessage = exports.formatValue = exports.dictionarify = exports.injectButtons = exports.updateSafelyWithJSONPointer = exports.updateSafelyWithJSONPath = exports.filter = exports.scrollIntoViewIfNeeded = exports.getScrollPositionForScrollIntoViewIfNeeded = exports.getWindowScrolled = exports.applyFunction = exports.pixelsToBsSize = void 0;
 const React = require("react");
 const react_dom_1 = require("react-dom");
 const utils_1 = require("@rjsf/utils");
@@ -1195,3 +1195,11 @@ function useBooleanSetter(value) {
     return [open, setTrue, setFalse];
 }
 exports.useBooleanSetter = useBooleanSetter;
+function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+exports.usePrevious = usePrevious;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.27",
+  "version": "15.1.29",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",