@medplum/react 0.9.18 → 0.9.21

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { formatAddress, getDisplayString, getImageSrc, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, capitalize, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID } from '@medplum/core';
+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 { useNavigate, useLocation } from 'react-router-dom';
 
@@ -16,10 +16,10 @@ function getIssuesForExpression(outcome, expression) {
 }
 
 function Input(props) {
-    const className = 'medplum-input'; // + (props.size ? ' ' + props.size : '');
+    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);
             }
@@ -281,7 +281,7 @@ function AttachmentArrayInput(props) {
             props.onChange(newValues);
         }
     }
-    return (React.createElement("table", null,
+    return (React.createElement("table", { style: { width: '100%' } },
         React.createElement("colgroup", null,
             React.createElement("col", { width: "90%" }),
             React.createElement("col", { width: "10%" })),
@@ -707,6 +707,14 @@ function getInitials(text) {
         .join('');
 }
 
+function CheckboxFormSection(props) {
+    return (React.createElement("div", { className: "medplum-checkbox-form-section" },
+        React.createElement("div", { className: "medplum-checkbox-form-section-checkbox-container" }, props.children),
+        React.createElement("div", { className: "medplum-checkbox-form-section-details-container" },
+            React.createElement("label", { htmlFor: props.htmlFor }, props.title),
+            React.createElement("p", null, props.description))));
+}
+
 const DEFAULT_IGNORED_PROPERTIES = [
     'meta',
     'implicitRules',
@@ -720,9 +728,9 @@ const DEFAULT_IGNORED_PROPERTIES = [
 function FormSection(props) {
     const issues = getIssuesForExpression(props.outcome, props.htmlFor);
     const invalid = issues && issues.length > 0;
-    return (React.createElement("fieldset", null,
+    return (React.createElement("fieldset", { className: "medplum-form-section" },
         props.title && React.createElement("label", { htmlFor: props.htmlFor }, props.title),
-        props.description && React.createElement("small", null, props.description),
+        props.description && React.createElement("p", null, props.description),
         props.children,
         invalid && (React.createElement("div", { id: props.htmlFor + '-errors', className: "medplum-input-error" }, issues === null || issues === void 0 ? void 0 : issues.map((issue) => {
             var _a, _b;
@@ -730,6 +738,50 @@ function FormSection(props) {
         })))));
 }
 
+function ResourceForm(props) {
+    const medplum = useMedplum();
+    const defaultValue = useResource(props.defaultValue);
+    const [schema, setSchema] = useState();
+    const [value, setValue] = useState();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(JSON.parse(JSON.stringify(defaultValue)));
+            medplum.requestSchema(defaultValue.resourceType).then(setSchema);
+        }
+    }, [medplum, defaultValue]);
+    if (!schema || !value) {
+        return React.createElement("div", null, "Loading...");
+    }
+    return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
+            e.preventDefault();
+            if (props.onSubmit) {
+                props.onSubmit(value);
+            }
+        } },
+        React.createElement(FormSection, { title: "Resource Type" },
+            React.createElement(Input, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
+        React.createElement(FormSection, { title: "ID" },
+            React.createElement(Input, { name: "id", defaultValue: value.id, disabled: true })),
+        React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
+        React.createElement(Button, { type: "submit", size: "large" }, "OK"),
+        props.onDelete && (React.createElement(Button, { type: "button", size: "large", onClick: () => {
+                props.onDelete(value);
+            } }, "Delete"))));
+}
+function setPropertyValue(obj, key, propName, elementDefinition, value) {
+    const types = elementDefinition.type;
+    if (types.length > 1) {
+        for (const type of types) {
+            const compoundKey = key.replace('[x]', capitalize(type.code));
+            if (compoundKey in obj) {
+                delete obj[compoundKey];
+            }
+        }
+    }
+    obj[propName] = value;
+    return obj;
+}
+
 function DescriptionList(props) {
     return React.createElement("dl", { className: 'medplum-description-list' + (props.compact ? ' compact' : '') }, props.children);
 }
@@ -818,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;
@@ -966,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:
@@ -1031,6 +1097,15 @@ function AnnotationInput(props) {
     return (React.createElement(Input, { name: props.name, type: "text", placeholder: "Annotation text", defaultValue: value.text, onChange: setText }));
 }
 
+function Checkbox(props) {
+    const className = 'medplum-checkbox';
+    return (React.createElement("input", { id: props.name, name: props.name, className: className, type: "checkbox", value: "true", defaultChecked: !!props.defaultValue, required: props.required, ref: props.inputRef, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
+            if (props.onChange) {
+                props.onChange(e.currentTarget.checked);
+            }
+        } }));
+}
+
 function CodeableConceptInput(props) {
     const medplum = useMedplum();
     let defaultValue = undefined;
@@ -1126,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" },
@@ -1159,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.
@@ -1217,7 +1337,7 @@ function isValidDate(date) {
 }
 
 function TextArea(props) {
-    const className = 'medplum-textarea';
+    const className = 'medplum-textarea' + (props.monospace ? ' monospace' : '');
     const issues = getIssuesForExpression(props.outcome, props.name);
     const invalid = issues && issues.length > 0;
     return (React.createElement("textarea", { id: props.name, name: props.name, className: className, defaultValue: props.defaultValue || '', required: props.required, 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, style: props.style, onChange: (e) => {
@@ -1228,7 +1348,7 @@ function TextArea(props) {
 }
 
 function ExtensionInput(props) {
-    return (React.createElement(TextArea, { testid: "extension-input", name: props.name, defaultValue: stringify(props.defaultValue), onChange: (newValue) => {
+    return (React.createElement(TextArea, { testid: "extension-input", name: props.name, defaultValue: stringify(props.defaultValue), monospace: true, onChange: (newValue) => {
             if (props.onChange) {
                 props.onChange(JSON.parse(newValue));
             }
@@ -1451,35 +1571,34 @@ function ResourceArrayInput(props) {
             props.onChange(newValues);
         }
     }
-    return (React.createElement("div", null,
-        React.createElement("table", { style: { width: '100%' } },
-            React.createElement("colgroup", null,
-                React.createElement("col", { width: "90%" }),
-                React.createElement("col", { width: "10%" })),
-            React.createElement("tbody", null,
-                values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
-                    React.createElement("td", null,
-                        React.createElement(ResourcePropertyInput, { arrayElement: true, property: props.property, name: props.name + '.' + index, defaultValue: v, onChange: (newValue) => {
-                                const copy = [...valuesRef.current];
-                                copy[index] = newValue;
-                                setValuesWrapper(copy);
-                            } })),
-                    React.createElement("td", { style: { textAlign: 'right' } },
-                        React.createElement(Button, { onClick: (e) => {
-                                killEvent(e);
-                                const copy = [...valuesRef.current];
-                                copy.splice(index, 1);
-                                setValuesWrapper(copy);
-                            } }, "Remove"))))),
-                React.createElement("tr", null,
-                    React.createElement("td", null),
-                    React.createElement("td", { style: { textAlign: 'right' } },
-                        React.createElement(Button, { onClick: (e) => {
-                                killEvent(e);
-                                const copy = [...valuesRef.current];
-                                copy.push(undefined);
-                                setValuesWrapper(copy);
-                            } }, "Add")))))));
+    return (React.createElement("table", { style: { width: '100%', borderCollapse: 'collapse' } },
+        React.createElement("colgroup", null,
+            React.createElement("col", { width: "90%" }),
+            React.createElement("col", { width: "10%" })),
+        React.createElement("tbody", null,
+            values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
+                React.createElement("td", null,
+                    React.createElement(ResourcePropertyInput, { arrayElement: true, property: props.property, name: props.name + '.' + index, defaultValue: v, onChange: (newValue) => {
+                            const copy = [...valuesRef.current];
+                            copy[index] = newValue;
+                            setValuesWrapper(copy);
+                        } })),
+                React.createElement("td", { style: { textAlign: 'right' } },
+                    React.createElement(Button, { onClick: (e) => {
+                            killEvent(e);
+                            const copy = [...valuesRef.current];
+                            copy.splice(index, 1);
+                            setValuesWrapper(copy);
+                        } }, "Remove"))))),
+            React.createElement("tr", null,
+                React.createElement("td", null),
+                React.createElement("td", { style: { textAlign: 'right' } },
+                    React.createElement(Button, { onClick: (e) => {
+                            killEvent(e);
+                            const copy = [...valuesRef.current];
+                            copy.push(undefined);
+                            setValuesWrapper(copy);
+                        } }, "Add"))))));
 }
 
 function ResourcePropertyInput(props) {
@@ -1523,6 +1642,7 @@ function ElementDefinitionInputSelector(props) {
             } }))));
 }
 function ElementDefinitionTypeInput(props) {
+    var _a;
     const property = props.property;
     const propertyType = props.elementDefinitionType.code;
     const name = props.name;
@@ -1554,7 +1674,11 @@ function ElementDefinitionTypeInput(props) {
         case PropertyType.code:
             return React.createElement(CodeInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
         case PropertyType.boolean:
-            return (React.createElement("input", { type: "checkbox", name: name, "data-testid": name, defaultChecked: !!value, value: "true", onChange: (e) => props.onChange && props.onChange(e.target.value === 'true') }));
+            return (React.createElement(Checkbox, { name: name, testid: name, defaultValue: !!value, onChange: (newValue) => {
+                    if (props.onChange) {
+                        props.onChange(newValue);
+                    }
+                } }));
         case PropertyType.markdown:
             return React.createElement(TextArea, { name: name, testid: name, defaultValue: value, onChange: props.onChange });
         // 2.24.0.2 Complex Types
@@ -1569,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:
@@ -1588,7 +1714,7 @@ function ElementDefinitionTypeInput(props) {
         case PropertyType.Reference:
             return (React.createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
         default:
-            return (React.createElement(BackboneElementInput, { property: property, name: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+            return (React.createElement(BackboneElementInput, { typeName: buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
     }
 }
 function getTargetTypes(property) {
@@ -1596,65 +1722,8 @@ function getTargetTypes(property) {
     return (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.type) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetProfile) === null || _c === void 0 ? void 0 : _c.map((p) => p.split('/').pop());
 }
 
-function ResourceForm(props) {
-    const medplum = useMedplum();
-    const defaultValue = useResource(props.defaultValue);
-    const [schema, setSchema] = useState();
-    const [value, setValue] = useState();
-    useEffect(() => {
-        if (defaultValue) {
-            setValue(JSON.parse(JSON.stringify(defaultValue)));
-            medplum.requestSchema(defaultValue.resourceType).then(setSchema);
-        }
-    }, [medplum, defaultValue]);
-    if (!schema || !value) {
-        return React.createElement("div", null, "Loading...");
-    }
-    const typeSchema = schema.types[value.resourceType];
-    const typedValue = { type: value.resourceType, value };
-    return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
-            e.preventDefault();
-            if (props.onSubmit) {
-                props.onSubmit(value);
-            }
-        } },
-        React.createElement(FormSection, { title: "Resource Type" },
-            React.createElement(Input, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
-        React.createElement(FormSection, { title: "ID" },
-            React.createElement(Input, { name: "id", defaultValue: value.id, disabled: true })),
-        Object.entries(typeSchema.properties).map((entry) => {
-            const key = entry[0];
-            if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
-                return null;
-            }
-            const property = entry[1];
-            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
-            return (React.createElement(FormSection, { key: key, title: getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
-                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
-                        setValue(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
-                    } })));
-        }),
-        React.createElement(Button, { type: "submit", size: "large" }, "OK"),
-        props.onDelete && (React.createElement(Button, { type: "button", size: "large", onClick: () => {
-                props.onDelete(value);
-            } }, "Delete"))));
-}
-function setPropertyValue(obj, key, propName, elementDefinition, value) {
-    const types = elementDefinition.type;
-    if (types.length > 1) {
-        for (const type of types) {
-            const compoundKey = key.replace('[x]', capitalize(type.code));
-            if (compoundKey in obj) {
-                delete obj[compoundKey];
-            }
-        }
-    }
-    obj[propName] = value;
-    return obj;
-}
-
 function BackboneElementInput(props) {
-    var _a, _b;
+    var _a;
     const [value, setValue] = useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
     function setValueWrapper(newValue) {
         setValue(newValue);
@@ -1662,13 +1731,14 @@ function BackboneElementInput(props) {
             props.onChange(newValue);
         }
     }
-    const typeName = buildTypeName((_b = props.property.path) === null || _b === void 0 ? void 0 : _b.split('.'));
+    const typeName = props.typeName;
     const typeSchema = globalSchema.types[typeName];
     if (!typeSchema) {
         return React.createElement("div", null,
             typeName,
             "\u00A0not implemented");
     }
+    const typedValue = { type: typeName, value };
     return (React.createElement(React.Fragment, null, Object.entries(typeSchema.properties).map((entry) => {
         const key = entry[0];
         if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
@@ -1678,7 +1748,13 @@ function BackboneElementInput(props) {
         if (!property.type) {
             return null;
         }
-        const [propertyValue, propertyType] = getValueAndType(value, key);
+        const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+        if (property.type.length === 1 && property.type[0].code === 'boolean') {
+            return (React.createElement(CheckboxFormSection, { key: key, title: getPropertyDisplayName(key), description: property.definition, htmlFor: key },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                    } })));
+        }
         return (React.createElement(FormSection, { key: key, title: getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
             React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
                     setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
@@ -2102,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();
@@ -3196,7 +3271,7 @@ function SearchFilterValueInput(props) {
                     }
                 } }));
         case SearchParameterType.BOOLEAN:
-            return (React.createElement("input", { type: "checkbox", name: name, "data-testid": name, defaultChecked: props.defaultValue === 'true', value: "true", onChange: (e) => props.onChange(e.target.checked ? 'true' : 'false') }));
+            return (React.createElement(Checkbox, { name: name, testid: name, defaultValue: props.defaultValue === 'true', onChange: (newValue) => props.onChange(newValue.toString()) }));
         case SearchParameterType.DATE:
             return React.createElement(Input, { type: "date", testid: name, defaultValue: props.defaultValue, onChange: props.onChange });
         case SearchParameterType.DATETIME:
@@ -3892,7 +3967,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
 function HeaderSearchInput(props) {
     const medplum = useMedplum();
     return (React.createElement(Autocomplete, { loadOptions: (input, signal) => __awaiter(this, void 0, void 0, function* () {
-            return getResourcesFromResponse((yield medplum.graphql(buildGraphQLQuery(input), { signal })), input);
+            return getResourcesFromResponse((yield medplum.graphql(buildGraphQLQuery(input), undefined, undefined, { signal })), input);
         }), getId: (item) => {
             return item.id;
         }, getIcon: (item) => React.createElement(Avatar, { value: item }), getDisplay: (item) => React.createElement(ResourceName, { value: item }), getHelpText: (item) => {
@@ -4466,8 +4541,24 @@ function QuestionnaireFormItemArray(props) {
         setResponseItems(newResponseItems);
         props.onChange(newResponseItems);
     }
-    return (React.createElement(React.Fragment, null, props.items.map((item, index) => item.type === QuestionnaireItemType.group ? (React.createElement(QuestionnaireFormItem, { key: item.linkId, item: item, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) })) : (React.createElement(FormSection, { key: item.linkId, htmlFor: item.linkId, title: item.text || '' },
-        React.createElement(QuestionnaireFormItem, { item: item, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) }))))));
+    return (React.createElement(React.Fragment, null, props.items.map((item, index) => {
+        if (item.type === QuestionnaireItemType.display) {
+            return React.createElement("p", { key: item.linkId }, item.text);
+        }
+        if (item.type === QuestionnaireItemType.group) {
+            return (React.createElement(QuestionnaireFormItem, { key: item.linkId, item: item, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) }));
+        }
+        if (item.type === QuestionnaireItemType.boolean) {
+            const initial = item.initial && item.initial.length > 0 ? item.initial[0] : undefined;
+            return (React.createElement(CheckboxFormSection, { key: item.linkId, title: item.text, htmlFor: item.linkId },
+                React.createElement(Checkbox, { name: item.linkId, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (newValue) => setResponseItem(index, {
+                        linkId: item.linkId,
+                        answer: [{ valueBoolean: newValue }],
+                    }) })));
+        }
+        return (React.createElement(FormSection, { key: item.linkId, htmlFor: item.linkId, title: item.text || '' },
+            React.createElement(QuestionnaireFormItem, { item: item, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) })));
+    })));
 }
 function QuestionnaireFormItem(props) {
     const item = props.item;
@@ -4498,7 +4589,7 @@ function QuestionnaireFormItem(props) {
                 React.createElement("h3", null, item.text),
                 item.item && React.createElement(QuestionnaireFormItemArray, { items: item.item, onChange: onChangeItem })));
         case QuestionnaireItemType.boolean:
-            return (React.createElement("input", { type: "checkbox", id: name, name: name, value: "true", defaultChecked: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (e) => onChangeAnswer({ valueBoolean: e.currentTarget.checked }) }));
+            return (React.createElement(Checkbox, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (newValue) => onChangeAnswer({ valueBoolean: newValue }) }));
         case QuestionnaireItemType.decimal:
             return (React.createElement(Input, { type: "number", step: "any", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDecimal, onChange: (newValue) => onChangeAnswer({ valueDecimal: parseFloat(newValue) }) }));
         case QuestionnaireItemType.integer:
@@ -4515,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',
@@ -4565,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();
@@ -4778,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]);
@@ -5195,7 +5327,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');
@@ -5209,7 +5341,7 @@ function GoogleButton(props) {
         if (!initialized) {
             google.accounts.id.initialize({
                 client_id: googleClientId,
-                callback: (response) => medplum.startGoogleLogin(response).then(handleAuthResponse),
+                callback: handleGoogleCredential,
             });
             setInitialized(true);
         }
@@ -5217,7 +5349,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;
     }
@@ -5248,19 +5380,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 });
@@ -5277,6 +5414,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',
@@ -5303,7 +5443,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();
@@ -5375,5 +5526,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, 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, 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