@medplum/react 2.0.3 → 2.0.5

package/dist/cjs/index.cjs

@@ -315,7 +315,7 @@
     }
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var defaultAttributes = {
@@ -331,7 +331,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var __defProp = Object.defineProperty;
@@ -394,7 +394,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconAdjustmentsHorizontal = createReactComponent(
@@ -414,7 +414,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconAlertCircle = createReactComponent("alert-circle", "IconAlertCircle", [
@@ -424,7 +424,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBleachOff = createReactComponent("bleach-off", "IconBleachOff", [
@@ -439,7 +439,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBleach = createReactComponent("bleach", "IconBleach", [
@@ -453,7 +453,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBoxMultiple = createReactComponent("box-multiple", "IconBoxMultiple", [
@@ -474,7 +474,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBracketsContain = createReactComponent("brackets-contain", "IconBracketsContain", [
@@ -486,7 +486,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBucketOff = createReactComponent("bucket-off", "IconBucketOff", [
@@ -508,7 +508,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconBucket = createReactComponent("bucket", "IconBucket", [
@@ -523,7 +523,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCalendar = createReactComponent("calendar", "IconCalendar", [
@@ -542,7 +542,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCheck = createReactComponent("check", "IconCheck", [
@@ -550,7 +550,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCheckbox = createReactComponent("checkbox", "IconCheckbox", [
@@ -565,7 +565,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCircleMinus = createReactComponent("circle-minus", "IconCircleMinus", [
@@ -574,7 +574,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCirclePlus = createReactComponent("circle-plus", "IconCirclePlus", [
@@ -584,7 +584,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCloudUpload = createReactComponent("cloud-upload", "IconCloudUpload", [
@@ -600,7 +600,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconColumns = createReactComponent("columns", "IconColumns", [
@@ -615,7 +615,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconCurrencyDollar = createReactComponent("currency-dollar", "IconCurrencyDollar", [
@@ -630,7 +630,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconDots = createReactComponent("dots", "IconDots", [
@@ -640,7 +640,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconEdit = createReactComponent("edit", "IconEdit", [
@@ -662,7 +662,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconEqualNot = createReactComponent("equal-not", "IconEqualNot", [
@@ -672,7 +672,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconEqual = createReactComponent("equal", "IconEqual", [
@@ -681,7 +681,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconFileAlert = createReactComponent("file-alert", "IconFileAlert", [
@@ -698,7 +698,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconFilePlus = createReactComponent("file-plus", "IconFilePlus", [
@@ -715,7 +715,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconFilter = createReactComponent("filter", "IconFilter", [
@@ -729,7 +729,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconListDetails = createReactComponent("list-details", "IconListDetails", [
@@ -754,7 +754,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconMathGreater = createReactComponent("math-greater", "IconMathGreater", [
@@ -762,7 +762,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconMathLower = createReactComponent("math-lower", "IconMathLower", [
@@ -770,7 +770,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconMessage = createReactComponent("message", "IconMessage", [
@@ -786,7 +786,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconPin = createReactComponent("pin", "IconPin", [
@@ -802,7 +802,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconPinnedOff = createReactComponent("pinned-off", "IconPinnedOff", [
@@ -819,7 +819,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconSettings = createReactComponent("settings", "IconSettings", [
@@ -834,7 +834,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconSortAscending = createReactComponent("sort-ascending", "IconSortAscending", [
@@ -846,7 +846,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconSortDescending = createReactComponent("sort-descending", "IconSortDescending", [
@@ -858,7 +858,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconSquare = createReactComponent("square", "IconSquare", [
@@ -872,7 +872,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
@@ -886,7 +886,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconTrash = createReactComponent("trash", "IconTrash", [
@@ -901,7 +901,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.3.0 - MIT
+     * @tabler/icons-react v2.4.0 - MIT
      */
 
     var IconX = createReactComponent("x", "IconX", [
@@ -1388,7 +1388,7 @@
     function EmailForm(props) {
         const { setEmail, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
         const medplum = useMedplum();
-        const googleClientId = getGoogleClientId(props.googleClientId);
+        const googleClientId = !props.disableGoogleAuth && getGoogleClientId(props.googleClientId);
         const isExternalAuth = React.useCallback(async (authMethod) => {
             if (!authMethod.authorizeUrl) {
                 return false;
@@ -1441,7 +1441,7 @@
                 remember: formData.remember === 'on',
             })
                 .then(handleAuthResponse)
-                .catch(setOutcome);
+                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
         }, [medplum, baseLoginRequest, handleAuthResponse]);
         return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
@@ -1456,10 +1456,12 @@
 
     function ChooseProfileForm(props) {
         const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
         return (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, "Choose profile")),
+                React.createElement(core$1.Title, { order: 3 }, "Choose profile")),
+            React.createElement(OperationOutcomeAlert, { outcome: outcome }),
             props.memberships.map((membership) => (React.createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
                     medplum
                         .post('auth/profile', {
@@ -1467,7 +1469,7 @@
                         profile: membership.id,
                     })
                         .then(props.handleAuthResponse)
-                        .catch(console.log);
+                        .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
                 } },
                 React.createElement(core$1.Group, null,
                     React.createElement(core$1.Avatar, { radius: "xl" }),
@@ -1581,7 +1583,7 @@
         }, [medplum, props, handleAuthResponse]);
         return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, ...baseLoginRequest }, props.children));
+                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, disableGoogleAuth: props.disableGoogleAuth, ...baseLoginRequest }, props.children));
             }
             else if (mfaRequired) {
                 return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });
@@ -1944,6 +1946,7 @@
         const medplum = useMedplum();
         const referenceRef = React.useRef(undefined);
         const resourceRef = React.useRef(undefined);
+        const lastRequestedRef = React.useRef(undefined);
         // Parse the input value into a reference and resource
         parseValue(value, referenceRef, resourceRef);
         // Priority order:
@@ -1957,7 +1960,8 @@
         const [prevResource, forceRerender] = React.useState(currentResource);
         // Subscribe to changes to the passed-in value
         React.useEffect(() => {
-            if (referenceRef.current) {
+            if (referenceRef.current && referenceRef.current.reference !== lastRequestedRef.current) {
+                lastRequestedRef.current = referenceRef.current.reference;
                 medplum
                     .readReference(referenceRef.current)
                     .then((newValue) => {
@@ -1967,7 +1971,7 @@
                 })
                     .catch((err) => {
                     if (setOutcome) {
-                        setOutcome(err);
+                        setOutcome(core.normalizeOperationOutcome(err));
                     }
                 });
             }
@@ -3072,12 +3076,19 @@
 
     function ResourceName(props) {
         const { value, link, ...rest } = props;
-        const resource = useResource(value);
-        if (!resource) {
+        const [outcome, setOutcome] = React.useState();
+        const resource = useResource(value, setOutcome);
+        let text;
+        if (outcome && !core.isOk(outcome)) {
+            text = `[${core.normalizeErrorString(outcome)}]`;
+        }
+        else if (resource) {
+            text = core.getDisplayString(resource);
+        }
+        else {
             return null;
         }
-        const text = core.getDisplayString(resource);
-        return link ? (React.createElement(MedplumLink, { to: resource, ...rest }, text)) : (React.createElement(core$1.Text, { component: "span", ...rest }, text));
+        return link ? (React.createElement(MedplumLink, { to: value, ...rest }, text)) : (React.createElement(core$1.Text, { component: "span", ...rest }, text));
     }
 
     function ResourceBadge(props) {
@@ -3166,13 +3177,28 @@
         noteCite: { fontSize: theme.fontSizes.xs, marginBlockStart: 3 },
         noteRoot: { padding: 5 },
     }));
+    DiagnosticReportDisplay.defaultProps = {
+        hideObservationNotes: false,
+        hideSpecimenInfo: false,
+    };
     function DiagnosticReportDisplay(props) {
+        const medplum = useMedplum();
         const diagnosticReport = useResource(props.value);
-        const specimen = useResource(diagnosticReport?.specimen?.[0]);
+        const [specimens, setSpecimens] = React.useState();
+        React.useEffect(() => {
+            if (diagnosticReport?.specimen) {
+                Promise.allSettled(diagnosticReport.specimen.map((ref) => medplum.readReference(ref)))
+                    .then((outcomes) => outcomes
+                    .filter((outcome) => outcome.status === 'fulfilled')
+                    .map((outcome) => outcome.value))
+                    .then(setSpecimens)
+                    .catch(console.error);
+            }
+        }, [medplum, diagnosticReport]);
         if (!diagnosticReport) {
             return null;
         }
-        const specimenNotes = specimen?.note || [];
+        const specimenNotes = specimens?.flatMap((spec) => spec.note || []) || [];
         if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {
             const pf = diagnosticReport.presentedForm[0];
             if (pf.contentType?.startsWith('text/plain') && pf.data) {
@@ -3181,25 +3207,48 @@
         }
         return (React.createElement(core$1.Stack, null,
             React.createElement(core$1.Title, null, "Diagnostic Report"),
-            React.createElement(core$1.Group, { mt: "md", spacing: 30 },
-                diagnosticReport.subject && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
-                    React.createElement(core$1.Text, null,
-                        React.createElement(ResourceBadge, { value: diagnosticReport.subject, link: true })))),
-                diagnosticReport.resultsInterpreter &&
-                    diagnosticReport.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
-                        React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
-                        React.createElement(core$1.Text, null,
-                            React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
-                diagnosticReport.issued && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
-                    React.createElement(core$1.Text, null, core.formatDateTime(diagnosticReport.issued)))),
-                diagnosticReport.status && (React.createElement("div", null,
-                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
-                    React.createElement(core$1.Text, null, core.capitalize(diagnosticReport.status))))),
+            React.createElement(DiagnosticReportHeader, { value: diagnosticReport }),
+            !props.hideSpecimenInfo && SpecimenInfo(specimens),
             diagnosticReport.result && (React.createElement(ObservationTable, { hideObservationNotes: props.hideObservationNotes, value: diagnosticReport.result })),
             specimenNotes.length > 0 && React.createElement(NoteDisplay, { value: specimenNotes })));
     }
+    function DiagnosticReportHeader({ value }) {
+        return (React.createElement(core$1.Group, { mt: "md", spacing: 30 },
+            value.subject && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
+                React.createElement(core$1.Text, null,
+                    React.createElement(ResourceBadge, { value: value.subject, link: true })))),
+            value.resultsInterpreter &&
+                value.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
+                    React.createElement(core$1.Text, null,
+                        React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
+            value.performer &&
+                value.performer.map((performer) => (React.createElement("div", { key: performer.reference },
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Performer"),
+                    React.createElement(core$1.Text, null,
+                        React.createElement(ResourceBadge, { value: performer, link: true }))))),
+            value.issued && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
+                React.createElement(core$1.Text, null, core.formatDateTime(value.issued)))),
+            value.status && (React.createElement("div", null,
+                React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
+                React.createElement(core$1.Text, null, core.capitalize(value.status))))));
+    }
+    function SpecimenInfo(specimens) {
+        return (React.createElement(core$1.Stack, { spacing: 'xs' },
+            React.createElement(core$1.Title, { order: 2, size: "h6" }, "Specimens"),
+            React.createElement(core$1.List, { type: "ordered" }, specimens?.map((specimen, index) => (React.createElement(core$1.List.Item, { ml: 'sm', key: `specimen-${specimen.id}-${index}` },
+                React.createElement(core$1.Group, { spacing: 20 },
+                    React.createElement(core$1.Group, { spacing: 5 },
+                        React.createElement(core$1.Text, { fw: 500 }, "Collected:"),
+                        " ",
+                        core.formatDateTime(specimen.collection?.collectedDateTime)),
+                    React.createElement(core$1.Group, { spacing: 5 },
+                        React.createElement(core$1.Text, { fw: 500 }, "Received:"),
+                        " ",
+                        core.formatDateTime(specimen.receivedTime)))))))));
+    }
     function ObservationTable(props) {
         const { classes } = useStyles$9();
         return (React.createElement("table", { className: classes.table },
@@ -3210,8 +3259,9 @@
                     React.createElement("th", null, "Reference Range"),
                     React.createElement("th", null, "Interpretation"),
                     React.createElement("th", null, "Category"),
+                    React.createElement("th", null, "Performer"),
                     React.createElement("th", null, "Status"))),
-            React.createElement("tbody", null, props.value?.map((observation, index) => (React.createElement(ObservationRow, { key: `obs-${index}-${observation.id}`, hideObservationNotes: props.hideObservationNotes, value: observation }))))));
+            React.createElement("tbody", null, props.value?.map((observation, index) => (React.createElement(ObservationRow, { key: `obs-${observation.id}-${index}`, hideObservationNotes: props.hideObservationNotes, value: observation }))))));
     }
     function ObservationRow(props) {
         const { classes, cx } = useStyles$9();
@@ -3233,9 +3283,10 @@
                 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, index) => (React.createElement("li", { key: `category-${index}` },
                     React.createElement(CodeableConceptDisplay, { value: concept }))))))),
+                React.createElement("td", null, observation.performer?.map((performer) => (React.createElement(ReferenceDisplay, { key: performer?.reference, value: performer })))),
                 React.createElement("td", null, observation.status && React.createElement(StatusBadge, { status: observation.status }))),
             displayNotes && (React.createElement("tr", null,
-                React.createElement("td", { colSpan: 5 },
+                React.createElement("td", { colSpan: 6 },
                     React.createElement(NoteDisplay, { value: observation.note }))))));
     }
     function ObservationValueDisplay(props) {
@@ -5036,7 +5087,7 @@
                         React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
                     fields.map((field) => (React.createElement("td", { key: field.name }, renderValue(resource, field))))))))),
             resources?.length === 0 && (React.createElement(Container, null,
-                React.createElement(core$1.Center, null,
+                React.createElement(core$1.Center, { style: { height: 150 } },
                     React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
             lastResult?.total !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
                 React.createElement(core$1.Pagination, { page: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getItemAriaLabel: (page) => {
@@ -5129,7 +5180,10 @@
         selectedRef.current = selected;
         React.useEffect(() => {
             setOutcome(undefined);
-            medplum.graphql(query).then(setResponse).catch(setOutcome);
+            medplum
+                .graphql(query)
+                .then(setResponse)
+                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
         }, [medplum, query]);
         function handleSingleCheckboxClick(e, id) {
             e.stopPropagation();