@luomus/laji-form 15.1.24 → 15.1.26

package/lib/components/widgets/SelectWidget.js

@@ -1,158 +1,247 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const PropTypes = require("prop-types");
-const Combobox = require("react-widgets/lib/Combobox");
-const Multiselect = require("react-widgets/lib/Multiselect");
-const components_1 = require("../components");
-const Context_1 = require("../../Context");
+// import * as PropTypes from "prop-types";
 const ReactContext_1 = require("../../ReactContext");
 const utils_1 = require("../../utils");
-class SelectWidget extends React.Component {
-    constructor(props) {
-        super(props);
-        this.multiSelectOnChange = (values) => {
-            const lengthBeforeFiltering = values.length;
-            values = values.filter(v => v.value !== "");
-            if (this.props.value.length === lengthBeforeFiltering) {
-                return;
-            }
-            this.props.onChange(values.map(({ value }) => this.getEnum(value)));
-        };
-        this.selectOnChange = (item) => {
-            this.props.onChange(this.getEnum(item.value));
-        };
-        this.onClick = () => {
-            !this.props.disabled && !this.props.readonly && this.setState({ open: true });
-        };
-        this.onFocus = () => this.setState({ open: true });
-        this.onBlur = () => this.setState({ open: false });
-        this.onSelect = (item) => {
-            this.state.open && this.props.formContext.setTimeout(() => this.mounted && this.setState({ open: false, value: item.value }));
-            const value = this.getEnum(item.value);
-            (!this.state.value || value !== this.state.value.value) && this.props.onChange(value);
-        };
-        // Quelch a warning from react-widgets with noop handler.
-        this.onToggle = () => { };
-        this.onKeyDown = (e) => {
-            if (e.key !== "Tab") {
-                return;
-            }
-            const item = this.elemRef.state.focusedItem;
-            item && this.elemRef.handleSelect(item, e);
-        };
-        this.setRef = elem => {
-            this.elemRef = elem;
-        };
-        this.getEnum = val => utils_1.isEmptyString(val) ? undefined : val;
-        this.state = this.getStateFromProps(props);
-        this._context = Context_1.default(this.props.formContext.contextId);
-    }
-    componentDidMount() {
-        this.mounted = true;
-        this.props.formContext.services.focus.addFocusHandler(this.props.id, this.onFocus);
-    }
-    componentWillUnmount() {
-        this.mounted = false;
-        this.props.formContext.services.focus.removeFocusHandler(this.props.id, this.onFocus);
-    }
-    UNSAFE_componentWillReceiveProps(props) {
-        this.setState(this.getStateFromProps(props));
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const useRangeIncrementor = (length, defaultIdx) => {
+    const [idx, _setIdx] = React.useState(defaultIdx);
+    const setIdx = react_1.useCallback((idx) => {
+        let nextIdx = idx;
+        if (idx === undefined || idx < 0 || length === 0) {
+            nextIdx = undefined;
+        }
+        else if (idx >= length) {
+            nextIdx = length - 1;
+        }
+        _setIdx(nextIdx);
+    }, [_setIdx, length]);
+    const increment = react_1.useCallback(() => setIdx((idx || 0) - 1), [idx, setIdx]);
+    const decrement = react_1.useCallback(() => setIdx(idx === undefined ? 0 : idx + 1), [idx, setIdx]);
+    return [idx === undefined ? idx : Math.min(idx, length - 1), increment, decrement, _setIdx];
+};
+function removeByIndex(array, index) {
+    return [...array.slice(0, index), ...array.slice(index + 1)];
+}
+function getEnumOptions(enumOptions, uiSchema, includeEmpty = true) {
+    const enums = (utils_1.getUiOptions(uiSchema).enumOptions || enumOptions);
+    const emptyIdx = enums.findIndex(e => e.value === "");
+    if (!includeEmpty) {
+        return emptyIdx !== -1
+            ? removeByIndex(enums, emptyIdx)
+            : enums;
     }
-    getEnumOptions(props) {
-        return utils_1.getUiOptions(props.uiSchema).enumOptions || props.options.enumOptions;
+    else {
+        return emptyIdx !== -1
+            ? enums.map(e => e.value === "" ? { value: undefined, label: "" } : e)
+            : [{ value: undefined, label: "" }, ...enums];
     }
-    getStateFromProps(props) {
-        let { multiple, value } = props;
-        let enumOptions = this.getEnumOptions(props);
-        function sort(enumOptions, order) {
-            if (!Array.isArray(order))
-                return enumOptions;
-            const idxs = order.reduce((idxs, _enum, i) => {
-                idxs[_enum] = i;
-                return idxs;
-            }, {});
-            return enumOptions.slice(0).sort((a, b) => {
-                return idxs[a.value] - idxs[b.value];
-            });
+}
+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;
+function SearchableDrowndown(props) {
+    const { id, disabled, readonly, value, uiSchema, options, onChange, includeEmpty = true } = props;
+    const { theme } = React.useContext(ReactContext_1.default);
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    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
+        // 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 onInputChange = react_1.useCallback((e) => {
+        const { value } = e.target;
+        setInputValue(value);
+        setInputTouched(true);
+    }, []);
+    React.useEffect(() => {
+        inputTouched && setFilterTerm(inputValue);
+    }, [inputTouched, inputValue]);
+    const displayedEnums = React.useMemo(() => {
+        return filterTerm !== ""
+            ? enumOptions.filter(({ label }) => label.toLowerCase().match(filterTerm.toLowerCase()))
+            : enumOptions;
+    }, [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 onItemSelected = react_1.useCallback((item) => {
+        onChange(item.value);
+        setInputValue(item.label);
+        setInputTouched(false);
+        setActiveIdx(displayedEnums.findIndex(enu => enu.value === item.value));
+        hide();
+    }, [displayedEnums, hide, onChange, setActiveIdx]);
+    const onBlur = react_1.useCallback((e) => {
+        // Fixes the issue that 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
+        // sending a click event.
+        if (e.relatedTarget && utils_1.isDescendant(containerRef.current, e.relatedTarget)) {
+            return;
         }
-        const { filter: _filter, filterType, labels, order } = utils_1.getUiOptions(props);
-        if (_filter) {
-            enumOptions = utils_1.filter(enumOptions, _filter, filterType, item => item.value);
+        if (activeIdx !== undefined && displayedEnums[activeIdx]) {
+            onItemSelected(displayedEnums[activeIdx]);
         }
-        if (labels) {
-            enumOptions = enumOptions.map(({ value, label }) => {
-                return { value, label: value in labels ? labels[value] : label };
-            });
+        else {
+            setInputValue("");
         }
-        if (enumOptions.every(({ value: _value }) => value !== _value)) {
-            const _enum = this.getEnumOptions(props).find(({ value: _value }) => value === _value);
-            if (_enum) {
-                enumOptions.push(_enum);
-            }
+        hide();
+    }, [activeIdx, displayedEnums, hide, onItemSelected]);
+    const onKeyDown = react_1.useCallback((e) => {
+        switch (e.key) {
+            case "ArrowDown":
+                activeIdxDown();
+                e.preventDefault();
+                break;
+            case "ArrowUp":
+                activeIdxUp();
+                e.preventDefault();
+                break;
+            case "Enter":
+                activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
+                e.preventDefault();
+                break;
         }
-        if (order)
-            enumOptions = sort(enumOptions, order);
-        const valsToItems = enumOptions.reduce((map, item) => {
-            map[item.value] = item;
-            return map;
-        }, {});
-        return {
-            valsToItems,
-            enumOptions,
-            value: multiple ? value : valsToItems[value]
-        };
-    }
-    render() {
-        const { id, disabled, readonly, multiple, formContext, } = this.props;
-        const { enumOptions } = this.state;
-        const commonOptions = {
-            id,
-            value: this.state.value,
-            placeholder: utils_1.getUiOptions(this.props).placeholder,
-            data: enumOptions,
-            valueField: "value",
-            textField: "label",
-            disabled: disabled || readonly,
-            filter: "contains",
-            messages: {
-                open: formContext.translations.Open,
-                emptyList: formContext.translations.NoResults,
-                emptyFilter: formContext.translations.NoResults
-            },
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
-            onToggle: this.onToggle,
-            open: this.state.open,
-            onKeyDown: this.onKeyDown
-        };
-        const selectComponent = multiple ? (React.createElement(Multiselect, Object.assign({}, commonOptions, { onChange: this.multiSelectOnChange, ref: this.setRef }))) : (React.createElement(Combobox, Object.assign({}, commonOptions, { onChange: this.selectOnChange, ref: this.setRef, onClick: this.onClick, onSelect: this.onSelect })));
-        return (React.createElement(components_1.TooltipComponent, { placement: "top", trigger: "hover", tooltip: (multiple || utils_1.isEmptyString(this.props.value)) ? undefined : this.state.valsToItems[this.props.value].label },
-            React.createElement("div", null, selectComponent)));
-    }
+    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, onItemSelected]);
+    const onFocus = react_1.useCallback(() => {
+        var _a;
+        show();
+        (_a = react_dom_1.findDOMNode(inputRef.current)) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, inputValue.length);
+    }, [inputValue.length, show]);
+    return (React.createElement("div", { onBlur: onBlur, onKeyDown: onKeyDown, ref: containerRef, style: { position: "relative" }, className: "laji-form-dropdown-container" },
+        React.createElement(FormControl, { disabled: disabled || readonly, id: id, onFocus: onFocus, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
+        React.createElement(Caret, { onFocus: onFocus }),
+        React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute" }, tabIndex: -1, ref: dropdownRef }, 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));
+        }))));
 }
-SelectWidget.contextType = ReactContext_1.default;
-SelectWidget.defaultProps = {
-    autofocus: false,
-};
-SelectWidget.propTypes = {
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["string", "array"])
-    }),
-    id: PropTypes.string.isRequired,
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            enumOptions: PropTypes.array,
-            order: PropTypes.array,
-            filter: PropTypes.array,
-            filterType: PropTypes.string,
-            labels: PropTypes.object,
-        })
-    }),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-    required: PropTypes.bool,
-    multiple: PropTypes.bool,
-    autofocus: PropTypes.bool,
-    onChange: PropTypes.func,
+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 onInputChange = react_1.useCallback((e) => {
+        const { value } = e.target;
+        setInputValue(value);
+    }, []);
+    React.useEffect(() => {
+        setFilterTerm(inputValue);
+    }, [inputValue]);
+    const displayedEnums = React.useMemo(() => {
+        const notAlreadySelected = (value === null || value === void 0 ? void 0 : value.length)
+            ? enumOptions.filter(({ value: enumValue }) => !value.includes(enumValue))
+            : enumOptions;
+        return filterTerm !== ""
+            ? notAlreadySelected.filter(({ label, value: enumValue }) => (value || []).includes(enumValue)
+                || 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;
+        onChange([...(value || []), item.value]);
+        setInputValue("");
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setActiveIdx(undefined);
+    }, [onChange, setActiveIdx, value]);
+    const onItemSelectedByBlur = react_1.useCallback((item) => {
+        onChange([...(value || []), item.value]);
+        setInputValue("");
+        setActiveIdx(undefined);
+    }, [onChange, setActiveIdx, value]);
+    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
+        // sending a click event.
+        if (e.relatedTarget && utils_1.isDescendant(containerRef.current, e.relatedTarget)) {
+            return;
+        }
+        hide();
+        if (activeIdx !== undefined && displayedEnums[activeIdx]) {
+            onItemSelectedByBlur(displayedEnums[activeIdx]);
+        }
+        else {
+            setInputValue("");
+        }
+    }, [activeIdx, displayedEnums, hide, onItemSelectedByBlur]);
+    const onKeyDown = react_1.useCallback((e) => {
+        switch (e.key) {
+            case "ArrowDown":
+                activeIdxDown();
+                e.preventDefault();
+                break;
+            case "ArrowUp":
+                activeIdxUp();
+                e.preventDefault();
+                break;
+            case "Enter":
+                activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
+                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
+                    onChange(value.slice(0, -1));
+                    e.preventDefault();
+                }
+                break;
+        }
+    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, inputValue, onChange, onItemSelected, value]);
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const onDelete = react_1.useCallback((enu) => {
+        const filtered = value.filter(v => v !== enu.value);
+        onChange(value.length === 0 ? undefined : filtered);
+    }, [onChange, value]);
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+    const redirectFocusToInput = react_1.useCallback((e) => {
+        var _a;
+        // Only the input wrapper should redirect focus, otherwise the existing label deletion buttons will also redirect, breaking shift + tab navigation on the input.
+        if (!e.target.classList.contains("laji-form-multiselect-input-wrapper")) {
+            return;
+        }
+        (_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");
+    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: `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));
+        }))));
+}
+const SelectedMultiValue = ({ children: enu, onDelete, readonly }) => {
+    const onDeleteClick = react_1.useCallback(() => !readonly && onDelete(enu), [enu, onDelete, readonly]);
+    return (React.createElement("li", { key: enu.value, style: { display: "inline-table" }, className: "laji-form-multiselect-tag" },
+        enu.label,
+        React.createElement("span", { tabIndex: readonly ? undefined : 0, role: readonly ? undefined : "button", onClick: onDeleteClick }, "\u00D7")));
 };
-exports.default = SelectWidget;
+const Caret = ({ onFocus }) => React.createElement("div", { className: "laji-form-dropdown-caret-container", style: { position: "absolute", pointerEvents: "none" } },
+    React.createElement("span", { onFocus: onFocus, className: "laji-form-dropdown-caret" }, "\u2304"));
+function ListItem({ onSelected, active, children }) {
+    const onClick = react_1.useCallback(() => {
+        onSelected(children);
+    }, [children, onSelected]);
+    return (React.createElement("div", { onClick: onClick, className: utils_1.classNames("laji-form-dropdown-item", active && "active"), tabIndex: -1 }, children.label));
+}

package/lib/services/focus-service.js

@@ -42,8 +42,9 @@ class FocusService {
             const input = document.querySelector(`#${id}`);
             if (elem)
                 utils_1.scrollIntoViewIfNeeded(elem, this.formContext.topOffset, this.formContext.bottomOffset);
-            if (input && input.focus)
+            if (input && input.focus) {
                 input.focus();
+            }
             if (!elem)
                 return;
             utils_1.highlightElem(elem);
@@ -51,7 +52,7 @@ class FocusService {
     }
     focusNextInput(reverse = false) {
         if (!this.formContext.formRef.current) {
-            console.warn("Focus service can't  doesn't have ref to the form");
+            console.warn("Focus service doesn't have ref to the form");
             return;
         }
         return this.formContext.utils.focusNextInput(reverse);

package/lib/services/settings-service.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldProps, WidgetProps } from "../components/LajiForm";
+import { FieldProps, WidgetProps } from "../types";
 export declare type Settings = Record<string, string>;
 declare type OnSettingsChange = (settings: Record<string, string>, global: boolean) => void;
 /**
@@ -23,7 +23,7 @@ export default class SettingsService {
      * @param that this of the React component
      * @param props The constructor props
      */
-    bind<P extends (FieldProps | WidgetProps)>(that: React.Component<P>, props: P): void;
+    bind<P extends (FieldProps<any> | WidgetProps)>(that: React.Component<P>, props: P): void;
     private loadStateSettings;
     loadContextSettings<P extends FieldProps | WidgetProps>(props: P, context: any): any;
     private loadSettings;

package/lib/services/submit-hook-service.d.ts

@@ -1,4 +1,4 @@
-import { FieldProps, WidgetProps } from "../components/LajiForm";
+import { FieldProps, WidgetProps } from "../types";
 export interface SubmitHook {
     hook: () => void;
     promise: Promise<any>;

package/lib/themes/theme.d.ts

@@ -1,18 +1,13 @@
 import * as React from "react";
+import { HasMaybeChildren, HasMaybeClassName } from "../types";
 export declare type Variant = "default" | "primary" | "success" | "info" | "warning" | "danger" | "outline-danger" | string;
 export declare type ButtonVariant = Variant | "link";
-export interface HasMaybeChildren {
-    children?: React.ReactNode;
-}
 interface HasMaybeRef {
     ref?: React.Ref<any> | React.LegacyRef<any>;
 }
 interface HasMaybeStyle {
     style?: React.CSSProperties;
 }
-interface HasMaybeClassName {
-    className?: string;
-}
 export interface PanelProps extends HasMaybeRef, HasMaybeClassName, HasMaybeStyle {
     expanded?: boolean;
     onToggle?: () => void;
@@ -114,14 +109,16 @@ export interface FormControlProps extends React.HTMLProps<any>, HasMaybeRef {
     readOnly?: boolean;
     validationState?: ValidationState;
 }
-export interface ListGroupProps extends JSX.IntrinsicAttributes, HasMaybeRef {
+export interface ListGroupProps extends JSX.IntrinsicAttributes, HasMaybeRef, HasMaybeStyle, HasMaybeClassName {
     fill?: boolean;
+    tabIndex?: number;
 }
 export interface ListGroupItemProps extends JSX.IntrinsicAttributes, HasMaybeClassName {
     onClick?: React.MouseEventHandler<any>;
     disabled?: boolean;
     header?: React.ReactNode;
     active?: boolean;
+    tabIndex?: number;
 }
 export declare type Breadcrumb = React.ComponentType<any> & {
     Item: React.ComponentType<BreadcrumbItem>;

package/lib/types.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { FieldProps as RJSFFieldProps, WidgetProps as RJSFWidgetProps, UiSchema as RJSFUiSchema } from "@rjsf/utils";
+import { FormContext } from "./components/LajiForm";
+export declare type JSON = string | number | boolean | JSONObject | JSON[] | null;
+export declare type JSONObject = {
+    [prop: string]: JSON;
+};
+export declare type JSONSchema<T = any> = JSONSchemaObject | JSONSchemaArray<T> | JSONSchemaNumber | JSONSchemaInteger | JSONSchemaBoolean | JSONSchemaString | JSONSchemaEnum;
+declare type JSONShemaTypeCommon<T, D> = {
+    type: T;
+    default?: D;
+    title?: string;
+};
+export declare type JSONSchemaObject = JSONShemaTypeCommon<"object", Record<string, JSONObject>> & {
+    properties: Record<string, JSONSchema>;
+    required?: string[];
+};
+export declare function isJSONSchemaObject(schema: JSONSchema): schema is JSONSchemaObject;
+export declare type JSONSchemaArray<T = JSONSchema, D = never> = JSONShemaTypeCommon<"array", D[]> & {
+    items: T;
+    uniqueItems?: boolean;
+    maxItems?: number;
+};
+export declare type JSONSchemaNumber = JSONShemaTypeCommon<"number", number>;
+export declare type JSONSchemaInteger = JSONShemaTypeCommon<"integer", number>;
+export declare type JSONSchemaBoolean = JSONShemaTypeCommon<"boolean", boolean>;
+export declare type JSONSchemaString = JSONShemaTypeCommon<"string", string>;
+export declare type JSONSchemaEnumOneOf = {
+    const: string;
+    title: string;
+};
+export declare type JSONSchemaEnum = JSONSchemaString & {
+    oneOf: JSONSchemaEnumOneOf[];
+};
+export declare function isJSONSchemaEnum(jsonSchema: JSONSchema): jsonSchema is JSONSchemaEnum;
+export declare type Lang = "fi" | "en" | "sv";
+export declare type FieldProps<S extends JSONSchema = JSONSchema> = RJSFFieldProps<any, S, FormContext> & {
+    uiSchema: UiSchema;
+    errorSchema: NonNullable<RJSFFieldProps<any, S, FormContext>["errorSchema"]>;
+    formContext: FormContext;
+    registry: RJSFFieldProps<any, JSONSchema, FormContext>["registry"];
+};
+export declare type WidgetProps<S extends JSONSchema = JSONSchema> = RJSFWidgetProps<any, S, FormContext> & {
+    uiSchema: UiSchema;
+    errorSchema: NonNullable<RJSFFieldProps<any, JSONSchema, FormContext>["errorSchema"]>;
+    formContext: FormContext;
+    registry: RJSFWidgetProps<any, JSONSchema, FormContext>["registry"];
+};
+export declare type UiSchema = RJSFUiSchema<any, JSONSchemaObject, FormContext>;
+export interface HasMaybeChildren {
+    children?: React.ReactNode;
+}
+export interface HasMaybeClassName {
+    className?: string;
+}
+export declare type Optional<T, K extends keyof T> = Omit<T, K> & Partial<{
+    [K: string]: T[K];
+}>;
+export {};

package/lib/types.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isJSONSchemaEnum = exports.isJSONSchemaObject = void 0;
+function isJSONSchemaObject(schema) {
+    return schema.type === "object";
+}
+exports.isJSONSchemaObject = isJSONSchemaObject;
+function isJSONSchemaEnum(jsonSchema) {
+    return !!jsonSchema.oneOf;
+}
+exports.isJSONSchemaEnum = isJSONSchemaEnum;

package/lib/utils.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { Spec as UpdateObject } from "immutability-helper";
 import { isObject as _isObject } from "@luomus/laji-map/lib/utils";
-import { UiSchema, RJSFSchema } from "@rjsf/utils";
-import { FormContext, Translations, FieldProps, ByLang } from "./components/LajiForm";
+import { RJSFSchema } from "@rjsf/utils";
+import { FormContext, Translations, ByLang } from "./components/LajiForm";
+import { FieldProps, UiSchema } from "./types";
 export declare const isObject: typeof _isObject;
 export declare function isHidden(uiSchema: UiSchema, property: string): boolean;
 export declare function isDefaultData(formData: any, schema: any): boolean;
@@ -18,8 +19,8 @@ export declare function propertyHasData(field: string, container: any): boolean;
 export declare function getUpdateObjectFromJSONPath(path: string, injection: any): any;
 export declare function getUpdateObjectFromJSONPointer(path: string, injection: any): any;
 export declare function immutableDelete(_obj: any, _delProp: string): any;
-export declare function getUiOptions(container: UiSchema): any;
-export declare function getInnerUiSchema(parentUiSchema: UiSchema): any;
+export declare function getUiOptions(container?: UiSchema): any;
+export declare function getInnerUiSchema(parentUiSchema?: UiSchema): UiSchema;
 export declare function isNullOrUndefined(val: any): boolean;
 export declare function isEmptyString(val: any): boolean;
 export declare function parseJSONPointer(object: any, jsonPointer: string, safeMode?: true | "createParents", strictEmptyPath?: boolean): any;
@@ -64,8 +65,8 @@ export declare const filterItemIdsDeeply: (item: any, context: FormContext, idSc
 export declare const formDataIsEmpty: (props: FieldProps, context: FormContext) => any;
 export declare const formDataEquals: (f1: any, f2: any, context: FormContext, id: string) => any;
 export declare const keyboardClick: (fn: (e: KeyboardEvent | React.KeyboardEvent) => void, context: FormContext) => (e: KeyboardEvent | React.KeyboardEvent) => void;
-export declare function getNestedTailUiSchema(uiSchema: UiSchema): UiSchema<any, RJSFSchema, any>;
-export declare function updateTailUiSchema(uiSchema: UiSchema, updateObject: UpdateObject<any, any>): UiSchema<any, RJSFSchema, any>;
+export declare function getNestedTailUiSchema(uiSchema: UiSchema): UiSchema;
+export declare function updateTailUiSchema(uiSchema: UiSchema, updateObject: UpdateObject<any, any>): UiSchema;
 export declare function getNestedUiFieldsList(uiSchema: UiSchema): any[];
 declare type BootstrapColumns = {
     lg: number;
@@ -120,7 +121,7 @@ export declare function schemaJSONPointer(schema: RJSFSchema, JSONPointer: strin
 export declare function uiSchemaJSONPointer(schema: RJSFSchema, JSONPointer: string): string | undefined;
 export declare function updateFormDataWithJSONPointer(schemaProps: Pick<FieldProps, "formData" | "registry" | "schema">, value: any, path: string): any;
 export declare const assignUUID: (item: any, immutably?: boolean) => any;
-export declare const getUUID: (item: any) => number;
+export declare const getUUID: (item?: any) => number;
 /**
  * Return item UUID or the parent UUID
  **/
@@ -164,4 +165,9 @@ export declare const classNames: (...cs: any[]) => string;
 export declare function translate(translations: ByLang, key: string, params?: {
     [key: string]: string | undefined;
 }): string;
+/**
+ * @param value the default value of the setter
+ * @returns [stateValue, setTrue, setFalse]
+ */
+export declare function useBooleanSetter(value: boolean): [boolean, () => void, () => void];
 export {};