@awell-health/ui-library 0.1.111 → 0.1.113

package/dist/index.css

@@ -6696,6 +6696,7 @@ html {
   width: 100%;
   z-index: 1001;
   transition: opacity 0.3s ease-in-out;
+  background-color: white;
 }
 @media (min-width: 640px) {
   .awell__hostedPageFooter_footer .awell__hostedPageFooter_scrollHint {

package/dist/index.js

@@ -34850,8 +34850,22 @@ Check the top-level render call using <` + t + ">.");
       React.useEffect(function () {
         if (isOpen) {
           var container = document.getElementById('ahp_main_content_with_scroll_hint');
-          if (container) {
-            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+          if (container && selectWrapperRef.current) {
+            var dropdownElement = selectWrapperRef.current.querySelector(".".concat(classes$h.dropdown_open));
+            if (dropdownElement) {
+              var containerRect = container.getBoundingClientRect();
+              var dropdownRect = dropdownElement.getBoundingClientRect();
+              var selectRect = selectWrapperRef.current.getBoundingClientRect();
+              var dropdownBottom = selectRect.bottom + dropdownRect.height;
+              var containerBottom = containerRect.bottom;
+              if (dropdownBottom > containerBottom) {
+                var scrollAmount = dropdownBottom - containerBottom + 20;
+                container.scrollTo({
+                  top: container.scrollTop + scrollAmount,
+                  behavior: 'smooth' });
+
+              }
+            }
           }
         }
       }, [isOpen]);
@@ -37337,18 +37351,27 @@ Check the top-level render call using <` + t + ">.");
 
     var PhoneInputField = function (_a) {
       var onChange = _a.onChange,id = _a.id,label = _a.label,mandatory = _a.mandatory,value = _a.value,placeholder = _a.placeholder,_b = _a.initialCountry,initialCountry = _b === void 0 ? 'us' : _b,availableCountries = _a.availableCountries,_c = _a.forceDialCode,forceDialCode = _c === void 0 ? false : _c,props = __rest(_a, ["onChange", "id", "label", "mandatory", "value", "placeholder", "initialCountry", "availableCountries", "forceDialCode"]);
+      var _d = React.useState(false),touched = _d[0],setTouched = _d[1];
       var countries = getDefaultCountries(availableCountries, initialCountry);
-      var _d = build.exports.usePhoneInput({
+      var _e = build.exports.usePhoneInput({
         initialCountry: initialCountry,
         value: value,
         hideSpaceAfterDialCode: true,
         countries: countries,
         forceDialCode: forceDialCode,
         onPhoneUpdate: function (phone) {
-          onChange({ target: { value: phone } });
+          if (touched && phone.length > 3) {
+            onChange({ target: { value: phone } });
+          } else
+          {
+            onChange({ target: { value: undefined } });
+          }
         } }),
-      phone = _d.phone,handlePhoneValueChange = _d.handlePhoneValueChange,inputRef = _d.inputRef,country = _d.country,setCountry = _d.setCountry;
+      phone = _e.phone,handlePhoneValueChange = _e.handlePhoneValueChange,inputRef = _e.inputRef,country = _e.country,setCountry = _e.setCountry;
       var handleInputChange = function (e) {
+        if (!touched) {
+          setTouched(true);
+        }
         handlePhoneValueChange(e);
       };
       var handleCountrySelect = function (_a) {
@@ -48352,14 +48375,14 @@ var     Kr=[{
           var availableCountries_1 = ((_h = (_g = config === null || config === void 0 ? void 0 : config.phone) === null || _g === void 0 ? void 0 : _g.available_countries) !== null && _h !== void 0 ? _h : []).
           map(function (c) {return c === null || c === void 0 ? void 0 : c.toLocaleLowerCase();}).
           filter(function (x) {return !lodash.exports.isNil(x);});
-          var initialCountry_1 = (_l = (_k = (_j = config === null || config === void 0 ? void 0 : config.phone) === null || _j === void 0 ? void 0 : _j.default_country) === null || _k === void 0 ? void 0 : _k.toLocaleLowerCase()) !== null && _l !== void 0 ? _l : 'gb';
+          var initialCountry_1 = (_l = (_k = (_j = config === null || config === void 0 ? void 0 : config.phone) === null || _j === void 0 ? void 0 : _j.default_country) === null || _k === void 0 ? void 0 : _k.toLocaleLowerCase()) !== null && _l !== void 0 ? _l : 'us';
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, defaultValue: "", render: function (_a) {
               var _b;
               var _c = _a.field,onChange = _c.onChange,value = _c.value;
               return jsxRuntime.exports.jsx(PhoneInputField, { autoFocus: inputAutoFocus, onChange: function (e) {
                   onChange(e.target.value);
                   onAnswerChange();
-                }, label: question.title, id: question.id, value: value, mandatory: (_b = question.questionConfig) === null || _b === void 0 ? void 0 : _b.mandatory, availableCountries: availableCountries_1, initialCountry: initialCountry_1, forceDialCode: true });
+                }, label: question.title, id: question.id, value: value !== null && value !== void 0 ? value : '', mandatory: (_b = question.questionConfig) === null || _b === void 0 ? void 0 : _b.mandatory, availableCountries: availableCountries_1, initialCountry: initialCountry_1, forceDialCode: true });
             } });
         case exports.UserQuestionType.Slider:
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, rules: {
@@ -48498,29 +48521,20 @@ var     Kr=[{
         }) }));
     };
 
-    var useScrollHint = function (fixPosition) {
-      if (fixPosition === void 0) {fixPosition = false;}
+    var useScrollHint = function () {
       var _a = React.useState(false),showScrollHint = _a[0],setShowScrollHint = _a[1];
       var rafIdRef = React.useRef();
       var checkScrollHint = React.useCallback(function () {
-        if (fixPosition) {
-          var isPageScrollable = document.documentElement.scrollHeight > window.innerHeight;
-          var isAtBottom = Math.ceil(window.scrollY + window.innerHeight) >=
-          document.documentElement.scrollHeight - 5;
-          setShowScrollHint(isPageScrollable && !isAtBottom);
-        } else
-        {
-          var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
-          if (!mainContentEl) {
-            setShowScrollHint(false);
-            return;
-          }
-          var isScrollable = mainContentEl.scrollHeight > mainContentEl.offsetHeight;
-          var isAtBottom = Math.ceil(mainContentEl.scrollTop + mainContentEl.offsetHeight) >=
-          mainContentEl.scrollHeight - 5;
-          setShowScrollHint(isScrollable && !isAtBottom);
+        var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
+        if (!mainContentEl) {
+          setShowScrollHint(false);
+          return;
         }
-      }, [fixPosition]);
+        var isScrollable = mainContentEl.scrollHeight > mainContentEl.offsetHeight;
+        var isAtBottom = Math.ceil(mainContentEl.scrollTop + mainContentEl.offsetHeight) >=
+        mainContentEl.scrollHeight - 5;
+        setShowScrollHint(isScrollable && !isAtBottom);
+      }, []);
       var debouncedCheckScrollHint = React.useCallback(function () {
         if (rafIdRef.current) {
           cancelAnimationFrame(rafIdRef.current);
@@ -48532,52 +48546,31 @@ var     Kr=[{
         var rafCheck = requestAnimationFrame(function () {
           checkScrollHint();
         });
-        if (fixPosition) {
-          window.addEventListener('resize', checkScrollHint);
-          window.addEventListener('scroll', checkScrollHint);
-          var mutationObserver_1 = new MutationObserver(debouncedCheckScrollHint);
-          mutationObserver_1.observe(document.body, {
+        var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
+        window.addEventListener('resize', checkScrollHint);
+        if (mainContentEl) {
+          mainContentEl.addEventListener('scroll', checkScrollHint);
+        }
+        var mutationObserver = new MutationObserver(debouncedCheckScrollHint);
+        if (mainContentEl) {
+          mutationObserver.observe(mainContentEl, {
             childList: true,
             subtree: true,
             attributes: false });
 
-          return function () {
-            cancelAnimationFrame(rafCheck);
-            if (rafIdRef.current) {
-              cancelAnimationFrame(rafIdRef.current);
-            }
-            window.removeEventListener('resize', checkScrollHint);
-            window.removeEventListener('scroll', checkScrollHint);
-            mutationObserver_1.disconnect();
-          };
-        } else
-        {
-          var mainContentEl_1 = document.getElementById('ahp_main_content_with_scroll_hint');
-          window.addEventListener('resize', checkScrollHint);
-          if (mainContentEl_1) {
-            mainContentEl_1.addEventListener('scroll', checkScrollHint);
+        }
+        return function () {
+          cancelAnimationFrame(rafCheck);
+          if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
           }
-          var mutationObserver_2 = new MutationObserver(debouncedCheckScrollHint);
-          if (mainContentEl_1) {
-            mutationObserver_2.observe(mainContentEl_1, {
-              childList: true,
-              subtree: true,
-              attributes: false });
-
+          window.removeEventListener('resize', checkScrollHint);
+          if (mainContentEl) {
+            mainContentEl.removeEventListener('scroll', checkScrollHint);
           }
-          return function () {
-            cancelAnimationFrame(rafCheck);
-            if (rafIdRef.current) {
-              cancelAnimationFrame(rafIdRef.current);
-            }
-            window.removeEventListener('resize', checkScrollHint);
-            if (mainContentEl_1) {
-              mainContentEl_1.removeEventListener('scroll', checkScrollHint);
-            }
-            mutationObserver_2.disconnect();
-          };
-        }
-      }, [fixPosition, checkScrollHint, debouncedCheckScrollHint]);
+          mutationObserver.disconnect();
+        };
+      }, [checkScrollHint, debouncedCheckScrollHint]);
       return {
         showScrollHint: showScrollHint };
 
@@ -48587,7 +48580,7 @@ var     Kr=[{
 
     var HostedPageFooter = function (_a) {
       var children = _a.children,_b = _a.hideScrollHint,hideScrollHint = _b === void 0 ? false : _b,_c = _a.fixPosition,fixPosition = _c === void 0 ? false : _c;
-      var showScrollHint = useScrollHint(fixPosition).showScrollHint;
+      var showScrollHint = useScrollHint().showScrollHint;
       var footerClass = fixPosition ?
       "".concat(classes$7.footer, " ").concat(classes$7.fixed) :
       classes$7.footer;
@@ -49451,8 +49444,7 @@ var     Kr=[{
 
     var TraditionalForm = function (_a) {
       var form = _a.form,onSubmit = _a.onSubmit,buttonLabels = _a.buttonLabels,evaluateDisplayConditions = _a.evaluateDisplayConditions,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,onAnswersChange = _a.onAnswersChange,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b,questionLabels = _a.questionLabels,onFileUpload = _a.onFileUpload;
-      var _c = useTheme(),updateLayoutMode = _c.updateLayoutMode,resetLayoutMode = _c.resetLayoutMode;
-      var _d = useTraditionalForm({
+      var _c = useTraditionalForm({
         questions: form.questions,
         onSubmit: onSubmit,
         evaluateDisplayConditions: evaluateDisplayConditions,
@@ -49460,13 +49452,7 @@ var     Kr=[{
         storedAnswers: storedAnswers,
         autosaveAnswers: autosaveAnswers,
         onAnswersChange: onAnswersChange }),
-      updateQuestionVisibility = _d.updateQuestionVisibility,submitForm = _d.submitForm,isSubmittingForm = _d.isSubmittingForm,_e = _d.formMethods,control = _e.control,getValues = _e.getValues,errors = _d.errors,questionWithVisiblity = _d.questionWithVisiblity,formHasErrors = _d.formHasErrors;
-      React.useEffect(function () {
-        updateLayoutMode('flexible');
-        return function () {
-          resetLayoutMode();
-        };
-      });
+      updateQuestionVisibility = _c.updateQuestionVisibility,submitForm = _c.submitForm,isSubmittingForm = _c.isSubmittingForm,_d = _c.formMethods,control = _d.control,getValues = _d.getValues,errors = _c.errors,questionWithVisiblity = _c.questionWithVisiblity,formHasErrors = _c.formHasErrors;
       return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: clsx(layoutClasses.main_content, classes$4.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: clsx(classes$4.container, classes$4.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx("div", { children: questionWithVisiblity.
                 filter(function (vb) {return vb.visible;}).
                 map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: classes$4.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility, labels: questionLabels, onFileUpload: onFileUpload }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: classes$4.trademark }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ fixPosition: true }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.traditional_button_wrapper }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });

package/dist/types/atoms/phoneInputField/PhoneInputField.d.ts

@@ -4,9 +4,9 @@ import { CountryIso2 } from 'react-international-phone';
 export interface PhoneInputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     label: string;
     id: string;
-    onChange: ({ target: { value } }: {
+    onChange: ({ target: { value }, }: {
         target: {
-            value: string;
+            value: string | undefined;
         };
     }) => void;
     onClick?: MouseEventHandler<HTMLInputElement>;

package/dist/types/hooks/useScrollHint/useScrollHint.d.ts

@@ -1,5 +1,5 @@
 interface UseScrollHintHook {
     showScrollHint: boolean;
 }
-export declare const useScrollHint: (fixPosition?: boolean) => UseScrollHintHook;
+export declare const useScrollHint: () => UseScrollHintHook;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.111",
+  "version": "0.1.113",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",