@luomus/laji-form 15.1.44 → 15.1.46

package/dist/styles.css

@@ -3871,7 +3871,7 @@ body .laji-form {
 	background-color: white;
 	right: 1px;
 	bottom: 1px;
-	height: 23px;
+	height: 21px;
 	width: 23px;
 	line-height: initial;
 	font-size: 20px;
@@ -3880,6 +3880,7 @@ body .laji-form {
 	position: absolute;
 	right: 3px;
 	bottom: 0px;
+	line-height: 21px;
 }
 .laji-form-dropdown-caret img {
 	width: 20px;

package/lib/components/components.js

@@ -403,7 +403,7 @@ function Label({ label, children, id, required, registry = {}, uiSchema = {} })
     const labelElem = (React.createElement(LabelComponent, { htmlFor: id, "aria-describedby": `${id}--help` },
         React.createElement("div", null,
             React.createElement("strong", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
-            showHelp ? React.createElement(Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick }) : null),
+            showHelp ? React.createElement(Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick, id: id }) : null),
         children));
     return help ? React.createElement(React.Fragment, null,
         React.createElement(OverlayTrigger, { placement: helpPlacement || "right", overlay: tooltipElem, hoverable: helpHoverable, formContext: registry.formContext, show: focused || undefined, style: { display: "inline-block" } }, labelElem),

package/lib/components/fields/ConditionalUiSchemaField.js

@@ -22,10 +22,10 @@ exports.rulePropType = PropTypes.oneOfType([
         complement: PropTypes.bool
     }),
     PropTypes.shape({
-        rule: PropTypes.oneOf(["isAdmin", "isEdit"]),
+        rule: PropTypes.oneOf(["isAdmin", "isEdit", "isReadonly"]),
         complement: PropTypes.bool
     }),
-    PropTypes.oneOf(["isAdmin", "isEdit"])
+    PropTypes.oneOf(["isAdmin", "isEdit", "isReadonly"]),
 ]);
 exports.operationPropType = PropTypes.shape({
     type: PropTypes.oneOf(["merge", "wrap"]),

package/lib/components/fields/MultiLanguageField.js

@@ -29,7 +29,7 @@ let MultiLanguageField = class MultiLanguageField extends React.Component {
             return sortA - sortB;
         });
         return (React.createElement(React.Fragment, null,
-            React.createElement(Label, { label: schema.title || "", required: required || uiSchema["ui:required"], uiSchema: uiSchema }),
+            React.createElement(Label, { label: schema.title || "", required: required || uiSchema["ui:required"], uiSchema: uiSchema, id: this.props.idSchema.$id }),
             languages.map(_lang => {
                 var _a;
                 return (React.createElement(SchemaField, Object.assign({}, this.props, { key: _lang, schema: Object.assign({ title: "" }, schema.properties[_lang]), uiSchema: {

package/lib/components/fields/NamedPlaceChooserField.js

@@ -325,7 +325,7 @@ class NamedPlaceChooser extends React.Component {
                 return data;
             }, []);
             return (React.createElement("div", { style: { height: "inherit" } },
-                React.createElement(SelectWidget_1.default, { disabled: !places, options: { enumOptions: enums, placeholder: `${translations.SelectPlaceFromList}...` }, onChange: this.onSelectChange, selectOnChange: false, includeEmpty: false, schema: {}, id: "named-place-chooser-select", formContext: this.props.formContext }),
+                React.createElement(SelectWidget_1.default, { disabled: !places, options: { enumOptions: enums, placeholder: `${translations.SelectPlaceFromList}...` }, onChange: this.onSelectChange, selectOnChange: false, includeEmpty: true, schema: {}, id: "named-place-chooser-select", formContext: this.props.formContext }),
                 React.createElement(MapArrayField_1.Map, { ref: getMapRef, data: data, markerPopupOffset: 45, featurePopupOffset: 5, controls: { draw: false }, lang: this.props.formContext.lang, bodyAsDialogRoot: false, formContext: this.props.formContext }),
                 (!places) ? React.createElement(Spinner, null) : null,
                 React.createElement("div", { style: { display: "none" }, ref: this.setPopupContainerRef },

package/lib/components/fields/SingleActiveArrayField.js

@@ -504,7 +504,7 @@ let UncontrolledArrayFieldTemplate = class UncontrolledArrayFieldTemplate extend
         const titleUiSchema = Object.assign(Object.assign({}, arrayTemplateFieldProps.uiSchema), { "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(arrayTemplateFieldProps.uiSchema)), { titleFormatters: that.props.uiSchema.titleFormatters }) });
         return activeIdx !== undefined && arrayTemplateFieldProps.items && arrayTemplateFieldProps.items[activeIdx] ?
             React.createElement("div", { key: utils_1.getUUID(this.props.formData[activeIdx]) || activeIdx },
-                React.createElement(Title, { title: title, label: title, schema: this.props.schema, uiSchema: titleUiSchema, formData: that.props.formData, registry: this.props.registry }),
+                React.createElement(Title, { title: title, label: title, schema: this.props.schema, uiSchema: titleUiSchema, formData: that.props.formData, registry: this.props.registry, id: this.props.idSchema.$id }),
                 React.createElement(DescriptionFieldTemplate, { description: this.props.uiSchema["ui:description"], schema: this.props.schema }),
                 arrayTemplateFieldProps.items[activeIdx].children)
             : null;
@@ -738,7 +738,7 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
         const onMouseLeave = this.customEventSender("endHighlight");
         const { Table } = this.context.theme;
         return (React.createElement("div", { style: { position: "relative" }, className: "single-active-array-table-container" },
-            React.createElement(Title, { title: title, label: title, uiSchema: uiSchema, schema: schema, formData: formData, registry: this.props.registry }),
+            React.createElement(Title, { title: title, label: title, uiSchema: uiSchema, schema: schema, formData: formData, registry: this.props.registry, id: this.props.idSchema.$id }),
             React.createElement(DescriptionFieldTemplate, { description: uiSchema["ui:description"], schema: this.props.schema }),
             React.createElement("div", { className: "laji-form-field-template-item" },
                 React.createElement("div", { className: "table-responsive laji-form-field-template-schema" },
@@ -749,7 +749,7 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
                                     const sortableHeaderProps = this.getSortableHeaderProps(col, this.props);
                                     const { ui, tooltip } = sortableHeaderProps, _sortableHeaderProps = __rest(sortableHeaderProps, ["ui", "tooltip"]);
                                     const className = utils_1.classNames("darker", sortableHeaderProps.className);
-                                    return (React.createElement(components_1.TooltipComponent, { key: col, tooltip: tooltip, placement: "top" },
+                                    return (React.createElement(components_1.TooltipComponent, { key: col, tooltip: tooltip, placement: "top", id: `${this.props.idSchema[col].$id}-header` },
                                         React.createElement("th", Object.assign({ key: col }, _sortableHeaderProps, { className: className }),
                                             ((uiSchema.items || {})[col] || {})["ui:title"] || schema.items.properties[col].title,
                                             ui || null)));
@@ -963,10 +963,10 @@ class AccordionHeader extends React.Component {
             }),
             hasHelp &&
                 React.createElement(React.Fragment, null,
-                    React.createElement(components_1.Help, { focusable: true, onFocus: this.onHelpFocus, onBlur: this.onHelpBlur, onClick: this.onHelpClick }),
+                    React.createElement(components_1.Help, { focusable: true, onFocus: this.onHelpFocus, onBlur: this.onHelpBlur, onClick: this.onHelpClick, id: `${that.props.idSchema.$id}_{idx}` }),
                     React.createElement("div", { id: `${that.props.idSchema.$id}_${idx}--help`, style: { display: "none" } }, uiSchema["ui:help"]))));
         const { Tooltip } = this.context.theme;
-        const tooltip = React.createElement(Tooltip, null, uiSchema["ui:help"]);
+        const tooltip = React.createElement(Tooltip, { id: `${that.props.idSchema.$id}_${idx}-help` }, uiSchema["ui:help"]);
         const headerTextComponent = hasHelp ? React.createElement(components_1.OverlayTrigger, { placement: "right", overlay: tooltip, show: this.state && this.state.focused || undefined }, headerText) : headerText;
         const header = (React.createElement("div", { className: this.props.className, role: "tab", id: `${that.props.idSchema.$id}_${utils_1.getFormDataIndex(idx, that.props.uiSchema)}-header`, onClick: this.onHeaderClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onKeyDown: this.onKeyDown, tabIndex: "0" },
             React.createElement("div", { className: this.props.wrapperClassName },

package/lib/components/fields/TagArrayField.js

@@ -17,7 +17,7 @@ let TagArrayField = class TagArrayField extends React.Component {
     render() {
         const { FieldTemplate } = this.props.registry.templates;
         const { uiSchema } = this.props;
-        return (React.createElement(FieldTemplate, Object.assign({}, this.props, { forceDisplayLabel: true, rawHelp: uiSchema["ui:help"], description: uiSchema["ui:description"], rawErrors: [] }),
+        return (React.createElement(FieldTemplate, Object.assign({}, this.props, { forceDisplayLabel: true, rawHelp: uiSchema["ui:help"], description: uiSchema["ui:description"], rawErrors: [], id: this.props.idSchema.$id }),
             React.createElement(TagInputComponent, Object.assign({}, this.props, { id: this.props.idSchema.$id, tags: this.props.formData }))));
     }
 };

package/lib/components/templates/ArrayFieldTemplate.js

@@ -288,7 +288,7 @@ class ArrayFieldTemplateWithoutKeyHandling extends React.Component {
         });
         const title = "ui:title" in props.uiSchema ? props.uiSchema["ui:title"] : props.title;
         return (React.createElement("div", { className: props.className },
-            React.createElement(Title, { title: title, label: title, uiSchema: this.props.uiSchema, registry: this.props.registry }),
+            React.createElement(Title, { title: title, label: title, uiSchema: this.props.uiSchema, registry: this.props.registry, id: this.props.idSchema.$id }),
             topButtons,
             props.description && React.createElement(Description, { description: props.description }),
             orderable ?

package/lib/components/templates/TitleField.d.ts

@@ -1,9 +1,2 @@
 export default TitleField;
-declare function TitleField({ title, id, formData, style, uiSchema, registry }: {
-    title: any;
-    id: any;
-    formData: any;
-    style: any;
-    uiSchema?: {} | undefined;
-    registry?: {} | undefined;
-}): JSX.Element | null;
+declare function TitleField(props: any): JSX.Element | null;

package/lib/components/templates/TitleField.js

@@ -5,7 +5,8 @@ const components_1 = require("../components");
 const utils_1 = require("../../utils");
 const Context_1 = require("../../Context");
 const ReactContext_1 = require("../../ReactContext");
-const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }) => {
+const TitleField = (props) => {
+    const { title, id, formData, style, uiSchema = {}, registry = {} } = props;
     const { "ui:help": help, "ui:helpHoverable": helpHoverable, "_ui:renderedButtons": buttons } = uiSchema;
     const { titleClassName: className, titleFormatters = [] } = utils_1.getUiOptions(uiSchema);
     const renderedFormatters = titleFormatters.map((titleFormatter) => {
@@ -26,7 +27,7 @@ const TitleField = ({ title, id, formData, style, uiSchema = {}, registry = {} }
     if (renderedFormatters.length === 0 && utils_1.isEmptyString(title)) {
         return null;
     }
-    const helpComponent = help ? React.createElement(components_1.Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick }) : null;
+    const helpComponent = help ? React.createElement(components_1.Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick, id: id }) : null;
     let titleTextContent = React.createElement("span", null,
         React.createElement("span", { dangerouslySetInnerHTML: { __html: title } }),
         " ",

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

@@ -61,6 +61,7 @@ export class Autosuggest extends React.Component<any, any, any> {
     onInformalTaxonGroupSelected: (id: any) => void;
     onInformalTaxonGroupHide: () => void;
     onToggle: () => void;
+    onKeyDown: any;
     isSuggested: () => any;
     renderInput: (inputProps: any) => JSX.Element;
 }

package/lib/components/widgets/AutosuggestWidget.js

@@ -636,6 +636,7 @@ class Autosuggest extends React.Component {
             this.props.onToggle(!this.props.toggled);
             setTimeout(() => this.props.formContext.utils.focusById(this.props.id), 1); // Refocus input
         };
+        this.onKeyDown = this.props.formContext.utils.keyboardClick(this.onToggle);
         this.isSuggested = () => {
             const { suggestion } = this.state;
             return !!suggestion && this.isValueSuggested(this.props);
@@ -699,7 +700,7 @@ class Autosuggest extends React.Component {
                 const props = {
                     className: utils_1.classNames("autosuggest-input-addon", "power-user-addon", this.props.toggled && "active"),
                     onMouseDown: this.onToggle,
-                    onKeyDown: this.onToggleByKeyboard
+                    onKeyDown: this.onKeyDown
                 };
                 if (toggleable && toggleable.glyphClass) {
                     return (React.createElement(components_1.Button, Object.assign({}, props),

package/lib/utils.js

@@ -776,11 +776,8 @@ function checkRules(rules, props, cache, prop = "formData") {
     const passes = (Array.isArray(rules) ? rules : [rules]).every((rule, idx) => {
         let passes;
         // BW compatibility for old string  rule
-        if (rule === "isAdmin") {
-            rule = { rule: "isAdmin" };
-        }
-        else if (rule === "isEdit") {
-            rule = { rule: "isEdit" };
+        if (["isAdmin", "isEdit", "isReadonly"].includes(rule)) {
+            rule = { rule };
         }
         const { field, regexp, valueIn, valueIncludes, valueLengthLessThan, rule: _rule } = rule;
         if (_rule) {
@@ -790,6 +787,9 @@ function checkRules(rules, props, cache, prop = "formData") {
             else if (_rule === "isEdit") {
                 passes = props.formContext.uiSchemaContext.isEdit;
             }
+            else if (_rule === "isReadonly") {
+                passes = props.readonly;
+            }
         }
         else {
             let value = parseJSONPointer(props[prop] || {}, field);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.44",
+  "version": "15.1.46",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -24,6 +24,7 @@
     "prepublishOnly": "npm run build && git push && git push --tags",
     "lint": "eslint -c .eslintrc.prod.json src playground",
     "test": "npx playwright test",
+    "test:ui": "npx playwright test --ui",
     "test:docker": "npm run test:docker:build && npm run test:docker:run --",
     "test:lightweight": "npx playwright test --project chromium",
     "test:docker:build": "docker build -t laji-form-test -f test.Dockerfile .",
@@ -38,7 +39,7 @@
   "repository": "git+https://github.com/luomus/laji-form.git",
   "license": "MIT",
   "dependencies": {
-    "@luomus/laji-map": "^5.1.11",
+    "@luomus/laji-map": "^5.1.13",
     "@luomus/laji-validate": "^0.0.122",
     "@rjsf/core": "~5.1.0",
     "@rjsf/utils": "~5.1.0",

package/test-export/test-utils.d.ts

@@ -232,6 +232,10 @@ export declare class DemoPageForm extends Form {
     getState(): Promise<{
         formData: any;
     }>;
+    getProps(): Promise<{
+        schema: any;
+        uiSchema: any;
+    }>;
     submit(): Promise<void>;
     startSubmit(): void;
     submitOnlySchemaValidations(): Promise<any>;

package/test-export/test-utils.js

@@ -302,6 +302,12 @@ class DemoPageForm extends Form {
             return { formData };
         });
     }
+    getProps() {
+        return this.page.evaluate(() => {
+            const { schema, uiSchema } = window.lajiForm.lajiForm.props;
+            return { schema, uiSchema };
+        });
+    }
     submit() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.e("submit()");