@medplum/react 0.10.0 → 0.10.2

package/dist/cjs/stories/{Tabs.stories.d.ts → CodeInput.stories.d.ts}

@@ -3,4 +3,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: () => JSX.Element;
-export declare const LongStrings: () => JSX.Element;
+export declare const DefaultValue: () => JSX.Element;

package/dist/{esm/stories/Tabs.stories.d.ts → cjs/stories/CodeableConceptInput.stories.d.ts}

@@ -3,4 +3,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: () => JSX.Element;
-export declare const LongStrings: () => JSX.Element;
+export declare const DefaultValue: () => JSX.Element;

package/dist/cjs/stories/PlanDefinitionBuilder.stories.d.ts

@@ -3,3 +3,5 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: () => JSX.Element;
+export declare const Covid19Eval: () => JSX.Element;
+export declare const Covid19PCRLabServiceStory: () => JSX.Element;

package/dist/cjs/stories/RequestGroupDisplay.stories.d.ts

@@ -3,3 +3,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Simple: () => JSX.Element;
+export declare const Covid19: () => JSX.Element;

package/dist/cjs/stories/ResourceTable.stories.d.ts

@@ -5,3 +5,7 @@ export default _default;
 export declare const Patient: () => JSX.Element;
 export declare const Observation: () => JSX.Element;
 export declare const ObservationIgnoreEmpty: () => JSX.Element;
+export declare const Covid19PCRTestActivity: () => JSX.Element;
+export declare const Covid19ReviewReportActivity: () => JSX.Element;
+export declare const Covid19SpecimenRequirement: () => JSX.Element;
+export declare const Covid19ObservationDefinition: () => JSX.Element;

package/dist/cjs/stories/covid19.d.ts

@@ -0,0 +1,15 @@
+import { ActivityDefinition, ObservationDefinition, PlanDefinition, Questionnaire, RequestGroup, ServiceRequest, SpecimenDefinition, Task } from '@medplum/fhirtypes';
+export declare const Covid19AssessmentQuestionnaire: Questionnaire;
+export declare const Covid19NasalSpecimen: SpecimenDefinition;
+export declare const Covid19PCRObservationDefinition: ObservationDefinition;
+export declare const Covid19PCRTest: ActivityDefinition;
+export declare const Covid19ReviewReport: ActivityDefinition;
+export declare const Covid19CarePlanDefinition: PlanDefinition;
+export declare const Covid19PCRLabService: PlanDefinition;
+export declare const Covid19AssessmentTask: Task;
+export declare const Covid19InitialConsultTask: Task;
+export declare const Covid19PCRServiceRequest: ServiceRequest;
+export declare const Covid19PCRTask: Task;
+export declare const Covid19ReviewLabsTask: Task;
+export declare const Covid19FollowUpConsultTask: Task;
+export declare const Covid19RequestGroup: RequestGroup;

package/dist/cjs/styles.css

@@ -106,6 +106,13 @@ dl.medplum-description-list.compact dd {
   border: 0;
 }
 
+.medplum-resource-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
 .medplum-diagnostic-report-header {
   display: flex;
   flex-direction: row;
@@ -150,24 +157,6 @@ dl.medplum-description-list.compact dd {
   font-weight: bold;
 }
 
-.medplum-resource-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-}
-
-table.medplum-table {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-table.medplum-table > thead > tr > th,
-table.medplum-table > tbody > tr > td {
-  border: 0.1px solid var(--medplum-gray-400);
-  padding: 4px 6px;
-}
-
 .medplum-diff-removed {
   color: red;
   text-decoration: line-through;
@@ -192,18 +181,6 @@ table.medplum-diff-table td {
   vertical-align: top;
 }
 
-.medplum-scrollable-container {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-
-.medplum-scrollable-content {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-}
-
 .medplum-timeline article.medplum-timeline-item {
   max-width: 900px;
   padding: 0;
@@ -344,16 +321,6 @@ table.medplum-diff-table td {
   outline: 0;
 }
 
-.medplum-footer {
-  text-align: center;
-  font-size: 12px;
-}
-
-.medplum-footer a {
-  color: var(--medplum-gray-500);
-  margin: 0 8px;
-}
-
 .medplum-questionnaire-option-row {
   display: flex;
   align-items: center;
@@ -425,83 +392,6 @@ table.medplum-diff-table td {
   color: var(--medplum-blue-500);
 }
 
-.medplum-status {
-  padding: 1px 6px;
-  margin: 0 4px;
-  font-size: 80%;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: 8px;
-}
-
-/*
- * 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
- */
-
-.medplum-status-active,
-.medplum-status-arrived,
-.medplum-status-chcked-in,
-.medplum-status-draft,
-.medplum-status-in-progress,
-.medplum-status-preliminary,
-.medplum-status-proposed,
-.medplum-status-pending,
-.medplum-status-registered,
-.medplum-status-requested {
-  background-color: var(--medplum-blue-50);
-  border: 0.01px solid var(--medplum-blue-300);
-  color: var(--medplum-blue-800);
-}
-
-.medplum-status-on-hold {
-  background-color: var(--medplum-orange-50);
-  border: 0.01px solid var(--medplum-orange-300);
-  color: var(--medplum-orange-800);
-}
-
-.medplum-status-booked,
-.medplum-status-completed,
-.medplum-status-fulfilled {
-  background-color: var(--medplum-green-50);
-  border: 0.01px solid var(--medplum-green-300);
-  color: var(--medplum-green-800);
-}
-
-.medplum-status-cancelled,
-.medplum-status-noshow,
-.medplum-status-rejected,
-.medplum-status-revoked,
-.medplum-status-entered-in-error {
-  background-color: var(--medplum-red-50);
-  border: 0.01px solid var(--medplum-red-300);
-  color: var(--medplum-red-800);
-}
-
-.medplum-status-unknown,
-.medplum-status-waitlist {
-  background-color: var(--medplum-gray-50);
-  border: 0.01px solid var(--medplum-gray-500);
-  color: var(--medplum-gray-800);
-}
-
 .medplum-request-group {
   padding: 4px;
 }
@@ -636,81 +526,3 @@ table.medplum-diff-table td {
 }
 
 .grecaptcha-badge { visibility: hidden; }
-
-a.medplum-tab {
-  display: inline-block;
-  line-height: 50px;
-  margin: 0;
-  padding: 0 8px;
-  min-width: 75px;
-  height: 50px;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  color: var(--medplum-gray-600);
-  text-decoration: none;
-  outline: 0;
-}
-
-a.medplum-tab:focus,
-a.medplum-tab:hover {
-  border-bottom: 2px solid var(--medplum-blue-100);
-  outline: 0;
-  text-decoration: none;
-}
-
-a.medplum-tab.selected {
-  border-bottom: 2px solid var(--medplum-orange-300);
-  color: var(--medplum-gray-800);
-  font-weight: bold;
-}
-
-.medplum-surface {
-  background-color: var(--medplum-surface);
-}
-
-.medplum-tablist {
-  position: relative;
-  min-height: 50px;
-  user-select: none;
-  white-space: nowrap;
-  font-size: 14px;
-}
-
-.medplum-tablist-foreground {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  bottom: 0;
-  user-select: none;
-  white-space: nowrap;
-  border-bottom: 2px solid var(--medplum-gray-200);
-  padding: 0 20px;
-  z-index: 3;
-  font-size: 14px;
-}
-
-.medplum-title-bar {
-  display: flex;
-  width: 100%;
-  height: 50px;
-  padding: 15px;
-  justify-content: space-between;
-  background: var(--medplum-surface);
-  border-bottom: 2px solid var(--medplum-gray-200);
-  color: var(--medplum-gray-800);
-}
-
-.medplum-title-bar > div {
-  display: flex;
-  align-items: center;
-}
-
-.medplum-title-bar h1 {
-  font-size: 14px;
-  font-weight: bold;
-  padding: 0 4px 0 1px;
-  margin: 0 4px 0 1px;
-  color: var(--medplum-gray-800);
-}

package/dist/esm/CodeInput.js

@@ -13,10 +13,10 @@ function CodeInput(props) {
     return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
 }
 function codeToValueSetElement(code) {
-    return { code };
+    return code ? { code } : undefined;
 }
 function valueSetElementToCode(element) {
-    return element.code;
+    return element === null || element === void 0 ? void 0 : element.code;
 }
 
 export { CodeInput };

package/dist/esm/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","sources":["../../src/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onChange?: (value: string | undefined) => void;\n}\n\nexport function CodeInput(props: CodeInputProps): JSX.Element {\n  const [value, setValue] = useState<string | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains): void {\n    const newCode = valueSetElementToCode(newValue);\n    setValue(newCode);\n    if (props.onChange) {\n      props.onChange(newCode);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={codeToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeToValueSetElement(code: string | undefined): ValueSetExpansionContains {\n  return { code };\n}\n\nfunction valueSetElementToCode(element: ValueSetExpansionContains): string | undefined {\n  return element.code;\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3E,SAAS,YAAY,CAAC,QAAmC,EAAA;AACvD,QAAA,MAAM,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChD,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACzB,SAAA;KACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAC1C,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAwB,EAAA;IACrD,OAAO,EAAE,IAAI,EAAE,CAAC;AAClB,CAAC;AAED,SAAS,qBAAqB,CAAC,OAAkC,EAAA;IAC/D,OAAO,OAAO,CAAC,IAAI,CAAC;AACtB;;;;"}
+{"version":3,"file":"CodeInput.js","sources":["../../src/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onChange?: (value: string | undefined) => void;\n}\n\nexport function CodeInput(props: CodeInputProps): JSX.Element {\n  const [value, setValue] = useState<string | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains | undefined): void {\n    const newCode = valueSetElementToCode(newValue);\n    setValue(newCode);\n    if (props.onChange) {\n      props.onChange(newCode);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={codeToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeToValueSetElement(code: string | undefined): ValueSetExpansionContains | undefined {\n  return code ? { code } : undefined;\n}\n\nfunction valueSetElementToCode(element: ValueSetExpansionContains | undefined): string | undefined {\n  return element?.code;\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,SAAS,CAAC,KAAqB,EAAA;AAC7C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3E,SAAS,YAAY,CAAC,QAA+C,EAAA;AACnE,QAAA,MAAM,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChD,QAAQ,CAAC,OAAO,CAAC,CAAC;QAClB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACzB,SAAA;KACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAC1C,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,IAAwB,EAAA;IACrD,OAAO,IAAI,GAAG,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AACrC,CAAC;AAED,SAAS,qBAAqB,CAAC,OAA8C,EAAA;AAC3E,IAAA,OAAO,OAAO,KAAP,IAAA,IAAA,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;AACvB;;;;"}

package/dist/esm/CodeableConceptInput.d.ts

@@ -5,6 +5,6 @@ export interface CodeableConceptInputProps {
     name: string;
     placeholder?: string;
     defaultValue?: CodeableConcept;
-    onChange?: (value: CodeableConcept) => void;
+    onChange?: (value: CodeableConcept | undefined) => void;
 }
 export declare function CodeableConceptInput(props: CodeableConceptInputProps): JSX.Element;

package/dist/esm/CodeableConceptInput.js

@@ -4,7 +4,7 @@ import { ValueSetAutocomplete } from './ValueSetAutocomplete.js';
 function CodeableConceptInput(props) {
     const [value, setValue] = useState(props.defaultValue);
     function handleChange(newValue) {
-        const newConcept = valueSetElementToCodeableConcept(newValue);
+        const newConcept = newValue && valueSetElementToCodeableConcept(newValue);
         setValue(newConcept);
         if (props.onChange) {
             props.onChange(newConcept);

package/dist/esm/CodeableConceptInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeableConceptInput.js","sources":["../../src/CodeableConceptInput.tsx"],"sourcesContent":["import { CodeableConcept, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeableConceptInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: CodeableConcept;\n  onChange?: (value: CodeableConcept) => void;\n}\n\nexport function CodeableConceptInput(props: CodeableConceptInputProps): JSX.Element {\n  const [value, setValue] = useState<CodeableConcept | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains): void {\n    const newConcept = valueSetElementToCodeableConcept(newValue);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={value && codeableConceptToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeableConceptToValueSetElement(concept: CodeableConcept): ValueSetExpansionContains {\n  return {\n    system: concept.coding?.[0]?.system,\n    code: concept.coding?.[0]?.code,\n    display: concept.coding?.[0]?.display,\n  };\n}\n\nfunction valueSetElementToCodeableConcept(element: ValueSetExpansionContains): CodeableConcept {\n  return {\n    text: element.display,\n    coding: [\n      {\n        system: element.system,\n        code: element.code,\n        display: element.display,\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA8B,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpF,SAAS,YAAY,CAAC,QAAmC,EAAA;AACvD,QAAA,MAAM,UAAU,GAAG,gCAAgC,CAAC,QAAQ,CAAC,CAAC;QAC9D,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,oBAAoB,EACnB,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,KAAK,IAAI,gCAAgC,CAAC,KAAK,CAAC,EAC9D,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAwB,EAAA;;IAChE,OAAO;QACL,MAAM,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM;QACnC,IAAI,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI;QAC/B,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO;KACtC,CAAC;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAkC,EAAA;IAC1E,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,OAAO;AACrB,QAAA,MAAM,EAAE;AACN,YAAA;gBACE,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;AACzB,aAAA;AACF,SAAA;KACF,CAAC;AACJ;;;;"}
+{"version":3,"file":"CodeableConceptInput.js","sources":["../../src/CodeableConceptInput.tsx"],"sourcesContent":["import { CodeableConcept, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodeableConceptInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: CodeableConcept;\n  onChange?: (value: CodeableConcept | undefined) => void;\n}\n\nexport function CodeableConceptInput(props: CodeableConceptInputProps): JSX.Element {\n  const [value, setValue] = useState<CodeableConcept | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains | undefined): void {\n    const newConcept = newValue && valueSetElementToCodeableConcept(newValue);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={value && codeableConceptToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codeableConceptToValueSetElement(concept: CodeableConcept): ValueSetExpansionContains {\n  return {\n    system: concept.coding?.[0]?.system,\n    code: concept.coding?.[0]?.code,\n    display: concept.coding?.[0]?.display,\n  };\n}\n\nfunction valueSetElementToCodeableConcept(element: ValueSetExpansionContains): CodeableConcept {\n  return {\n    text: element.display,\n    coding: [\n      {\n        system: element.system,\n        code: element.code,\n        display: element.display,\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA8B,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpF,SAAS,YAAY,CAAC,QAA+C,EAAA;QACnE,MAAM,UAAU,GAAG,QAAQ,IAAI,gCAAgC,CAAC,QAAQ,CAAC,CAAC;QAC1E,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,oBAAoB,EACnB,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,KAAK,IAAI,gCAAgC,CAAC,KAAK,CAAC,EAC9D,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAwB,EAAA;;IAChE,OAAO;QACL,MAAM,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM;QACnC,IAAI,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI;QAC/B,OAAO,EAAE,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO;KACtC,CAAC;AACJ,CAAC;AAED,SAAS,gCAAgC,CAAC,OAAkC,EAAA;IAC1E,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,OAAO;AACrB,QAAA,MAAM,EAAE;AACN,YAAA;gBACE,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;AACzB,aAAA;AACF,SAAA;KACF,CAAC;AACJ;;;;"}

package/dist/esm/CodingInput.d.ts

@@ -5,6 +5,6 @@ export interface CodingInputProps {
     name: string;
     placeholder?: string;
     defaultValue?: Coding;
-    onChange?: (value: Coding) => void;
+    onChange?: (value: Coding | undefined) => void;
 }
 export declare function CodingInput(props: CodingInputProps): JSX.Element;

package/dist/esm/CodingInput.js

@@ -4,7 +4,7 @@ import { ValueSetAutocomplete } from './ValueSetAutocomplete.js';
 function CodingInput(props) {
     const [value, setValue] = useState(props.defaultValue);
     function handleChange(newValue) {
-        const newConcept = valueSetElementToCoding(newValue);
+        const newConcept = newValue && valueSetElementToCoding(newValue);
         setValue(newConcept);
         if (props.onChange) {
             props.onChange(newConcept);

package/dist/esm/CodingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodingInput.js","sources":["../../src/CodingInput.tsx"],"sourcesContent":["import { Coding, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodingInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: Coding;\n  onChange?: (value: Coding) => void;\n}\n\nexport function CodingInput(props: CodingInputProps): JSX.Element {\n  const [value, setValue] = useState<Coding | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains): void {\n    const newConcept = valueSetElementToCoding(newValue);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={value && codingToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codingToValueSetElement(coding: Coding): ValueSetExpansionContains {\n  return {\n    system: coding.system,\n    code: coding.code,\n    display: coding.display,\n  };\n}\n\nfunction valueSetElementToCoding(element: ValueSetExpansionContains): Coding {\n  return {\n    system: element.system,\n    code: element.code,\n    display: element.display,\n  };\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3E,SAAS,YAAY,CAAC,QAAmC,EAAA;AACvD,QAAA,MAAM,UAAU,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QACrD,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,oBAAoB,EACnB,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,KAAK,IAAI,uBAAuB,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,MAAc,EAAA;IAC7C,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,OAAO,EAAE,MAAM,CAAC,OAAO;KACxB,CAAC;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,OAAkC,EAAA;IACjE,OAAO;QACL,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC;AACJ;;;;"}
+{"version":3,"file":"CodingInput.js","sources":["../../src/CodingInput.tsx"],"sourcesContent":["import { Coding, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from './ValueSetAutocomplete';\n\nexport interface CodingInputProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: Coding;\n  onChange?: (value: Coding | undefined) => void;\n}\n\nexport function CodingInput(props: CodingInputProps): JSX.Element {\n  const [value, setValue] = useState<Coding | undefined>(props.defaultValue);\n\n  function handleChange(newValue: ValueSetExpansionContains | undefined): void {\n    const newConcept = newValue && valueSetElementToCoding(newValue);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      property={props.property}\n      name={props.name}\n      placeholder={props.placeholder}\n      defaultValue={value && codingToValueSetElement(value)}\n      onChange={handleChange}\n    />\n  );\n}\n\nfunction codingToValueSetElement(coding: Coding): ValueSetExpansionContains {\n  return {\n    system: coding.system,\n    code: coding.code,\n    display: coding.display,\n  };\n}\n\nfunction valueSetElementToCoding(element: ValueSetExpansionContains): Coding {\n  return {\n    system: element.system,\n    code: element.code,\n    display: element.display,\n  };\n}\n"],"names":[],"mappings":";;;AAYM,SAAU,WAAW,CAAC,KAAuB,EAAA;AACjD,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3E,SAAS,YAAY,CAAC,QAA+C,EAAA;QACnE,MAAM,UAAU,GAAG,QAAQ,IAAI,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QACjE,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAC5B,SAAA;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,oBAAoB,EACnB,EAAA,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,YAAY,EAAE,KAAK,IAAI,uBAAuB,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,YAAY,EAAA,CACtB,EACF;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,MAAc,EAAA;IAC7C,OAAO;QACL,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,OAAO,EAAE,MAAM,CAAC,OAAO;KACxB,CAAC;AACJ,CAAC;AAED,SAAS,uBAAuB,CAAC,OAAkC,EAAA;IACjE,OAAO;QACL,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC;AACJ;;;;"}

package/dist/esm/DiagnosticReportDisplay.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { DiagnosticReport, Observation, Reference } from '@medplum/fhirtypes';
 import './DiagnosticReportDisplay.css';
-import './Table.css';
 export interface DiagnosticReportDisplayProps {
     value?: DiagnosticReport | Reference<DiagnosticReport>;
 }

package/dist/esm/DiagnosticReportDisplay.js

@@ -6,6 +6,7 @@ import { QuantityDisplay } from './QuantityDisplay.js';
 import { RangeDisplay } from './RangeDisplay.js';
 import { ResourceBadge } from './ResourceBadge.js';
 import { useResource } from './useResource.js';
+import { Table } from '@mantine/core';
 
 function DiagnosticReportDisplay(props) {
     var _a, _b;
@@ -49,7 +50,7 @@ function DiagnosticReportDisplay(props) {
 }
 function ObservationTable(props) {
     var _a;
-    return (React.createElement("table", { className: "medplum-table" },
+    return (React.createElement(Table, { withBorder: true, withColumnBorders: true },
         React.createElement("thead", null,
             React.createElement("tr", null,
                 React.createElement("th", null, "Test"),
@@ -98,6 +99,9 @@ function ReferenceRangeDisplay(props) {
     if (!range) {
         return null;
     }
+    if (range.text) {
+        return React.createElement(React.Fragment, null, range.text);
+    }
     return React.createElement(RangeDisplay, { value: range });
 }
 /**
@@ -109,7 +113,7 @@ function ReferenceRangeDisplay(props) {
 function isCritical(observation) {
     var _a, _b, _c, _d;
     const code = (_d = (_c = (_b = (_a = observation.interpretation) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code;
-    return code === 'AA' || code === 'LL' || code === 'HH';
+    return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';
 }
 
 export { DiagnosticReportDisplay, ObservationTable };

package/dist/esm/DiagnosticReportDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../src/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { capitalize, formatDateTime } from '@medplum/core';\nimport {\n  DiagnosticReport,\n  Observation,\n  ObservationComponent,\n  ObservationReferenceRange,\n  Reference,\n} from '@medplum/fhirtypes';\nimport React from 'react';\nimport { CodeableConceptDisplay } from './CodeableConceptDisplay';\nimport './DiagnosticReportDisplay.css';\nimport { MedplumLink } from './MedplumLink';\nimport { QuantityDisplay } from './QuantityDisplay';\nimport { RangeDisplay } from './RangeDisplay';\nimport { ResourceBadge } from './ResourceBadge';\nimport './Table.css';\nimport { useResource } from './useResource';\n\nexport interface DiagnosticReportDisplayProps {\n  value?: DiagnosticReport | Reference<DiagnosticReport>;\n}\n\nexport function DiagnosticReportDisplay(props: DiagnosticReportDisplayProps): JSX.Element | null {\n  const diagnosticReport = useResource(props.value);\n  const specimen = useResource(diagnosticReport?.specimen?.[0]);\n  if (!diagnosticReport) {\n    return null;\n  }\n\n  let textContent = '';\n\n  if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {\n    const pf = diagnosticReport.presentedForm[0];\n    if (pf.contentType?.startsWith('text/plain') && pf.data) {\n      textContent = window.atob(pf.data);\n    }\n  }\n\n  if (specimen?.note) {\n    for (const note of specimen.note) {\n      textContent += note.text + '\\n\\n';\n    }\n  }\n\n  return (\n    <div className=\"medplum-diagnostic-report\">\n      <h1>Diagnostic Report</h1>\n      <div className=\"medplum-diagnostic-report-header\">\n        {diagnosticReport.subject && (\n          <dl>\n            <dt>Subject</dt>\n            <dd>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </dd>\n          </dl>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <dl key={interpreter.reference}>\n              <dt>Interpreter</dt>\n              <dd>\n                <ResourceBadge value={interpreter} link={true} />\n              </dd>\n            </dl>\n          ))}\n        {diagnosticReport.issued && (\n          <dl>\n            <dt>Issued</dt>\n            <dd>{formatDateTime(diagnosticReport.issued)}</dd>\n          </dl>\n        )}\n        {diagnosticReport.status && (\n          <dl>\n            <dt>Status</dt>\n            <dd>{capitalize(diagnosticReport.status)}</dd>\n          </dl>\n        )}\n      </div>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </div>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  return (\n    <table className=\"medplum-table\">\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Value</th>\n          <th>Reference Range</th>\n          <th>Interpretation</th>\n        </tr>\n      </thead>\n      <tbody>\n        {props.value?.map((observation, index) => (\n          <ObservationRow key={'obs-' + index} value={observation} />\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\ninterface ObservationRowProps {\n  value: Observation | Reference<Observation>;\n}\n\nfunction ObservationRow(props: ObservationRowProps): JSX.Element | null {\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  let className = undefined;\n  if (isCritical(observation)) {\n    className = 'medplum-critical';\n  }\n\n  return (\n    <tr className={className}>\n      <td>\n        <MedplumLink to={observation}>\n          <CodeableConceptDisplay value={observation.code} />\n        </MedplumLink>\n      </td>\n      <td>\n        <ObservationValueDisplay value={observation} />\n      </td>\n      <td>\n        <ReferenceRangeDisplay value={observation.referenceRange} />\n      </td>\n      <td>\n        {observation.interpretation && observation.interpretation.length > 0 && (\n          <CodeableConceptDisplay value={observation.interpretation[0]} />\n        )}\n      </td>\n    </tr>\n  );\n}\n\ninterface ObservationValueDisplayProps {\n  value?: Observation | ObservationComponent;\n}\n\nfunction ObservationValueDisplay(props: ObservationValueDisplayProps): JSX.Element | null {\n  const obs = props.value;\n\n  if (obs?.valueQuantity) {\n    return <QuantityDisplay value={props.value?.valueQuantity} />;\n  }\n\n  if (obs?.valueString) {\n    return <>{obs.valueString}</>;\n  }\n\n  if (obs && 'component' in obs && obs?.component) {\n    return (\n      <>\n        {obs.component\n          .map<React.ReactNode>((component: ObservationComponent, index: number) => (\n            <ObservationValueDisplay key={`obs-${index}`} value={component} />\n          ))\n          .reduce((prev, curr) => [prev, ' / ', curr])}\n      </>\n    );\n  }\n\n  return null;\n}\n\ninterface ReferenceRangeProps {\n  value?: ObservationReferenceRange[];\n}\n\nfunction ReferenceRangeDisplay(props: ReferenceRangeProps): JSX.Element | null {\n  const range = props.value && props.value.length > 0 && props.value[0];\n  if (!range) {\n    return null;\n  }\n  return <RangeDisplay value={range} />;\n}\n\n/**\n * Returns true if the observation is critical.\n * See: https://www.hl7.org/fhir/valueset-observation-interpretation.html\n * @param observation The FHIR observation.\n * @returns True if the FHIR observation is a critical value.\n */\nfunction isCritical(observation: Observation): boolean {\n  const code = observation.interpretation?.[0]?.coding?.[0]?.code;\n  return code === 'AA' || code === 'LL' || code === 'HH';\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../src/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { capitalize, formatDateTime } from '@medplum/core';\nimport {\n  DiagnosticReport,\n  Observation,\n  ObservationComponent,\n  ObservationReferenceRange,\n  Reference,\n} from '@medplum/fhirtypes';\nimport React from 'react';\nimport { CodeableConceptDisplay } from './CodeableConceptDisplay';\nimport { MedplumLink } from './MedplumLink';\nimport { QuantityDisplay } from './QuantityDisplay';\nimport { RangeDisplay } from './RangeDisplay';\nimport { ResourceBadge } from './ResourceBadge';\nimport { useResource } from './useResource';\n\nimport { Table } from '@mantine/core';\nimport './DiagnosticReportDisplay.css';\n\nexport interface DiagnosticReportDisplayProps {\n  value?: DiagnosticReport | Reference<DiagnosticReport>;\n}\n\nexport function DiagnosticReportDisplay(props: DiagnosticReportDisplayProps): JSX.Element | null {\n  const diagnosticReport = useResource(props.value);\n  const specimen = useResource(diagnosticReport?.specimen?.[0]);\n  if (!diagnosticReport) {\n    return null;\n  }\n\n  let textContent = '';\n\n  if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {\n    const pf = diagnosticReport.presentedForm[0];\n    if (pf.contentType?.startsWith('text/plain') && pf.data) {\n      textContent = window.atob(pf.data);\n    }\n  }\n\n  if (specimen?.note) {\n    for (const note of specimen.note) {\n      textContent += note.text + '\\n\\n';\n    }\n  }\n\n  return (\n    <div className=\"medplum-diagnostic-report\">\n      <h1>Diagnostic Report</h1>\n      <div className=\"medplum-diagnostic-report-header\">\n        {diagnosticReport.subject && (\n          <dl>\n            <dt>Subject</dt>\n            <dd>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </dd>\n          </dl>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <dl key={interpreter.reference}>\n              <dt>Interpreter</dt>\n              <dd>\n                <ResourceBadge value={interpreter} link={true} />\n              </dd>\n            </dl>\n          ))}\n        {diagnosticReport.issued && (\n          <dl>\n            <dt>Issued</dt>\n            <dd>{formatDateTime(diagnosticReport.issued)}</dd>\n          </dl>\n        )}\n        {diagnosticReport.status && (\n          <dl>\n            <dt>Status</dt>\n            <dd>{capitalize(diagnosticReport.status)}</dd>\n          </dl>\n        )}\n      </div>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </div>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  return (\n    <Table withBorder withColumnBorders>\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Value</th>\n          <th>Reference Range</th>\n          <th>Interpretation</th>\n        </tr>\n      </thead>\n      <tbody>\n        {props.value?.map((observation, index) => (\n          <ObservationRow key={'obs-' + index} value={observation} />\n        ))}\n      </tbody>\n    </Table>\n  );\n}\n\ninterface ObservationRowProps {\n  value: Observation | Reference<Observation>;\n}\n\nfunction ObservationRow(props: ObservationRowProps): JSX.Element | null {\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  let className = undefined;\n  if (isCritical(observation)) {\n    className = 'medplum-critical';\n  }\n\n  return (\n    <tr className={className}>\n      <td>\n        <MedplumLink to={observation}>\n          <CodeableConceptDisplay value={observation.code} />\n        </MedplumLink>\n      </td>\n      <td>\n        <ObservationValueDisplay value={observation} />\n      </td>\n      <td>\n        <ReferenceRangeDisplay value={observation.referenceRange} />\n      </td>\n      <td>\n        {observation.interpretation && observation.interpretation.length > 0 && (\n          <CodeableConceptDisplay value={observation.interpretation[0]} />\n        )}\n      </td>\n    </tr>\n  );\n}\n\ninterface ObservationValueDisplayProps {\n  value?: Observation | ObservationComponent;\n}\n\nfunction ObservationValueDisplay(props: ObservationValueDisplayProps): JSX.Element | null {\n  const obs = props.value;\n\n  if (obs?.valueQuantity) {\n    return <QuantityDisplay value={props.value?.valueQuantity} />;\n  }\n\n  if (obs?.valueString) {\n    return <>{obs.valueString}</>;\n  }\n\n  if (obs && 'component' in obs && obs?.component) {\n    return (\n      <>\n        {obs.component\n          .map<React.ReactNode>((component: ObservationComponent, index: number) => (\n            <ObservationValueDisplay key={`obs-${index}`} value={component} />\n          ))\n          .reduce((prev, curr) => [prev, ' / ', curr])}\n      </>\n    );\n  }\n\n  return null;\n}\n\ninterface ReferenceRangeProps {\n  value?: ObservationReferenceRange[];\n}\n\nfunction ReferenceRangeDisplay(props: ReferenceRangeProps): JSX.Element | null {\n  const range = props.value && props.value.length > 0 && props.value[0];\n  if (!range) {\n    return null;\n  }\n  if (range.text) {\n    return <>{range.text}</>;\n  }\n  return <RangeDisplay value={range} />;\n}\n\n/**\n * Returns true if the observation is critical.\n * See: https://www.hl7.org/fhir/valueset-observation-interpretation.html\n * @param observation The FHIR observation.\n * @returns True if the FHIR observation is a critical value.\n */\nfunction isCritical(observation: Observation): boolean {\n  const code = observation.interpretation?.[0]?.coding?.[0]?.code;\n  return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ResourceHistoryTable.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Bundle } from '@medplum/fhirtypes';
-import './Table.css';
 export interface ResourceHistoryTableProps {
     history?: Bundle;
     resourceType?: string;

package/dist/esm/ResourceHistoryTable.js

@@ -1,3 +1,4 @@
+import { Table } from '@mantine/core';
 import { formatDateTime, normalizeErrorString } from '@medplum/core';
 import React, { useState, useEffect } from 'react';
 import { MedplumLink } from './MedplumLink.js';
@@ -19,7 +20,7 @@ function ResourceHistoryTable(props) {
     if (!value) {
         return React.createElement("div", null, "Loading...");
     }
-    return (React.createElement("table", { className: "medplum-table" },
+    return (React.createElement(Table, { withBorder: true, withColumnBorders: true },
         React.createElement("thead", null,
             React.createElement("tr", null,
                 React.createElement("th", null, "Author"),

package/dist/esm/ResourceHistoryTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceHistoryTable.js","sources":["../../src/ResourceHistoryTable.tsx"],"sourcesContent":["import { formatDateTime, normalizeErrorString } from '@medplum/core';\nimport { Bundle, BundleEntry, Resource, ResourceType } from '@medplum/fhirtypes';\nimport React, { useEffect, useState } from 'react';\nimport { MedplumLink } from './MedplumLink';\nimport { useMedplum } from './MedplumProvider';\nimport { ResourceBadge } from './ResourceBadge';\nimport './Table.css';\n\nexport interface ResourceHistoryTableProps {\n  history?: Bundle;\n  resourceType?: string;\n  id?: string;\n}\n\nexport function ResourceHistoryTable(props: ResourceHistoryTableProps): JSX.Element {\n  const medplum = useMedplum();\n  const [value, setValue] = useState<Bundle | undefined>(props.history);\n\n  useEffect(() => {\n    if (!props.history && props.resourceType && props.id) {\n      medplum\n        .readHistory(props.resourceType as ResourceType, props.id)\n        .then(setValue)\n        .catch(console.log);\n    }\n  }, [medplum, props.history, props.resourceType, props.id]);\n\n  if (!value) {\n    return <div>Loading...</div>;\n  }\n\n  return (\n    <table className=\"medplum-table\">\n      <thead>\n        <tr>\n          <th>Author</th>\n          <th>Date</th>\n          <th>Version</th>\n        </tr>\n      </thead>\n      <tbody>\n        {value.entry?.map((entry, index) => (\n          <HistoryRow key={'entry-' + index} entry={entry} />\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\ninterface HistoryRowProps {\n  entry: BundleEntry;\n}\n\nfunction HistoryRow(props: HistoryRowProps): JSX.Element {\n  const { response, resource } = props.entry;\n  if (resource) {\n    return (\n      <tr>\n        <td>\n          <ResourceBadge value={resource.meta?.author} link={true} />\n        </td>\n        <td>{formatDateTime(resource.meta?.lastUpdated)}</td>\n        <td>\n          <MedplumLink to={getVersionUrl(resource)}>{resource.meta?.versionId}</MedplumLink>\n        </td>\n      </tr>\n    );\n  } else {\n    return (\n      <tr>\n        <td colSpan={3}>{normalizeErrorString(response?.outcome)}</td>\n      </tr>\n    );\n  }\n}\n\nfunction getVersionUrl(resource: Resource): string {\n  return `/${resource.resourceType}/${resource.id}/_history/${resource.meta?.versionId}`;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceHistoryTable.js","sources":["../../src/ResourceHistoryTable.tsx"],"sourcesContent":["import { Table } from '@mantine/core';\nimport { formatDateTime, normalizeErrorString } from '@medplum/core';\nimport { Bundle, BundleEntry, Resource, ResourceType } from '@medplum/fhirtypes';\nimport React, { useEffect, useState } from 'react';\nimport { MedplumLink } from './MedplumLink';\nimport { useMedplum } from './MedplumProvider';\nimport { ResourceBadge } from './ResourceBadge';\n\nexport interface ResourceHistoryTableProps {\n  history?: Bundle;\n  resourceType?: string;\n  id?: string;\n}\n\nexport function ResourceHistoryTable(props: ResourceHistoryTableProps): JSX.Element {\n  const medplum = useMedplum();\n  const [value, setValue] = useState<Bundle | undefined>(props.history);\n\n  useEffect(() => {\n    if (!props.history && props.resourceType && props.id) {\n      medplum\n        .readHistory(props.resourceType as ResourceType, props.id)\n        .then(setValue)\n        .catch(console.log);\n    }\n  }, [medplum, props.history, props.resourceType, props.id]);\n\n  if (!value) {\n    return <div>Loading...</div>;\n  }\n\n  return (\n    <Table withBorder withColumnBorders>\n      <thead>\n        <tr>\n          <th>Author</th>\n          <th>Date</th>\n          <th>Version</th>\n        </tr>\n      </thead>\n      <tbody>\n        {value.entry?.map((entry, index) => (\n          <HistoryRow key={'entry-' + index} entry={entry} />\n        ))}\n      </tbody>\n    </Table>\n  );\n}\n\ninterface HistoryRowProps {\n  entry: BundleEntry;\n}\n\nfunction HistoryRow(props: HistoryRowProps): JSX.Element {\n  const { response, resource } = props.entry;\n  if (resource) {\n    return (\n      <tr>\n        <td>\n          <ResourceBadge value={resource.meta?.author} link={true} />\n        </td>\n        <td>{formatDateTime(resource.meta?.lastUpdated)}</td>\n        <td>\n          <MedplumLink to={getVersionUrl(resource)}>{resource.meta?.versionId}</MedplumLink>\n        </td>\n      </tr>\n    );\n  } else {\n    return (\n      <tr>\n        <td colSpan={3}>{normalizeErrorString(response?.outcome)}</td>\n      </tr>\n    );\n  }\n}\n\nfunction getVersionUrl(resource: Resource): string {\n  return `/${resource.resourceType}/${resource.id}/_history/${resource.meta?.versionId}`;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ResourceInput.js

@@ -1,7 +1,7 @@
 import { __rest, __awaiter } from './node_modules/tslib/tslib.es6.js';
 import { Group, Text, Autocomplete, Loader } from '@mantine/core';
 import { getDisplayString } from '@medplum/core';
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useState, useEffect } from 'react';
 import { useMedplum } from './MedplumProvider.js';
 import { ResourceAvatar } from './ResourceAvatar.js';
 import { useResource } from './useResource.js';
@@ -12,6 +12,11 @@ function ResourceInput(props) {
     const [value, setValue] = useState(defaultValue ? getDisplayString(defaultValue) : '');
     const [loading, setLoading] = useState(false);
     const [data, setData] = useState([]);
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(getDisplayString(defaultValue));
+        }
+    }, [defaultValue, setValue]);
     function loadValues(input) {
         return __awaiter(this, void 0, void 0, function* () {
             setLoading(true);

package/dist/esm/ResourceInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceInput.js","sources":["../../src/ResourceInput.tsx"],"sourcesContent":["import { Autocomplete, AutocompleteItem, Group, Loader, Text } from '@mantine/core';\nimport { getDisplayString } from '@medplum/core';\nimport { Patient, Reference, Resource, ResourceType } from '@medplum/fhirtypes';\nimport React, { forwardRef, useState } from 'react';\nimport { useMedplum } from './MedplumProvider';\nimport { ResourceAvatar } from './ResourceAvatar';\nimport { useResource } from './useResource';\n\nexport interface ResourceInputProps<T extends Resource = Resource> {\n  readonly resourceType: ResourceType;\n  readonly name: string;\n  readonly defaultValue?: T | Reference<T>;\n  readonly placeholder?: string;\n  readonly loadOnFocus?: boolean;\n  readonly onChange?: (value: T | undefined) => void;\n}\n\nexport function ResourceInput<T extends Resource = Resource>(props: ResourceInputProps<T>): JSX.Element {\n  const medplum = useMedplum();\n  const defaultValue = useResource(props.defaultValue);\n  const [value, setValue] = useState<string>(defaultValue ? getDisplayString(defaultValue) : '');\n  const [loading, setLoading] = useState(false);\n  const [data, setData] = useState<AutocompleteItem[]>([]);\n\n  async function loadValues(input: string): Promise<void> {\n    setLoading(true);\n    const resources = await medplum.searchResources(\n      props.resourceType,\n      'name=' + encodeURIComponent(input) + '&_count=10'\n    );\n    setData(resources.map((resource) => ({ value: getDisplayString(resource), resource })));\n    setLoading(false);\n  }\n\n  async function handleChange(val: string): Promise<void> {\n    setValue(val);\n    return loadValues(val);\n  }\n\n  function handleSelect(item: AutocompleteItem): void {\n    setValue(item.value);\n    setData([]);\n    if (props.onChange) {\n      props.onChange(item.resource);\n    }\n  }\n\n  return (\n    <Autocomplete\n      itemComponent={ItemComponent}\n      value={value}\n      data={data}\n      placeholder={props.placeholder}\n      onFocus={() => loadValues(value)}\n      onChange={handleChange}\n      onItemSubmit={handleSelect}\n      rightSection={loading ? <Loader size={16} /> : null}\n    />\n  );\n}\n\nconst ItemComponent = forwardRef<HTMLDivElement, any>(({ value, resource, ...others }: any, ref) => {\n  return (\n    <div ref={ref} {...others}>\n      <Group noWrap>\n        <ResourceAvatar value={resource} />\n        <div>\n          <Text>{value}</Text>\n          <Text size=\"xs\" color=\"dimmed\">\n            {(resource as Patient).birthDate}\n          </Text>\n        </div>\n      </Group>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceInput.js","sources":["../../src/ResourceInput.tsx"],"sourcesContent":["import { Autocomplete, AutocompleteItem, Group, Loader, Text } from '@mantine/core';\nimport { getDisplayString } from '@medplum/core';\nimport { Patient, Reference, Resource, ResourceType } from '@medplum/fhirtypes';\nimport React, { forwardRef, useEffect, useState } from 'react';\nimport { useMedplum } from './MedplumProvider';\nimport { ResourceAvatar } from './ResourceAvatar';\nimport { useResource } from './useResource';\n\nexport interface ResourceInputProps<T extends Resource = Resource> {\n  readonly resourceType: ResourceType;\n  readonly name: string;\n  readonly defaultValue?: T | Reference<T>;\n  readonly placeholder?: string;\n  readonly loadOnFocus?: boolean;\n  readonly onChange?: (value: T | undefined) => void;\n}\n\nexport function ResourceInput<T extends Resource = Resource>(props: ResourceInputProps<T>): JSX.Element {\n  const medplum = useMedplum();\n  const defaultValue = useResource(props.defaultValue);\n  const [value, setValue] = useState<string>(defaultValue ? getDisplayString(defaultValue) : '');\n  const [loading, setLoading] = useState(false);\n  const [data, setData] = useState<AutocompleteItem[]>([]);\n\n  useEffect(() => {\n    if (defaultValue) {\n      setValue(getDisplayString(defaultValue));\n    }\n  }, [defaultValue, setValue]);\n\n  async function loadValues(input: string): Promise<void> {\n    setLoading(true);\n    const resources = await medplum.searchResources(\n      props.resourceType,\n      'name=' + encodeURIComponent(input) + '&_count=10'\n    );\n    setData(resources.map((resource) => ({ value: getDisplayString(resource), resource })));\n    setLoading(false);\n  }\n\n  async function handleChange(val: string): Promise<void> {\n    setValue(val);\n    return loadValues(val);\n  }\n\n  function handleSelect(item: AutocompleteItem): void {\n    setValue(item.value);\n    setData([]);\n    if (props.onChange) {\n      props.onChange(item.resource);\n    }\n  }\n\n  return (\n    <Autocomplete\n      itemComponent={ItemComponent}\n      value={value}\n      data={data}\n      placeholder={props.placeholder}\n      onFocus={() => loadValues(value)}\n      onChange={handleChange}\n      onItemSubmit={handleSelect}\n      rightSection={loading ? <Loader size={16} /> : null}\n    />\n  );\n}\n\nconst ItemComponent = forwardRef<HTMLDivElement, any>(({ value, resource, ...others }: any, ref) => {\n  return (\n    <div ref={ref} {...others}>\n      <Group noWrap>\n        <ResourceAvatar value={resource} />\n        <div>\n          <Text>{value}</Text>\n          <Text size=\"xs\" color=\"dimmed\">\n            {(resource as Patient).birthDate}\n          </Text>\n        </div>\n      </Group>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}