@limetech/lime-elements 39.12.0 → 39.12.2

package/dist/collection/components/form/form.js

@@ -2,15 +2,12 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
-import retargetEvents from "react-shadow-dom-retarget-events";
 import { ArrayFieldTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
 import { ArrayField as CustomArrayField } from "./fields/array-field";
 import { ObjectField as CustomObjectField } from "./fields/object-field";
 import { widgets } from "./widgets";
-import { createRandomString } from "../../util/random-string";
-import Ajv from "ajv";
-import { isInteger } from "./validators";
+import { getValidator, getSchemaId } from "./schema-cache";
 import { mapValues } from "lodash-es";
 /**
  * @exampleComponent limel-example-form
@@ -40,6 +37,7 @@ export class Form {
          */
         this.disabled = false;
         this.isValid = true;
+        this.initialized = false;
         this.handleChange = this.handleChange.bind(this);
         this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);
     }
@@ -54,11 +52,14 @@ export class Form {
         this.initialize();
     }
     initialize() {
+        if (this.initialized) {
+            return;
+        }
         if (!this.host.shadowRoot.querySelector('.root')) {
             return;
         }
+        this.initialized = true;
         this.reactRender();
-        retargetEvents(this.host.shadowRoot);
         this.validateForm(this.value);
     }
     componentDidUpdate() {
@@ -70,9 +71,10 @@ export class Form {
             this.root.unmount();
             this.root = undefined;
         }
+        this.initialized = false;
     }
     render() {
-        return h("div", { key: '338235611cd3fd70cb5f0ce1728917bd648cb573', class: "root" });
+        return h("div", { key: '8e03d70f44885de2f18b20e649cd419e030208fd', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -124,22 +126,17 @@ export class Form {
         this.createValidator();
     }
     setSchemaId() {
-        // Due to a bug in react-jsonschema-form, validation will stop working if the schema is updated.
-        // A workaround at the moment is to always give it a unique ID
+        // RJSF v2 requires a unique $id per distinct schema to avoid
+        // validation cache collisions.
         // https://github.com/rjsf-team/react-jsonschema-form/issues/1563
-        const id = `${this.schema.$id}-${createRandomString()}`;
+        const id = getSchemaId(this.schema);
         this.modifiedSchema = Object.assign(Object.assign({}, this.schema), { id: id, $id: id });
     }
     createValidator() {
-        const validator = new Ajv({
-            unknownFormats: 'ignore',
-            allErrors: true,
-            multipleOfPrecision: 2,
-        }).addFormat('integer', isInteger);
-        this.validator = validator.compile(this.schema);
+        this.validator = getValidator(this.schema);
     }
     getValidationErrors() {
-        const errors = this.validator.errors || [];
+        const errors = [...(this.validator.errors || [])];
         return errors.map((error) => {
             let property = error.dataPath;
             if (error.keyword === 'required') {

package/dist/collection/components/form/schema-cache.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Ajv from "ajv";
+import { isInteger } from "./validators";
+const ajv = new Ajv({
+    unknownFormats: 'ignore',
+    allErrors: true,
+    multipleOfPrecision: 2,
+}).addFormat('integer', isInteger);
+const validators = new Map();
+/**
+ * Returns a compiled JSON Schema validator, using a cached version
+ * if the same schema content has been seen before.
+ *
+ * @param schema - the JSON Schema to compile
+ */
+export function getValidator(schema) {
+    const key = hashSchema(schema);
+    const cached = validators.get(key);
+    if (cached) {
+        return cached;
+    }
+    const { $id, id } = schema, schemaWithoutId = __rest(schema, ["$id", "id"]);
+    const validator = ajv.compile(schemaWithoutId);
+    validators.set(key, validator);
+    return validator;
+}
+/**
+ * Generates a deterministic ID from schema content, preserving any
+ * existing `$id` as a prefix. Used to work around RJSF #1563 where
+ * identical schemas need stable IDs to avoid validation cache collisions.
+ *
+ * @param schema - the JSON Schema to generate an ID for
+ */
+export function getSchemaId(schema) {
+    const hash = hashSchema(schema);
+    const prefix = schema.$id ? `${schema.$id}-` : '';
+    return `${prefix}${hash}`;
+}
+function hashSchema(schema) {
+    const { $id, id } = schema, schemaWithoutId = __rest(schema, ["$id", "id"]);
+    return djb2Hash(JSON.stringify(schemaWithoutId, sortedReplacer));
+}
+function sortedReplacer(_, value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return Object.fromEntries(Object.entries(value).sort(([a], [b]) => a.localeCompare(b)));
+    }
+    return value;
+}
+function djb2Hash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash + str.codePointAt(i)) & 4294967295;
+    }
+    return (hash >>> 0).toString(36);
+}

package/dist/collection/components/table/table.js

@@ -178,8 +178,8 @@ export class Table {
     updateData(newData = [], oldData = []) {
         const newIds = this.getRowIds(newData);
         const oldIds = this.getRowIds(oldData);
-        const shouldReplace = this.shouldReplaceData(newIds, oldIds);
-        const hasRowUpdates = !areRowsEqual(newData, oldData);
+        const shouldReplace = !this.areEqualIds(newIds, oldIds) ||
+            !this.isSameOrder(newIds, oldIds);
         setTimeout(() => {
             if (!this.tabulator || !this.initialized) {
                 return;
@@ -190,9 +190,15 @@ export class Table {
                 this.setSelection();
                 return;
             }
-            if (hasRowUpdates) {
-                this.tabulator.updateData(newData);
-                this.setSelection();
+            if (!areRowsEqual(newData, oldData)) {
+                const patched = this.fillMissingFields(newData, oldData);
+                this.tabulator.updateData(patched).then(() => {
+                    if (!this.tabulator) {
+                        return;
+                    }
+                    this.reformatChangedRows(newData, oldData);
+                    this.setSelection();
+                });
                 return;
             }
             if (newData.length > 0) {
@@ -259,9 +265,32 @@ export class Table {
         }
         this.tabulator.setSort(newSorting);
     }
-    shouldReplaceData(newIds, oldIds) {
-        return (!this.areEqualIds(newIds, oldIds) ||
-            !this.isSameOrder(newIds, oldIds));
+    reformatChangedRows(newData, oldData) {
+        for (const [i, newRow] of newData.entries()) {
+            if (!!(newRow === null || newRow === void 0 ? void 0 : newRow.id) && !isEqual(newRow, oldData[i])) {
+                const row = this.tabulator.getRow(newRow.id);
+                if (row) {
+                    row.reformat();
+                }
+            }
+        }
+    }
+    fillMissingFields(newData, oldData) {
+        return newData.map((newRow, index) => {
+            const oldRow = oldData[index];
+            if (!oldRow) {
+                return newRow;
+            }
+            const missingKeys = Object.keys(oldRow).filter((key) => !(key in newRow));
+            if (missingKeys.length === 0) {
+                return newRow;
+            }
+            const patched = Object.assign({}, newRow);
+            for (const key of missingKeys) {
+                patched[key] = undefined;
+            }
+            return patched;
+        });
     }
     getRowIds(data) {
         return data.map((item) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : item; });
@@ -578,16 +607,16 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: '9277abb7977cb9acb8b8f4eb89b65d960d5e86c6', class: {
+        return (h(Host, { key: '93dbd2f3ca88990432e28057035fcb538083d119', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: '75386d5a89d461ce2c0c6318ed3c465abb92c8e9', id: "tabulator-container", class: {
+            } }, h("div", { key: 'aa5355f9c10a3d75d40cffff4bc6620579fb3b6c', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: 'e3ab9bf53c9b5f4192ab65c49245bfc5be555940', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'ccef86fe3824a5117495e3fb96ea2928217663ce', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'cc7c274d6b0f81ac24b5a56467dc38fb204ed306', id: "tabulator-table" }))));
+            } }, h("div", { key: '2263536b78e2bdece8fe5d80ed7d51aa29015c02', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '95c1c4e8864338f0415adc07313a16ee26618b17', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '6c8ae89d20edbee0bf28cc759668900991fa55e6', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;