@medplum/react 0.9.19 → 0.9.22

package/dist/cjs/styles.css

@@ -1511,6 +1511,64 @@ div.medplum-nav-menu-container {
   margin: 0;
 }
 
+.medplum-calendar-table {
+  width: 350px;
+}
+
+.medplum-calendar-table th {
+  font-weight: normal;
+  font-size: 11px;
+  padding: 8px;
+  text-align: center;
+}
+
+.medplum-calendar-table td {
+  padding: 2px 4px;
+}
+
+.medplum-calendar-table button {
+  width: 44px;
+  height: 44px;
+  color: #0060e6;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  padding: 0;
+  background-color: #eef5ff;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.medplum-calendar-table button:hover {
+  background-color: #d9e9ff;
+}
+
+.medplum-calendar-table button:disabled {
+  background-color: white;
+  cursor: default;
+  color: #666;
+  font-weight: normal;
+}
+
+.medplum-calendar-container {
+  display: flex;
+  min-height: 400px;
+}
+
+.medplum-calendar-info-pane {
+  min-width: 300px;
+  padding: 20px;
+  border-right: 1px solid #ddd;
+}
+
+.medplum-calendar-selection-pane {
+  min-width: 300px;
+  padding: 20px;
+}
+
+.grecaptcha-badge { visibility: hidden; }
+
 .medplum-signin {
   max-width: 400px;
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID } from '@medplum/core';
-import React, { useState, useRef, createContext, useEffect, useContext, useCallback } from 'react';
+import React, { useState, useRef, createContext, useEffect, useContext, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 function AddressDisplay(props) {
@@ -19,7 +19,7 @@ function Input(props) {
     const className = 'medplum-input';
     const issues = getIssuesForExpression(props.outcome, props.name);
     const invalid = issues && issues.length > 0;
-    return (React.createElement("input", { id: props.name, name: props.name, type: getInputType(props.type), size: props.size, step: props.step, className: className, defaultValue: props.defaultValue || '', required: props.required, autoCapitalize: props.autoCapitalize, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
+    return (React.createElement("input", { id: props.name, name: props.name, type: getInputType(props.type), size: props.size, step: props.step, className: className, style: props.style, defaultValue: props.defaultValue || '', required: props.required, autoCapitalize: props.autoCapitalize, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
             if (props.onChange) {
                 props.onChange(e.currentTarget.value);
             }
@@ -870,6 +870,18 @@ function ContactPointDisplay(props) {
     return React.createElement(React.Fragment, null, builder.join('').trim());
 }
 
+function ContactDetailDisplay(props) {
+    var _a;
+    const contactDetail = props.value;
+    if (!contactDetail) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        contactDetail.name,
+        contactDetail.name && ': ', (_a = contactDetail.telecom) === null || _a === void 0 ? void 0 :
+        _a.map((telecom, index) => (React.createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
+}
+
 function DateTimeDisplay(props) {
     if (!props.value) {
         return null;
@@ -1018,6 +1030,8 @@ function ResourcePropertyDisplay(props) {
             return React.createElement(CodeableConceptDisplay, { value: value });
         case PropertyType.Coding:
             return React.createElement(CodingDisplay, { value: value });
+        case PropertyType.ContactDetail:
+            return React.createElement(ContactDetailDisplay, { value: value });
         case PropertyType.ContactPoint:
             return React.createElement(ContactPointDisplay, { value: value });
         case PropertyType.HumanName:
@@ -1187,19 +1201,34 @@ function ContactPointInput(props) {
     const ref = useRef();
     ref.current = contactPoint;
     function setContactPointWrapper(newValue) {
+        if (newValue && Object.keys(newValue).length === 0) {
+            newValue = undefined;
+        }
         setContactPoint(newValue);
         if (props.onChange) {
             props.onChange(newValue);
         }
     }
     function setSystem(system) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { system: system ? system : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { system });
+        if (!system) {
+            delete newValue.system;
+        }
+        setContactPointWrapper(newValue);
     }
     function setUse(use) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { use: use ? use : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { use });
+        if (!use) {
+            delete newValue.use;
+        }
+        setContactPointWrapper(newValue);
     }
     function setValue(value) {
-        setContactPointWrapper(Object.assign(Object.assign({}, ref.current), { value: value ? value : undefined }));
+        const newValue = Object.assign(Object.assign({}, ref.current), { value });
+        if (!value) {
+            delete newValue.value;
+        }
+        setContactPointWrapper(newValue);
     }
     return (React.createElement(InputRow, null,
         React.createElement(Select, { defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: setSystem, testid: "system" },
@@ -1220,6 +1249,36 @@ function ContactPointInput(props) {
         React.createElement(Input, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: setValue })));
 }
 
+function ContactDetailInput(props) {
+    var _a;
+    const [contactPoint, setContactDetail] = useState(props.defaultValue);
+    const ref = useRef();
+    ref.current = contactPoint;
+    function setContactDetailWrapper(newValue) {
+        setContactDetail(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    }
+    function setName(name) {
+        const newValue = Object.assign(Object.assign({}, ref.current), { name });
+        if (!name) {
+            delete newValue.name;
+        }
+        setContactDetailWrapper(newValue);
+    }
+    function setTelecom(telecom) {
+        const newValue = Object.assign(Object.assign({}, ref.current), { telecom: telecom && [telecom] });
+        if (!telecom) {
+            delete newValue.telecom;
+        }
+        setContactDetailWrapper(newValue);
+    }
+    return (React.createElement(InputRow, null,
+        React.createElement(Input, { name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: setName }),
+        React.createElement(ContactPointInput, { name: props.name + '-telecom', defaultValue: (_a = contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.telecom) === null || _a === void 0 ? void 0 : _a[0], onChange: setTelecom })));
+}
+
 /**
  * The DateTimeInput component is a wrapper around the HTML5 input type="datetime-local".
  * The main purpose is to reconcile time zones.
@@ -1634,6 +1693,8 @@ function ElementDefinitionTypeInput(props) {
             return React.createElement(CodeableConceptInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.Coding:
             return React.createElement(CodingInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+        case PropertyType.ContactDetail:
+            return React.createElement(ContactDetailInput, { name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.ContactPoint:
             return React.createElement(ContactPointInput, { name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.Extension:
@@ -2117,8 +2178,7 @@ function ResourceTimeline(props) {
             setHistory({});
             return;
         }
-        const batchRequest = buildSearchRequests(resource);
-        medplum.post('fhir/R4', batchRequest).then(handleBatchResponse);
+        medplum.executeBatch(buildSearchRequests(resource)).then(handleBatchResponse);
     }, [medplum, resource, buildSearchRequests]);
     useEffect(() => {
         loadTimeline();
@@ -4546,31 +4606,64 @@ function QuestionnaireFormItem(props) {
             return (React.createElement(TextArea, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (newValue) => onChangeAnswer({ valueString: newValue }) }));
         case QuestionnaireItemType.url:
             return (React.createElement(Input, { type: "url", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueUri, onChange: (newValue) => onChangeAnswer({ valueUri: newValue }) }));
-        case QuestionnaireItemType.choice:
-        case QuestionnaireItemType.openChoice:
-            return (React.createElement("div", null, item.answerOption &&
-                item.answerOption.map((option, index) => {
-                    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
-                    const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
-                    const propertyName = 'value' + capitalize(optionValue.type);
-                    const optionName = `${name}-option-${index}`;
-                    return (React.createElement("div", { key: optionName, className: "medplum-questionnaire-option-row" },
-                        React.createElement("div", { className: "medplum-questionnaire-option-checkbox" },
-                            React.createElement("input", { type: "radio", id: optionName, name: name, value: optionValue.value, defaultChecked: initialValue && stringify(optionValue) === stringify(initialValue), onChange: () => onChangeAnswer({ [propertyName]: optionValue.value }) })),
-                        React.createElement("div", null,
-                            React.createElement("label", { htmlFor: optionName },
-                                React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })))));
-                })));
         case QuestionnaireItemType.attachment:
             return (React.createElement(AttachmentInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueAttachment, onChange: (newValue) => onChangeAnswer({ valueAttachment: newValue }) }));
         case QuestionnaireItemType.reference:
             return (React.createElement(ReferenceInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueReference, onChange: (newValue) => onChangeAnswer({ valueReference: newValue }) }));
         case QuestionnaireItemType.quantity:
             return (React.createElement(QuantityInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueQuantity, onChange: (newValue) => onChangeAnswer({ valueQuantity: newValue }) }));
+        case QuestionnaireItemType.choice:
+        case QuestionnaireItemType.openChoice:
+            if (isDropDownChoice(item)) {
+                return (React.createElement(QuestionnaireChoiceDropDownInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+            }
+            else {
+                return (React.createElement(QuestionnaireChoiceRadioInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+            }
     }
     return null;
 }
+function QuestionnaireChoiceDropDownInput(props) {
+    const { name, item, initial } = props;
+    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
+    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
+    return (React.createElement("select", { id: name, name: name, className: "medplum-select", onChange: (e) => {
+            const index = e.currentTarget.selectedIndex;
+            if (index === 0) {
+                props.onChangeAnswer({});
+                return;
+            }
+            const option = item.answerOption[index - 1];
+            const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+            const propertyName = 'value' + capitalize(optionValue.type);
+            props.onChangeAnswer({ [propertyName]: optionValue.value });
+        } },
+        React.createElement("option", null),
+        item.answerOption &&
+            item.answerOption.map((option, index) => {
+                const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+                const optionName = `${name}-option-${index}`;
+                return (React.createElement("option", { key: optionName, value: optionValue.value, selected: initialValue && stringify(optionValue) === stringify(initialValue) },
+                    React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })));
+            })));
+}
+function QuestionnaireChoiceRadioInput(props) {
+    const { name, item, initial, onChangeAnswer } = props;
+    const valueElementDefinition = globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
+    const initialValue = getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
+    return (React.createElement(React.Fragment, null, item.answerOption &&
+        item.answerOption.map((option, index) => {
+            const optionValue = getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+            const propertyName = 'value' + capitalize(optionValue.type);
+            const optionName = `${name}-option-${index}`;
+            return (React.createElement("div", { key: optionName, className: "medplum-questionnaire-option-row" },
+                React.createElement("div", { className: "medplum-questionnaire-option-checkbox" },
+                    React.createElement("input", { type: "radio", id: optionName, name: name, value: optionValue.value, defaultChecked: initialValue && stringify(optionValue) === stringify(initialValue), onChange: () => onChangeAnswer({ [propertyName]: optionValue.value }) })),
+                React.createElement("div", null,
+                    React.createElement("label", { htmlFor: optionName },
+                        React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })))));
+        })));
+}
 function buildInitialResponse(questionnaire) {
     const response = {
         resourceType: 'QuestionnaireResponse',
@@ -4596,6 +4689,14 @@ function buildInitialResponseAnswer(answer) {
     // have the same properties.
     return Object.assign({}, answer);
 }
+function isDropDownChoice(item) {
+    var _a;
+    return !!((_a = item.extension) === null || _a === void 0 ? void 0 : _a.some((e) => {
+        var _a, _b, _c;
+        return e.url === 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl' &&
+            ((_c = (_b = (_a = e.valueCodeableConcept) === null || _a === void 0 ? void 0 : _a.coding) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.code) === 'drop-down';
+    }));
+}
 
 function QuestionnaireBuilder(props) {
     const medplum = useMedplum();
@@ -4809,7 +4910,7 @@ function RequestGroupDisplay(props) {
     const [responseBundle, setResponseBundle] = useState();
     useEffect(() => {
         if (requestGroup && !startedLoading) {
-            medplum.post('fhir/R4', buildBatchRequest(requestGroup)).then(setResponseBundle);
+            medplum.executeBatch(buildBatchRequest(requestGroup)).then(setResponseBundle);
             setStartedLoading(true);
         }
     }, [medplum, requestGroup, startedLoading]);
@@ -5164,6 +5265,165 @@ function getVersionUrl(resource) {
     return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
 }
 
+/**
+ * Returns a month display string (e.g. "January 2020").
+ * @param date Any date within the month.
+ * @returns The month display string (e.g. "January 2020")
+ */
+function getMonthString(date) {
+    return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+}
+function CalendarInput(props) {
+    const [month, setMonth] = useState(getStartMonth);
+    function moveMonth(delta) {
+        setMonth((currMonth) => {
+            const prevMonth = new Date(currMonth.getTime());
+            prevMonth.setMonth(currMonth.getMonth() + delta);
+            return prevMonth;
+        });
+    }
+    const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+    return (React.createElement("div", null,
+        React.createElement(InputRow, null,
+            React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+            React.createElement("p", null,
+                React.createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                React.createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+        React.createElement("table", { className: "medplum-calendar-table" },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "SUN"),
+                    React.createElement("th", null, "MON"),
+                    React.createElement("th", null, "TUE"),
+                    React.createElement("th", null, "WED"),
+                    React.createElement("th", null, "THU"),
+                    React.createElement("th", null, "FRI"),
+                    React.createElement("th", null, "SAT"))),
+            React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement("button", { disabled: !day.available, onClick: () => props.onClick(day.date) }, day.date.getDate()))))))))))));
+}
+function getStartMonth() {
+    const result = new Date();
+    result.setDate(1);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+function buildGrid(startDate, slots) {
+    const d = new Date(startDate.getFullYear(), startDate.getMonth());
+    const grid = [];
+    let row = [];
+    // Fill leading empty days
+    for (let i = 0; i < d.getDay(); i++) {
+        row.push(undefined);
+    }
+    while (d.getMonth() === startDate.getMonth()) {
+        row.push({
+            date: new Date(d.getTime()),
+            // available: isAvailable(d),
+            available: isDayAvailable(d, slots),
+        });
+        if (d.getDay() === 6) {
+            grid.push(row);
+            row = [];
+        }
+        d.setDate(d.getDate() + 1);
+    }
+    // Fill trailing empty days
+    if (d.getDay() !== 0) {
+        for (let i = d.getDay(); i < 7; i++) {
+            row.push(undefined);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+/**
+ * Returns true if the given date is available for booking.
+ * @param day The day to check.
+ * @param slots The list of available slots.
+ * @returns True if there are any available slots for the day.
+ */
+function isDayAvailable(day, slots) {
+    // Note that slot start and end time may or may not be in UTC.
+    for (const slot of slots) {
+        const slotStart = new Date(slot.start);
+        if (slotStart.getFullYear() === day.getFullYear() &&
+            slotStart.getMonth() === day.getMonth() &&
+            slotStart.getDate() === day.getDate()) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function Scheduler(props) {
+    var _a;
+    const medplum = useMedplum();
+    const schedule = useResource(props.schedule);
+    const [slots, setSlots] = useState();
+    const slotsRef = useRef();
+    slotsRef.current = slots;
+    const [date, setDate] = useState();
+    const [slot, setSlot] = useState();
+    const [info, setInfo] = useState();
+    const [form, setForm] = useState();
+    useEffect(() => {
+        if (schedule) {
+            medplum.search('Slot', 'schedule=' + getReferenceString(schedule)).then((bundle) => {
+                setSlots(bundle.entry.map((entry) => entry.resource));
+            });
+        }
+        else {
+            setSlots(undefined);
+        }
+    }, [medplum, schedule]);
+    if (!schedule || !slots) {
+        return null;
+    }
+    const actor = (_a = schedule.actor) === null || _a === void 0 ? void 0 : _a[0];
+    return (React.createElement("div", { className: "medplum-calendar-container", "data-testid": "scheduler" },
+        React.createElement("div", { className: "medplum-calendar-info-pane" },
+            actor && React.createElement(Avatar, { value: actor, size: "large" }),
+            actor && (React.createElement("h1", null,
+                React.createElement(ResourceName, { value: actor }))),
+            React.createElement("p", null, "1 hour"),
+            date && React.createElement("p", null, date.toLocaleDateString()),
+            slot && React.createElement("p", null, formatTime(new Date(slot.start)))),
+        React.createElement("div", { className: "medplum-calendar-selection-pane" },
+            !date && (React.createElement("div", null,
+                React.createElement("h3", null, "Select date"),
+                React.createElement(CalendarInput, { slots: slots, onClick: setDate }))),
+            date && !slot && (React.createElement("div", null,
+                React.createElement("h3", null, "Select time"),
+                slots.map((s) => {
+                    const slotStart = new Date(s.start);
+                    return (slotStart.getTime() > date.getTime() &&
+                        slotStart.getTime() < date.getTime() + 24 * 3600 * 1000 && (React.createElement("div", { key: s.id },
+                        React.createElement(Button, { style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
+                }))),
+            date && slot && !info && (React.createElement("div", null,
+                React.createElement("h3", null, "Enter your info"),
+                React.createElement(FormSection, { title: "Name", htmlFor: "name" },
+                    React.createElement(Input, { name: "name" })),
+                React.createElement(FormSection, { title: "Email", htmlFor: "email" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setInfo('info') }, "Next"))),
+            date && slot && info && !form && (React.createElement("div", null,
+                React.createElement("h3", null, "Custom questions"),
+                React.createElement(FormSection, { title: "Question 1", htmlFor: "q1" },
+                    React.createElement(Input, { name: "q1" })),
+                React.createElement(FormSection, { title: "Question 2", htmlFor: "q2" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(FormSection, { title: "Question 3", htmlFor: "q3" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setForm('form') }, "Next"))),
+            date && slot && info && form && (React.createElement("div", null,
+                React.createElement("h3", null, "You're all set!"),
+                React.createElement("p", null, "Check your email for a calendar invite."))))));
+}
+function formatTime(date) {
+    return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
 function ServiceRequestTimeline(props) {
     return (React.createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
             resourceType: 'Bundle',
@@ -5226,7 +5486,7 @@ function createScriptTag(src, onload) {
 
 function GoogleButton(props) {
     const medplum = useMedplum();
-    const { handleAuthResponse } = props;
+    const { handleGoogleCredential } = props;
     const googleClientId = getGoogleClientId(props.googleClientId);
     const parentRef = useRef(null);
     const [scriptLoaded, setScriptLoaded] = useState(typeof google !== 'undefined');
@@ -5240,7 +5500,7 @@ function GoogleButton(props) {
         if (!initialized) {
             google.accounts.id.initialize({
                 client_id: googleClientId,
-                callback: (response) => medplum.startGoogleLogin(response).then(handleAuthResponse),
+                callback: handleGoogleCredential,
             });
             setInitialized(true);
         }
@@ -5248,7 +5508,7 @@ function GoogleButton(props) {
             google.accounts.id.renderButton(parentRef.current, {});
             setButtonRendered(true);
         }
-    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleAuthResponse]);
+    }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
     if (!googleClientId) {
         return null;
     }
@@ -5279,19 +5539,24 @@ function SignInForm(props) {
             setMemberships(response.memberships);
         }
         if (response.code) {
-            medplum
-                .processCode(response.code)
-                .then(() => {
-                if (props.onSuccess) {
-                    props.onSuccess();
-                }
-            })
-                .catch(console.log);
+            if (props.onCode) {
+                props.onCode(response.code);
+            }
+            else {
+                medplum
+                    .processCode(response.code)
+                    .then(() => {
+                    if (props.onSuccess) {
+                        props.onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
         }
     }
     return (React.createElement(Document, { width: 450 }, (() => {
         if (!login) {
-            return (React.createElement(AuthenticationForm, { googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+            return (React.createElement(AuthenticationForm, { clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
         }
         else if (memberships) {
             return React.createElement(ProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
@@ -5308,6 +5573,9 @@ function AuthenticationForm(props) {
     return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
             medplum
                 .startLogin({
+                clientId: props.clientId,
+                scope: props.scope,
+                nonce: props.nonce,
                 email: formData.email,
                 password: formData.password,
                 remember: formData.remember === 'true',
@@ -5334,7 +5602,18 @@ function AuthenticationForm(props) {
             React.createElement("div", null,
                 React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in"))),
         React.createElement("div", { className: "medplum-signin-google-container" },
-            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleAuthResponse: props.handleAuthResponse }))));
+            React.createElement(GoogleButton, { googleClientId: props.googleClientId, handleGoogleCredential: (response) => {
+                    medplum
+                        .startGoogleLogin({
+                        clientId: props.clientId,
+                        scope: props.scope,
+                        nonce: props.nonce,
+                        googleClientId: response.clientId,
+                        googleCredential: response.credential,
+                    })
+                        .then(props.handleAuthResponse)
+                        .catch(setOutcome);
+                } }))));
 }
 function ProfileForm(props) {
     const medplum = useMedplum();
@@ -5406,5 +5685,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
+export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scheduler, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
 //# sourceMappingURL=index.js.map