@limetech/lime-elements 39.13.3 → 39.14.1

package/dist/cjs/{sv-jO-ewmqh.js → sv-BSR4W58y.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var moment = require('./moment-DCqC7BZP.js');
+var moment = require('./moment-CqRdiK10.js');
 
 var da$1 = {exports: {}};
 

package/dist/collection/components/form/adapters/widget-adapter.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { capitalize } from "lodash-es";
+import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
 import { getHelpComponent } from "../help";
+import { RowLayoutContext } from "../row/row-context";
 /**
  * A widget is a concept in react-jsonschema-form (rjsf).
  * It represents a HTML tag for the user to enter data, eg. input, select, etc.
@@ -23,47 +24,35 @@ export class LimeElementsWidgetAdapter extends React.Component {
         };
         this.handleBlur = this.handleBlur.bind(this);
     }
-    hasValue() {
-        const value = this.getValue();
-        if (!value) {
-            return false;
-        }
-        if (Array.isArray(value)) {
-            return value.length > 0;
-        }
-        if (value instanceof Date) {
-            return true;
-        }
-        if (typeof value === 'object') {
-            return Object.entries(value).length > 0;
-        }
-        return true;
-    }
     handleBlur() {
         this.setState({ modified: true });
     }
     getLabel() {
-        const { schema, label } = this.props.widgetProps;
+        if (this.context) {
+            return '';
+        }
+        const { schema, label, hideLabel } = this.props.widgetProps;
+        if (hideLabel) {
+            return '';
+        }
         return label || schema.title;
     }
     isInvalid() {
         const { modified } = this.state;
-        const { rawErrors } = this.props.widgetProps;
-        return (!!rawErrors && (modified || this.hasValue() || !this.isRequired()));
-    }
-    isRequired() {
-        const { required, schema } = this.props.widgetProps;
-        return required || schema.minItems > 0;
+        const { rawErrors, required, schema } = this.props.widgetProps;
+        return isFieldInvalid({
+            hasErrors: !!rawErrors,
+            modified: modified,
+            hasValue: hasValue(this.getValue()),
+            required: isFieldRequired({ required, minItems: schema.minItems }),
+        });
     }
     getHelperText() {
         const { rawErrors, schema } = this.props.widgetProps;
         if (!this.isInvalid()) {
-            return schema.description;
-        }
-        if (rawErrors) {
-            return capitalize(rawErrors[0]);
+            return this.context ? '' : schema.description;
         }
-        return schema.description;
+        return getErrorText(rawErrors || [], schema.description);
     }
     getValue() {
         const { value } = this.props;
@@ -76,7 +65,10 @@ export class LimeElementsWidgetAdapter extends React.Component {
         const disabled = this.isDisabled();
         const value = this.getValue();
         const readonly = this.isReadOnly();
-        return React.createElement(React.Fragment, {}, React.createElement(name, Object.assign(Object.assign({ value: value, label: this.getLabel(), disabled: disabled, readonly: readonly, required: this.isRequired(), invalid: this.isInvalid(), 'helper-text': this.getHelperText() }, extraProps), { onChange: this.handleChange, onBlur: this.handleBlur })), getHelpComponent(this.props.widgetProps.schema));
+        return React.createElement(React.Fragment, {}, React.createElement(name, Object.assign(Object.assign({ value: value, label: this.getLabel(), disabled: disabled, readonly: readonly, required: isFieldRequired({
+                required: this.props.widgetProps.required,
+                minItems: this.props.widgetProps.schema.minItems,
+            }), invalid: this.isInvalid(), 'helper-text': this.getHelperText() }, extraProps), { onChange: this.handleChange, onBlur: this.handleBlur })), getHelpComponent(this.props.widgetProps.schema));
     }
     isDisabled() {
         var _a, _b;
@@ -91,3 +83,4 @@ export class LimeElementsWidgetAdapter extends React.Component {
         return widgetProps.readonly;
     }
 }
+LimeElementsWidgetAdapter.contextType = RowLayoutContext;

package/dist/collection/components/form/fields/array-field.js

@@ -1,6 +1,9 @@
-import JSONArrayField from "@rjsf/core/lib/components/fields/ArrayField";
 import React from "react";
+import { getDefaultRegistry } from "@rjsf/core";
 import { resetDependentFields } from "./field-helpers";
+import { ARRAY_REORDER_EVENT } from "../templates/array-field";
+const { fields: defaultFields } = getDefaultRegistry();
+const BaseArrayField = defaultFields.ArrayField;
 /**
  * This override field exists to supplement the need to reset dependent fields
  * in SchemaField. The `resetDependentFields` function requires that the schema that
@@ -14,6 +17,10 @@ import { resetDependentFields } from "./field-helpers";
  * `resetDependentFields` on the changed list items. This is possible because the ArrayField is also given
  * the raw schema so it can properly call `resetDependentFields`
  *
+ * This field also handles drag-and-drop reordering. The ArrayFieldTemplate
+ * dispatches an `arrayReorder` DOM event when Sortable.js completes a drag.
+ * This field listens for that event and reorders the form data via onChange.
+ *
  * This form has to handle several events that can affect the list:
  *
  * 1. An on change where no list item changes
@@ -32,20 +39,46 @@ export class ArrayField extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
+        this.handleReorder = this.handleReorder.bind(this);
+        this.setWrapper = this.setWrapper.bind(this);
+    }
+    componentWillUnmount() {
+        this.setWrapper(null);
+    }
+    setWrapper(element) {
+        if (this.wrapper) {
+            this.wrapper.removeEventListener(ARRAY_REORDER_EVENT, this.handleReorder);
+        }
+        this.wrapper = element !== null && element !== void 0 ? element : undefined;
+        if (this.wrapper) {
+            this.wrapper.addEventListener(ARRAY_REORDER_EVENT, this.handleReorder);
+        }
+    }
+    handleReorder(event) {
+        event.stopPropagation();
+        const { fromIndex, toIndex } = event.detail;
+        const { formData, fieldPathId } = this.props;
+        if (!Array.isArray(formData) || !fieldPathId) {
+            return;
+        }
+        const reordered = [...formData];
+        const [item] = reordered.splice(fromIndex, 1);
+        reordered.splice(toIndex, 0, item);
+        this.props.onChange(reordered, fieldPathId.path);
     }
-    handleChange(newData, errorSchema) {
+    handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
-            this.props.onChange(newData, errorSchema);
+            this.props.onChange(newData, path);
             return;
         }
         // This case happens when we add or remove an item from the list
         // No need to check for resetting fields unless we change data
         if (oldData.length !== newData.length) {
-            this.props.onChange(newData, errorSchema);
+            this.props.onChange(newData, path);
             return;
         }
         const nonMatchingIndices = [];
@@ -63,10 +96,10 @@ export class ArrayField extends React.Component {
             const i = nonMatchingIndices[0];
             newData[i] = resetDependentFields(oldData[i], newData[i], schema.items, rootSchema);
         }
-        this.props.onChange(newData, errorSchema);
+        this.props.onChange(newData, path);
     }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
-        return React.createElement(JSONArrayField, arrayProps);
+        return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }

package/dist/collection/components/form/fields/field-helpers.js

@@ -1,5 +1,6 @@
 import { union, isEqual, isPlainObject, negate } from "lodash-es";
-import { retrieveSchema, ADDITIONAL_PROPERTY_FLAG } from "@rjsf/core/lib/utils";
+import { retrieveSchema, ADDITIONAL_PROPERTY_FLAG } from "@rjsf/utils";
+import { rjsfValidator } from "../validator";
 /**
  * Given two objects, get a list of keys for each value that is different between
  * the two objects. Compares using deep comparison
@@ -35,9 +36,8 @@ export const resetDependentFields = (oldData, newData, schema, rootSchema) => {
         return newData;
     }
     // Get the schema generated by the current data
-    const currentSchema = retrieveSchema(schema, rootSchema, oldData);
-    // Get the new schema that is calculated for the new data
-    const newSchema = retrieveSchema(schema, rootSchema, newData);
+    const currentSchema = retrieveSchema(rjsfValidator, schema, rootSchema, oldData);
+    const newSchema = retrieveSchema(rjsfValidator, schema, rootSchema, newData);
     // Get property keys whose schema changed due to the new data.
     // These properties that have changed are the properties that are dependent on
     // data that has changed in the current onChange event

package/dist/collection/components/form/fields/object-field.js

@@ -1,12 +1,14 @@
-import JSONObjectField from "@rjsf/core/lib/components/fields/ObjectField";
 import React from "react";
+import { getDefaultRegistry } from "@rjsf/core";
 import { CodeEditor } from "../widgets/code-editor";
 import { renderDescription, renderTitle } from "../templates/common";
 import { isCustomObjectSchema } from "./field-helpers";
+const { fields: defaultFields } = getDefaultRegistry();
+const BaseObjectField = defaultFields.ObjectField;
 export class ObjectField extends React.Component {
     render() {
         if (!isCustomObjectSchema(this.props.schema)) {
-            return React.createElement(JSONObjectField, this.props);
+            return React.createElement(BaseObjectField, this.props);
         }
         return React.createElement(React.Fragment, {}, renderTitle(this.props.schema.title), renderDescription(this.props.schema.description), React.createElement(CodeEditor, this.props));
     }

package/dist/collection/components/form/fields/schema-field.js

@@ -1,10 +1,14 @@
-import JSONSchemaField from "@rjsf/core/lib/components/fields/SchemaField";
 import React from "react";
-import { isEmpty, capitalize } from "lodash-es";
+import { getDefaultRegistry } from "@rjsf/core";
+import { isEmpty } from "lodash-es";
+import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
 import { resetDependentFields } from "./field-helpers";
 import { FieldTemplate } from "../templates";
 import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
+import { RowLayoutContext } from "../row/row-context";
+const { fields: defaultFields } = getDefaultRegistry();
+const BaseSchemaField = defaultFields.SchemaField;
 /**
  * If given a value and schema, check if the value should be translated
  * from null to undefined to avoid issues with validation
@@ -48,10 +52,6 @@ const hasCustomComponent = (schema) => {
     return true;
 };
 const verifyCustomComponentIsDefined = (elementName) => {
-    const supportsCustomElements = 'customElements' in window;
-    if (!supportsCustomElements) {
-        throw new Error('Custom form elements are not supported by this browser!');
-    }
     if (!customElements.get(elementName)) {
         throw new Error(`Custom form element '${elementName}' is not defined!`);
     }
@@ -90,51 +90,23 @@ export class SchemaField extends React.Component {
         this.handleCustomComponentChange =
             this.handleCustomComponentChange.bind(this);
     }
-    hasValue() {
-        const value = this.getValue();
-        if (!value) {
-            return false;
-        }
-        if (Array.isArray(value)) {
-            return value.length > 0;
-        }
-        if (value instanceof Date) {
-            return true;
-        }
-        if (typeof value === 'object') {
-            return !isEmpty(value);
-        }
-        return true;
-    }
-    getLabel() {
-        const { schema } = this.props;
-        return schema.title;
-    }
     isInvalid() {
         const { modified } = this.state;
-        const { errorSchema } = this.props;
-        return ((modified || this.hasValue() || !this.isRequired()) &&
-            !isEmpty(errorSchema));
-    }
-    isRequired() {
-        const { required, schema } = this.props;
-        return required || schema.minItems > 0;
+        const { errorSchema, required, schema } = this.props;
+        return isFieldInvalid({
+            hasErrors: !isEmpty(errorSchema),
+            modified: modified,
+            hasValue: hasValue(this.props.formData),
+            required: isFieldRequired({ required, minItems: schema.minItems }),
+        });
     }
     getHelperText() {
         var _a, _b, _c;
         const { errorSchema, schema } = this.props;
-        if (!this.isInvalid()) {
-            const helperText = (_c = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.helperText;
-            return helperText || schema.description;
-        }
-        if (!isEmpty(errorSchema) && '__errors' in errorSchema) {
-            return capitalize(errorSchema.__errors[0]);
-        }
-        return schema.description;
-    }
-    getValue() {
-        const { formData } = this.props;
-        return formData;
+        const hasErrors = !isEmpty(errorSchema) && '__errors' in errorSchema;
+        const errors = this.isInvalid() && hasErrors ? errorSchema.__errors : [];
+        const fallbackText = (_c = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.helperText;
+        return getErrorText(errors, schema.description, fallbackText);
     }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
@@ -143,35 +115,41 @@ export class SchemaField extends React.Component {
         if (shouldChangeToUndefined(value, schema)) {
             value = undefined;
         }
-        this.handleChange(value);
+        this.handleChange(value, this.props.fieldPathId.path);
     }
-    handleChange(data) {
+    handleChange(data, path) {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
         const newData = resetDependentFields(formData, data, schema, rootSchema);
-        this.props.onChange(newData);
+        this.props.onChange(newData, path);
     }
     buildCustomComponentProps() {
-        const { disabled, readonly, name, registry, schema, errorSchema, idSchema, } = this.props;
+        const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
+        const schema = rawSchema;
         const factoryProps = getFactoryProps(registry.formContext, schema);
-        return Object.assign(Object.assign({}, factoryProps), { value: this.getValue(), required: this.isRequired(), readonly: readonly || schema.readOnly, disabled: disabled, invalid: this.isInvalid(), label: this.getLabel(), helperText: this.getHelperText(), ref: (element) => {
+        return Object.assign(Object.assign({}, factoryProps), { value: this.props.formData, required: isFieldRequired({
+                required: this.props.required,
+                minItems: schema.minItems,
+            }), readonly: readonly || schema.readOnly, disabled: disabled, invalid: this.isInvalid(), label: this.context ? '' : schema.title, helperText: this.context && !this.isInvalid() ? '' : this.getHelperText(), ref: (element) => {
+                var _a;
                 element.formInfo = {
                     schema: schema,
                     rootSchema: registry.formContext.schema,
                     errorSchema: errorSchema,
                     rootValue: registry.formContext.rootValue,
                     name: name,
-                    schemaPath: this.getSchemaPath(idSchema === null || idSchema === void 0 ? void 0 : idSchema.$id),
+                    schemaPath: (_a = fieldPathId === null || fieldPathId === void 0 ? void 0 : fieldPathId.path) === null || _a === void 0 ? void 0 : _a.map(String),
                 };
                 return () => { };
             } });
     }
     renderCustomComponent(props) {
-        const { name, props: userDefinedComponentProps } = getCustomComponent(props.schema);
+        const schema = props.schema;
+        const { name, props: userDefinedComponentProps } = getCustomComponent(schema);
         verifyCustomComponentIsDefined(name);
         const component = React.createElement(name, Object.assign(Object.assign(Object.assign({}, userDefinedComponentProps), this.buildCustomComponentProps()), { onChange: this.handleCustomComponentChange }));
-        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component, getHelpComponent(props.schema));
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
     }
     render() {
         var _a;
@@ -185,22 +163,7 @@ export class SchemaField extends React.Component {
         if (this.props.schema.format === 'time') {
             fieldProps.uiSchema = Object.assign({ 'ui:widget': TimePicker }, fieldProps.uiSchema);
         }
-        return React.createElement(JSONSchemaField, fieldProps);
-    }
-    /**
-     * Gets the path to the current property within the schema
-     *
-     * @param schemaId - the id of the schema
-     * @returns an array with the schema path for the current property
-     * @example
-     * const schemaId = 'root_sections_0_controls_0_name';
-     * const schemaPath = getSchemaPath(schemaId);
-     * // ➡ ['sections', '0', 'controls', '0', 'name']
-     */
-    getSchemaPath(schemaId) {
-        if (schemaId === undefined) {
-            return undefined;
-        }
-        return schemaId.replace('root_', '').split('_');
+        return React.createElement(BaseSchemaField, fieldProps);
     }
 }
+SchemaField.contextType = RowLayoutContext;

package/dist/collection/components/form/form.css

@@ -124,10 +124,10 @@
 .limel-form-row--layout .main-information {
   position: relative;
 }
-.limel-form-row--layout .main-information > .form-group.field {
+.limel-form-row--layout .main-information > .rjsf-field {
   position: unset;
 }
-.limel-form-row--layout .main-information > .form-group.field limel-help {
+.limel-form-row--layout .main-information > .rjsf-field limel-help {
   top: 0;
 }
 .limel-form-row--layout limel-icon {
@@ -155,12 +155,12 @@
 .limel-form-row--layout .has-icon .description {
   padding-left: calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap));
 }
-.limel-form-row--layout .form-group.field {
+.limel-form-row--layout .rjsf-field {
   flex-shrink: 0;
   display: flex;
   align-content: center;
 }
-.limel-form-row--layout .form-group.field limel-slider {
+.limel-form-row--layout .rjsf-field limel-slider {
   min-width: 8rem;
   display: block;
 }
@@ -185,7 +185,7 @@
   box-sizing: border-box;
 }
 
-.form-group {
+.rjsf-field {
   min-width: 0;
 }
 
@@ -368,26 +368,26 @@ limel-markdown {
   margin-bottom: 0.5rem;
 }
 
-.form-group {
+.rjsf-field {
   position: relative;
 }
-.form-group limel-help {
+.rjsf-field limel-help {
   position: absolute;
   top: calc(var(--form-row-gap, 1rem) * -0.5);
   left: calc(var(--form-column-gap, 1rem) * -0.5);
 }
-.form-group h1 {
+.rjsf-field h1 {
   color: rgb(var(--contrast-1400), 0.8);
 }
-.form-group h1 {
+.rjsf-field h1 {
   --limel-form-h1-font-size: 1.476rem;
   font-weight: 800;
 }
-.form-group .form-group h1 {
+.rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.383rem;
   font-weight: 700;
 }
-.form-group .form-group h1:before {
+.rjsf-field .rjsf-field h1:before {
   content: "";
   display: block;
   position: absolute;
@@ -401,28 +401,28 @@ limel-markdown {
   border-radius: 0.125rem;
   opacity: 0.6;
 }
-.form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.296rem;
   font-weight: 600;
 }
-.form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.215rem;
 }
-.form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.138rem;
 }
-.form-group .form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.067rem;
 }
-.form-group .form-group .form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }