@aehrc/smart-forms-renderer 0.42.0 → 0.43.0

package/.storybook/iframeResizerChild.js

@@ -0,0 +1,1063 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Modified from:
+ * GitHub: https://github.com/davidjbradshaw/iframe-resizer/tree/v4
+ * Author: David J. Bradshaw - info@iframe-resizer.com
+ * License: MIT
+ */
+
+const SIZE_ATTR = 'data-iframe-size';
+const OVERFLOW_ATTR = 'data-overflowed';
+
+const HEIGHT_EDGE = 'bottom';
+const WIDTH_EDGE = 'right';
+
+function addEventListener(el, evt, func, options) {
+  el.addEventListener(evt, func, options || false);
+}
+
+function removeEventListener(el, evt, func) {
+  el.removeEventListener(evt, func, false);
+}
+
+export const id = (x) => x;
+
+function overflowObserver(options) {
+  const side = options.side || HEIGHT_EDGE;
+  const onChange = options.onChange || id;
+
+  const observerOptions = {
+    root: options.root,
+    rootMargin: '0px',
+    threshold: 1
+  };
+
+  function emit() {
+    const overflowedNodeList = document.querySelectorAll(`[${OVERFLOW_ATTR}]`);
+    onChange(overflowedNodeList);
+  }
+
+  const emitAfterReflow = () => requestAnimationFrame(emit);
+
+  function callback(entries) {
+    for (const entry of entries) {
+      const { boundingClientRect, rootBounds, target } = entry;
+      const edge = boundingClientRect[side];
+      const hasOverflow = edge === 0 || edge > rootBounds[side];
+      target.toggleAttribute(OVERFLOW_ATTR, hasOverflow);
+    }
+
+    emitAfterReflow();
+  }
+
+  const observer = new IntersectionObserver(callback, observerOptions);
+  const observed = new WeakSet();
+
+  return function (nodeList) {
+    for (const node of nodeList) {
+      if (node.nodeType !== Node.ELEMENT_NODE || observed.has(node)) continue;
+
+      observer.observe(node);
+      observed.add(node);
+    }
+  };
+}
+
+function iframeResizerChild() {
+  const checkVisibilityOptions = {
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  };
+  const customCalcMethods = {
+    height: () => {
+      return getHeight.auto();
+    },
+    width: () => {
+      return getWidth.auto();
+    }
+  };
+  const eventCancelTimer = 128;
+  const eventHandlersByName = {};
+  const hasCheckVisibility = 'checkVisibility' in window;
+  const msgID = '[iFrameSizer]'; // Must match host page msg ID
+  const msgIdLen = msgID.length;
+  const resetRequiredMethods = {
+    max: 1,
+    min: 1,
+    bodyScroll: 1,
+    documentElementScroll: 1
+  };
+  const widthCalcModeDefault = 'scroll';
+
+  let autoResize = true;
+  let bodyBackground = '';
+  let bodyMargin = 0;
+  let bodyMarginStr = '';
+  let bodyPadding = '';
+  let calculateHeight = true;
+  let calculateWidth = false;
+  let firstRun = true;
+  let hasOverflow = false;
+  let hasTags = false;
+  let height = 1;
+  let heightCalcModeDefault = 'auto';
+  let heightCalcMode = heightCalcModeDefault;
+  let initLock = true;
+  let initMsg = '';
+  let inPageLinks = {};
+  let mouseEvents = false;
+  let myID = '';
+  let offsetHeight;
+  let offsetWidth;
+  let observeOverflow = id;
+  let overflowedNodeList = [];
+  let resizeFrom = 'child';
+  let resizeObserver = null;
+  let taggedElements = [];
+  let target = window.parent;
+  let targetOriginDefault = '*';
+  let timerActive;
+  let tolerance = 0;
+  let triggerLocked = false;
+  let width = 1;
+  let widthCalcMode = widthCalcModeDefault;
+  let win = window;
+
+  let onReady = () => {};
+  let onPageInfo = null;
+  let onParentInfo = null;
+
+  function init() {
+    readDataFromParent();
+    readDataFromPage();
+
+    checkHeightMode();
+    checkWidthMode();
+    checkDeprecatedAttrs();
+
+    checkAndSetupTags();
+
+    setupObserveOverflow();
+    setupPublicMethods();
+    setupMouseEvents();
+    inPageLinks = setupInPageLinks();
+
+    addOverflowObservers(getAllElements(document)());
+
+    setMargin();
+    setBodyStyle('background', bodyBackground);
+    setBodyStyle('padding', bodyPadding);
+
+    injectClearFixIntoBodyElement();
+    stopInfiniteResizingOfIframe();
+
+    sendSize('init', 'Init message from host page', undefined, undefined, undefined);
+
+    initEventListeners();
+    setTimeout(onReady);
+  }
+
+  function onOverflowChange(nodeList) {
+    overflowedNodeList = nodeList;
+    hasOverflow = overflowedNodeList.length > 0;
+
+    sendSize('overflowChanged', 'Overflow updated');
+  }
+
+  function setupObserveOverflow() {
+    if (calculateHeight === calculateWidth) {
+      return;
+    }
+
+    observeOverflow = overflowObserver({
+      onChange: onOverflowChange,
+      root: document.documentElement,
+      side: calculateHeight ? HEIGHT_EDGE : WIDTH_EDGE
+    });
+  }
+
+  function checkAndSetupTags() {
+    taggedElements = document.querySelectorAll(`[${SIZE_ATTR}]`);
+    hasTags = taggedElements.length > 0;
+  }
+
+  function addOverflowObservers(nodeList) {
+    if (!hasTags) {
+      observeOverflow(nodeList);
+    }
+  }
+
+  function readDataFromParent() {
+    const strBool = (str) => str === 'true';
+    const data = initMsg.slice(msgIdLen).split(':');
+
+    myID = data[0];
+    bodyMargin = undefined === data[1] ? bodyMargin : Number(data[1]); // For V1 compatibility
+    calculateWidth = undefined === data[2] ? calculateWidth : strBool(data[2]);
+    autoResize = undefined === data[3] ? autoResize : strBool(data[3]);
+    bodyMarginStr = data[4];
+    heightCalcMode = undefined === data[5] ? heightCalcMode : data[5];
+    bodyBackground = data[6];
+    bodyPadding = data[7];
+    tolerance = undefined === data[8] ? tolerance : Number(data[8]);
+    inPageLinks.enable = undefined === data[9] ? false : strBool(data[9]);
+    resizeFrom = undefined === data[10] ? resizeFrom : data[10];
+    widthCalcMode = undefined === data[11] ? widthCalcMode : data[11];
+    mouseEvents = undefined === data[12] ? mouseEvents : strBool(data[12]);
+  }
+
+  function readDataFromPage() {
+    function readData(data) {
+      if (typeof data?.offset === 'number') {
+        if (calculateHeight) offsetHeight = data?.offset;
+        if (calculateWidth) offsetWidth = data?.offset;
+      }
+
+      if (typeof data?.offsetSize === 'number') {
+        if (calculateHeight) offsetHeight = data?.offsetSize;
+        if (calculateWidth) offsetWidth = data?.offsetSize;
+      }
+
+      targetOriginDefault = data?.targetOrigin || targetOriginDefault;
+      heightCalcMode = data?.heightCalculationMethod || heightCalcMode;
+      widthCalcMode = data?.widthCalculationMethod || widthCalcMode;
+    }
+
+    function setupCustomCalcMethods(calcMode, calcFunc) {
+      if (typeof calcMode === 'function') {
+        customCalcMethods[calcFunc] = calcMode;
+        calcMode = 'custom';
+      }
+
+      return calcMode;
+    }
+
+    const data = window.iframeResizer || window.iFrameResizer;
+
+    if (typeof data !== 'object') {
+      return;
+    }
+
+    readData(data);
+    heightCalcMode = setupCustomCalcMethods(heightCalcMode, 'height');
+    widthCalcMode = setupCustomCalcMethods(widthCalcMode, 'width');
+  }
+
+  function chkCSS(attr, value) {
+    if (value.includes('-')) {
+      value = '';
+    }
+
+    return value;
+  }
+
+  function setBodyStyle(attr, value) {
+    if (undefined !== value && value !== '' && value !== 'null') {
+      document.body.style.setProperty(attr, value);
+    }
+  }
+
+  function setMargin() {
+    // If called via V1 script, convert bodyMargin from int to str
+    if (undefined === bodyMarginStr) {
+      bodyMarginStr = `${bodyMargin}px`;
+    }
+
+    setBodyStyle('margin', chkCSS('margin', bodyMarginStr));
+  }
+
+  function stopInfiniteResizingOfIframe() {
+    const setAutoHeight = (el) =>
+      el.style.setProperty('height', heightCalcModeDefault, 'important');
+
+    setAutoHeight(document.documentElement);
+    setAutoHeight(document.body);
+  }
+
+  function manageTriggerEvent(options) {
+    const listener = {
+      add(eventName) {
+        function handleEvent() {
+          sendSize(options.eventName, options.eventType);
+        }
+
+        eventHandlersByName[eventName] = handleEvent;
+
+        addEventListener(window, eventName, handleEvent, { passive: true });
+      },
+      remove(eventName) {
+        const handleEvent = eventHandlersByName[eventName];
+        delete eventHandlersByName[eventName];
+
+        removeEventListener(window, eventName, handleEvent);
+      }
+    };
+
+    listener[options.method](options.eventName);
+  }
+
+  function manageEventListeners(method) {
+    manageTriggerEvent({
+      method,
+      eventType: 'After Print',
+      eventName: 'afterprint'
+    });
+
+    manageTriggerEvent({
+      method,
+      eventType: 'Before Print',
+      eventName: 'beforeprint'
+    });
+
+    manageTriggerEvent({
+      method,
+      eventType: 'Ready State Change',
+      eventName: 'readystatechange'
+    });
+  }
+
+  function checkDeprecatedAttrs() {
+    let found = false;
+
+    const checkAttrs = (attr) =>
+      document.querySelectorAll(`[${attr}]`).forEach((el) => {
+        found = true;
+        el.removeAttribute(attr);
+        el.toggleAttribute(SIZE_ATTR, true);
+      });
+
+    checkAttrs('data-iframe-height');
+    checkAttrs('data-iframe-width');
+  }
+
+  function checkCalcMode(calcMode, calcModeDefault, modes) {
+    if (calcModeDefault !== calcMode) {
+      if (!(calcMode in modes)) {
+        calcMode = calcModeDefault;
+      }
+    }
+
+    return calcMode;
+  }
+
+  function checkHeightMode() {
+    heightCalcMode = checkCalcMode(heightCalcMode, heightCalcModeDefault, getHeight);
+  }
+
+  function checkWidthMode() {
+    widthCalcMode = checkCalcMode(widthCalcMode, widthCalcModeDefault, getWidth);
+  }
+
+  function initEventListeners() {
+    manageEventListeners('add');
+    setupMutationObserver();
+    setupResizeObservers();
+  }
+
+  function injectClearFixIntoBodyElement() {
+    const clearFix = document.createElement('div');
+
+    clearFix.style.clear = 'both';
+    // Guard against the following having been globally redefined in CSS.
+    clearFix.style.display = 'block';
+    clearFix.style.height = '0';
+    document.body.append(clearFix);
+  }
+
+  function setupInPageLinks() {
+    function getPagePosition() {
+      return {
+        x: document.documentElement.scrollLeft,
+        y: document.documentElement.scrollTop
+      };
+    }
+
+    function getElementPosition(el) {
+      const elPosition = el.getBoundingClientRect();
+      const { x, y } = getPagePosition();
+
+      return {
+        x: parseInt(elPosition.left, 10) + parseInt(x.toString(), 10),
+        y: parseInt(elPosition.top, 10) + parseInt(y.toString(), 10)
+      };
+    }
+
+    function findTarget(location) {
+      function jumpToTarget(target) {
+        const jumpPosition = getElementPosition(target);
+
+        sendMsg(jumpPosition.y, jumpPosition.x, 'scrollToOffset'); // X&Y reversed at sendMsg uses height/width
+      }
+
+      const hash = location.split('#')[1] || location; // Remove # if present
+      const hashData = decodeURIComponent(hash);
+      const target = document.getElementById(hashData) || document.getElementsByName(hashData)[0];
+
+      if (target !== undefined) {
+        jumpToTarget(target);
+        return;
+      }
+
+      sendMsg(0, 0, 'inPageLink', `#${hash}`);
+
+      // Don't run for server side render
+      if (typeof window !== 'undefined') {
+        iframeResizerChild();
+      }
+    }
+
+    function checkLocationHash() {
+      const { hash, href } = window.location;
+
+      if (hash !== '' && hash !== '#') {
+        findTarget(href);
+      }
+    }
+
+    function bindAnchors() {
+      for (const link of document.querySelectorAll('a[href^="#"]')) {
+        if (link.getAttribute('href') !== '#') {
+          addEventListener(link, 'click', (e) => {
+            e.preventDefault();
+            findTarget(link.getAttribute('href'));
+          });
+        }
+      }
+    }
+
+    function bindLocationHash() {
+      addEventListener(window, 'hashchange', checkLocationHash);
+    }
+
+    function initCheck() {
+      // Check if page loaded with location hash after init resize
+      setTimeout(checkLocationHash, eventCancelTimer);
+    }
+
+    function enableInPageLinks() {
+      bindAnchors();
+      bindLocationHash();
+      initCheck();
+    }
+
+    if (inPageLinks.enable) {
+      enableInPageLinks();
+    }
+
+    return {
+      findTarget
+    };
+  }
+
+  function setupMouseEvents() {
+    if (mouseEvents !== true) return;
+
+    function sendMouse(e) {
+      sendMsg(0, 0, e.type, `${e.screenY}:${e.screenX}`);
+    }
+
+    function addMouseListener(evt) {
+      addEventListener(window.document, evt, sendMouse);
+    }
+
+    addMouseListener('mouseenter');
+    addMouseListener('mouseleave');
+  }
+
+  function setupPublicMethods() {
+    win.parentIframe = Object.freeze({
+      autoResize: (resize) => {
+        if (resize === true && autoResize === false) {
+          autoResize = true;
+          sendSize('autoResizeEnabled', 'Auto Resize enabled');
+        } else if (resize === false && autoResize === true) {
+          autoResize = false;
+        }
+
+        sendMsg(0, 0, 'autoResize', JSON.stringify(autoResize));
+
+        return autoResize;
+      },
+
+      close() {
+        sendMsg(0, 0, 'close');
+      },
+
+      getId: () => myID,
+
+      getPageInfo(callback) {
+        if (typeof callback === 'function') {
+          onPageInfo = callback;
+          sendMsg(0, 0, 'pageInfo');
+          return;
+        }
+
+        onPageInfo = null;
+        sendMsg(0, 0, 'pageInfoStop');
+      },
+
+      getParentProps(callback) {
+        if (typeof callback !== 'function') {
+          throw new TypeError('parentIframe.getParentProps(callback) callback not a function');
+        }
+
+        onParentInfo = callback;
+        sendMsg(0, 0, 'parentInfo');
+
+        return () => {
+          onParentInfo = null;
+          sendMsg(0, 0, 'parentInfoStop');
+        };
+      },
+
+      getParentProperties(callback) {
+        this.getParentProps(callback);
+      },
+
+      moveToAnchor(hash) {
+        inPageLinks.findTarget(hash);
+      },
+
+      reset() {
+        resetIframe();
+      },
+
+      scrollBy(x, y) {
+        sendMsg(y, x, 'scrollBy'); // X&Y reversed at sendMsg uses height/width
+      },
+
+      scrollTo(x, y) {
+        sendMsg(y, x, 'scrollTo'); // X&Y reversed at sendMsg uses height/width
+      },
+
+      scrollToOffset(x, y) {
+        sendMsg(y, x, 'scrollToOffset'); // X&Y reversed at sendMsg uses height/width
+      },
+
+      sendMessage(msg, targetOrigin) {
+        sendMsg(0, 0, 'message', JSON.stringify(msg), targetOrigin);
+      },
+
+      setHeightCalculationMethod(heightCalculationMethod) {
+        heightCalcMode = heightCalculationMethod;
+        checkHeightMode();
+      },
+
+      setWidthCalculationMethod(widthCalculationMethod) {
+        widthCalcMode = widthCalculationMethod;
+        checkWidthMode();
+      },
+
+      setTargetOrigin(targetOrigin) {
+        targetOriginDefault = targetOrigin;
+      },
+
+      resize(customHeight, customWidth) {
+        const valString = `${customHeight || ''}${customWidth ? `,${customWidth}` : ''}`;
+
+        sendSize('resizeParent', `parentIframe.resize(${valString})`, customHeight, customWidth);
+      },
+
+      size(customHeight, customWidth) {
+        this.resize(customHeight, customWidth);
+      }
+    });
+
+    win.parentIFrame = win.parentIframe;
+  }
+
+  function resizeObserved(entries) {
+    if (!Array.isArray(entries) || entries.length === 0) return;
+
+    sendSize('resizeObserver', `Resize Observed:`);
+  }
+
+  const resizeSet = new WeakSet();
+
+  // This function has to iterate over all page elements during load
+  // so is optimized for performance, rather than best practices.
+  function attachResizeObserverToNonStaticElements(rootElement) {
+    if (rootElement.nodeType !== Node.ELEMENT_NODE) return;
+
+    if (!resizeSet.has(rootElement)) {
+      const position = getComputedStyle(rootElement)?.position;
+      if (!(position === '' || position === 'static')) {
+        resizeObserver.observe(rootElement);
+        resizeSet.add(rootElement);
+      }
+    }
+
+    const nodeList = getAllElements(rootElement)();
+
+    for (const node of nodeList) {
+      if (resizeSet.has(node) || node?.nodeType !== Node.ELEMENT_NODE) continue;
+
+      const position = getComputedStyle(node)?.position;
+      if (position === '' || position === 'static') continue;
+
+      resizeObserver.observe(node);
+      resizeSet.add(node);
+    }
+  }
+
+  function setupResizeObservers() {
+    resizeObserver = new ResizeObserver(resizeObserved);
+    resizeObserver.observe(document.body);
+    resizeSet.add(document.body);
+    attachResizeObserverToNonStaticElements(document.body);
+  }
+
+  function setupMutationObserver() {
+    const observedMutations = new Set();
+    let pending = false;
+    let newMutations = [];
+
+    const updateMutation = (mutations) => {
+      for (const mutation of mutations) {
+        const { addedNodes, removedNodes } = mutation;
+
+        for (const node of addedNodes) {
+          observedMutations.add(node);
+        }
+
+        for (const node of removedNodes) {
+          observedMutations.delete(node);
+        }
+      }
+    };
+
+    let delayCount = 1;
+
+    function processMutations() {
+      delayCount = 1;
+
+      newMutations.forEach(updateMutation);
+      newMutations = [];
+
+      if (observedMutations.size === 0) {
+        pending = false;
+        return;
+      }
+
+      // Rebuild tagged elements list for size calculation
+      checkAndSetupTags();
+
+      // Add observers to new elements
+      addOverflowObservers(observedMutations);
+      observedMutations.forEach(attachResizeObserverToNonStaticElements);
+
+      observedMutations.clear();
+
+      pending = false;
+    }
+
+    function mutationObserved(mutations) {
+      newMutations.push(mutations);
+      if (pending) return;
+
+      pending = true;
+      requestAnimationFrame(processMutations);
+    }
+
+    function createMutationObserver() {
+      const observer = new window.MutationObserver(mutationObserved);
+      const target = document.querySelector('body');
+      const config = {
+        attributes: false,
+        attributeOldValue: false,
+        characterData: false,
+        characterDataOldValue: false,
+        childList: true,
+        subtree: true
+      };
+
+      observer.observe(target, config);
+
+      return observer;
+    }
+
+    const observer = createMutationObserver();
+
+    return {
+      disconnect() {
+        observer.disconnect();
+      }
+    };
+  }
+
+  function getMaxElement(side) {
+    let elVal = 0;
+    let maxEl = document.documentElement;
+    let maxVal = hasTags ? 0 : document.documentElement.getBoundingClientRect().bottom;
+
+    const targetElements = hasTags
+      ? taggedElements
+      : hasOverflow
+        ? overflowedNodeList
+        : getAllElements(document)(); // We should never get here, but just in case
+
+    let len = targetElements.length;
+
+    for (const element of targetElements) {
+      if (
+        !hasTags &&
+        hasCheckVisibility && // Safari was missing checkVisibility until March 2024
+        !element.checkVisibility(checkVisibilityOptions ?? undefined)
+      ) {
+        len -= 1;
+        continue;
+      }
+
+      elVal =
+        element.getBoundingClientRect()[side] +
+        parseFloat(getComputedStyle(element).getPropertyValue(`margin-${side}`));
+
+      if (elVal > maxVal) {
+        maxVal = elVal;
+        maxEl = element;
+      }
+    }
+
+    return maxVal;
+  }
+
+  const getAllMeasurements = (dimension) => [
+    dimension.bodyOffset(),
+    dimension.bodyScroll(),
+    dimension.documentElementOffset(),
+    dimension.documentElementScroll(),
+    dimension.boundingClientRect()
+  ];
+
+  const getAllElements = (element) => () =>
+    element.querySelectorAll(
+      '* :not(head):not(meta):not(base):not(title):not(script):not(link):not(style):not(map):not(area):not(option):not(optgroup):not(template):not(track):not(wbr):not(nobr)'
+    );
+
+  const prevScrollSize = {
+    height: 0,
+    width: 0
+  };
+
+  const prevBoundingSize = {
+    height: 0,
+    width: 0
+  };
+
+  const getAdjustedScroll = (getDimension) =>
+    getDimension.documentElementScroll() + Math.max(0, getDimension.getOffset());
+
+  function getAutoSize(getDimension) {
+    function returnBoundingClientRect() {
+      prevBoundingSize[dimension] = boundingSize;
+      prevScrollSize[dimension] = scrollSize;
+      return boundingSize;
+    }
+
+    const isHeight = getDimension === getHeight;
+    const dimension = isHeight ? 'height' : 'width';
+    const boundingSize = getDimension.boundingClientRect();
+    const ceilBoundingSize = Math.ceil(boundingSize);
+    const floorBoundingSize = Math.floor(boundingSize);
+    const scrollSize = getAdjustedScroll(getDimension);
+
+    switch (true) {
+      case !getDimension.enabled():
+        return scrollSize;
+
+      case hasTags:
+        return getDimension.taggedElement();
+
+      case !hasOverflow && prevBoundingSize[dimension] === 0 && prevScrollSize[dimension] === 0:
+        return returnBoundingClientRect();
+
+      case triggerLocked &&
+        boundingSize === prevBoundingSize[dimension] &&
+        scrollSize === prevScrollSize[dimension]:
+        return Math.max(boundingSize, scrollSize);
+
+      case boundingSize === 0:
+        return scrollSize;
+
+      case !hasOverflow &&
+        boundingSize !== prevBoundingSize[dimension] &&
+        scrollSize <= prevScrollSize[dimension]:
+        return returnBoundingClientRect();
+
+      case !isHeight:
+        return getDimension.taggedElement();
+
+      case !hasOverflow && boundingSize < prevBoundingSize[dimension]:
+        return returnBoundingClientRect();
+
+      case scrollSize === floorBoundingSize || scrollSize === ceilBoundingSize:
+        return returnBoundingClientRect();
+
+      case boundingSize > scrollSize:
+        return returnBoundingClientRect();
+
+      default:
+    }
+
+    return Math.max(getDimension.taggedElement(), returnBoundingClientRect());
+  }
+
+  const getBodyOffset = () => {
+    const { body } = document;
+    const style = getComputedStyle(body);
+
+    return body.offsetHeight + parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
+  };
+
+  const getHeight = {
+    enabled: () => calculateHeight,
+    getOffset: () => offsetHeight,
+    auto: () => getAutoSize(getHeight),
+    bodyOffset: getBodyOffset,
+    bodyScroll: () => document.body.scrollHeight,
+    offset: () => getHeight.bodyOffset(), // Backwards compatibility
+    custom: () => customCalcMethods.height(),
+    documentElementOffset: () => document.documentElement.offsetHeight,
+    documentElementScroll: () => document.documentElement.scrollHeight,
+    boundingClientRect: () =>
+      Math.max(
+        document.documentElement.getBoundingClientRect().bottom,
+        document.body.getBoundingClientRect().bottom
+      ),
+    max: () => Math.max(...getAllMeasurements(getHeight)),
+    min: () => Math.min(...getAllMeasurements(getHeight)),
+    grow: () => getHeight.max(),
+    taggedElement: () => getMaxElement(HEIGHT_EDGE)
+  };
+
+  const getWidth = {
+    enabled: () => calculateWidth,
+    getOffset: () => offsetWidth,
+    auto: () => getAutoSize(getWidth),
+    bodyScroll: () => document.body.scrollWidth,
+    bodyOffset: () => document.body.offsetWidth,
+    custom: () => customCalcMethods.width(),
+    documentElementScroll: () => document.documentElement.scrollWidth,
+    documentElementOffset: () => document.documentElement.offsetWidth,
+    boundingClientRect: () =>
+      Math.max(
+        document.documentElement.getBoundingClientRect().right,
+        document.body.getBoundingClientRect().right
+      ),
+    max: () => Math.max(...getAllMeasurements(getWidth)),
+    min: () => Math.min(...getAllMeasurements(getWidth)),
+    scroll: () => Math.max(getWidth.bodyScroll(), getWidth.documentElementScroll()),
+    taggedElement: () => getMaxElement(WIDTH_EDGE)
+  };
+
+  const checkTolerance = (a, b) => !(Math.abs(a - b) <= tolerance);
+
+  function sizeIframe(triggerEvent, triggerEventDesc, customHeight, customWidth, msg) {
+    const isForceResizableEvent = () => !(triggerEvent in { init: 1, interval: 1, size: 1 });
+
+    const isForceResizableCalcMode = () =>
+      (calculateHeight && heightCalcMode in resetRequiredMethods) ||
+      (calculateWidth && widthCalcMode in resetRequiredMethods);
+
+    const isSizeChangeDetected = () =>
+      (calculateHeight && checkTolerance(height, newHeight)) ||
+      (calculateWidth && checkTolerance(width, newWidth));
+
+    const newHeight = undefined === customHeight ? getHeight[heightCalcMode]() : customHeight;
+    const newWidth = undefined === customWidth ? getWidth[widthCalcMode]() : customWidth;
+
+    if (isSizeChangeDetected() || triggerEvent === 'init') {
+      lockTrigger();
+      height = newHeight;
+      width = newWidth;
+      sendMsg(height, width, triggerEvent, msg);
+    } else if (isForceResizableEvent() && isForceResizableCalcMode()) {
+      resetIframe();
+    } else {
+      timerActive = false; // We're not resizing, so turn off the timer
+    }
+  }
+
+  let sendPending = false;
+
+  function sendSize(triggerEvent, triggerEventDesc, customHeight, customWidth, msg) {
+    if (!autoResize && triggerEvent in { reset: 1, resetPage: 1, init: 1 }) {
+      return;
+    }
+
+    if (document.hidden) {
+      // Currently only correctly supported in firefox
+      // This is checked again on the parent page
+      return;
+    }
+
+    if (!sendPending) {
+      timerActive = true;
+      sizeIframe(triggerEvent, triggerEventDesc, customHeight, customWidth, msg);
+      requestAnimationFrame(() => {
+        sendPending = false;
+      });
+    }
+
+    sendPending = true;
+  }
+
+  function lockTrigger() {
+    if (triggerLocked) return;
+
+    triggerLocked = true;
+
+    requestAnimationFrame(() => {
+      triggerLocked = false;
+    });
+  }
+
+  function triggerReset(triggerEvent) {
+    height = getHeight[heightCalcMode]();
+    width = getWidth[widthCalcMode]();
+
+    sendMsg(height, width, triggerEvent);
+  }
+
+  function resetIframe() {
+    const hcm = heightCalcMode;
+    heightCalcMode = heightCalcModeDefault;
+
+    lockTrigger();
+    triggerReset('reset');
+
+    heightCalcMode = hcm;
+  }
+
+  function sendMsg(height, width, triggerEvent, msg, targetOrigin) {
+    function setTargetOrigin() {
+      if (undefined === targetOrigin) {
+        targetOrigin = targetOriginDefault;
+      }
+    }
+
+    function sendToParent() {
+      const size = `${height + (offsetHeight || 0)}:${width + (offsetWidth || 0)}`;
+      const message = `${myID}:${size}:${triggerEvent}${undefined === msg ? '' : `:${msg}`}`;
+
+      timerActive = false;
+
+      target.postMessage(msgID + message, targetOrigin);
+    }
+
+    setTargetOrigin();
+    sendToParent();
+  }
+
+  function receiver(event) {
+    const processRequestFromParent = {
+      init: function initFromParent() {
+        initMsg = event.data;
+        target = event.source;
+
+        init();
+        firstRun = false;
+        setTimeout(() => {
+          initLock = false;
+        }, eventCancelTimer);
+      },
+
+      reset() {
+        if (initLock) {
+          return;
+        }
+        triggerReset('resetPage');
+      },
+
+      resize() {
+        sendSize('resizeParent', 'Parent window requested size check');
+      },
+
+      moveToAnchor() {
+        inPageLinks.findTarget(getData());
+      },
+
+      inPageLink() {
+        this.moveToAnchor();
+      }, // Backward compatibility
+
+      pageInfo() {
+        const msgBody = getData();
+        if (onPageInfo) {
+          setTimeout(() => onPageInfo(JSON.parse(msgBody)));
+        } else {
+          // not expected, so cancel more messages
+          sendMsg(0, 0, 'pageInfoStop');
+        }
+      }
+    };
+
+    const isMessageForUs = () => msgID === `${event.data}`.slice(0, msgIdLen);
+
+    const getMessageType = () => event.data.split(']')[1].split(':')[0];
+
+    const getData = () => event.data.slice(event.data.indexOf(':') + 1);
+
+    // Test if this message is from a child below us. This is an ugly test, however, updating
+    // the message format would break backwards compatibility.
+    const isInitMsg = () => event.data.split(':')[2] in { true: 1, false: 1 };
+
+    function callFromParent() {
+      const messageType = getMessageType();
+
+      if (messageType in processRequestFromParent) {
+        processRequestFromParent[messageType]();
+      }
+    }
+
+    function processMessage() {
+      if (firstRun === false) {
+        callFromParent();
+        return;
+      }
+
+      if (isInitMsg()) {
+        processRequestFromParent.init();
+      }
+    }
+
+    if (isMessageForUs()) {
+      processMessage();
+    }
+  }
+
+  // Normally the parent kicks things off when it detects the iFrame has loaded.
+  // If this script is async-loaded, then tell parent page to retry init.
+  function chkLateLoaded() {
+    if (document.readyState !== 'loading') {
+      window.parent.postMessage('[iFrameResizerChild]Ready', '*');
+    }
+  }
+
+  if (!('iframeChildListener' in window)) {
+    window.iframeChildListener = (data) => setTimeout(() => receiver({ data }));
+    addEventListener(window, 'message', receiver);
+    addEventListener(window, 'readystatechange', chkLateLoaded);
+    chkLateLoaded();
+  }
+}
+
+// Don't run for server side render
+if (typeof window !== 'undefined') {
+  iframeResizerChild();
+}

package/.storybook/preview.tsx

@@ -7,6 +7,7 @@ import '@fontsource/material-icons';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import { createTheme } from '@mui/material/styles';
 import { CssBaseline, ThemeProvider } from '@mui/material';
+import './iframeResizerChild';
 
 export const decorators = [
   withThemeFromJSXProvider({

package/README.md

@@ -5,7 +5,9 @@ It acts as a reference implementation for the [SDC Form Filler](https://hl7.org/
 
 <h4><a href="https://smartforms.csiro.au/docs/dev">Check out the documentation 📚</a></h4>
 
+View the changelog [here](https://github.com/aehrc/smart-forms/blob/main/CHANGELOG.md).
+
 
 ---
 
-Copyright © 2022, Commonwealth Scientific and Industrial Research Organisation (CSIRO) ABN 41 687 119 230. All rights reserved.
+Copyright © 2024, Commonwealth Scientific and Industrial Research Organisation (CSIRO) ABN 41 687 119 230. All rights reserved.

package/lib/components/Renderer/SmartFormsRenderer.js

@@ -23,7 +23,6 @@ import Typography from '@mui/material/Typography';
 import { QueryClientProvider } from '@tanstack/react-query';
 import useRendererQueryClient from '../../hooks/useRendererQueryClient';
 import BaseRenderer from './BaseRenderer';
-// Will be deprecated in version 1.0.0. Use alternative() instead. //FIXME add alternative
 /**
  * A self-initialising wrapper around the BaseRenderer rendering engine.
  * Will be deprecated in version 1.0.0. For alternative usage, see:

package/lib/components/Renderer/SmartFormsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartFormsRenderer.js","sourceRoot":"","sources":["../../../src/components/Renderer/SmartFormsRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,mBAAmB,CAAC;AAEtD,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAwB1C,0FAA0F;AAE1F;;;;;;;;GAQG;AACH,SAAS,kBAAkB,CAAC,KAA8B;IACxD,MAAM,EACJ,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,iBAAiB,CACjC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,CACX,CAAC;IACF,MAAM,WAAW,GAAG,sBAAsB,EAAE,CAAC;IAE7C,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YAClD,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,UAAU,mCAAsC,CAC7C,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,qBAAqB;QACpB,oBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW;YACtC,oBAAC,YAAY,OAAG,CACI,CACA,CACzB,CAAC;AACJ,CAAC;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"SmartFormsRenderer.js","sourceRoot":"","sources":["../../../src/components/Renderer/SmartFormsRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,mBAAmB,CAAC;AAEtD,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAwB1C;;;;;;;;GAQG;AACH,SAAS,kBAAkB,CAAC,KAA8B;IACxD,MAAM,EACJ,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,iBAAiB,CACjC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,CACX,CAAC;IACF,MAAM,WAAW,GAAG,sBAAsB,EAAE,CAAC;IAE7C,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YAClD,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,UAAU,mCAAsC,CAC7C,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,qBAAqB;QACpB,oBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW;YACtC,oBAAC,YAAY,OAAG,CACI,CACA,CACzB,CAAC;AACJ,CAAC;AAED,eAAe,kBAAkB,CAAC"}

package/lib/stories/storybookWrappers/InitialiseFormWrapperForStorybook.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import type Client from 'fhirclient/lib/Client';
-import '@iframe-resizer/child';
 export interface InitialiseFormWrapperProps {
     questionnaire: Questionnaire;
     questionnaireResponse?: QuestionnaireResponse;

package/lib/stories/storybookWrappers/InitialiseFormWrapperForStorybook.js

@@ -24,7 +24,6 @@ import useInitialiseForm from '../../hooks/useInitialiseForm';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
-import '@iframe-resizer/child';
 /**
  * This is a one-to-one replacement for the SmartFormsRenderer for demo purposes.
  * Instead of using this React component, define your own wrapper component that uses the BaseRenderer directly.

package/lib/stories/storybookWrappers/InitialiseFormWrapperForStorybook.js.map

@@ -1 +1 @@
-{"version":3,"file":"InitialiseFormWrapperForStorybook.js","sourceRoot":"","sources":["../../../src/stories/storybookWrappers/InitialiseFormWrapperForStorybook.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,aAAa;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,qBAAqB,MAAM,mBAAmB,CAAC;AACtD,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AAExE,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,uBAAuB,CAAC;AAW/B;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,iCAAiC,CAAC,KAAiC;IAC1E,MAAM,EACJ,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACX,GAAG,KAAK,CAAC;IAEV,qFAAqF;IACrF,MAAM,WAAW,GAAG,sBAAsB,EAAE,CAAC;IAE7C;;;;;OAKG;IACH,MAAM,cAAc,GAAG,iBAAiB,CACtC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,CACX,CAAC;IAEF,qDAAqD;IACrD,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YAClD,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,UAAU,mCAAsC,CAC7C,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,qBAAqB;QACpB,oBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW;YACtC,oBAAC,YAAY,OAAG,CACI,CACA,CACzB,CAAC;AACJ,CAAC;AAED,eAAe,iCAAiC,CAAC"}
+{"version":3,"file":"InitialiseFormWrapperForStorybook.js","sourceRoot":"","sources":["../../../src/stories/storybookWrappers/InitialiseFormWrapperForStorybook.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,aAAa;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,qBAAqB,MAAM,mBAAmB,CAAC;AACtD,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AAExE,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAWlD;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,iCAAiC,CAAC,KAAiC;IAC1E,MAAM,EACJ,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,EACX,GAAG,KAAK,CAAC;IAEV,qFAAqF;IACrF,MAAM,WAAW,GAAG,sBAAsB,EAAE,CAAC;IAE7C;;;;;OAKG;IACH,MAAM,cAAc,GAAG,iBAAiB,CACtC,aAAa,EACb,qBAAqB,EACrB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,CACX,CAAC;IAEF,qDAAqD;IACrD,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YAClD,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,UAAU,mCAAsC,CAC7C,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,qBAAqB;QACpB,oBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW;YACtC,oBAAC,YAAY,OAAG,CACI,CACA,CACzB,CAAC;AACJ,CAAC;AAED,eAAe,iCAAiC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,6 @@
   "dependencies": {
     "@aehrc/sdc-populate": "^2.3.1",
     "@iconify/react": "^4.1.1",
-    "@iframe-resizer/child": "^5.3.1",
     "dayjs": "^1.11.10",
     "deep-diff": "^1.0.2",
     "fhirclient": "^2.5.2",
@@ -63,15 +62,15 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@chromatic-com/storybook": "^1.3.5",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.3.3",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@storybook/types": "^8.2.9",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-vite": "^8.3.4",
+    "@storybook/test": "^8.3.4",
+    "@storybook/types": "^8.3.4",
     "@swc/cli": "^0.1.63",
     "@swc/core": "^1.5.28",
     "@testing-library/jest-dom": "^6.1.2",
@@ -91,7 +90,7 @@
     "chokidar": "^3.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.4",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.3",
     "typescript": "^5.2.2"

package/src/components/Renderer/SmartFormsRenderer.tsx

@@ -49,8 +49,6 @@ export interface SmartFormsRendererProps {
   readOnly?: boolean;
 }
 
-// Will be deprecated in version 1.0.0. Use alternative() instead. //FIXME add alternative
-
 /**
  * A self-initialising wrapper around the BaseRenderer rendering engine.
  * Will be deprecated in version 1.0.0. For alternative usage, see:

package/src/stories/storybookWrappers/BuildFormButtonTesterWrapperForStorybook.tsx

@@ -24,7 +24,6 @@ import { RendererThemeProvider } from '../../theme';
 import { useBuildForm, useRendererQueryClient } from '../../hooks';
 import BuildFormButtonForStorybook from './BuildFormButtonForStorybook';
 import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
-import '@iframe-resizer/child';
 
 interface BuildFormButtonTesterWrapperForStorybookProps {
   questionnaire: Questionnaire;

package/src/stories/storybookWrappers/BuildFormWrapperForStorybook.tsx

@@ -24,7 +24,6 @@ import RendererThemeProvider from '../../theme/Theme';
 import { useBuildForm } from '../../hooks';
 import useRendererQueryClient from '../../hooks/useRendererQueryClient';
 import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
-import '@iframe-resizer/child';
 
 interface BuildFormWrapperForStorybookProps {
   questionnaire: Questionnaire;

package/src/stories/storybookWrappers/FormValidationTesterWrapperForStorybook.tsx

@@ -25,7 +25,6 @@ import { useBuildForm, useRendererQueryClient } from '../../hooks';
 import { Grid } from '@mui/material';
 import FormValidationViewerForStorybook from './FormValidationViewerForStorybook';
 import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
-import '@iframe-resizer/child';
 
 interface FormValidationTesterWrapperForStorybookProps {
   questionnaire: Questionnaire;

package/src/stories/storybookWrappers/IdRemoverDebuggerWrapperForStorybook.tsx

@@ -26,7 +26,6 @@ import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
 import IdRemoverButtonForStorybook from './IdRemoverButtonForStorybook';
 import { Grid } from '@mui/material';
 import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stores';
-import '@iframe-resizer/child';
 
 interface IdRemoverDebuggerWrapperForStorybookProps {
   questionnaire: Questionnaire;

package/src/stories/storybookWrappers/InitialiseFormWrapperForStorybook.tsx

@@ -27,7 +27,6 @@ import useInitialiseForm from '../../hooks/useInitialiseForm';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
-import '@iframe-resizer/child';
 
 export interface InitialiseFormWrapperProps {
   questionnaire: Questionnaire;