@limetech/lime-elements 40.17.1 → 40.18.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [40.18.1](https://github.com/Lundalogik/lime-elements/compare/v40.18.0...v40.18.1) (2026-10-30)
+
+### Bug Fixes
+
+
+* **form:** keep a highlighted field in view while the form grows ([41055e0](https://github.com/Lundalogik/lime-elements/commit/41055e0782a19bb7eed1de450ea93b950741d222))
+
+## [40.18.0](https://github.com/Lundalogik/lime-elements/compare/v40.17.1...v40.18.0) (2026-10-29)
+
+### Features
+
+
+* **form:** let the form draw the header of a custom component ([4933ff8](https://github.com/Lundalogik/lime-elements/commit/4933ff81471f0e2cb2a695eb4941d56c632eb2ec))
+
 ## [40.17.1](https://github.com/Lundalogik/lime-elements/compare/v40.17.0...v40.17.1) (2026-10-29)
 
 ### Bug Fixes

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

@@ -45349,6 +45349,10 @@ class SchemaField extends React.Component {
         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);
     }
+    hasHeaderFromForm(schema) {
+        var _a, _b;
+        return ((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.showHeader) === true && !this.context;
+    }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
         event.stopPropagation();
@@ -45407,7 +45411,9 @@ class SchemaField extends React.Component {
         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: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
+        const hasHeader = this.hasHeaderFromForm(schema);
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), hasHeader &&
+            renderHeader(schema.title, schema.description, schema.lime.help), component, !hasHeader && getHelpComponent(schema));
     }
     render() {
         var _a;
@@ -46019,7 +46025,10 @@ var reactDomExports = requireReactDom();
 const HIGHLIGHT_CLASS = 'limel-form-field--highlighted';
 const STABLE_FRAMES = 3;
 const MAX_SETTLE_MS = 2000;
+const FOLLOW_MS = 3000;
 const MAX_RENDER_FRAMES = 30;
+const USER_INPUT_EVENTS = ['wheel', 'touchmove', 'pointerdown', 'keydown'];
+const stopFollowing = new WeakMap();
 /**
  * Open what is closed above a field, scroll it into view, focus it and
  * highlight it.
@@ -46047,14 +46056,48 @@ async function showField(root, path) {
     // around it opened, before the field is where it will stay.
     const focusTarget = await getFocusTarget.getFocusTarget(target);
     await waitForLayoutToSettle(target);
-    target.scrollIntoView({
+    const scrollToTarget = () => target.scrollIntoView({
         block: 'center',
         behavior: prefersReducedMotion() ? 'instant' : 'smooth',
     });
+    scrollToTarget();
     focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus({ preventScroll: true });
+    keepInViewWhileFormGrows(root, scrollToTarget);
     await waitForLayoutToSettle(target);
     highlight(target);
 }
+// What the form draws a while later, such as a custom component that loads
+// its code, can move the field after it was scrolled to. Follow the field for
+// a while, until the user takes over.
+function keepInViewWhileFormGrows(root, scrollToTarget) {
+    stopShowingField(root);
+    const observer = new ResizeObserver(scrollToTarget);
+    const stop = () => {
+        observer.disconnect();
+        clearTimeout(deadline);
+        stopFollowing.delete(root);
+        for (const type of USER_INPUT_EVENTS) {
+            window.removeEventListener(type, stop, true);
+        }
+    };
+    const deadline = setTimeout(stop, FOLLOW_MS);
+    stopFollowing.set(root, stop);
+    for (const type of USER_INPUT_EVENTS) {
+        window.addEventListener(type, stop, { capture: true, passive: true });
+    }
+    observer.observe(root);
+}
+/**
+ * Stop keeping the field that was shown last in view.
+ *
+ * @param root - the element the form is rendered in
+ */
+function stopShowingField(root) {
+    var _a;
+    if (root) {
+        (_a = stopFollowing.get(root)) === null || _a === void 0 ? void 0 : _a();
+    }
+}
 function findByPath(root, path) {
     const schemaPath = toSchemaPath(path.map(String));
     return root.querySelector(`[data-schema-path="${CSS.escape(schemaPath)}"]`);
@@ -46200,9 +46243,11 @@ const Form = class {
     }
     handleHighlightedFieldChange(newPath, oldPath) {
         // A host that renders again passes an equal path in a new array.
-        if (!isEqual.isEqual(newPath, oldPath)) {
-            this.showHighlightedField();
+        if (isEqual.isEqual(newPath, oldPath)) {
+            return;
         }
+        stopShowingField(this.rootElement);
+        this.showHighlightedField();
     }
     initialize() {
         if (this.initialized || !this.host.shadowRoot.querySelector('.root')) {
@@ -46217,6 +46262,7 @@ const Form = class {
         this.validateFormData();
     }
     disconnectedCallback() {
+        stopShowingField(this.rootElement);
         if (this.root) {
             this.root.unmount();
             this.root = undefined;
@@ -46224,7 +46270,7 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return index.h("div", { key: 'e986502a86c34465c7e3f2af89372e00809e4705', class: "root" });
+        return index.h("div", { key: '74e2b0c57dd6acb08ebb364220cb4f2e6fbe1733', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -46279,8 +46325,10 @@ const Form = class {
         if (!this.highlightedField) {
             return;
         }
-        const root = this.host.shadowRoot.querySelector('.root');
-        void showField(root, this.highlightedField);
+        void showField(this.rootElement, this.highlightedField);
+    }
+    get rootElement() {
+        return this.host.shadowRoot.querySelector('.root');
     }
     handleChange(event) {
         this.change.emit(event.formData);

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

@@ -4,6 +4,7 @@ import { isEmpty } from "lodash-es";
 import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
 import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { FieldTemplate } from "../templates";
+import { renderHeader } from "../templates/common";
 import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
 import { isIntegerType, isNumberType } from "../schema";
@@ -111,6 +112,10 @@ export class SchemaField extends React.Component {
         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);
     }
+    hasHeaderFromForm(schema) {
+        var _a, _b;
+        return ((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.showHeader) === true && !this.context;
+    }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
         event.stopPropagation();
@@ -169,7 +174,9 @@ export class SchemaField extends React.Component {
         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: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
+        const hasHeader = this.hasHeaderFromForm(schema);
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), hasHeader &&
+            renderHeader(schema.title, schema.description, schema.lime.help), component, !hasHeader && getHelpComponent(schema));
     }
     render() {
         var _a;

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

@@ -22,7 +22,7 @@ import { ObjectField as CustomObjectField } from "./fields/object-field";
 import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
 import { isEqual, mapValues } from "lodash-es";
-import { showField } from "./show-field";
+import { showField, stopShowingField } from "./show-field";
 import { HeadingLevelContext } from "./templates/heading-level";
 /**
  * @exampleComponent limel-example-form
@@ -30,6 +30,7 @@ import { HeadingLevelContext } from "./templates/heading-level";
  * @exampleComponent limel-example-list-form
  * @exampleComponent limel-example-dynamic-form
  * @exampleComponent limel-example-custom-component-form
+ * @exampleComponent limel-example-custom-component-header-form
  * @exampleComponent limel-example-props-factory-form
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
@@ -97,9 +98,11 @@ export class Form {
     }
     handleHighlightedFieldChange(newPath, oldPath) {
         // A host that renders again passes an equal path in a new array.
-        if (!isEqual(newPath, oldPath)) {
-            this.showHighlightedField();
+        if (isEqual(newPath, oldPath)) {
+            return;
         }
+        stopShowingField(this.rootElement);
+        this.showHighlightedField();
     }
     initialize() {
         if (this.initialized || !this.host.shadowRoot.querySelector('.root')) {
@@ -114,6 +117,7 @@ export class Form {
         this.validateFormData();
     }
     disconnectedCallback() {
+        stopShowingField(this.rootElement);
         if (this.root) {
             this.root.unmount();
             this.root = undefined;
@@ -121,7 +125,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: 'e986502a86c34465c7e3f2af89372e00809e4705', class: "root" });
+        return h("div", { key: '74e2b0c57dd6acb08ebb364220cb4f2e6fbe1733', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -176,8 +180,10 @@ export class Form {
         if (!this.highlightedField) {
             return;
         }
-        const root = this.host.shadowRoot.querySelector('.root');
-        void showField(root, this.highlightedField);
+        void showField(this.rootElement, this.highlightedField);
+    }
+    get rootElement() {
+        return this.host.shadowRoot.querySelector('.root');
     }
     handleChange(event) {
         this.change.emit(event.formData);

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

@@ -322,6 +322,92 @@ export const customComponentSchema = {
         },
     },
 };
+export const customComponentWithHeaderSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            description: 'Turns the feature on',
+            lime: {
+                help: 'Read more about the feature',
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+        section: {
+            type: 'object',
+            title: 'Section',
+            properties: {
+                nested: {
+                    type: 'boolean',
+                    title: 'Nested',
+                    lime: {
+                        component: {
+                            name: 'limel-switch',
+                            showHeader: true,
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+export const requiredCustomComponentWithHeaderSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            description: 'Turns the feature on',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+    },
+    required: ['name', 'enabled'],
+};
+export const customComponentWithHelpSchema = {
+    type: 'object',
+    properties: {
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            lime: {
+                help: 'Read more about the feature',
+                component: { name: 'limel-switch' },
+            },
+        },
+    },
+};
+export const rowLayoutWithCustomComponentHeaderSchema = {
+    type: 'object',
+    properties: {
+        active: {
+            type: 'boolean',
+            title: 'Active',
+            description: 'Active description',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};
 export const undefinedComponentSchema = {
     type: 'object',
     properties: {

package/dist/collection/components/form/show-field.js

@@ -4,7 +4,10 @@ import { getFocusTarget } from "../../util/get-focus-target";
 const HIGHLIGHT_CLASS = 'limel-form-field--highlighted';
 const STABLE_FRAMES = 3;
 const MAX_SETTLE_MS = 2000;
+const FOLLOW_MS = 3000;
 const MAX_RENDER_FRAMES = 30;
+const USER_INPUT_EVENTS = ['wheel', 'touchmove', 'pointerdown', 'keydown'];
+const stopFollowing = new WeakMap();
 /**
  * Open what is closed above a field, scroll it into view, focus it and
  * highlight it.
@@ -32,14 +35,48 @@ export async function showField(root, path) {
     // around it opened, before the field is where it will stay.
     const focusTarget = await getFocusTarget(target);
     await waitForLayoutToSettle(target);
-    target.scrollIntoView({
+    const scrollToTarget = () => target.scrollIntoView({
         block: 'center',
         behavior: prefersReducedMotion() ? 'instant' : 'smooth',
     });
+    scrollToTarget();
     focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus({ preventScroll: true });
+    keepInViewWhileFormGrows(root, scrollToTarget);
     await waitForLayoutToSettle(target);
     highlight(target);
 }
+// What the form draws a while later, such as a custom component that loads
+// its code, can move the field after it was scrolled to. Follow the field for
+// a while, until the user takes over.
+function keepInViewWhileFormGrows(root, scrollToTarget) {
+    stopShowingField(root);
+    const observer = new ResizeObserver(scrollToTarget);
+    const stop = () => {
+        observer.disconnect();
+        clearTimeout(deadline);
+        stopFollowing.delete(root);
+        for (const type of USER_INPUT_EVENTS) {
+            window.removeEventListener(type, stop, true);
+        }
+    };
+    const deadline = setTimeout(stop, FOLLOW_MS);
+    stopFollowing.set(root, stop);
+    for (const type of USER_INPUT_EVENTS) {
+        window.addEventListener(type, stop, { capture: true, passive: true });
+    }
+    observer.observe(root);
+}
+/**
+ * Stop keeping the field that was shown last in view.
+ *
+ * @param root - the element the form is rendered in
+ */
+export function stopShowingField(root) {
+    var _a;
+    if (root) {
+        (_a = stopFollowing.get(root)) === null || _a === void 0 ? void 0 : _a();
+    }
+}
 function findByPath(root, path) {
     const schemaPath = toSchemaPath(path.map(String));
     return root.querySelector(`[data-schema-path="${CSS.escape(schemaPath)}"]`);

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

@@ -45347,6 +45347,10 @@ class SchemaField extends React.Component {
         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);
     }
+    hasHeaderFromForm(schema) {
+        var _a, _b;
+        return ((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.showHeader) === true && !this.context;
+    }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
         event.stopPropagation();
@@ -45405,7 +45409,9 @@ class SchemaField extends React.Component {
         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: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
+        const hasHeader = this.hasHeaderFromForm(schema);
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), hasHeader &&
+            renderHeader(schema.title, schema.description, schema.lime.help), component, !hasHeader && getHelpComponent(schema));
     }
     render() {
         var _a;
@@ -46017,7 +46023,10 @@ var reactDomExports = requireReactDom();
 const HIGHLIGHT_CLASS = 'limel-form-field--highlighted';
 const STABLE_FRAMES = 3;
 const MAX_SETTLE_MS = 2000;
+const FOLLOW_MS = 3000;
 const MAX_RENDER_FRAMES = 30;
+const USER_INPUT_EVENTS = ['wheel', 'touchmove', 'pointerdown', 'keydown'];
+const stopFollowing = new WeakMap();
 /**
  * Open what is closed above a field, scroll it into view, focus it and
  * highlight it.
@@ -46045,14 +46054,48 @@ async function showField(root, path) {
     // around it opened, before the field is where it will stay.
     const focusTarget = await getFocusTarget(target);
     await waitForLayoutToSettle(target);
-    target.scrollIntoView({
+    const scrollToTarget = () => target.scrollIntoView({
         block: 'center',
         behavior: prefersReducedMotion() ? 'instant' : 'smooth',
     });
+    scrollToTarget();
     focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus({ preventScroll: true });
+    keepInViewWhileFormGrows(root, scrollToTarget);
     await waitForLayoutToSettle(target);
     highlight(target);
 }
+// What the form draws a while later, such as a custom component that loads
+// its code, can move the field after it was scrolled to. Follow the field for
+// a while, until the user takes over.
+function keepInViewWhileFormGrows(root, scrollToTarget) {
+    stopShowingField(root);
+    const observer = new ResizeObserver(scrollToTarget);
+    const stop = () => {
+        observer.disconnect();
+        clearTimeout(deadline);
+        stopFollowing.delete(root);
+        for (const type of USER_INPUT_EVENTS) {
+            window.removeEventListener(type, stop, true);
+        }
+    };
+    const deadline = setTimeout(stop, FOLLOW_MS);
+    stopFollowing.set(root, stop);
+    for (const type of USER_INPUT_EVENTS) {
+        window.addEventListener(type, stop, { capture: true, passive: true });
+    }
+    observer.observe(root);
+}
+/**
+ * Stop keeping the field that was shown last in view.
+ *
+ * @param root - the element the form is rendered in
+ */
+function stopShowingField(root) {
+    var _a;
+    if (root) {
+        (_a = stopFollowing.get(root)) === null || _a === void 0 ? void 0 : _a();
+    }
+}
 function findByPath(root, path) {
     const schemaPath = toSchemaPath(path.map(String));
     return root.querySelector(`[data-schema-path="${CSS.escape(schemaPath)}"]`);
@@ -46198,9 +46241,11 @@ const Form = class {
     }
     handleHighlightedFieldChange(newPath, oldPath) {
         // A host that renders again passes an equal path in a new array.
-        if (!isEqual(newPath, oldPath)) {
-            this.showHighlightedField();
+        if (isEqual(newPath, oldPath)) {
+            return;
         }
+        stopShowingField(this.rootElement);
+        this.showHighlightedField();
     }
     initialize() {
         if (this.initialized || !this.host.shadowRoot.querySelector('.root')) {
@@ -46215,6 +46260,7 @@ const Form = class {
         this.validateFormData();
     }
     disconnectedCallback() {
+        stopShowingField(this.rootElement);
         if (this.root) {
             this.root.unmount();
             this.root = undefined;
@@ -46222,7 +46268,7 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return h$1("div", { key: 'e986502a86c34465c7e3f2af89372e00809e4705', class: "root" });
+        return h$1("div", { key: '74e2b0c57dd6acb08ebb364220cb4f2e6fbe1733', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -46277,8 +46323,10 @@ const Form = class {
         if (!this.highlightedField) {
             return;
         }
-        const root = this.host.shadowRoot.querySelector('.root');
-        void showField(root, this.highlightedField);
+        void showField(this.rootElement, this.highlightedField);
+    }
+    get rootElement() {
+        return this.host.shadowRoot.querySelector('.root');
     }
     handleChange(event) {
         this.change.emit(event.formData);