@medplum/react 1.0.4 → 1.0.5

package/dist/cjs/index.js

@@ -131,26 +131,41 @@
         return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
     }
 
-    function AttachmentDisplay(props) {
-        const value = props.value;
-        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
-        if (!url) {
-            return null;
-        }
-        return (React.createElement("div", { "data-testid": "attachment-display" },
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
-                React.createElement("source", { type: contentType, src: url }))),
-            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
-                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
-            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
-                React.createElement(core$1.Anchor, { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
-    }
-
-    function AttachmentArrayDisplay(props) {
-        return (React.createElement("div", null, props.values &&
-            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
-                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
     }
 
     /**
@@ -185,6 +200,137 @@
         return el instanceof HTMLInputElement && el.type === 'checkbox';
     }
 
+    function AsyncAutocomplete(props) {
+        const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate } = props, rest = __rest(props, ["defaultValue", "toKey", "toOption", "loadOptions", "onChange", "onCreate"]);
+        const defaultItems = toDefaultItems(defaultValue);
+        const inputRef = React.useRef(null);
+        const [lastValue, setLastValue] = React.useState(undefined);
+        const [timer, setTimer] = React.useState();
+        const [abortController, setAbortController] = React.useState();
+        const [autoSubmit, setAutoSubmit] = React.useState();
+        const [options, setOptions] = React.useState(defaultItems === null || defaultItems === void 0 ? void 0 : defaultItems.map(toOption));
+        const lastValueRef = React.useRef();
+        lastValueRef.current = lastValue;
+        const timerRef = React.useRef();
+        timerRef.current = timer;
+        const abortControllerRef = React.useRef();
+        abortControllerRef.current = abortController;
+        const autoSubmitRef = React.useRef();
+        autoSubmitRef.current = autoSubmit;
+        const optionsRef = React.useRef();
+        optionsRef.current = options;
+        const handleTimer = React.useCallback(() => {
+            var _a, _b;
+            setTimer(undefined);
+            const value = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            if (value === lastValueRef.current) {
+                // Nothing has changed, move on
+                return;
+            }
+            setLastValue(value);
+            const newAbortController = new AbortController();
+            setAbortController(newAbortController);
+            loadOptions(value, newAbortController.signal)
+                .then((newValues) => {
+                if (!newAbortController.signal.aborted) {
+                    setOptions(newValues.map(toOption));
+                    setAbortController(undefined);
+                    if (autoSubmitRef.current) {
+                        if (newValues.length > 0) {
+                            onChange(newValues.slice(0, 1));
+                        }
+                        setAutoSubmit(false);
+                    }
+                }
+            })
+                .catch(console.log);
+        }, [loadOptions, onChange, toOption]);
+        const handleSearchChange = React.useCallback(() => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+                setAbortController(undefined);
+            }
+            if (timerRef.current !== undefined) {
+                window.clearTimeout(timerRef.current);
+            }
+            const newTimer = window.setTimeout(() => handleTimer(), 100);
+            setTimer(newTimer);
+        }, [handleTimer]);
+        const handleChange = React.useCallback((values) => {
+            var _a, _b;
+            const result = [];
+            for (const value of values) {
+                let item = (_b = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === value)) === null || _b === void 0 ? void 0 : _b.resource;
+                if (!item) {
+                    item = onCreate(value);
+                }
+                result.push(item);
+            }
+            onChange(result);
+        }, [onChange, onCreate]);
+        const handleKeyDown = React.useCallback((e) => {
+            if (e.key === 'Enter') {
+                if (!timerRef.current && !abortControllerRef.current) {
+                    killEvent(e);
+                    if (optionsRef.current && optionsRef.current.length > 0) {
+                        setOptions(optionsRef.current.slice(0, 1));
+                        handleChange([optionsRef.current[0].value]);
+                    }
+                }
+                else {
+                    // The user pressed enter, but we don't have results yet.
+                    // We need to wait for the results to come in.
+                    setAutoSubmit(true);
+                }
+            }
+        }, [handleChange]);
+        const handleCreate = React.useCallback((input) => {
+            const option = toOption(onCreate(input));
+            setOptions([...optionsRef.current, option]);
+            return option;
+        }, [onCreate, setOptions, toOption]);
+        const handleFilter = React.useCallback((_value, selected) => !selected, []);
+        React.useEffect(() => {
+            return () => {
+                if (abortControllerRef.current) {
+                    abortControllerRef.current.abort();
+                }
+            };
+        }, []);
+        return (React.createElement(core$1.MultiSelect, Object.assign({}, rest, { ref: inputRef, defaultValue: defaultItems.map(toKey), searchable: true, onKeyDown: handleKeyDown, onSearchChange: handleSearchChange, data: options, onFocus: handleTimer, onChange: handleChange, onCreate: handleCreate, rightSectionWidth: 40, rightSection: abortController ? React.createElement(core$1.Loader, { size: 16 }) : null, filter: handleFilter })));
+    }
+    function toDefaultItems(defaultValue) {
+        if (!defaultValue) {
+            return [];
+        }
+        if (Array.isArray(defaultValue)) {
+            return defaultValue;
+        }
+        return [defaultValue];
+    }
+
+    function AttachmentDisplay(props) {
+        const value = props.value;
+        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
+        if (!url) {
+            return null;
+        }
+        return (React.createElement("div", { "data-testid": "attachment-display" },
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
+                React.createElement("source", { type: contentType, src: url }))),
+            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
+                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
+            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
+                React.createElement(core$1.Anchor, { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
+    }
+
+    function AttachmentArrayDisplay(props) {
+        return (React.createElement("div", null, props.values &&
+            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
+                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+    }
+
     function AttachmentButton(props) {
         const medplum = useMedplum();
         const fileInputRef = React.useRef(null);
@@ -292,43 +438,6 @@
         return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, Object.assign({}, props), "Upload...")));
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     const useStyles$d = core$1.createStyles(() => ({
         root: {
             '@media (max-width: 800px)': {
@@ -774,12 +883,48 @@
                     React.createElement(core$1.Button, { type: "submit" }, "Set scope")))));
     }
 
+    function MfaForm(props) {
+        const medplum = useMedplum();
+        const [errorMessage, setErrorMessage] = React.useState(undefined);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+                setErrorMessage(undefined);
+                medplum
+                    .post('auth/mfa/verify', {
+                    login: props.login,
+                    token: formData.token,
+                })
+                    .then(props.handleAuthResponse)
+                    .catch((err) => setErrorMessage(core.normalizeErrorString(err)));
+            } },
+            React.createElement(core$1.Stack, null,
+                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                    React.createElement(Logo, { size: 32 }),
+                    React.createElement(core$1.Title, null, "Enter MFA code")),
+                errorMessage && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), title: "Error", color: "red" }, errorMessage)),
+                React.createElement(core$1.Stack, null,
+                    React.createElement(core$1.TextInput, { name: "token", label: "MFA code", required: true })),
+                React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                    React.createElement(core$1.Button, { type: "submit" }, "Submit code")))));
+    }
+
+    /**
+     * The SignInForm component allows users to sign in to Medplum.
+     *
+     * "Signing in" is a multi-step process:
+     * 1) Authentication - identify the user
+     * 2) MFA - If MFA is enabled, prompt for MFA code
+     * 3) Choose profile - If the user has multiple profiles, prompt to choose one
+     * 4) Choose scope - If the user has multiple scopes, prompt to choose one
+     * 5) Success - Return to the caller with either a code or a redirect
+     */
     function SignInForm(props) {
         const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode } = props, baseLoginRequest = __rest(props, ["chooseScopes", "onSuccess", "onForgotPassword", "onRegister", "onCode"]);
         const medplum = useMedplum();
         const [login, setLogin] = React.useState(undefined);
+        const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
         const [memberships, setMemberships] = React.useState(undefined);
         function handleAuthResponse(response) {
+            setAuthenticatorRequired(!!response.mfaRequired);
             if (response.login) {
                 setLogin(response.login);
             }
@@ -817,6 +962,9 @@
             if (!login) {
                 return (React.createElement(AuthenticationForm, Object.assign({ generatePkce: !onCode, onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse }, baseLoginRequest), props.children));
             }
+            else if (mfaRequired) {
+                return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });
+            }
             else if (memberships) {
                 return React.createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
             }
@@ -1269,59 +1417,39 @@
         return obj;
     }
 
-    function valueSetElementToAutocompleteItem(element) {
+    function toKey(element) {
+        return element.code;
+    }
+    function toOption(element) {
         return {
             value: element.code,
             label: getDisplay(element),
-            element,
+            resource: element,
+        };
+    }
+    function createValue(input) {
+        return {
+            code: input,
+            display: input,
         };
     }
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
-        const { property, defaultValue } = props;
-        const [textValues, setTextValues] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [defaultValue.code] : []);
-        const [data, setData] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
-        const dataRef = React.useRef();
-        dataRef.current = data;
-        const loadValues = React.useCallback((input) => __awaiter(this, void 0, void 0, function* () {
+        const { elementDefinition } = props, rest = __rest(props, ["elementDefinition"]);
+        const loadValues = React.useCallback((input, signal) => __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            const system = (_a = property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-            const valueSet = yield medplum.searchValueSet(system, input);
+            const system = (_a = elementDefinition.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
+            const valueSet = yield medplum.searchValueSet(system, input, { signal });
             const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
-            const newData = [...dataRef.current];
+            const newData = [];
             for (const valueSetElement of valueSetElements) {
-                if (valueSetElement.code && !newData.some((item) => item.value === valueSetElement.code)) {
-                    newData.push(valueSetElementToAutocompleteItem(valueSetElement));
-                }
-            }
-            setData(newData);
-        }), [medplum, property, dataRef]);
-        function handleChange(values) {
-            setTextValues(values);
-            const textValue = values[0];
-            let currentItem = undefined;
-            if (textValue) {
-                currentItem = dataRef.current.find((item) => item.value === values[0]);
-                if (!currentItem) {
-                    const newElement = { code: textValue, display: textValue };
-                    currentItem = valueSetElementToAutocompleteItem(newElement);
-                    setData([...dataRef.current, currentItem]);
+                if (valueSetElement.code && !newData.some((item) => item.code === valueSetElement.code)) {
+                    newData.push(valueSetElement);
                 }
             }
-            if (props.onChange) {
-                props.onChange(currentItem === null || currentItem === void 0 ? void 0 : currentItem.element);
-            }
-        }
-        React.useEffect(() => {
-            loadValues('').catch(console.log);
-        }, [loadValues]);
-        return (React.createElement(core$1.MultiSelect, { data: data, placeholder: props.placeholder, searchable: true, creatable: true, clearable: true, value: textValues, filter: (value, selected, item) => {
-                var _a, _b;
-                return !!(textValues.length === 0 &&
-                    !selected &&
-                    (((_a = item.element.display) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value.toLowerCase().trim())) ||
-                        ((_b = item.element.code) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(value.toLowerCase().trim()))));
-            }, onChange: handleChange, getCreateLabel: (query) => `+ Create ${query}`, onCreate: (query) => valueSetElementToAutocompleteItem({ code: query, display: query }) }));
+            return newData;
+        }), [medplum, elementDefinition]);
+        return (React.createElement(AsyncAutocomplete, Object.assign({}, rest, { creatable: true, clearable: true, toKey: toKey, toOption: toOption, loadOptions: loadValues, getCreateLabel: (query) => `+ Create ${query}`, onCreate: createValue })));
     }
     function getDisplay(item) {
         return item.display || item.code || '';
@@ -1329,46 +1457,47 @@
 
     function CodeableConceptInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
-        function handleChange(newValue) {
-            const newConcept = newValue && valueSetElementToCodeableConcept(newValue);
+        function handleChange(newValues) {
+            const newConcept = valueSetElementToCodeableConcept(newValues);
             setValue(newConcept);
             if (props.onChange) {
                 props.onChange(newConcept);
             }
         }
-        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codeableConceptToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { elementDefinition: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codeableConceptToValueSetElement(value), onChange: handleChange }));
     }
     function codeableConceptToValueSetElement(concept) {
-        var _a, _b, _c, _d, _e, _f;
-        return {
-            system: (_b = (_a = concept.coding) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.system,
-            code: (_d = (_c = concept.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code,
-            display: (_f = (_e = concept.coding) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.display,
-        };
+        var _a;
+        return (_a = concept.coding) === null || _a === void 0 ? void 0 : _a.map((c) => ({
+            system: c.system,
+            code: c.code,
+            display: c.display,
+        }));
     }
-    function valueSetElementToCodeableConcept(element) {
+    function valueSetElementToCodeableConcept(elements) {
+        if (elements.length === 0) {
+            return undefined;
+        }
         return {
-            text: element.display,
-            coding: [
-                {
-                    system: element.system,
-                    code: element.code,
-                    display: element.display,
-                },
-            ],
+            coding: elements.map((e) => ({
+                system: e.system,
+                code: e.code,
+                display: e.display,
+            })),
         };
     }
 
     function CodeInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
-        function handleChange(newValue) {
+        function handleChange(newValues) {
+            const newValue = newValues[0];
             const newCode = valueSetElementToCode(newValue);
             setValue(newCode);
             if (props.onChange) {
                 props.onChange(newCode);
             }
         }
-        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { elementDefinition: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
     }
     function codeToValueSetElement(code) {
         return code ? { code } : undefined;
@@ -1379,14 +1508,15 @@
 
     function CodingInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
-        function handleChange(newValue) {
+        function handleChange(newValues) {
+            const newValue = newValues[0];
             const newConcept = newValue && valueSetElementToCoding(newValue);
             setValue(newConcept);
             if (props.onChange) {
                 props.onChange(newConcept);
             }
         }
-        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codingToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { elementDefinition: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codingToValueSetElement(value), onChange: handleChange }));
     }
     function codingToValueSetElement(coding) {
         return {
@@ -1694,7 +1824,7 @@
         Observation: 'code',
         RequestGroup: '_id',
         ActivityDefinition: 'name',
-        User: 'email',
+        User: 'email:contains',
     };
     function ResourceInput(props) {
         const medplum = useMedplum();
@@ -1712,7 +1842,7 @@
                 setLoading(true);
                 const searchCode = SEARCH_CODES[props.resourceType] || 'name';
                 const searchParams = new URLSearchParams({
-                    [searchCode]: encodeURIComponent(input),
+                    [searchCode]: input,
                     _count: '10',
                 });
                 const resources = yield medplum.searchResources(props.resourceType, searchParams);
@@ -2225,6 +2355,64 @@
             React.createElement(ResourceName, { value: props.value, link: props.link })));
     }
 
+    /*
+     * Request status: https://hl7.org/fhir/valueset-request-status.html
+     * draft, active, on-hold, revoked, completed, entered-in-error, unknown
+     *
+     * Publication status: https://hl7.org/fhir/valueset-publication-status.html
+     * draft, active, retired, unknown
+     *
+     * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
+     * registered, preliminary, final, amended,  corrected, cancelled, entered-in-error, unknown
+     *
+     * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
+     * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
+     *
+     * Task status: https://hl7.org/fhir/valueset-task-status.html
+     * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
+     *
+     * Appointment status: https://www.hl7.org/fhir/valueset-appointmentstatus.html
+     * proposed, pending, booked, arrived, fulfilled, cancelled, noshow, entered-in-error, chcked-in, waitlist
+     */
+    const statusToColor = {
+        draft: 'blue',
+        active: 'blue',
+        'on-hold': 'yellow',
+        revoked: 'red',
+        completed: 'green',
+        'entered-in-error': 'red',
+        unknown: 'gray',
+        retired: 'gray',
+        registered: 'blue',
+        preliminary: 'blue',
+        final: 'green',
+        amended: 'yellow',
+        corrected: 'yellow',
+        cancelled: 'red',
+        requested: 'blue',
+        received: 'blue',
+        accepted: 'blue',
+        rejected: 'red',
+        ready: 'blue',
+        'in-progress': 'blue',
+        failed: 'red',
+        proposed: 'blue',
+        pending: 'blue',
+        booked: 'blue',
+        arrived: 'blue',
+        fulfilled: 'green',
+        noshow: 'red',
+        'checked-in': 'blue',
+        waitlist: 'gray',
+        routine: 'gray',
+        urgent: 'red',
+        asap: 'red',
+        stat: 'red',
+    };
+    function StatusBadge(props) {
+        return React.createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
+    }
+
     const useStyles$9 = core$1.createStyles((theme) => ({
         table: {
             border: `0.1px solid ${theme.colors.gray[5]}`,
@@ -2293,7 +2481,9 @@
                     React.createElement("th", null, "Test"),
                     React.createElement("th", null, "Value"),
                     React.createElement("th", null, "Reference Range"),
-                    React.createElement("th", null, "Interpretation"))),
+                    React.createElement("th", null, "Interpretation"),
+                    React.createElement("th", null, "Category"),
+                    React.createElement("th", null, "Status"))),
             React.createElement("tbody", null, (_a = props.value) === null || _a === void 0 ? void 0 : _a.map((observation, index) => (React.createElement(ObservationRow, { key: 'obs-' + index, value: observation }))))));
     }
     function ObservationRow(props) {
@@ -2311,7 +2501,10 @@
                 React.createElement(ObservationValueDisplay, { value: observation })),
             React.createElement("td", null,
                 React.createElement(ReferenceRangeDisplay, { value: observation.referenceRange })),
-            React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] })))));
+            React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] }))),
+            React.createElement("td", null, observation.category && observation.category.length > 0 && (React.createElement("ul", null, observation.category.map((concept) => (React.createElement("li", null,
+                React.createElement(CodeableConceptDisplay, { value: concept }))))))),
+            React.createElement("td", null, observation.status && React.createElement(StatusBadge, { status: observation.status }))));
     }
     function ObservationValueDisplay(props) {
         const obs = props.value;
@@ -4586,6 +4779,7 @@
         function setItems(newResponseItems) {
             const newResponse = {
                 resourceType: 'QuestionnaireResponse',
+                status: 'completed',
                 item: newResponseItems,
             };
             setResponse(newResponse);
@@ -5339,63 +5533,6 @@
         return ((_b = (_a = interval.range) === null || _a === void 0 ? void 0 : _a.low) === null || _b === void 0 ? void 0 : _b.value) === undefined && ((_d = (_c = interval.range) === null || _c === void 0 ? void 0 : _c.high) === null || _d === void 0 ? void 0 : _d.value) === undefined;
     }
 
-    /*
-     * Request status: https://hl7.org/fhir/valueset-request-status.html
-     * draft, active, on-hold, revoked, completed, entered-in-error, unknown
-     *
-     * Publication status: https://hl7.org/fhir/valueset-publication-status.html
-     * draft, active, retired, unknown
-     *
-     * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
-     * registered, preliminary, final, amended, cancelled, entered-in-error, unknown
-     *
-     * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
-     * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
-     *
-     * Task status: https://hl7.org/fhir/valueset-task-status.html
-     * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
-     *
-     * Appointment status: https://www.hl7.org/fhir/valueset-appointmentstatus.html
-     * proposed, pending, booked, arrived, fulfilled, cancelled, noshow, entered-in-error, chcked-in, waitlist
-     */
-    const statusToColor = {
-        draft: 'blue',
-        active: 'blue',
-        'on-hold': 'yellow',
-        revoked: 'red',
-        completed: 'green',
-        'entered-in-error': 'red',
-        unknown: 'gray',
-        retired: 'gray',
-        registered: 'blue',
-        preliminary: 'blue',
-        final: 'green',
-        amended: 'yellow',
-        cancelled: 'red',
-        requested: 'blue',
-        received: 'blue',
-        accepted: 'blue',
-        rejected: 'red',
-        ready: 'blue',
-        'in-progress': 'blue',
-        failed: 'red',
-        proposed: 'blue',
-        pending: 'blue',
-        booked: 'blue',
-        arrived: 'blue',
-        fulfilled: 'green',
-        noshow: 'red',
-        'checked-in': 'blue',
-        waitlist: 'gray',
-        routine: 'gray',
-        urgent: 'red',
-        asap: 'red',
-        stat: 'red',
-    };
-    function StatusBadge(props) {
-        return React.createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
-    }
-
     function RequestGroupDisplay(props) {
         var _a;
         const medplum = useMedplum();
@@ -5965,6 +6102,7 @@
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
     exports.AnnotationInput = AnnotationInput;
+    exports.AsyncAutocomplete = AsyncAutocomplete;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
     exports.AttachmentArrayInput = AttachmentArrayInput;
     exports.AttachmentButton = AttachmentButton;