@elementor/editor-canvas 4.0.0-551 → 4.0.0-564

package/dist/index.mjs

@@ -1204,6 +1204,11 @@ var dateTimeTransformer = createTransformer((values) => {
   }).join(" ");
 });
 
+// src/transformers/settings/html-v2-transformer.ts
+var htmlV2Transformer = createTransformer((value) => {
+  return value?.content ?? "";
+});
+
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank, tag }) => {
   return {
@@ -1258,7 +1263,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -1723,9 +1728,9 @@ function createElementViewClassDeclaration() {
 import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
 
 // src/legacy/twig-rendering-utils.ts
-function setupTwigRenderer({ renderer, element }) {
+function createTwigRenderState({ renderer, element }) {
   const templateKey = element.twig_main_template;
-  const baseStylesDictionary = element.base_styles_dictionary;
+  const cacheState = createRenderCacheState();
   Object.entries(element.twig_templates).forEach(([key, template]) => {
     renderer.register(key, template);
   });
@@ -1733,7 +1738,7 @@ function setupTwigRenderer({ renderer, element }) {
     transformers: settingsTransformersRegistry,
     schema: element.atomic_props_schema
   });
-  return { templateKey, baseStylesDictionary, resolveProps };
+  return { templateKey, resolveProps, renderer, cacheState };
 }
 function createBeforeRender(view) {
   view._ensureViewIsIntact();
@@ -1746,47 +1751,91 @@ function createAfterRender(view) {
   view.isRendered = true;
   view.triggerMethod("render", view);
 }
+function createRenderCacheState() {
+  return {
+    lastResolvedSettingsHash: null,
+    domUpdateWasSkipped: false,
+    invalidate() {
+      this.lastResolvedSettingsHash = null;
+      this.domUpdateWasSkipped = false;
+    }
+  };
+}
 async function renderTwigTemplate({
   view,
   signal,
-  resolveProps,
-  templateKey,
-  baseStylesDictionary,
-  type,
-  renderer,
+  renderState,
   buildContext,
-  attachContent
+  attachContent,
+  afterSettingsResolve
 }) {
   view.triggerMethod("before:render:template");
-  if (signal.aborted) {
+  const { resolveProps, cacheState, renderer, templateKey } = renderState;
+  if (signal?.aborted) {
     return;
   }
   const settings = view.model.get("settings").toJSON();
-  const resolvedSettings = await resolveProps({
+  let resolvedSettings = await resolveProps({
     props: settings,
     signal,
     renderContext: view.getResolverRenderContext?.()
   });
-  if (signal.aborted) {
+  if (signal?.aborted) {
     return;
   }
-  let context = {
-    id: view.model.get("id"),
-    type,
-    settings: resolvedSettings,
-    base_styles: baseStylesDictionary
-  };
-  if (buildContext) {
-    context = buildContext(context);
+  if (afterSettingsResolve) {
+    resolvedSettings = afterSettingsResolve(resolvedSettings);
+  }
+  const settingsHash = JSON.stringify(resolvedSettings);
+  const settingsChanged = settingsHash !== cacheState.lastResolvedSettingsHash;
+  if (!settingsChanged && view.isRendered) {
+    cacheState.domUpdateWasSkipped = true;
+    view.bindUIElements();
+    view.triggerMethod("render:template");
+    return;
   }
+  cacheState.domUpdateWasSkipped = false;
+  cacheState.lastResolvedSettingsHash = settingsHash;
+  const context = buildContext(resolvedSettings);
   const html = await renderer.render(templateKey, context);
-  if (signal.aborted) {
+  if (signal?.aborted) {
     return;
   }
   attachContent(html);
   view.bindUIElements();
   view.triggerMethod("render:template");
 }
+function collectChildrenRenderPromises(children) {
+  const promises = [];
+  children?.each((childView) => {
+    if (childView._currentRenderPromise) {
+      promises.push(childView._currentRenderPromise);
+    }
+  });
+  return promises;
+}
+async function renderChildrenWithOptimization({
+  children,
+  domUpdateWasSkipped,
+  renderChildren
+}) {
+  const shouldReuseChildren = domUpdateWasSkipped && !!children?.length;
+  if (shouldReuseChildren) {
+    rerenderExistingChildViews(children);
+  } else {
+    renderChildren();
+  }
+  const promises = collectChildrenRenderPromises(children);
+  await waitForChildrenToComplete(promises);
+}
+function rerenderExistingChildViews(children) {
+  children?.each((childView) => childView.render());
+}
+async function waitForChildrenToComplete(promises) {
+  if (promises.length > 0) {
+    await Promise.all(promises);
+  }
+}
 
 // src/legacy/create-templated-element-type.ts
 function canBeTemplated(element) {
@@ -1798,16 +1847,9 @@ function createTemplatedElementView({
   element
 }) {
   const BaseView = createElementViewClassDeclaration();
-  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
-    type,
-    renderer,
-    element
-  });
+  const renderState = createTwigRenderState({ renderer, element });
   return class extends BaseView {
-    #abortController = null;
-    #childrenRenderPromises = [];
-    #lastResolvedSettingsHash = null;
-    #domUpdateWasSkipped = false;
+    _abortController = null;
     getTemplateType() {
       return "twig";
     }
@@ -1824,81 +1866,36 @@ function createTemplatedElementView({
       return this._parent?.getResolverRenderContext?.();
     }
     invalidateRenderCache() {
-      this.#lastResolvedSettingsHash = null;
+      renderState.cacheState.invalidate();
     }
     render() {
-      this.#abortController?.abort();
-      this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
+      this._abortController?.abort();
+      this._abortController = new AbortController();
+      const process = signalizedProcess(this._abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
       this._currentRenderPromise = process.execute();
       return this._currentRenderPromise;
     }
     async _renderChildren() {
-      this.#childrenRenderPromises = [];
-      if (this.#shouldReuseChildren()) {
-        this.#rerenderExistingChildren();
-      } else {
-        super._renderChildren();
-      }
-      this.#collectChildrenRenderPromises();
-      await this._waitForChildrenToComplete();
-    }
-    #shouldReuseChildren() {
-      return this.#domUpdateWasSkipped && this.children?.length > 0;
-    }
-    #rerenderExistingChildren() {
-      this.children?.each((childView) => {
-        childView.render();
+      await renderChildrenWithOptimization({
+        children: this.children,
+        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+        renderChildren: () => super._renderChildren()
       });
     }
-    #collectChildrenRenderPromises() {
-      this.children?.each((childView) => {
-        if (childView._currentRenderPromise) {
-          this.#childrenRenderPromises.push(childView._currentRenderPromise);
-        }
-      });
-    }
-    async _waitForChildrenToComplete() {
-      if (this.#childrenRenderPromises.length > 0) {
-        await Promise.all(this.#childrenRenderPromises);
-      }
-    }
     async _renderTemplate() {
-      this.triggerMethod("before:render:template");
-      const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
-        const settings = this.model.get("settings").toJSON();
-        return resolveProps({
-          props: settings,
-          signal,
-          renderContext: this.getResolverRenderContext()
-        });
-      }).then((settings) => {
-        return this.afterSettingsResolve(settings);
-      }).then(async (settings) => {
-        const settingsHash = JSON.stringify(settings);
-        const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
-        if (!settingsChanged && this.isRendered) {
-          this.#domUpdateWasSkipped = true;
-          return null;
-        }
-        this.#domUpdateWasSkipped = false;
-        this.#lastResolvedSettingsHash = settingsHash;
-        const context = {
+      await renderTwigTemplate({
+        view: this,
+        signal: this._abortController?.signal,
+        renderState,
+        buildContext: (resolvedSettings) => ({
           id: this.model.get("id"),
           type,
-          settings,
-          base_styles: baseStylesDictionary
-        };
-        return renderer.render(templateKey, context);
-      }).then((html) => {
-        if (html === null) {
-          return;
-        }
-        this.$el.html(html);
+          settings: resolvedSettings,
+          base_styles: element.base_styles_dictionary
+        }),
+        attachContent: (html) => this.$el.html(html),
+        afterSettingsResolve: (settings) => this.afterSettingsResolve(settings)
       });
-      await process.execute();
-      this.bindUIElements();
-      this.triggerMethod("render:template");
     }
     afterSettingsResolve(settings) {
       return settings;
@@ -1969,11 +1966,7 @@ function createNestedTemplatedElementView({
   element
 }) {
   const legacyWindow = window;
-  const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer({
-    type,
-    renderer,
-    element
-  });
+  const renderState = createTwigRenderState({ renderer, element });
   const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase(type);
   const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
   const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
@@ -1983,6 +1976,9 @@ function createNestedTemplatedElementView({
     getTemplateType() {
       return "twig";
     },
+    invalidateRenderCache() {
+      renderState.cacheState.invalidate();
+    },
     render() {
       this._abortController?.abort();
       this._abortController = new AbortController();
@@ -2010,13 +2006,12 @@ function createNestedTemplatedElementView({
       await renderTwigTemplate({
         view: this,
         signal: this._abortController?.signal,
-        resolveProps,
-        templateKey,
-        baseStylesDictionary,
-        type,
-        renderer,
-        buildContext: (context) => ({
-          ...context,
+        renderState,
+        buildContext: (resolvedSettings) => ({
+          id: model.get("id"),
+          type,
+          settings: resolvedSettings,
+          base_styles: element.base_styles_dictionary,
           editor_attributes: buildEditorAttributes(model),
           editor_classes: buildEditorClasses(model)
         }),
@@ -2046,14 +2041,11 @@ function createNestedTemplatedElementView({
       oldEl.innerHTML = overlayHTML + newEl.innerHTML;
     },
     async _renderChildren() {
-      parentRenderChildren.call(this);
-      const renderPromises = [];
-      this.children.each((childView) => {
-        if (childView._currentRenderPromise) {
-          renderPromises.push(childView._currentRenderPromise);
-        }
+      await renderChildrenWithOptimization({
+        children: this.children,
+        domUpdateWasSkipped: renderState.cacheState.domUpdateWasSkipped,
+        renderChildren: () => parentRenderChildren.call(this)
       });
-      await Promise.all(renderPromises);
       this._removeChildrenPlaceholder();
     },
     _removeChildrenPlaceholder() {
@@ -2136,7 +2128,11 @@ function createNestedTemplatedElementView({
 import * as React6 from "react";
 import { createRoot } from "react-dom/client";
 import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
-import { htmlPropTypeUtil as htmlPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
+import {
+  htmlV2PropTypeUtil as htmlV2PropTypeUtil2,
+  parseHtmlChildren,
+  stringPropTypeUtil as stringPropTypeUtil2
+} from "@elementor/editor-props";
 import { __privateRunCommandSync as runCommandSync, getCurrentEditMode, undoable } from "@elementor/editor-v1-adapters";
 import { __ as __3 } from "@wordpress/i18n";
 
@@ -2259,9 +2255,6 @@ var CanvasInlineEditor = ({
   };
   useOnClickOutsideIframe(onBlur);
   return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
-			.${EDITOR_WRAPPER_SELECTOR}, .${EDITOR_WRAPPER_SELECTOR} > * {
-				height: 100%;
-			}
 			.ProseMirror > * {
 				height: 100%;
 			}
@@ -2385,12 +2378,13 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-import { htmlPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import { htmlV2PropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
 var hasKey = (propType) => {
   return "key" in propType;
 };
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([htmlV2PropTypeUtil.key, stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
-  return key === htmlPropTypeUtil.key || key === stringPropTypeUtil.key;
+  return TEXT_PROP_TYPE_KEYS.has(key);
 };
 var isAllowedBySchema = (propTypeFromSchema) => {
   if (!propTypeFromSchema) {
@@ -2402,15 +2396,13 @@ var isAllowedBySchema = (propTypeFromSchema) => {
   if (propTypeFromSchema.kind !== "union") {
     return false;
   }
-  return Boolean(
-    propTypeFromSchema.prop_types[htmlPropTypeUtil.key] || propTypeFromSchema.prop_types[stringPropTypeUtil.key]
-  );
+  return [...TEXT_PROP_TYPE_KEYS].some((key) => propTypeFromSchema.prop_types[key]);
 };
 var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return htmlPropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
+  return htmlV2PropTypeUtil.isValid(rawValue) || stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -2495,11 +2487,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    return htmlPropTypeUtil2.extract(propValue) ?? "";
+    return htmlV2PropTypeUtil2.extract(propValue)?.content ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
-    const valueToSave = htmlPropTypeUtil2.create(value || "");
+    const html = value || "";
+    const parsed = parseHtmlChildren(html);
+    const valueToSave = htmlV2PropTypeUtil2.create({
+      content: parsed.content || null,
+      children: parsed.children
+    });
     undoable(
       {
         do: () => {
@@ -2528,11 +2525,11 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      if (propType.prop_types[htmlPropTypeUtil2.key]) {
-        return htmlPropTypeUtil2.key;
-      }
-      if (propType.prop_types[stringPropTypeUtil2.key]) {
-        return stringPropTypeUtil2.key;
+      const textKeys = [htmlV2PropTypeUtil2.key, stringPropTypeUtil2.key];
+      for (const key of textKeys) {
+        if (propType.prop_types[key]) {
+          return key;
+        }
       }
       return null;
     }
@@ -2753,7 +2750,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-import { htmlPropTypeUtil as htmlPropTypeUtil3 } from "@elementor/editor-props";
+import { htmlV2PropTypeUtil as htmlV2PropTypeUtil3 } from "@elementor/editor-props";
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -2769,7 +2766,7 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: htmlPropTypeUtil3.create(`Tab ${position}`)
+        paragraph: htmlV2PropTypeUtil3.create({ content: `Tab ${position}`, children: [] })
       }
     };
     return [updatedParagraph, ...elements.slice(1)];
@@ -3443,7 +3440,7 @@ var outputSchema = {
   xmlStructure: z.string().describe(
     "The built XML structure as a string. Must use this XML after completion of building the composition, it contains real IDs."
   ).optional(),
-  llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!")
+  llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!").optional()
 };
 
 // src/mcp/tools/build-composition/tool.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.0.0-551",
+  "version": "4.0.0-564",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-551",
-    "@elementor/editor-controls": "4.0.0-551",
-    "@elementor/editor-documents": "4.0.0-551",
-    "@elementor/editor-elements": "4.0.0-551",
-    "@elementor/editor-interactions": "4.0.0-551",
-    "@elementor/editor-mcp": "4.0.0-551",
-    "@elementor/editor-notifications": "4.0.0-551",
-    "@elementor/editor-props": "4.0.0-551",
-    "@elementor/editor-responsive": "4.0.0-551",
-    "@elementor/editor-styles": "4.0.0-551",
-    "@elementor/editor-styles-repository": "4.0.0-551",
-    "@elementor/editor-ui": "4.0.0-551",
-    "@elementor/editor-v1-adapters": "4.0.0-551",
-    "@elementor/schema": "4.0.0-551",
-    "@elementor/twing": "4.0.0-551",
+    "@elementor/editor": "4.0.0-564",
+    "@elementor/editor-controls": "4.0.0-564",
+    "@elementor/editor-documents": "4.0.0-564",
+    "@elementor/editor-elements": "4.0.0-564",
+    "@elementor/editor-interactions": "4.0.0-564",
+    "@elementor/editor-mcp": "4.0.0-564",
+    "@elementor/editor-notifications": "4.0.0-564",
+    "@elementor/editor-props": "4.0.0-564",
+    "@elementor/editor-responsive": "4.0.0-564",
+    "@elementor/editor-styles": "4.0.0-564",
+    "@elementor/editor-styles-repository": "4.0.0-564",
+    "@elementor/editor-ui": "4.0.0-564",
+    "@elementor/editor-v1-adapters": "4.0.0-564",
+    "@elementor/schema": "4.0.0-564",
+    "@elementor/twing": "4.0.0-564",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-551",
-    "@elementor/wp-media": "4.0.0-551",
+    "@elementor/utils": "4.0.0-564",
+    "@elementor/wp-media": "4.0.0-564",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/init-settings-transformers.ts

@@ -2,6 +2,7 @@ import { settingsTransformersRegistry } from './settings-transformers-registry';
 import { attributesTransformer } from './transformers/settings/attributes-transformer';
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
 import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
+import { htmlV2Transformer } from './transformers/settings/html-v2-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
@@ -17,5 +18,6 @@ export function initSettingsTransformers() {
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )
+		.register( 'html-v2', htmlV2Transformer )
 		.registerFallback( plainTransformer );
 }

package/src/legacy/__tests__/twig-rendering-utils.test.ts

@@ -0,0 +1,115 @@
+import {
+	type ChildrenCollection,
+	collectChildrenRenderPromises,
+	createRenderCacheState,
+	renderChildrenWithOptimization,
+} from '../twig-rendering-utils';
+
+describe( 'twig-rendering-utils', () => {
+	describe( 'createRenderCacheState', () => {
+		it( 'should initialize with empty state and reset on invalidate', () => {
+			// Act
+			const state = createRenderCacheState();
+
+			// Assert
+			expect( state.lastResolvedSettingsHash ).toBeNull();
+			expect( state.domUpdateWasSkipped ).toBe( false );
+
+			// Arrange
+			state.lastResolvedSettingsHash = 'test-hash';
+			state.domUpdateWasSkipped = true;
+
+			// Act
+			state.invalidate();
+
+			// Assert
+			expect( state.lastResolvedSettingsHash ).toBeNull();
+			expect( state.domUpdateWasSkipped ).toBe( false );
+		} );
+	} );
+
+	describe( 'collectChildrenRenderPromises', () => {
+		it( 'should return empty array when children is undefined', () => {
+			expect( collectChildrenRenderPromises( undefined ) ).toEqual( [] );
+		} );
+
+		it( 'should collect only existing render promises from children', () => {
+			// Arrange
+			const promise1 = Promise.resolve();
+			const promise2 = Promise.resolve();
+
+			const children = createMockChildren( [
+				{ _currentRenderPromise: promise1 },
+				{ _currentRenderPromise: undefined },
+				{ _currentRenderPromise: promise2 },
+			] );
+
+			// Act
+			const result = collectChildrenRenderPromises( children );
+
+			// Assert
+			expect( result ).toEqual( [ promise1, promise2 ] );
+		} );
+	} );
+
+	describe( 'renderChildrenWithOptimization', () => {
+		it( 'should render new children when DOM was not skipped', () => {
+			// Arrange
+			const renderChildren = jest.fn();
+
+			// Act
+			renderChildrenWithOptimization( {
+				children: createMockChildren( [] ),
+				domUpdateWasSkipped: false,
+				renderChildren,
+			} );
+
+			// Assert
+			expect( renderChildren ).toHaveBeenCalled();
+		} );
+
+		it( 'should rerender existing children when DOM update was skipped', () => {
+			// Arrange
+			const renderChildren = jest.fn();
+			const childView1 = { render: jest.fn() };
+			const childView2 = { render: jest.fn() };
+
+			// Act
+			renderChildrenWithOptimization( {
+				children: createMockChildren( [ childView1, childView2 ] ),
+				domUpdateWasSkipped: true,
+				renderChildren,
+			} );
+
+			// Assert
+			expect( renderChildren ).not.toHaveBeenCalled();
+			expect( childView1.render ).toHaveBeenCalled();
+			expect( childView2.render ).toHaveBeenCalled();
+		} );
+
+		it( 'should safely fall back to renderChildren when skipped but children are empty to handle emptyView', () => {
+			// Arrange
+			const renderChildren = jest.fn();
+
+			// Act
+			renderChildrenWithOptimization( {
+				children: undefined,
+				domUpdateWasSkipped: true,
+				renderChildren,
+			} );
+
+			// Assert
+			expect( renderChildren ).toHaveBeenCalled();
+		} );
+	} );
+} );
+
+function createMockChildren( items: Record< string, unknown >[] ): ChildrenCollection {
+	return {
+		length: items.length,
+		findByIndex: jest.fn(),
+		each: jest.fn( ( callback ) => {
+			items.forEach( ( item ) => callback( item ) );
+		} ),
+	} as unknown as ChildrenCollection;
+}