@limetech/lime-elements 39.17.0 → 39.17.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [39.17.1](https://github.com/Lundalogik/lime-elements/compare/v39.17.0...v39.17.1) (2026-04-27)
+
+### Bug Fixes
+
+
+* **form:** allow clearing custom components nested inside array items ([02910c1](https://github.com/Lundalogik/lime-elements/commit/02910c1b10fca4e5fbea564555dc4db75be82c99))
+* **form:** preserve nested-object leaf data inside array items ([8e29997](https://github.com/Lundalogik/lime-elements/commit/8e299974ed9b3b14dd9eda4313ded2106716225d))
+* **form:** reset obsolete dependent fields inside array items on trigger change ([7e1458e](https://github.com/Lundalogik/lime-elements/commit/7e1458e54467db9f2019a1160a52dad94b7e7a14))
+
 ## [39.17.0](https://github.com/Lundalogik/lime-elements/compare/v39.16.4...v39.17.0) (2026-04-27)
 
 ### Features

package/dist/cjs/limel-form.cjs.entry.js

@@ -39813,6 +39813,21 @@ function isCustomObjectSchema(schema) {
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
+/**
+ * Check whether a schema permits `null` as a valid value. Used to decide
+ * whether a cleared field value should be preserved as `null` or converted
+ * to `undefined` so the property can be removed from the form data.
+ *
+ * @param schema - the schema to check
+ * @returns true if the schema's type is `'null'` or includes `'null'`
+ */
+const schemaAllowsNull = (schema) => {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
+    if (!type) {
+        return false;
+    }
+    return Array.isArray(type) ? type.includes('null') : type === 'null';
+};
 
 /**
  * A widget is a concept in react-jsonschema-form (rjsf).
@@ -40007,7 +40022,7 @@ const BaseSchemaField = defaultFields$2.SchemaField;
  * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema) => {
-    return value === null && !schema.type.includes('null');
+    return value === null && !schemaAllowsNull(schema);
 };
 const hasCustomComponent = (schema) => {
     var _a, _b;
@@ -40094,9 +40109,26 @@ class SchemaField extends React.Component {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
+        if (this.isDeepLeafChange(path)) {
+            this.props.onChange(data, path);
+            return;
+        }
         const newData = resetDependentFields(formData, data, schema, rootSchema);
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through this SchemaField with a path that is deeper than its own.
+     * The enclosing ArrayField rebuilds the affected item and runs
+     * `resetDependentFields` at the item level (see array-field.ts), so we
+     * must pass the partial leaf data through untouched here.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { fieldPathId } = this.props;
+        return !!fieldPathId && path.length > fieldPathId.path.length;
+    }
     buildCustomComponentProps() {
         const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
         const schema = rawSchema;
@@ -40208,6 +40240,10 @@ class ArrayField extends React.Component {
     handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
+        if (this.isDeepLeafChange(path)) {
+            this.handleDeepLeafChange(newData, path);
+            return;
+        }
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
@@ -40237,11 +40273,102 @@ class ArrayField extends React.Component {
         }
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through here with the leaf value (not the full array) and a path that
+     * is deeper than this field's own path.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { formData, fieldPathId } = this.props;
+        return (Array.isArray(formData) &&
+            !!fieldPathId &&
+            path.length > fieldPathId.path.length);
+    }
+    /**
+     * Rebuild the affected item locally so we can (a) restore `undefined`
+     * when the leaf schema does not allow `null` — the built-in handler
+     * coerces `undefined` to `null`, which breaks field clearing for custom
+     * components — and (b) still run `resetDependentFields` at the item
+     * level so sibling fields that became obsolete for the new data are
+     * cleared.
+     * @param newData
+     * @param path
+     */
+    handleDeepLeafChange(newData, path) {
+        const { formData: oldData, fieldPathId } = this.props;
+        const [indexSegment, ...pathInItem] = path.slice(fieldPathId.path.length);
+        const index = Number(indexSegment);
+        const newArray = [...oldData];
+        newArray[index] = this.buildResetItem(newData, index, pathInItem);
+        this.props.onChange(newArray, fieldPathId.path);
+    }
+    buildResetItem(newData, index, pathInItem) {
+        const { formData: oldData, schema } = this.props;
+        const { rootSchema } = this.props.registry;
+        const itemSchema = (Array.isArray(schema.items) ? schema.items[index] : schema.items);
+        const leafSchema = getSchemaAtPath(itemSchema, pathInItem);
+        const value = newData === null && !schemaAllowsNull(leafSchema)
+            ? undefined
+            : newData;
+        const oldItem = oldData[index];
+        const newItem = setValueAtPath(oldItem, pathInItem, value);
+        return resetDependentFields(oldItem, newItem, itemSchema, rootSchema);
+    }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
         return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }
+function getSchemaAtPath(schema, pathSegments) {
+    let current = schema;
+    for (const segment of pathSegments) {
+        if (!current) {
+            return;
+        }
+        current = resolveSchemaSegment(current, segment);
+    }
+    return current;
+}
+function resolveSchemaSegment(schema, segment) {
+    var _a;
+    if (typeof segment === 'number') {
+        const items = schema.items;
+        return Array.isArray(items) ? items[segment] : items;
+    }
+    return (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[segment];
+}
+/**
+ * Return a copy of `target` with `value` written at the location described
+ * by `pathSegments`, creating intermediate containers as needed. Numeric
+ * segments address arrays; string segments address object keys. `target`
+ * is not mutated.
+ *
+ * @param target
+ * @param pathSegments
+ * @param value
+ * @example
+ * setValueAtPath({ a: { b: 1 } }, ['a', 'b'], 2); // → { a: { b: 2 } }
+ * setValueAtPath([{ x: 1 }], [0, 'x'], 9);        // → [{ x: 9 }]
+ */
+function setValueAtPath(target, pathSegments, value) {
+    if (pathSegments.length === 0) {
+        return value;
+    }
+    const clone = cloneContainer(target, pathSegments[0]);
+    set(clone, pathSegments, value);
+    return clone;
+}
+function cloneContainer(target, firstSegment) {
+    if (Array.isArray(target) || isPlainObject(target)) {
+        return cloneDeep.cloneDeep(target);
+    }
+    if (typeof firstSegment === 'number') {
+        return [];
+    }
+    return {};
+}
 
 class CodeEditor extends React.Component {
     constructor(props) {

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { getDefaultRegistry } from "@rjsf/core";
-import { resetDependentFields } from "./field-helpers";
+import { cloneDeep, isPlainObject, set } from "lodash-es";
+import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { ARRAY_REORDER_EVENT } from "../templates/array-field";
 const { fields: defaultFields } = getDefaultRegistry();
 const BaseArrayField = defaultFields.ArrayField;
@@ -69,6 +70,10 @@ export class ArrayField extends React.Component {
     handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
+        if (this.isDeepLeafChange(path)) {
+            this.handleDeepLeafChange(newData, path);
+            return;
+        }
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
@@ -98,8 +103,99 @@ export class ArrayField extends React.Component {
         }
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through here with the leaf value (not the full array) and a path that
+     * is deeper than this field's own path.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { formData, fieldPathId } = this.props;
+        return (Array.isArray(formData) &&
+            !!fieldPathId &&
+            path.length > fieldPathId.path.length);
+    }
+    /**
+     * Rebuild the affected item locally so we can (a) restore `undefined`
+     * when the leaf schema does not allow `null` — the built-in handler
+     * coerces `undefined` to `null`, which breaks field clearing for custom
+     * components — and (b) still run `resetDependentFields` at the item
+     * level so sibling fields that became obsolete for the new data are
+     * cleared.
+     * @param newData
+     * @param path
+     */
+    handleDeepLeafChange(newData, path) {
+        const { formData: oldData, fieldPathId } = this.props;
+        const [indexSegment, ...pathInItem] = path.slice(fieldPathId.path.length);
+        const index = Number(indexSegment);
+        const newArray = [...oldData];
+        newArray[index] = this.buildResetItem(newData, index, pathInItem);
+        this.props.onChange(newArray, fieldPathId.path);
+    }
+    buildResetItem(newData, index, pathInItem) {
+        const { formData: oldData, schema } = this.props;
+        const { rootSchema } = this.props.registry;
+        const itemSchema = (Array.isArray(schema.items) ? schema.items[index] : schema.items);
+        const leafSchema = getSchemaAtPath(itemSchema, pathInItem);
+        const value = newData === null && !schemaAllowsNull(leafSchema)
+            ? undefined
+            : newData;
+        const oldItem = oldData[index];
+        const newItem = setValueAtPath(oldItem, pathInItem, value);
+        return resetDependentFields(oldItem, newItem, itemSchema, rootSchema);
+    }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
         return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }
+function getSchemaAtPath(schema, pathSegments) {
+    let current = schema;
+    for (const segment of pathSegments) {
+        if (!current) {
+            return;
+        }
+        current = resolveSchemaSegment(current, segment);
+    }
+    return current;
+}
+function resolveSchemaSegment(schema, segment) {
+    var _a;
+    if (typeof segment === 'number') {
+        const items = schema.items;
+        return Array.isArray(items) ? items[segment] : items;
+    }
+    return (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[segment];
+}
+/**
+ * Return a copy of `target` with `value` written at the location described
+ * by `pathSegments`, creating intermediate containers as needed. Numeric
+ * segments address arrays; string segments address object keys. `target`
+ * is not mutated.
+ *
+ * @param target
+ * @param pathSegments
+ * @param value
+ * @example
+ * setValueAtPath({ a: { b: 1 } }, ['a', 'b'], 2); // → { a: { b: 2 } }
+ * setValueAtPath([{ x: 1 }], [0, 'x'], 9);        // → [{ x: 9 }]
+ */
+function setValueAtPath(target, pathSegments, value) {
+    if (pathSegments.length === 0) {
+        return value;
+    }
+    const clone = cloneContainer(target, pathSegments[0]);
+    set(clone, pathSegments, value);
+    return clone;
+}
+function cloneContainer(target, firstSegment) {
+    if (Array.isArray(target) || isPlainObject(target)) {
+        return cloneDeep(target);
+    }
+    if (typeof firstSegment === 'number') {
+        return [];
+    }
+    return {};
+}

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

@@ -69,3 +69,18 @@ export function isCustomObjectSchema(schema) {
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
+/**
+ * Check whether a schema permits `null` as a valid value. Used to decide
+ * whether a cleared field value should be preserved as `null` or converted
+ * to `undefined` so the property can be removed from the form data.
+ *
+ * @param schema - the schema to check
+ * @returns true if the schema's type is `'null'` or includes `'null'`
+ */
+export const schemaAllowsNull = (schema) => {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
+    if (!type) {
+        return false;
+    }
+    return Array.isArray(type) ? type.includes('null') : type === 'null';
+};

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

@@ -2,7 +2,7 @@ import React from "react";
 import { getDefaultRegistry } from "@rjsf/core";
 import { isEmpty } from "lodash-es";
 import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
-import { resetDependentFields } from "./field-helpers";
+import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { FieldTemplate } from "../templates";
 import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
@@ -34,7 +34,7 @@ const BaseSchemaField = defaultFields.SchemaField;
  * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema) => {
-    return value === null && !schema.type.includes('null');
+    return value === null && !schemaAllowsNull(schema);
 };
 const hasCustomComponent = (schema) => {
     var _a, _b;
@@ -121,9 +121,26 @@ export class SchemaField extends React.Component {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
+        if (this.isDeepLeafChange(path)) {
+            this.props.onChange(data, path);
+            return;
+        }
         const newData = resetDependentFields(formData, data, schema, rootSchema);
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through this SchemaField with a path that is deeper than its own.
+     * The enclosing ArrayField rebuilds the affected item and runs
+     * `resetDependentFields` at the item level (see array-field.ts), so we
+     * must pass the partial leaf data through untouched here.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { fieldPathId } = this.props;
+        return !!fieldPathId && path.length > fieldPathId.path.length;
+    }
     buildCustomComponentProps() {
         const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
         const schema = rawSchema;

package/dist/collection/components/form/form.test-schemas.js

@@ -306,3 +306,121 @@ export const nestedArrayObjectSchema = {
         },
     },
 };
+export const topLevelStringCustomComponentSchema = {
+    type: 'object',
+    properties: {
+        icon: {
+            type: 'string',
+            title: 'Icon',
+            lime: { component: { name: 'limel-input-field' } },
+        },
+    },
+};
+export const arrayItemWithDependenciesSchema = {
+    type: 'object',
+    properties: {
+        entries: {
+            type: 'array',
+            title: 'Entries',
+            items: {
+                type: 'object',
+                properties: {
+                    useA: {
+                        type: 'boolean',
+                        title: 'Use A',
+                    },
+                },
+                required: ['useA'],
+                dependencies: {
+                    useA: {
+                        oneOf: [
+                            {
+                                properties: {
+                                    useA: { const: true },
+                                    valueA: {
+                                        type: 'string',
+                                        title: 'Value A',
+                                    },
+                                },
+                            },
+                            {
+                                properties: {
+                                    useA: { const: false },
+                                    valueB: {
+                                        type: 'string',
+                                        title: 'Value B',
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    },
+};
+export const arrayItemWithDependenciesAndCustomConfigSchema = {
+    type: 'object',
+    properties: {
+        entries: {
+            type: 'array',
+            title: 'Entries',
+            items: {
+                type: 'object',
+                properties: {
+                    useA: {
+                        type: 'boolean',
+                        title: 'Use A',
+                    },
+                    config: {
+                        type: 'object',
+                        title: 'Config',
+                        additionalProperties: { type: 'string' },
+                        lime: {
+                            component: { name: 'limel-input-field' },
+                        },
+                    },
+                },
+                required: ['useA'],
+                dependencies: {
+                    useA: {
+                        oneOf: [
+                            {
+                                properties: {
+                                    useA: { const: true },
+                                    valueA: {
+                                        type: 'string',
+                                        title: 'Value A',
+                                    },
+                                },
+                            },
+                            {
+                                properties: { useA: { const: false } },
+                            },
+                        ],
+                    },
+                },
+                additionalProperties: true,
+            },
+        },
+    },
+};
+export const nestedStringCustomComponentSchema = {
+    type: 'object',
+    properties: {
+        views: {
+            type: 'array',
+            title: 'Views',
+            items: {
+                type: 'object',
+                properties: {
+                    icon: {
+                        type: 'string',
+                        title: 'Icon',
+                        lime: { component: { name: 'limel-input-field' } },
+                    },
+                },
+            },
+        },
+    },
+};

package/dist/esm/limel-form.entry.js

@@ -39811,6 +39811,21 @@ function isCustomObjectSchema(schema) {
 function isAdditionalProperty(schema) {
     return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
+/**
+ * Check whether a schema permits `null` as a valid value. Used to decide
+ * whether a cleared field value should be preserved as `null` or converted
+ * to `undefined` so the property can be removed from the form data.
+ *
+ * @param schema - the schema to check
+ * @returns true if the schema's type is `'null'` or includes `'null'`
+ */
+const schemaAllowsNull = (schema) => {
+    const type = schema === null || schema === void 0 ? void 0 : schema.type;
+    if (!type) {
+        return false;
+    }
+    return Array.isArray(type) ? type.includes('null') : type === 'null';
+};
 
 /**
  * A widget is a concept in react-jsonschema-form (rjsf).
@@ -40005,7 +40020,7 @@ const BaseSchemaField = defaultFields$2.SchemaField;
  * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema) => {
-    return value === null && !schema.type.includes('null');
+    return value === null && !schemaAllowsNull(schema);
 };
 const hasCustomComponent = (schema) => {
     var _a, _b;
@@ -40092,9 +40107,26 @@ class SchemaField extends React.Component {
         const { formData, schema } = this.props;
         const { rootSchema } = this.props.registry;
         this.setState({ modified: true });
+        if (this.isDeepLeafChange(path)) {
+            this.props.onChange(data, path);
+            return;
+        }
         const newData = resetDependentFields(formData, data, schema, rootSchema);
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through this SchemaField with a path that is deeper than its own.
+     * The enclosing ArrayField rebuilds the affected item and runs
+     * `resetDependentFields` at the item level (see array-field.ts), so we
+     * must pass the partial leaf data through untouched here.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { fieldPathId } = this.props;
+        return !!fieldPathId && path.length > fieldPathId.path.length;
+    }
     buildCustomComponentProps() {
         const { disabled, readonly, name, registry, schema: rawSchema, errorSchema, fieldPathId, } = this.props;
         const schema = rawSchema;
@@ -40206,6 +40238,10 @@ class ArrayField extends React.Component {
     handleChange(newData, path) {
         const { formData: oldData, schema } = this.props;
         const { rootSchema } = this.props.registry;
+        if (this.isDeepLeafChange(path)) {
+            this.handleDeepLeafChange(newData, path);
+            return;
+        }
         // This case handles when the first list item is added. When there are no
         // items we get undefined instead of []
         if (!oldData) {
@@ -40235,11 +40271,102 @@ class ArrayField extends React.Component {
         }
         this.props.onChange(newData, path);
     }
+    /**
+     * RJSF v6's built-in ArrayField shares one onChange handler across all
+     * descendants, so changes to leaves deep inside an array item bubble
+     * through here with the leaf value (not the full array) and a path that
+     * is deeper than this field's own path.
+     * @param path
+     */
+    isDeepLeafChange(path) {
+        const { formData, fieldPathId } = this.props;
+        return (Array.isArray(formData) &&
+            !!fieldPathId &&
+            path.length > fieldPathId.path.length);
+    }
+    /**
+     * Rebuild the affected item locally so we can (a) restore `undefined`
+     * when the leaf schema does not allow `null` — the built-in handler
+     * coerces `undefined` to `null`, which breaks field clearing for custom
+     * components — and (b) still run `resetDependentFields` at the item
+     * level so sibling fields that became obsolete for the new data are
+     * cleared.
+     * @param newData
+     * @param path
+     */
+    handleDeepLeafChange(newData, path) {
+        const { formData: oldData, fieldPathId } = this.props;
+        const [indexSegment, ...pathInItem] = path.slice(fieldPathId.path.length);
+        const index = Number(indexSegment);
+        const newArray = [...oldData];
+        newArray[index] = this.buildResetItem(newData, index, pathInItem);
+        this.props.onChange(newArray, fieldPathId.path);
+    }
+    buildResetItem(newData, index, pathInItem) {
+        const { formData: oldData, schema } = this.props;
+        const { rootSchema } = this.props.registry;
+        const itemSchema = (Array.isArray(schema.items) ? schema.items[index] : schema.items);
+        const leafSchema = getSchemaAtPath(itemSchema, pathInItem);
+        const value = newData === null && !schemaAllowsNull(leafSchema)
+            ? undefined
+            : newData;
+        const oldItem = oldData[index];
+        const newItem = setValueAtPath(oldItem, pathInItem, value);
+        return resetDependentFields(oldItem, newItem, itemSchema, rootSchema);
+    }
     render() {
         const arrayProps = Object.assign(Object.assign({}, this.props), { onChange: this.handleChange });
         return React.createElement('div', { ref: this.setWrapper }, React.createElement(BaseArrayField, arrayProps));
     }
 }
+function getSchemaAtPath(schema, pathSegments) {
+    let current = schema;
+    for (const segment of pathSegments) {
+        if (!current) {
+            return;
+        }
+        current = resolveSchemaSegment(current, segment);
+    }
+    return current;
+}
+function resolveSchemaSegment(schema, segment) {
+    var _a;
+    if (typeof segment === 'number') {
+        const items = schema.items;
+        return Array.isArray(items) ? items[segment] : items;
+    }
+    return (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[segment];
+}
+/**
+ * Return a copy of `target` with `value` written at the location described
+ * by `pathSegments`, creating intermediate containers as needed. Numeric
+ * segments address arrays; string segments address object keys. `target`
+ * is not mutated.
+ *
+ * @param target
+ * @param pathSegments
+ * @param value
+ * @example
+ * setValueAtPath({ a: { b: 1 } }, ['a', 'b'], 2); // → { a: { b: 2 } }
+ * setValueAtPath([{ x: 1 }], [0, 'x'], 9);        // → [{ x: 9 }]
+ */
+function setValueAtPath(target, pathSegments, value) {
+    if (pathSegments.length === 0) {
+        return value;
+    }
+    const clone = cloneContainer(target, pathSegments[0]);
+    set(clone, pathSegments, value);
+    return clone;
+}
+function cloneContainer(target, firstSegment) {
+    if (Array.isArray(target) || isPlainObject(target)) {
+        return cloneDeep(target);
+    }
+    if (typeof firstSegment === 'number') {
+        return [];
+    }
+    return {};
+}
 
 class CodeEditor extends React.Component {
     constructor(props) {