npm - @oneblink/apps-react - Versions diffs - 8.4.0-beta.1 → 8.4.0-beta.2 - Mend

@oneblink/apps-react 8.4.0-beta.1 → 8.4.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/form-elements/FormElementBoolean.js +12 -3
package/dist/form-elements/FormElementBoolean.js.map +1 -1
package/dist/hooks/usePages.js +9 -1
package/dist/hooks/usePages.js.map +1 -1
package/dist/utils/scrollToElement.js +3 -1
package/dist/utils/scrollToElement.js.map +1 -1
package/package.json +1 -1

package/dist/form-elements/FormElementBoolean.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import { Switch } from '@mui/material';
+import { Checkbox, Switch } from '@mui/material';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 function FormElementBoolean({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
@@ -8,14 +8,23 @@ function FormElementBoolean({ id, element, value, onChange, validationMessage, d
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (React.createElement("div", { className: "cypress-boolean-element" },
-        React.createElement(FormElementLabelContainer, { className: "ob-boolean", id: id, element: element, required: element.required, leading: React.createElement(Switch, { id: id, name: element.name, color: "primary", edge: "start", className: "ob-boolean__input cypress-boolean-control", classes: {
+        React.createElement(FormElementLabelContainer, { className: "ob-boolean", id: id, element: element, required: element.required, leading: element.displayAsCheckbox ? (React.createElement(Checkbox, { color: "primary", classes: {
+                    checked: 'ob-boolean-checkbox__input-checked',
+                }, className: "ob-boolean-checkbox__input cypress-checkbox-control", id: id, checked: !!value, onChange: (e) => {
+                    setIsDirty();
+                    onChange(element, {
+                        value: e.target.checked,
+                    });
+                }, disabled: element.readOnly, edge: "start", inputProps: {
+                    'aria-describedby': ariaDescribedby,
+                }, onBlur: setIsDirty })) : (React.createElement(Switch, { id: id, name: element.name, color: "primary", edge: "start", className: "ob-boolean__input cypress-boolean-control", classes: {
                     checked: 'ob-boolean__input-checked',
                 }, checked: !!value, disabled: element.readOnly, onChange: (e) => {
                     setIsDirty();
                     onChange(element, {
                         value: e.target.checked,
                     });
-                }, "aria-describedby": ariaDescribedby, onBlur: setIsDirty }) }, isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                }, "aria-describedby": ariaDescribedby, onBlur: setIsDirty })) }, isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
             React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }
 export default React.memo(FormElementBoolean);

package/dist/form-elements/FormElementBoolean.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementBoolean.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBoolean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;~~AAEtC~~,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAW1E,SAAS,kBAAkB,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,oBAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE;oBACP,OAAO,EAAE,2BAA2B;iBACrC,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,sBACiB,eAAe,EACjC,MAAM,EAAE,UAAU,GAClB,~~IAGH~~,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.BooleanElement\n value: unknown\n onChange: FormElementValueChangeHandler<boolean>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementBoolean({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-boolean-element\">\n <FormElementLabelContainer\n className=\"ob-boolean\"\n id={id}\n element={element}\n required={element.required}\n leading={\n <Switch\n id={id}\n name={element.name}\n color=\"primary\"\n edge=\"start\"\n className=\"ob-boolean__input cypress-boolean-control\"\n classes={{\n checked: 'ob-boolean__input-checked',\n }}\n checked={!!value}\n disabled={element.readOnly}\n onChange={(e) => {\n setIsDirty()\n onChange(element, {\n value: e.target.checked,\n })\n }}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n />\n }\n >\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBoolean)\n"]}
1	+ {"version":3,"file":"FormElementBoolean.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBoolean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAW1E,SAAS,kBAAkB,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EACL,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAC1B,oBAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;oBACP,OAAO,EAAE,oCAAoC;iBAC9C,EACD,SAAS,EAAC,qDAAqD,EAC/D,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE;oBACV,kBAAkB,EAAE,eAAe;iBACpC,EACD,MAAM,EAAE,UAAU,GAClB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE;oBACP,OAAO,EAAE,2BAA2B;iBACrC,EACD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,UAAU,EAAE,CAAA;oBACZ,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;qBACxB,CAAC,CAAA;gBACJ,CAAC,sBACiB,eAAe,EACjC,MAAM,EAAE,UAAU,GAClB,CACH,IAGF,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Checkbox, Switch } from '@mui/material'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.BooleanElement\n value: unknown\n onChange: FormElementValueChangeHandler<boolean>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n} & IsDirtyProps\n\nfunction FormElementBoolean({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-boolean-element\">\n <FormElementLabelContainer\n className=\"ob-boolean\"\n id={id}\n element={element}\n required={element.required}\n leading={\n element.displayAsCheckbox ? (\n <Checkbox\n color=\"primary\"\n classes={{\n checked: 'ob-boolean-checkbox__input-checked',\n }}\n className=\"ob-boolean-checkbox__input cypress-checkbox-control\"\n id={id}\n checked={!!value}\n onChange={(e) => {\n setIsDirty()\n onChange(element, {\n value: e.target.checked,\n })\n }}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={setIsDirty}\n />\n ) : (\n <Switch\n id={id}\n name={element.name}\n color=\"primary\"\n edge=\"start\"\n className=\"ob-boolean__input cypress-boolean-control\"\n classes={{\n checked: 'ob-boolean__input-checked',\n }}\n checked={!!value}\n disabled={element.readOnly}\n onChange={(e) => {\n setIsDirty()\n onChange(element, {\n value: e.target.checked,\n })\n }}\n aria-describedby={ariaDescribedby}\n onBlur={setIsDirty}\n />\n )\n }\n >\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBoolean)\n"]}

package/dist/hooks/usePages.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { checkSectionValidity } from '../services/form-validation/validators';
 import scrollingService from '../services/scrolling-service';
 import generateConfirmationFormElementName from '../services/generateConfirmationFormElement';
 function injectDynamicElements(formElements) {
-    return formElements.reduce((memo, formElement) => {
+    return formElements.reduce((memo, formElement, elementIndex) => {
         if ('elements' in formElement && Array.isArray(formElement.elements)) {
             memo.push({
                 ...formElement,
@@ -17,6 +17,14 @@ function injectDynamicElements(formElements) {
             case 'email': {
                 if (formElement.requiresConfirmation) {
                     const confirmationFormElementName = generateConfirmationFormElementName(formElement);
+                    // Since confirmation elements are always added directly after an element,
+                    // we can just check the next element to see if it has already been added.
+                    // This is much more efficient than searching the entire form.
+                    const nextElement = formElements[elementIndex + 1];
+                    if ((nextElement === null || nextElement === void 0 ? void 0 : nextElement.id) === confirmationFormElementName) {
+                        // Already been added
+                        return memo;
+                    }
                     memo.push({
                         ...formElement,
                         id: confirmationFormElementName,

package/dist/hooks/usePages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\nimport generateConfirmationFormElementName from '../services/generateConfirmationFormElement'\n\nfunction injectDynamicElements(\n formElements: FormTypes.FormElement[],\n): FormTypes.FormElement[] {\n return formElements.reduce<FormTypes.FormElement[]>((memo, formElement) => {\n if ('elements' in formElement && Array.isArray(formElement.elements)) {\n memo.push({\n ...formElement,\n elements: injectDynamicElements(formElement.elements \|\| []),\n })\n return memo\n }\n\n memo.push(formElement)\n\n switch (formElement.type) {\n case 'email': {\n if (formElement.requiresConfirmation) {\n const confirmationFormElementName =\n generateConfirmationFormElementName(formElement)\n memo.push({\n ...formElement,\n id: confirmationFormElementName,\n name: confirmationFormElementName,\n label: `Confirm ${formElement.label}`,\n isDataLookup: false,\n isElementLookup: false,\n defaultValue: undefined,\n hint: undefined,\n hintPosition: undefined,\n requiresConfirmation: false,\n })\n }\n }\n }\n\n return memo\n }, [])\n}\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation \| undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const pagesWithDynamicElements = React.useMemo<\n FormTypes.PageElement[]\n >(() => {\n return injectDynamicElements(pages) as FormTypes.PageElement[]\n }, [pages])\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pagesWithDynamicElements.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pagesWithDynamicElements])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}
1	+ {"version":3,"file":"usePages.js","sourceRoot":"","sources":["../../src/hooks/usePages.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport { checkSectionValidity } from '../services/form-validation/validators'\nimport scrollingService from '../services/scrolling-service'\nimport {\n FormElementsConditionallyShown,\n FormElementsValidation,\n} from '../types/form'\nimport generateConfirmationFormElementName from '../services/generateConfirmationFormElement'\n\nfunction injectDynamicElements(\n formElements: FormTypes.FormElement[],\n): FormTypes.FormElement[] {\n return formElements.reduce<FormTypes.FormElement[]>(\n (memo, formElement, elementIndex) => {\n if ('elements' in formElement && Array.isArray(formElement.elements)) {\n memo.push({\n ...formElement,\n elements: injectDynamicElements(formElement.elements \|\| []),\n })\n return memo\n }\n\n memo.push(formElement)\n\n switch (formElement.type) {\n case 'email': {\n if (formElement.requiresConfirmation) {\n const confirmationFormElementName =\n generateConfirmationFormElementName(formElement)\n\n // Since confirmation elements are always added directly after an element,\n // we can just check the next element to see if it has already been added.\n // This is much more efficient than searching the entire form.\n const nextElement = formElements[elementIndex + 1] as\n \| FormTypes.FormElement\n \| undefined\n if (nextElement?.id === confirmationFormElementName) {\n // Already been added\n return memo\n }\n\n memo.push({\n ...formElement,\n id: confirmationFormElementName,\n name: confirmationFormElementName,\n label: `Confirm ${formElement.label}`,\n isDataLookup: false,\n isElementLookup: false,\n defaultValue: undefined,\n hint: undefined,\n hintPosition: undefined,\n requiresConfirmation: false,\n })\n }\n }\n }\n\n return memo\n },\n [],\n )\n}\n\nexport default function usePages({\n pages,\n formElementsValidation,\n formElementsConditionallyShown,\n hasAttemptedSubmit,\n}: {\n pages: FormTypes.PageElement[]\n formElementsValidation: FormElementsValidation \| undefined\n formElementsConditionallyShown: FormElementsConditionallyShown\n hasAttemptedSubmit: boolean\n}) {\n const scrollToTopOfPageHTMLElementRef = React.useRef<HTMLDivElement>(null)\n const [visitedPageIds, setVisitedPageIds] = React.useState<string[]>([])\n\n const [isStepsHeaderActive, , closeStepsNavigation, toggleStepsNavigation] =\n useBooleanState(false)\n\n const pagesWithDynamicElements = React.useMemo<\n FormTypes.PageElement[]\n >(() => {\n return injectDynamicElements(pages) as FormTypes.PageElement[]\n }, [pages])\n\n const visiblePages = React.useMemo<FormTypes.PageElement[]>(() => {\n return pagesWithDynamicElements.filter((pageElement) => {\n return !formElementsConditionallyShown?.[pageElement.id]?.isHidden\n })\n }, [formElementsConditionallyShown, pagesWithDynamicElements])\n\n const [currentPageId, setCurrentPageId] = React.useState(visiblePages[0].id)\n\n const currentPage = React.useMemo(() => {\n const currentPageById = visiblePages.find((pageElement) => {\n return pageElement.id === currentPageId\n })\n if (currentPageById) {\n return currentPageById\n } else {\n return visiblePages[0]\n }\n }, [currentPageId, visiblePages])\n\n const currentPageIndex = React.useMemo(\n () => visiblePages.indexOf(currentPage),\n [currentPage, visiblePages],\n )\n\n const currentPageNumber = React.useMemo(() => {\n if (currentPage) {\n return visiblePages.indexOf(currentPage) + 1\n }\n }, [currentPage, visiblePages])\n\n const isShowingMultiplePages = visiblePages.length > 1\n\n const setPageId = React.useCallback(\n (pageId: string) => {\n setVisitedPageIds((currentVisitedPageIds) => {\n if (currentVisitedPageIds.includes(currentPageId)) {\n return currentVisitedPageIds\n } else {\n return [...currentVisitedPageIds, currentPageId]\n }\n })\n setCurrentPageId(pageId)\n closeStepsNavigation()\n\n const scrollToTopOfPageHTMLElement =\n scrollToTopOfPageHTMLElementRef.current\n if (isShowingMultiplePages && scrollToTopOfPageHTMLElement) {\n if (scrollToTopOfPageHTMLElement) {\n window.requestAnimationFrame(() => {\n scrollToTopOfPageHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n const stepItemHTMLElement = document.getElementById(\n `steps-navigation-step-${pageId}`,\n )\n if (stepItemHTMLElement) {\n window.requestAnimationFrame(() => {\n stepItemHTMLElement.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n })\n })\n }\n //blur prev/next buttons after they've been clicked\n const activeElement = document?.activeElement as HTMLElement\n activeElement.blur()\n }\n },\n [closeStepsNavigation, currentPageId, isShowingMultiplePages],\n )\n\n const goToNextPage = React.useCallback(() => {\n for (let i = 0; i < visiblePages.length; i++) {\n const page = visiblePages[i]\n if (page.id === currentPageId) {\n const nextVisiblePage = visiblePages[i + 1]\n if (nextVisiblePage) {\n setPageId(nextVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const goToPreviousPage = React.useCallback(() => {\n for (let i = visiblePages.length - 1; i > -1; i--) {\n const page = visiblePages[i]\n if (page && page.id === currentPageId) {\n const previousVisiblePage = visiblePages[i - 1]\n if (previousVisiblePage) {\n setPageId(previousVisiblePage.id)\n }\n break\n }\n }\n }, [currentPageId, setPageId, visiblePages])\n\n const checkDisplayPageError = React.useCallback(\n (page: FormTypes.PageElement) => {\n // If we have not visited the page yet, we will not display errors\n if (!visitedPageIds.includes(page.id) && !hasAttemptedSubmit) {\n return false\n }\n\n return checkSectionValidity(page, formElementsValidation)\n },\n [formElementsValidation, visitedPageIds, hasAttemptedSubmit],\n )\n\n React.useEffect(() => {\n if (isStepsHeaderActive) {\n scrollingService.disableScrolling()\n\n const activeStepElement = document.getElementById(\n `steps-navigation-step-${currentPageId}`,\n )\n\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'start',\n })\n }\n } else {\n // Re-enable scroll on body when inactive\n scrollingService.enableScrolling()\n }\n }, [currentPageId, isStepsHeaderActive])\n\n const firstVisiblePage = visiblePages[0]\n const lastVisiblePage = visiblePages[visiblePages.length - 1]\n const isLastVisiblePage =\n lastVisiblePage && lastVisiblePage.id === currentPageId\n const isFirstVisiblePage =\n firstVisiblePage && firstVisiblePage.id === currentPageId\n const isDisplayingCurrentPageError = checkDisplayPageError(currentPage)\n\n // Clean up when form is navigated away\n React.useEffect(() => {\n return () => {\n scrollingService.enableScrolling()\n }\n }, [])\n\n return {\n visiblePages,\n isFirstVisiblePage,\n isLastVisiblePage,\n isDisplayingCurrentPageError,\n isShowingMultiplePages,\n isStepsHeaderActive,\n toggleStepsNavigation,\n currentPageIndex,\n currentPage,\n currentPageNumber,\n checkDisplayPageError,\n setPageId,\n goToPreviousPage,\n goToNextPage,\n scrollToTopOfPageHTMLElementRef,\n }\n}\n"]}

package/dist/utils/scrollToElement.js CHANGED Viewed

@@ -126,7 +126,9 @@ const scrollToElement = ({ elementDOMId, navigationTopOffset, scrollableContaine
                         }
                     }
                 }
-                (_c = document.getElementById(elementDOMId.value)) === null || _c === void 0 ? void 0 : _c.focus();
+                (_c = document.getElementById(elementDOMId.value)) === null || _c === void 0 ? void 0 : _c.focus({
+                    preventScroll: true,
+                });
             });
         }
     }

package/dist/utils/scrollToElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollToElement.js","sourceRoot":"","sources":["../../src/utils/scrollToElement.ts"],"names":[],"mappings":"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","sourcesContent":["import ElementDOMId from './elementDOMIds'\n\n/*\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 `is-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: HTMLElement,\n): ((scrollableContainerId?: string) => number) \| undefined => {\n const isVisible = element.checkVisibility()\n if (!isVisible) {\n const OBHiddenElement = element.closest('.is-hidden')\n if (OBHiddenElement && OBHiddenElement instanceof HTMLElement) {\n const parentOfHiddenElement = OBHiddenElement.parentElement\n if (\n !parentOfHiddenElement \|\|\n !(parentOfHiddenElement instanceof HTMLElement)\n ) {\n return\n }\n // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.\n const parentIsVisible = parentOfHiddenElement.checkVisibility()\n if (!parentIsVisible) {\n if (OBHiddenElement.id === element.id) {\n // If the hidden element was not an ancestor, but instead the current element,\n // we need to go recursive with the parent instead of the same element\n return findScrollPointOfVisibleAncestorElement(\n OBHiddenElement.parentElement,\n )\n }\n return findScrollPointOfVisibleAncestorElement(OBHiddenElement)\n }\n let previousSibling = OBHiddenElement.previousElementSibling\n while (previousSibling && previousSibling instanceof HTMLElement) {\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 (scrollableContainerId?: string) => {\n if (scrollableContainerId) {\n return sib.offsetTop + sib.clientHeight\n }\n return sib.getBoundingClientRect().bottom\n }\n }\n previousSibling = previousSibling.previousElementSibling\n }\n // Revert to parent if no sibling is visible\n if (OBHiddenElement.parentElement instanceof HTMLElement) {\n return findScrollPointOfVisibleAncestorElement(\n OBHiddenElement.parentElement,\n )\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 && ancestorSectionRoot instanceof HTMLElement\n ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)\n : undefined\n }\n\n // Not visible for some other reason\n return\n } else {\n return (scrollableContainerId?: string) => {\n if (scrollableContainerId) {\n let top = 0\n let el: HTMLElement \| null = element\n while (el) {\n const offsetParent: Element \| null = el.offsetParent\n if (offsetParent instanceof HTMLElement) {\n const offsetParentIsInsideScrollableContainer =\n offsetParent.closest(`#${scrollableContainerId}`)\n\n // Only process the offset of the current element if the offset parent\n // (offsetTop is derived from distance between element and top of `offsetParent)\n // is inside the scrollable container (or is the scrollable container).\n if (offsetParentIsInsideScrollableContainer) {\n top += el.offsetTop\n el = offsetParent\n continue\n }\n }\n el = null\n }\n return top\n }\n return element.getBoundingClientRect().top\n }\n }\n}\n\nconst scrollToElement = ({\n elementDOMId,\n navigationTopOffset,\n scrollableContainerId,\n}: {\n elementDOMId: ElementDOMId\n /* We allow an offset to cater for any headers /\n navigationTopOffset: number \| 'CALCULATE'\n scrollableContainerId?: string\n}) => {\n const element = document.getElementById(elementDOMId.elementContainerDOMId)\n if (element) {\n const getScrollPoint = findScrollPointOfVisibleAncestorElement(element)\n if (getScrollPoint) {\n window.requestAnimationFrame(() => {\n if (scrollableContainerId) {\n const scrollContainer = document.getElementById(scrollableContainerId)\n // Account for any top padding on the scrollable container\n const topPadding = parseFloat(\n scrollContainer\n ?.computedStyleMap()\n .get('padding-top')\n ?.toString() ?? '',\n )\n const scrollTo =\n getScrollPoint(scrollableContainerId) +\n topPadding -\n // We allow an offset to cater for any headers\n (typeof navigationTopOffset === 'number' ? navigationTopOffset : 0)\n scrollContainer?.scrollTo({\n top: scrollTo,\n behavior: 'smooth',\n })\n // We do not currently attempt to `CALCULATE` the top scroll offset for form containers,\n // as we have no guarantee that the container element is currently in the viewport, so this is more complicated.\n } else {\n const scrollTo =\n getScrollPoint() +\n window.scrollY -\n // We allow an offset to cater for any headers\n (typeof navigationTopOffset === 'number' ? navigationTopOffset : 0)\n window.scrollTo({\n top: scrollTo,\n behavior: 'smooth',\n })\n\n // Calculate Offset\n if (navigationTopOffset === 'CALCULATE') {\n const calculatedNavigationTopOffset =\n calculateDesiredOffsetAfterInitialScroll(element)\n if (calculatedNavigationTopOffset) {\n window.scrollTo({\n top: scrollTo - calculatedNavigationTopOffset,\n behavior: 'smooth',\n })\n }\n }\n }\n\n document.getElementById(elementDOMId.value)?.focus()\n })\n }\n }\n}\n\nexport default scrollToElement\n\n/\n Attempts to calculate the top scroll offset necessary to see the desired\n * element if it is being covered by any fixed, sticky or absolute elements,\n * after initial scroll.\n \n @param element - The element which we want to make visible. NOTE: This\n * element should already be scrolled to the 0 `Y` co-ordinate of the viewport\n * when calling this function for best results with sticky and absolute\n * elements.\n * @returns A number that can be subtracted from the scroll point that would\n * otherwise show the desired element at the 0 `Y` co-ordinate of the\n * viewport.\n */\nconst calculateDesiredOffsetAfterInitialScroll = (element: HTMLElement) => {\n const elementLeft = element.getBoundingClientRect().left\n let offset = 0\n // Get element in the front-most position, right at the top of the page (where our element should be located currently)\n let elementFromPoint = document.elementFromPoint(elementLeft, offset)\n if (!elementFromPoint) {\n return offset\n }\n let position = window.getComputedStyle(elementFromPoint).position\n\n while (\n position === 'fixed' \|\|\n position === 'absolute' \|\|\n position === 'sticky'\n ) {\n // Get next elementFromPoint\n offset = elementFromPoint.getBoundingClientRect().bottom + 1\n elementFromPoint = document.elementFromPoint(elementLeft, offset)\n if (!elementFromPoint) {\n return offset\n }\n position = window.getComputedStyle(elementFromPoint).position\n }\n return offset\n}\n"]}
1	+ {"version":3,"file":"scrollToElement.js","sourceRoot":"","sources":["../../src/utils/scrollToElement.ts"],"names":[],"mappings":"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","sourcesContent":["import ElementDOMId from './elementDOMIds'\n\n/*\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 `is-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: HTMLElement,\n): ((scrollableContainerId?: string) => number) \| undefined => {\n const isVisible = element.checkVisibility()\n if (!isVisible) {\n const OBHiddenElement = element.closest('.is-hidden')\n if (OBHiddenElement && OBHiddenElement instanceof HTMLElement) {\n const parentOfHiddenElement = OBHiddenElement.parentElement\n if (\n !parentOfHiddenElement \|\|\n !(parentOfHiddenElement instanceof HTMLElement)\n ) {\n return\n }\n // In the case of a hidden ancestor element we will navigate to the bottom of the previous visible sibling.\n const parentIsVisible = parentOfHiddenElement.checkVisibility()\n if (!parentIsVisible) {\n if (OBHiddenElement.id === element.id) {\n // If the hidden element was not an ancestor, but instead the current element,\n // we need to go recursive with the parent instead of the same element\n return findScrollPointOfVisibleAncestorElement(\n OBHiddenElement.parentElement,\n )\n }\n return findScrollPointOfVisibleAncestorElement(OBHiddenElement)\n }\n let previousSibling = OBHiddenElement.previousElementSibling\n while (previousSibling && previousSibling instanceof HTMLElement) {\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 (scrollableContainerId?: string) => {\n if (scrollableContainerId) {\n return sib.offsetTop + sib.clientHeight\n }\n return sib.getBoundingClientRect().bottom\n }\n }\n previousSibling = previousSibling.previousElementSibling\n }\n // Revert to parent if no sibling is visible\n if (OBHiddenElement.parentElement instanceof HTMLElement) {\n return findScrollPointOfVisibleAncestorElement(\n OBHiddenElement.parentElement,\n )\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 && ancestorSectionRoot instanceof HTMLElement\n ? findScrollPointOfVisibleAncestorElement(ancestorSectionRoot)\n : undefined\n }\n\n // Not visible for some other reason\n return\n } else {\n return (scrollableContainerId?: string) => {\n if (scrollableContainerId) {\n let top = 0\n let el: HTMLElement \| null = element\n while (el) {\n const offsetParent: Element \| null = el.offsetParent\n if (offsetParent instanceof HTMLElement) {\n const offsetParentIsInsideScrollableContainer =\n offsetParent.closest(`#${scrollableContainerId}`)\n\n // Only process the offset of the current element if the offset parent\n // (offsetTop is derived from distance between element and top of `offsetParent)\n // is inside the scrollable container (or is the scrollable container).\n if (offsetParentIsInsideScrollableContainer) {\n top += el.offsetTop\n el = offsetParent\n continue\n }\n }\n el = null\n }\n return top\n }\n return element.getBoundingClientRect().top\n }\n }\n}\n\nconst scrollToElement = ({\n elementDOMId,\n navigationTopOffset,\n scrollableContainerId,\n}: {\n elementDOMId: ElementDOMId\n /* We allow an offset to cater for any headers /\n navigationTopOffset: number \| 'CALCULATE'\n scrollableContainerId?: string\n}) => {\n const element = document.getElementById(elementDOMId.elementContainerDOMId)\n if (element) {\n const getScrollPoint = findScrollPointOfVisibleAncestorElement(element)\n if (getScrollPoint) {\n window.requestAnimationFrame(() => {\n if (scrollableContainerId) {\n const scrollContainer = document.getElementById(scrollableContainerId)\n // Account for any top padding on the scrollable container\n const topPadding = parseFloat(\n scrollContainer\n ?.computedStyleMap()\n .get('padding-top')\n ?.toString() ?? '',\n )\n const scrollTo =\n getScrollPoint(scrollableContainerId) +\n topPadding -\n // We allow an offset to cater for any headers\n (typeof navigationTopOffset === 'number' ? navigationTopOffset : 0)\n scrollContainer?.scrollTo({\n top: scrollTo,\n behavior: 'smooth',\n })\n // We do not currently attempt to `CALCULATE` the top scroll offset for form containers,\n // as we have no guarantee that the container element is currently in the viewport, so this is more complicated.\n } else {\n const scrollTo =\n getScrollPoint() +\n window.scrollY -\n // We allow an offset to cater for any headers\n (typeof navigationTopOffset === 'number' ? navigationTopOffset : 0)\n window.scrollTo({\n top: scrollTo,\n behavior: 'smooth',\n })\n\n // Calculate Offset\n if (navigationTopOffset === 'CALCULATE') {\n const calculatedNavigationTopOffset =\n calculateDesiredOffsetAfterInitialScroll(element)\n if (calculatedNavigationTopOffset) {\n window.scrollTo({\n top: scrollTo - calculatedNavigationTopOffset,\n behavior: 'smooth',\n })\n }\n }\n }\n document.getElementById(elementDOMId.value)?.focus({\n preventScroll: true,\n })\n })\n }\n }\n}\n\nexport default scrollToElement\n\n/\n Attempts to calculate the top scroll offset necessary to see the desired\n * element if it is being covered by any fixed, sticky or absolute elements,\n * after initial scroll.\n \n @param element - The element which we want to make visible. NOTE: This\n * element should already be scrolled to the 0 `Y` co-ordinate of the viewport\n * when calling this function for best results with sticky and absolute\n * elements.\n * @returns A number that can be subtracted from the scroll point that would\n * otherwise show the desired element at the 0 `Y` co-ordinate of the\n * viewport.\n */\nconst calculateDesiredOffsetAfterInitialScroll = (element: HTMLElement) => {\n const elementLeft = element.getBoundingClientRect().left\n let offset = 0\n // Get element in the front-most position, right at the top of the page (where our element should be located currently)\n let elementFromPoint = document.elementFromPoint(elementLeft, offset)\n if (!elementFromPoint) {\n return offset\n }\n let position = window.getComputedStyle(elementFromPoint).position\n\n while (\n position === 'fixed' \|\|\n position === 'absolute' \|\|\n position === 'sticky'\n ) {\n // Get next elementFromPoint\n offset = elementFromPoint.getBoundingClientRect().bottom + 1\n elementFromPoint = document.elementFromPoint(elementLeft, offset)\n if (!elementFromPoint) {\n return offset\n }\n position = window.getComputedStyle(elementFromPoint).position\n }\n return offset\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.4.0-beta.1",
+  "version": "8.4.0-beta.2",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"