@oneblink/apps-react 6.8.0 → 6.9.0-beta.10

package/dist/styles.css

@@ -8637,6 +8637,10 @@ button on-loading {
   right: 15px;
 }
 
+.ql-editor strong {
+  color: inherit;
+}
+
 .ob-buttons-radio {
   container-name: ob-buttons-radio;
   container-type: inline-size;
@@ -9544,6 +9548,10 @@ textarea:disabled {
   transform: translate(-50%, 50%);
 }
 
+.ob-section__collapsed {
+  display: none;
+}
+
 .ob-bsb__record-control {
   min-width: 0;
 }
@@ -9855,6 +9863,177 @@ textarea:disabled {
   }
 }
 
+.ob-validation-notification-wrapper {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 30;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.ob-validation-color-transition {
+  transition-property: color;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+.ob-validation-notification-card {
+  transition-property: transform, background-color;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  border-radius: 8px;
+  max-height: 350px;
+  overflow-y: auto;
+  border-color: #e8113c;
+  border-width: 2px;
+  border-style: solid;
+  animation: pulse-animation 1.5s infinite;
+}
+@keyframes pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 0 1rem rgba(255, 0, 0, 0);
+  }
+}
+
+.ob-validation-notification-card.is-expanded {
+  background-color: hsl(0, 0%, 100%);
+  color: hsl(0, 0%, 4%);
+}
+
+.ob-validation-notification-card.is-contracted {
+  background-color: #e8113c;
+  color: hsl(0, 0%, 100%);
+}
+
+.ob-validation-notification-card-content {
+  transition-property: padding;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  padding: 1rem;
+  padding-bottom: 1.5rem;
+}
+
+.is-contracted .ob-validation-notification-card-content {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.ob-validation-notification-card-header-wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ob-validation-notification-card-header-title-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.ob-validation-notification-card-header-title-text {
+  font-weight: 600;
+}
+
+.ob-validation-notification-card-header-title-icon {
+  margin-right: 0.5rem;
+  font-size: 22px;
+}
+
+.ob-validation-notification-card-collapse-wrapper {
+  transition-property: width, opacity;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
+.ob-validation-notification-wrapper .MuiCollapse-root {
+  transition-property: height;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+.is-contracted .ob-validation-notification-card-collapse-wrapper {
+  width: 196px;
+  opacity: 0;
+}
+
+.is-expanded .ob-validation-notification-card-collapse-wrapper {
+  width: 300px;
+  opacity: 1;
+}
+
+.ob-validation-notification-card-page-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.ob-validation-notification-card-page-label.is-not-first {
+  margin-top: 0.5rem;
+}
+
+.ob-validation-notification-card-list {
+  margin-top: 0.5rem;
+  border-radius: 8px;
+}
+
+.ob-validation-notification-card-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+}
+
+.ob-validation-notification-card-item.is-first {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.ob-validation-notification-card-item.is-last {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.ob-validation-notification-card-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 0.875rem;
+}
+
+.ob-validation-notification-card-item-text-error-message {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ob-validation-notification-card-item-icon {
+  margin-left: 0.5rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  .ob-bottom-navigation__content .ob-validation-notification-wrapper {
+    margin-bottom: 4rem;
+  }
+}
+@media only screen and (max-width: 769px) {
+  .ob-validation-notification-wrapper {
+    left: 1rem;
+  }
+  .is-contracted .ob-validation-notification-card-collapse-wrapper {
+    width: 100%;
+  }
+  .is-expanded .ob-validation-notification-card-collapse-wrapper {
+    width: 100%;
+  }
+  .section .ob-list.ob-validation-notification-card-list {
+    margin-right: unset;
+    margin-left: unset;
+    width: unset;
+  }
+}
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;

package/dist/styles.scss

@@ -141,6 +141,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/api-nsw-liquor-licence.scss';
 @import './styles/arcgis-web-map.scss';
 @import './styles/abn.scss';
+@import './styles/validation-errors-card.scss';
 //
 // Third Party
 //

package/dist/types/form.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormTypes, SubmissionTypes, IntegrationTypes } from '@oneblink/types';
 export { FormElementConditionallyShownElement, FormElementConditionallyShown, FormElementsConditionallyShown, } from '@oneblink/sdk-core/dist/conditionalLogicService';
 export type FormElementKey = string;

package/dist/utils/elementDOMIds.d.ts

@@ -0,0 +1,13 @@
+import { FormTypes } from '@oneblink/types';
+declare class ElementDOMId {
+    elementDOMId: string;
+    constructor(params: {
+        element: FormTypes.FormElementWithName;
+        idPrefix: string;
+    } | string);
+    get value(): string;
+    get elementContainerDOMId(): string;
+    get subFormDOMIdPrefix(): string;
+    repeatableSetEntryDOMIdPrefix: (entryKey: string) => string;
+}
+export default ElementDOMId;

package/dist/utils/elementDOMIds.js

@@ -0,0 +1,24 @@
+class ElementDOMId {
+    constructor(params) {
+        this.repeatableSetEntryDOMIdPrefix = (entryKey) => {
+            return `${this.elementDOMId}_entry-${entryKey}_`;
+        };
+        if (typeof params !== 'string') {
+            this.elementDOMId = `${params.idPrefix}${params.element.name}`;
+        }
+        else {
+            this.elementDOMId = params;
+        }
+    }
+    get value() {
+        return this.elementDOMId;
+    }
+    get elementContainerDOMId() {
+        return `element-container__${this.elementDOMId}`;
+    }
+    get subFormDOMIdPrefix() {
+        return `${this.elementDOMId}_`;
+    }
+}
+export default ElementDOMId;
+//# sourceMappingURL=elementDOMIds.js.map

package/dist/utils/elementDOMIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementDOMIds.js","sourceRoot":"","sources":["../../src/utils/elementDOMIds.ts"],"names":[],"mappings":"AAEA,MAAM,YAAY;IAEhB,YACE,MAKU;QAoBZ,kCAA6B,GAAG,CAAC,QAAgB,EAAE,EAAE;YACnD,OAAO,GAAG,IAAI,CAAC,YAAY,UAAU,QAAQ,GAAG,CAAA;QAClD,CAAC,CAAA;QApBC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,GAAG,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,MAAM,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IACD,IAAI,qBAAqB;QACvB,OAAO,sBAAsB,IAAI,CAAC,YAAY,EAAE,CAAA;IAClD,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,CAAA;IAChC,CAAC;CAKF;AAED,eAAe,YAAY,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\n\nclass ElementDOMId {\n  elementDOMId: string\n  constructor(\n    params:\n      | {\n          element: FormTypes.FormElementWithName\n          idPrefix: string\n        }\n      | string,\n  ) {\n    if (typeof params !== 'string') {\n      this.elementDOMId = `${params.idPrefix}${params.element.name}`\n    } else {\n      this.elementDOMId = params\n    }\n  }\n\n  get value() {\n    return this.elementDOMId\n  }\n  get elementContainerDOMId() {\n    return `element-container__${this.elementDOMId}`\n  }\n\n  get subFormDOMIdPrefix() {\n    return `${this.elementDOMId}_`\n  }\n\n  repeatableSetEntryDOMIdPrefix = (entryKey: string) => {\n    return `${this.elementDOMId}_entry-${entryKey}_`\n  }\n}\n\nexport default ElementDOMId\n"]}

package/dist/utils/merge-executed-lookups.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-executed-lookups.js","sourceRoot":"","sources":["../../src/utils/merge-executed-lookups.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAKhB;;IACC,IAAI,CAAC,gBAAgB,EAAE;QACrB,OAAO,eAAe,CAAA;KACvB;IAED,MAAM,sBAAsB,GAAG,EAAE,GAAG,eAAe,EAAE,CAAA;IACrD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE;QAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,sBAAsB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;gBACvD,MAAM,sBAAsB,GAC1B,MAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,GAAG,CAAuB,mCAAI,EAAE,CAAA;gBACrD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,CAAC,CAAC;oBAC1D,CAAC,CAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAChB,GAAG,CACiD;oBACxD,CAAC,CAAC,EAAE,CAAA;gBACN,OAAO,oBAAoB,CAAC;oBAC1B,gBAAgB,EAAE,KAAK;oBACvB,iBAAiB,EAAE,YAAY,CAAC,KAAK,CAAC;oBACtC,eAAe,EAAE,MAAA,sBAAsB,CAAC,KAAK,CAAC,mCAAI,EAAE;iBACrD,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YACF,SAAQ;SACT;QACD,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;YAC3B,sBAAsB,CAAC,GAAG,CAAC,GAAG,oBAAoB,CAAC;gBACjD,gBAAgB,EACd,KAAuD;gBACzD,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAClC,GAAG,CAC8C;gBACnD,eAAe,EAAE,MAAC,sBAAsB,CAAC,GAAG,CAAqB,mCAAI,EAAE;aACxE,CAAC,CAAA;YACF,SAAQ;SACT;QACD,sBAAsB,CAAC,GAAG,CAAC;YACzB,sBAAsB,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,MAAK,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,CAAC,CAAA,CAAA;KAC7E;IACD,OAAO,sBAAsB,CAAA;AAC/B,CAAC","sourcesContent":["import { SubmissionTypes } from '@oneblink/types'\nimport { ExecutedLookups } from '../types/form'\n\nexport default function mergeExecutedLookups({\n  dataLookupResult,\n  currentSubmission,\n  executedLookups,\n}: {\n  dataLookupResult: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  currentSubmission: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  executedLookups: ExecutedLookups\n}): ExecutedLookups {\n  if (!dataLookupResult) {\n    return executedLookups\n  }\n\n  const updatedExecutedLookups = { ...executedLookups }\n  for (const [key, value] of Object.entries(dataLookupResult)) {\n    if (Array.isArray(value)) {\n      updatedExecutedLookups[key] = value.map((entry, index) => {\n        const elementExecutedLookups =\n          (executedLookups?.[key] as ExecutedLookups[]) ?? []\n        const elementValue = Array.isArray(currentSubmission?.[key])\n          ? (currentSubmission?.[\n              key\n            ] as SubmissionTypes.S3SubmissionData['submission'][])\n          : []\n        return mergeExecutedLookups({\n          dataLookupResult: entry,\n          currentSubmission: elementValue[index],\n          executedLookups: elementExecutedLookups[index] ?? {},\n        })\n      })\n      continue\n    }\n    if (Object(value) === value) {\n      updatedExecutedLookups[key] = mergeExecutedLookups({\n        dataLookupResult:\n          value as SubmissionTypes.S3SubmissionData['submission'],\n        currentSubmission: currentSubmission?.[\n          key\n        ] as SubmissionTypes.S3SubmissionData['submission'],\n        executedLookups: (updatedExecutedLookups[key] as ExecutedLookups) ?? {},\n      })\n      continue\n    }\n    updatedExecutedLookups[key] =\n      updatedExecutedLookups[key] === true && value === currentSubmission?.[key]\n  }\n  return updatedExecutedLookups\n}\n"]}
+{"version":3,"file":"merge-executed-lookups.js","sourceRoot":"","sources":["../../src/utils/merge-executed-lookups.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,GAKhB;;IACC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,MAAM,sBAAsB,GAAG,EAAE,GAAG,eAAe,EAAE,CAAA;IACrD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAC5D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,sBAAsB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;gBACvD,MAAM,sBAAsB,GAC1B,MAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,GAAG,CAAuB,mCAAI,EAAE,CAAA;gBACrD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,CAAC,CAAC;oBAC1D,CAAC,CAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAChB,GAAG,CACiD;oBACxD,CAAC,CAAC,EAAE,CAAA;gBACN,OAAO,oBAAoB,CAAC;oBAC1B,gBAAgB,EAAE,KAAK;oBACvB,iBAAiB,EAAE,YAAY,CAAC,KAAK,CAAC;oBACtC,eAAe,EAAE,MAAA,sBAAsB,CAAC,KAAK,CAAC,mCAAI,EAAE;iBACrD,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;YACF,SAAQ;QACV,CAAC;QACD,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YAC5B,sBAAsB,CAAC,GAAG,CAAC,GAAG,oBAAoB,CAAC;gBACjD,gBAAgB,EACd,KAAuD;gBACzD,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAClC,GAAG,CAC8C;gBACnD,eAAe,EAAE,MAAC,sBAAsB,CAAC,GAAG,CAAqB,mCAAI,EAAE;aACxE,CAAC,CAAA;YACF,SAAQ;QACV,CAAC;QACD,sBAAsB,CAAC,GAAG,CAAC;YACzB,sBAAsB,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,MAAK,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,GAAG,CAAC,CAAA,CAAA;IAC9E,CAAC;IACD,OAAO,sBAAsB,CAAA;AAC/B,CAAC","sourcesContent":["import { SubmissionTypes } from '@oneblink/types'\nimport { ExecutedLookups } from '../types/form'\n\nexport default function mergeExecutedLookups({\n  dataLookupResult,\n  currentSubmission,\n  executedLookups,\n}: {\n  dataLookupResult: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  currentSubmission: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  executedLookups: ExecutedLookups\n}): ExecutedLookups {\n  if (!dataLookupResult) {\n    return executedLookups\n  }\n\n  const updatedExecutedLookups = { ...executedLookups }\n  for (const [key, value] of Object.entries(dataLookupResult)) {\n    if (Array.isArray(value)) {\n      updatedExecutedLookups[key] = value.map((entry, index) => {\n        const elementExecutedLookups =\n          (executedLookups?.[key] as ExecutedLookups[]) ?? []\n        const elementValue = Array.isArray(currentSubmission?.[key])\n          ? (currentSubmission?.[\n              key\n            ] as SubmissionTypes.S3SubmissionData['submission'][])\n          : []\n        return mergeExecutedLookups({\n          dataLookupResult: entry,\n          currentSubmission: elementValue[index],\n          executedLookups: elementExecutedLookups[index] ?? {},\n        })\n      })\n      continue\n    }\n    if (Object(value) === value) {\n      updatedExecutedLookups[key] = mergeExecutedLookups({\n        dataLookupResult:\n          value as SubmissionTypes.S3SubmissionData['submission'],\n        currentSubmission: currentSubmission?.[\n          key\n        ] as SubmissionTypes.S3SubmissionData['submission'],\n        executedLookups: (updatedExecutedLookups[key] as ExecutedLookups) ?? {},\n      })\n      continue\n    }\n    updatedExecutedLookups[key] =\n      updatedExecutedLookups[key] === true && value === currentSubmission?.[key]\n  }\n  return updatedExecutedLookups\n}\n"]}

package/dist/utils/scrollToElement.d.ts

@@ -0,0 +1,6 @@
+declare const scrollToElement: ({ id, navigationTopOffset, }: {
+    id: string;
+    /** We allow an offset to cater for any headers */
+    navigationTopOffset: number;
+}) => void;
+export default scrollToElement;

package/dist/utils/scrollToElement.js

@@ -0,0 +1,65 @@
+/**
+ * Recursively traverses ancestors to find the first visible ancestor element
+ * and allow getting its scroll point. It handles the case of ancestor elements
+ * being hidden by `ob-hidden` or an ancestor section being collapsed.
+ *
+ * @param element - The element for which to find its first visible ancestor or
+ *   ancestor sibling.
+ * @returns A callback that returns the scroll point of the first visible
+ *   ancestor element, or undefined if none is found.
+ */
+const findScrollPointOfVisibleAncestorElement = (element) => {
+    var _a;
+    const isVisible = element.checkVisibility();
+    if (!isVisible) {
+        const OBHiddenElement = element.closest('.is-hidden');
+        if (OBHiddenElement) {
+            // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.
+            const parentIsVisible = (_a = OBHiddenElement.parentElement) === null || _a === void 0 ? void 0 : _a.checkVisibility();
+            if (!parentIsVisible) {
+                return findScrollPointOfVisibleAncestorElement(OBHiddenElement);
+            }
+            let previousSibling = OBHiddenElement.previousElementSibling;
+            while (previousSibling) {
+                if (previousSibling.checkVisibility()) {
+                    // Have to reasign for TS, because it does not recognise the typeguard in the `while` inside the callback function
+                    const sib = previousSibling;
+                    return () => sib.getBoundingClientRect().bottom;
+                }
+                previousSibling = previousSibling.previousElementSibling;
+            }
+        }
+        // Collapsed section ancestor
+        const ancestorCollapsedSection = element.closest('.ob-section__collapsed');
+        if (ancestorCollapsedSection) {
+            const ancestorSectionRoot = ancestorCollapsedSection.closest('.ob-section');
+            return ancestorSectionRoot
+                ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)
+                : undefined;
+        }
+        // Not visible for some other reason
+        return;
+    }
+    else {
+        return () => element.getBoundingClientRect().top;
+    }
+};
+const scrollToElement = ({ id, navigationTopOffset, }) => {
+    const element = document.getElementById(id);
+    if (element) {
+        const getScrollPoint = findScrollPointOfVisibleAncestorElement(element);
+        if (getScrollPoint) {
+            window.requestAnimationFrame(() => {
+                window.scrollTo({
+                    top: getScrollPoint() +
+                        window.scrollY -
+                        // We allow an offset to cater for any headers
+                        navigationTopOffset,
+                    behavior: 'smooth',
+                });
+            });
+        }
+    }
+};
+export default scrollToElement;
+//# sourceMappingURL=scrollToElement.js.map

package/dist/utils/scrollToElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollToElement.js","sourceRoot":"","sources":["../../src/utils/scrollToElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,uCAAuC,GAAG,CAC9C,OAAgB,EACY,EAAE;;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,eAAe,EAAE,CAAA;IAC3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QAErD,IAAI,eAAe,EAAE,CAAC;YACpB,2GAA2G;YAC3G,MAAM,eAAe,GAAG,MAAA,eAAe,CAAC,aAAa,0CAAE,eAAe,EAAE,CAAA;YACxE,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrB,OAAO,uCAAuC,CAAC,eAAe,CAAC,CAAA;YACjE,CAAC;YACD,IAAI,eAAe,GAAG,eAAe,CAAC,sBAAsB,CAAA;YAC5D,OAAO,eAAe,EAAE,CAAC;gBACvB,IAAI,eAAe,CAAC,eAAe,EAAE,EAAE,CAAC;oBACtC,kHAAkH;oBAClH,MAAM,GAAG,GAAG,eAAe,CAAA;oBAC3B,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAA;gBACjD,CAAC;gBACD,eAAe,GAAG,eAAe,CAAC,sBAAsB,CAAA;YAC1D,CAAC;QACH,CAAC;QAED,6BAA6B;QAC7B,MAAM,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAA;QAC1E,IAAI,wBAAwB,EAAE,CAAC;YAC7B,MAAM,mBAAmB,GACvB,wBAAwB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAA;YACjD,OAAO,mBAAmB;gBACxB,CAAC,CAAC,uCAAuC,CAAC,mBAAmB,CAAC;gBAC9D,CAAC,CAAC,SAAS,CAAA;QACf,CAAC;QAED,oCAAoC;QACpC,OAAM;IACR,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAA;IAClD,CAAC;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,EAAE,EACF,mBAAmB,GAKpB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;IAE3C,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,cAAc,GAAG,uCAAuC,CAAC,OAAO,CAAC,CAAA;QACvE,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,QAAQ,CAAC;oBACd,GAAG,EACD,cAAc,EAAE;wBAChB,MAAM,CAAC,OAAO;wBACd,8CAA8C;wBAC9C,mBAAmB;oBACrB,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA","sourcesContent":["/**\n * Recursively traverses ancestors to find the first visible ancestor element\n * and allow getting its scroll point. It handles the case of ancestor elements\n * being hidden by `ob-hidden` or an ancestor section being collapsed.\n *\n * @param element - The element for which to find its first visible ancestor or\n *   ancestor sibling.\n * @returns A callback that returns the scroll point of the first visible\n *   ancestor element, or undefined if none is found.\n */\nconst findScrollPointOfVisibleAncestorElement = (\n  element: Element,\n): (() => number) | undefined => {\n  const isVisible = element.checkVisibility()\n  if (!isVisible) {\n    const OBHiddenElement = element.closest('.is-hidden')\n\n    if (OBHiddenElement) {\n      // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.\n      const parentIsVisible = OBHiddenElement.parentElement?.checkVisibility()\n      if (!parentIsVisible) {\n        return findScrollPointOfVisibleAncestorElement(OBHiddenElement)\n      }\n      let previousSibling = OBHiddenElement.previousElementSibling\n      while (previousSibling) {\n        if (previousSibling.checkVisibility()) {\n          // Have to reasign for TS, because it does not recognise the typeguard in the `while` inside the callback function\n          const sib = previousSibling\n          return () => sib.getBoundingClientRect().bottom\n        }\n        previousSibling = previousSibling.previousElementSibling\n      }\n    }\n\n    // Collapsed section ancestor\n    const ancestorCollapsedSection = element.closest('.ob-section__collapsed')\n    if (ancestorCollapsedSection) {\n      const ancestorSectionRoot =\n        ancestorCollapsedSection.closest('.ob-section')\n      return ancestorSectionRoot\n        ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)\n        : undefined\n    }\n\n    // Not visible for some other reason\n    return\n  } else {\n    return () => element.getBoundingClientRect().top\n  }\n}\n\nconst scrollToElement = ({\n  id,\n  navigationTopOffset,\n}: {\n  id: string\n  /** We allow an offset to cater for any headers */\n  navigationTopOffset: number\n}) => {\n  const element = document.getElementById(id)\n\n  if (element) {\n    const getScrollPoint = findScrollPointOfVisibleAncestorElement(element)\n    if (getScrollPoint) {\n      window.requestAnimationFrame(() => {\n        window.scrollTo({\n          top:\n            getScrollPoint() +\n            window.scrollY -\n            // We allow an offset to cater for any headers\n            navigationTopOffset,\n          behavior: 'smooth',\n        })\n      })\n    }\n  }\n}\n\nexport default scrollToElement\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "6.8.0",
+  "version": "6.9.0-beta.10",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -76,17 +76,18 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fixpack": "^4.0.0",
-    "jest": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.2.4",
     "prettier-plugin-jsdoc": "^1.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "sass": "^1.70.0",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^29.2.5",
     "tsc-watch": "^6.0.4",
-    "typedoc": "^0.24.8",
-    "typescript": "^4.9.5"
+    "typedoc": "^0.26.9",
+    "typescript": "^5.6.3"
   },
   "directories": {
     "doc": "docs"