@medplum/react 1.0.3 → 1.0.5

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

@@ -1,3 +1,5 @@
-import { ObservationDefinition } from '@medplum/fhirtypes';
+import { DiagnosticReport, Observation, ObservationDefinition } from '@medplum/fhirtypes';
 export declare const TestosteroneDefinition: ObservationDefinition;
 export declare const HDLDefinition: ObservationDefinition;
+export declare const CreatinineObservation: Observation;
+export declare const ExampleReport: DiagnosticReport;

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { MultiSelectProps, SelectItem } from '@mantine/core';
+export interface AsyncAutocompleteOption<T> extends SelectItem {
+    resource: T;
+}
+export interface AsyncAutocompleteProps<T> extends Omit<MultiSelectProps, 'data' | 'defaultValue' | 'loadOptions' | 'onChange' | 'onCreate' | 'searchable'> {
+    defaultValue?: T | T[];
+    toKey: (item: T) => string;
+    toOption: (item: T) => AsyncAutocompleteOption<T>;
+    loadOptions: (input: string, signal: AbortSignal) => Promise<T[]>;
+    onChange: (item: T[]) => void;
+    onCreate?: (input: string) => T;
+}
+export declare function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Element;

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.js

@@ -0,0 +1,116 @@
+import { __rest } from '../node_modules/tslib/tslib.es6.js';
+import { MultiSelect, Loader } from '@mantine/core';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { killEvent } from '../utils/dom.js';
+
+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 = useRef(null);
+    const [lastValue, setLastValue] = useState(undefined);
+    const [timer, setTimer] = useState();
+    const [abortController, setAbortController] = useState();
+    const [autoSubmit, setAutoSubmit] = useState();
+    const [options, setOptions] = useState(defaultItems === null || defaultItems === void 0 ? void 0 : defaultItems.map(toOption));
+    const lastValueRef = useRef();
+    lastValueRef.current = lastValue;
+    const timerRef = useRef();
+    timerRef.current = timer;
+    const abortControllerRef = useRef();
+    abortControllerRef.current = abortController;
+    const autoSubmitRef = useRef();
+    autoSubmitRef.current = autoSubmit;
+    const optionsRef = useRef();
+    optionsRef.current = options;
+    const handleTimer = 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 = 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 = 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 = 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 = useCallback((input) => {
+        const option = toOption(onCreate(input));
+        setOptions([...optionsRef.current, option]);
+        return option;
+    }, [onCreate, setOptions, toOption]);
+    const handleFilter = useCallback((_value, selected) => !selected, []);
+    useEffect(() => {
+        return () => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, []);
+    return (React.createElement(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(Loader, { size: 16 }) : null, filter: handleFilter })));
+}
+function toDefaultItems(defaultValue) {
+    if (!defaultValue) {
+        return [];
+    }
+    if (Array.isArray(defaultValue)) {
+        return defaultValue;
+    }
+    return [defaultValue];
+}
+
+export { AsyncAutocomplete };
+//# sourceMappingURL=AsyncAutocomplete.js.map

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncAutocomplete.js","sources":["../../../src/AsyncAutocomplete/AsyncAutocomplete.tsx"],"sourcesContent":["import { Loader, MultiSelect, MultiSelectProps, SelectItem } from '@mantine/core';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { killEvent } from '../utils/dom';\n\nexport interface AsyncAutocompleteOption<T> extends SelectItem {\n  resource: T;\n}\n\nexport interface AsyncAutocompleteProps<T>\n  extends Omit<MultiSelectProps, 'data' | 'defaultValue' | 'loadOptions' | 'onChange' | 'onCreate' | 'searchable'> {\n  defaultValue?: T | T[];\n  toKey: (item: T) => string;\n  toOption: (item: T) => AsyncAutocompleteOption<T>;\n  loadOptions: (input: string, signal: AbortSignal) => Promise<T[]>;\n  onChange: (item: T[]) => void;\n  onCreate?: (input: string) => T;\n}\n\nexport function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>): JSX.Element {\n  const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, ...rest } = props;\n  const defaultItems = toDefaultItems(defaultValue);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [lastValue, setLastValue] = useState<string | undefined>(undefined);\n  const [timer, setTimer] = useState<number>();\n  const [abortController, setAbortController] = useState<AbortController>();\n  const [autoSubmit, setAutoSubmit] = useState<boolean>();\n  const [options, setOptions] = useState<AsyncAutocompleteOption<T>[]>(defaultItems?.map(toOption));\n\n  const lastValueRef = useRef<string>();\n  lastValueRef.current = lastValue;\n\n  const timerRef = useRef<number>();\n  timerRef.current = timer;\n\n  const abortControllerRef = useRef<AbortController>();\n  abortControllerRef.current = abortController;\n\n  const autoSubmitRef = useRef<boolean>();\n  autoSubmitRef.current = autoSubmit;\n\n  const optionsRef = useRef<AsyncAutocompleteOption<T>[]>();\n  optionsRef.current = options;\n\n  const handleTimer = useCallback((): void => {\n    setTimer(undefined);\n\n    const value = inputRef.current?.value?.trim() || '';\n    if (value === lastValueRef.current) {\n      // Nothing has changed, move on\n      return;\n    }\n\n    setLastValue(value);\n\n    const newAbortController = new AbortController();\n    setAbortController(newAbortController);\n\n    loadOptions(value, newAbortController.signal)\n      .then((newValues: T[]) => {\n        if (!newAbortController.signal.aborted) {\n          setOptions(newValues.map(toOption));\n          setAbortController(undefined);\n          if (autoSubmitRef.current) {\n            if (newValues.length > 0) {\n              onChange(newValues.slice(0, 1));\n            }\n            setAutoSubmit(false);\n          }\n        }\n      })\n      .catch(console.log);\n  }, [loadOptions, onChange, toOption]);\n\n  const handleSearchChange = useCallback((): void => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n      setAbortController(undefined);\n    }\n\n    if (timerRef.current !== undefined) {\n      window.clearTimeout(timerRef.current);\n    }\n\n    const newTimer = window.setTimeout(() => handleTimer(), 100);\n    setTimer(newTimer);\n  }, [handleTimer]);\n\n  const handleChange = useCallback(\n    (values: string[]): void => {\n      const result: T[] = [];\n      for (const value of values) {\n        let item = optionsRef.current?.find((option) => option.value === value)?.resource;\n        if (!item) {\n          item = (onCreate as (input: string) => T)(value);\n        }\n        result.push(item);\n      }\n      onChange(result);\n    },\n    [onChange, onCreate]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent): void => {\n      if (e.key === 'Enter') {\n        if (!timerRef.current && !abortControllerRef.current) {\n          killEvent(e);\n          if (optionsRef.current && optionsRef.current.length > 0) {\n            setOptions(optionsRef.current.slice(0, 1));\n            handleChange([optionsRef.current[0].value]);\n          }\n        } else {\n          // The user pressed enter, but we don't have results yet.\n          // We need to wait for the results to come in.\n          setAutoSubmit(true);\n        }\n      }\n    },\n    [handleChange]\n  );\n\n  const handleCreate = useCallback(\n    (input: string): AsyncAutocompleteOption<T> => {\n      const option = toOption((onCreate as (input: string) => T)(input));\n      setOptions([...(optionsRef.current as AsyncAutocompleteOption<T>[]), option]);\n      return option;\n    },\n    [onCreate, setOptions, toOption]\n  );\n\n  const handleFilter = useCallback((_value: string, selected: boolean) => !selected, []);\n\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  return (\n    <MultiSelect\n      {...rest}\n      ref={inputRef}\n      defaultValue={defaultItems.map(toKey)}\n      searchable\n      onKeyDown={handleKeyDown}\n      onSearchChange={handleSearchChange}\n      data={options}\n      onFocus={handleTimer}\n      onChange={handleChange}\n      onCreate={handleCreate}\n      rightSectionWidth={40}\n      rightSection={abortController ? <Loader size={16} /> : null}\n      filter={handleFilter}\n    />\n  );\n}\n\nfunction toDefaultItems<T>(defaultValue: T | T[] | undefined): T[] {\n  if (!defaultValue) {\n    return [];\n  }\n  if (Array.isArray(defaultValue)) {\n    return defaultValue;\n  }\n  return [defaultValue];\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/AttachmentDisplay/AttachmentDisplay.js

@@ -1,3 +1,4 @@
+import { Anchor } from '@mantine/core';
 import React from 'react';
 
 function AttachmentDisplay(props) {
@@ -13,7 +14,7 @@ function AttachmentDisplay(props) {
         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("a", { 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'))));
+            React.createElement(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'))));
 }
 
 export { AttachmentDisplay };

package/dist/esm/AttachmentDisplay/AttachmentDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentDisplay.js","sources":["../../../src/AttachmentDisplay/AttachmentDisplay.tsx"],"sourcesContent":["import { Attachment } from '@medplum/fhirtypes';\nimport React from 'react';\n\nexport interface AttachmentDisplayProps {\n  value?: Attachment;\n  maxWidth?: number;\n}\n\nexport function AttachmentDisplay(props: AttachmentDisplayProps): JSX.Element | null {\n  const value = props.value;\n  const { contentType, url, title } = value ?? {};\n\n  if (!url) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"attachment-display\">\n      {contentType?.startsWith('image/') && (\n        <img data-testid=\"attachment-image\" style={{ maxWidth: props.maxWidth }} src={url} alt={value?.title} />\n      )}\n      {contentType?.startsWith('video/') && (\n        <video data-testid=\"attachment-video\" style={{ maxWidth: props.maxWidth }} controls={true}>\n          <source type={contentType} src={url} />\n        </video>\n      )}\n      {contentType === 'application/pdf' && !title?.endsWith('.pdf') && (\n        <div data-testid=\"attachment-pdf\" style={{ maxWidth: props.maxWidth, minHeight: 400 }}>\n          <iframe\n            width=\"100%\"\n            height=\"400\"\n            src={url + '#navpanes=0'}\n            allowFullScreen={true}\n            frameBorder={0}\n            seamless={true}\n          />\n        </div>\n      )}\n      <div data-testid=\"download-link\" style={{ padding: '2px 16px 16px 16px' }}>\n        <a href={value?.url} data-testid=\"attachment-details\" target=\"_blank\" rel=\"noopener noreferrer\">\n          {value?.title || 'Download'}\n        </a>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAQM,SAAU,iBAAiB,CAAC,KAA6B,EAAA;AAC7D,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC1B,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAL,KAAK,GAAI,EAAE,CAAC;IAEhD,IAAI,CAAC,GAAG,EAAE;AACR,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;IAED,QACE,4CAAiB,oBAAoB,EAAA;AAClC,QAAA,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,UAAU,CAAC,QAAQ,CAAC,MAChC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,kBAAkB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,KAAK,GAAI,CACzG;QACA,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,UAAU,CAAC,QAAQ,CAAC,MAChC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EAAmB,kBAAkB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAA;YACvF,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA,CACjC,CACT;AACA,QAAA,WAAW,KAAK,iBAAiB,IAAI,EAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA,KAC5D,KAAiB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,EAAA;YACnF,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,KAAK,EACZ,GAAG,EAAE,GAAG,GAAG,aAAa,EACxB,eAAe,EAAE,IAAI,EACrB,WAAW,EAAE,CAAC,EACd,QAAQ,EAAE,IAAI,EACd,CAAA,CACE,CACP;QACD,KAAiB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,eAAe,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAA;AACvE,YAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,GAAG,iBAAc,oBAAoB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAC5F,EAAA,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,KAAK,KAAI,UAAU,CACzB,CACA,CACF,EACN;AACJ;;;;"}
+{"version":3,"file":"AttachmentDisplay.js","sources":["../../../src/AttachmentDisplay/AttachmentDisplay.tsx"],"sourcesContent":["import { Anchor } from '@mantine/core';\nimport { Attachment } from '@medplum/fhirtypes';\nimport React from 'react';\n\nexport interface AttachmentDisplayProps {\n  value?: Attachment;\n  maxWidth?: number;\n}\n\nexport function AttachmentDisplay(props: AttachmentDisplayProps): JSX.Element | null {\n  const value = props.value;\n  const { contentType, url, title } = value ?? {};\n\n  if (!url) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"attachment-display\">\n      {contentType?.startsWith('image/') && (\n        <img data-testid=\"attachment-image\" style={{ maxWidth: props.maxWidth }} src={url} alt={value?.title} />\n      )}\n      {contentType?.startsWith('video/') && (\n        <video data-testid=\"attachment-video\" style={{ maxWidth: props.maxWidth }} controls={true}>\n          <source type={contentType} src={url} />\n        </video>\n      )}\n      {contentType === 'application/pdf' && !title?.endsWith('.pdf') && (\n        <div data-testid=\"attachment-pdf\" style={{ maxWidth: props.maxWidth, minHeight: 400 }}>\n          <iframe\n            width=\"100%\"\n            height=\"400\"\n            src={url + '#navpanes=0'}\n            allowFullScreen={true}\n            frameBorder={0}\n            seamless={true}\n          />\n        </div>\n      )}\n      <div data-testid=\"download-link\" style={{ padding: '2px 16px 16px 16px' }}>\n        <Anchor href={value?.url} data-testid=\"attachment-details\" target=\"_blank\" rel=\"noopener noreferrer\">\n          {value?.title || 'Download'}\n        </Anchor>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AASM,SAAU,iBAAiB,CAAC,KAA6B,EAAA;AAC7D,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC1B,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAL,KAAK,GAAI,EAAE,CAAC;IAEhD,IAAI,CAAC,GAAG,EAAE;AACR,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;IAED,QACE,4CAAiB,oBAAoB,EAAA;AAClC,QAAA,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,UAAU,CAAC,QAAQ,CAAC,MAChC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,kBAAkB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,KAAK,GAAI,CACzG;QACA,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,WAAW,CAAE,UAAU,CAAC,QAAQ,CAAC,MAChC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,aAAA,EAAmB,kBAAkB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAA;YACvF,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA,CACjC,CACT;AACA,QAAA,WAAW,KAAK,iBAAiB,IAAI,EAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,QAAQ,CAAC,MAAM,CAAC,CAAA,KAC5D,KAAiB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,EAAA;YACnF,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,KAAK,EACZ,GAAG,EAAE,GAAG,GAAG,aAAa,EACxB,eAAe,EAAE,IAAI,EACrB,WAAW,EAAE,CAAC,EACd,QAAQ,EAAE,IAAI,EACd,CAAA,CACE,CACP;QACD,KAAiB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,eAAe,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAA;AACvE,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,GAAG,EAAc,aAAA,EAAA,oBAAoB,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EACjG,EAAA,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,KAAK,KAAI,UAAU,CACpB,CACL,CACF,EACN;AACJ;;;;"}

package/dist/esm/BackboneElementDisplay/BackboneElementDisplay.js

@@ -32,6 +32,9 @@ function BackboneElementDisplay(props) {
             return null;
         }
         const property = entry[1];
+        if (!property.path) {
+            property.path = typeName + '.' + key;
+        }
         const [propertyValue, propertyType] = getValueAndType(typedValue, key);
         if (props.ignoreMissingValues &&
             (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {

package/dist/esm/BackboneElementDisplay/BackboneElementDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackboneElementDisplay.js","sources":["../../../src/BackboneElementDisplay/BackboneElementDisplay.tsx"],"sourcesContent":["import { getPropertyDisplayName, globalSchema, TypedValue } from '@medplum/core';\nimport React from 'react';\nimport { DEFAULT_IGNORED_PROPERTIES } from '../constants';\nimport { DescriptionList, DescriptionListEntry } from '../DescriptionList/DescriptionList';\nimport { getValueAndType, ResourcePropertyDisplay } from '../ResourcePropertyDisplay/ResourcePropertyDisplay';\n\nexport interface BackboneElementDisplayProps {\n  value: TypedValue;\n  compact?: boolean;\n  ignoreMissingValues?: boolean;\n  link?: boolean;\n}\n\nexport function BackboneElementDisplay(props: BackboneElementDisplayProps): JSX.Element | null {\n  const typedValue = props.value;\n  const value = typedValue.value;\n  if (!value) {\n    return null;\n  }\n\n  const typeName = typedValue.type;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  if (\n    typeof value === 'object' &&\n    'name' in value &&\n    Object.keys(value).length === 1 &&\n    typeof value.name === 'string'\n  ) {\n    // Special case for common BackboneElement pattern\n    // Where there is an object with a single property 'name'\n    // Just display the name value.\n    return <div>{value.name}</div>;\n  }\n\n  return (\n    <DescriptionList compact={props.compact}>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n        if (\n          props.ignoreMissingValues &&\n          (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))\n        ) {\n          return null;\n        }\n        return (\n          <DescriptionListEntry key={key} term={getPropertyDisplayName(key)}>\n            <ResourcePropertyDisplay\n              property={property}\n              propertyType={propertyType}\n              value={propertyValue}\n              ignoreMissingValues={props.ignoreMissingValues}\n              link={props.link}\n            />\n          </DescriptionListEntry>\n        );\n      })}\n    </DescriptionList>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAaM,SAAU,sBAAsB,CAAC,KAAkC,EAAA;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;AAC/B,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AAED,IAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC;IACjC,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YAAM,QAAQ;oCAA4B,CAAC;AACnD,KAAA;IAED,IACE,OAAO,KAAK,KAAK,QAAQ;AACzB,QAAA,MAAM,IAAI,KAAK;QACf,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC;AAC/B,QAAA,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAC9B;;;;AAIA,QAAA,OAAO,KAAM,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,KAAK,CAAC,IAAI,CAAO,CAAC;AAChC,KAAA;IAED,QACE,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,EACpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACnD,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,0BAA0B,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAChD,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC1B,QAAA,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACvE,IACE,KAAK,CAAC,mBAAmB;AACzB,aAAC,CAAC,aAAa,KAAK,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,EAChF;AACA,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,sBAAsB,CAAC,GAAG,CAAC,EAAA;AAC/D,YAAA,KAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,EACtB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA,CAChB,CACmB,EACvB;KACH,CAAC,CACc,EAClB;AACJ;;;;"}
+{"version":3,"file":"BackboneElementDisplay.js","sources":["../../../src/BackboneElementDisplay/BackboneElementDisplay.tsx"],"sourcesContent":["import { getPropertyDisplayName, globalSchema, TypedValue } from '@medplum/core';\nimport React from 'react';\nimport { DEFAULT_IGNORED_PROPERTIES } from '../constants';\nimport { DescriptionList, DescriptionListEntry } from '../DescriptionList/DescriptionList';\nimport { getValueAndType, ResourcePropertyDisplay } from '../ResourcePropertyDisplay/ResourcePropertyDisplay';\n\nexport interface BackboneElementDisplayProps {\n  value: TypedValue;\n  compact?: boolean;\n  ignoreMissingValues?: boolean;\n  link?: boolean;\n}\n\nexport function BackboneElementDisplay(props: BackboneElementDisplayProps): JSX.Element | null {\n  const typedValue = props.value;\n  const value = typedValue.value;\n  if (!value) {\n    return null;\n  }\n\n  const typeName = typedValue.type;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  if (\n    typeof value === 'object' &&\n    'name' in value &&\n    Object.keys(value).length === 1 &&\n    typeof value.name === 'string'\n  ) {\n    // Special case for common BackboneElement pattern\n    // Where there is an object with a single property 'name'\n    // Just display the name value.\n    return <div>{value.name}</div>;\n  }\n\n  return (\n    <DescriptionList compact={props.compact}>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        if (!property.path) {\n          property.path = typeName + '.' + key;\n        }\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n        if (\n          props.ignoreMissingValues &&\n          (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))\n        ) {\n          return null;\n        }\n        return (\n          <DescriptionListEntry key={key} term={getPropertyDisplayName(key)}>\n            <ResourcePropertyDisplay\n              property={property}\n              propertyType={propertyType}\n              value={propertyValue}\n              ignoreMissingValues={props.ignoreMissingValues}\n              link={props.link}\n            />\n          </DescriptionListEntry>\n        );\n      })}\n    </DescriptionList>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAaM,SAAU,sBAAsB,CAAC,KAAkC,EAAA;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;AAC/B,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AAED,IAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC;IACjC,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YAAM,QAAQ;oCAA4B,CAAC;AACnD,KAAA;IAED,IACE,OAAO,KAAK,KAAK,QAAQ;AACzB,QAAA,MAAM,IAAI,KAAK;QACf,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC;AAC/B,QAAA,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAC9B;;;;AAIA,QAAA,OAAO,KAAM,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,KAAK,CAAC,IAAI,CAAO,CAAC;AAChC,KAAA;IAED,QACE,KAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,EACpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACnD,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACrB,IAAI,0BAA0B,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AAChD,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;YAClB,QAAQ,CAAC,IAAI,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACtC,SAAA;AACD,QAAA,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACvE,IACE,KAAK,CAAC,mBAAmB;AACzB,aAAC,CAAC,aAAa,KAAK,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,EAChF;AACA,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,QACE,KAAA,CAAA,aAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,sBAAsB,CAAC,GAAG,CAAC,EAAA;AAC/D,YAAA,KAAA,CAAA,aAAA,CAAC,uBAAuB,EAAA,EACtB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,aAAa,EACpB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA,CAChB,CACmB,EACvB;KACH,CAAC,CACc,EAClB;AACJ;;;;"}

package/dist/esm/CodeInput/CodeInput.js

@@ -3,14 +3,15 @@ import { ValueSetAutocomplete } from '../ValueSetAutocomplete/ValueSetAutocomple
 
 function CodeInput(props) {
     const [value, setValue] = 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;

package/dist/esm/CodeInput/CodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","sources":["../../../src/CodeInput/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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;;;;"}
+{"version":3,"file":"CodeInput.js","sources":["../../../src/CodeInput/CodeInput.tsx"],"sourcesContent":["import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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(newValues: ValueSetExpansionContains[]): void {\n    const newValue = newValues[0];\n    const newCode = valueSetElementToCode(newValue);\n    setValue(newCode);\n    if (props.onChange) {\n      props.onChange(newCode);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      elementDefinition={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,SAAsC,EAAA;AAC1D,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC9B,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,iBAAiB,EAAE,KAAK,CAAC,QAAQ,EACjC,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/CodeableConceptInput.js

@@ -3,33 +3,33 @@ import { ValueSetAutocomplete } from '../ValueSetAutocomplete/ValueSetAutocomple
 
 function CodeableConceptInput(props) {
     const [value, setValue] = 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,
+        })),
     };
 }
 

package/dist/esm/CodeableConceptInput/CodeableConceptInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeableConceptInput.js","sources":["../../../src/CodeableConceptInput/CodeableConceptInput.tsx"],"sourcesContent":["import { CodeableConcept, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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;;;;"}
+{"version":3,"file":"CodeableConceptInput.js","sources":["../../../src/CodeableConceptInput/CodeableConceptInput.tsx"],"sourcesContent":["import { CodeableConcept, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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(newValues: ValueSetExpansionContains[]): void {\n    const newConcept = valueSetElementToCodeableConcept(newValues);\n    setValue(newConcept);\n    if (props.onChange) {\n      props.onChange(newConcept);\n    }\n  }\n\n  return (\n    <ValueSetAutocomplete\n      elementDefinition={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[] | undefined {\n  return concept.coding?.map((c) => ({\n    system: c.system,\n    code: c.code,\n    display: c.display,\n  }));\n}\n\nfunction valueSetElementToCodeableConcept(elements: ValueSetExpansionContains[]): CodeableConcept | undefined {\n  if (elements.length === 0) {\n    return undefined;\n  }\n  return {\n    coding: elements.map((e) => ({\n      system: e.system,\n      code: e.code,\n      display: e.display,\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,SAAsC,EAAA;AAC1D,QAAA,MAAM,UAAU,GAAG,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAC/D,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,iBAAiB,EAAE,KAAK,CAAC,QAAQ,EACjC,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;;AAChE,IAAA,OAAO,CAAA,EAAA,GAAA,OAAO,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,GAAG,CAAC,CAAC,CAAC,MAAM;QACjC,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,IAAI,EAAE,CAAC,CAAC,IAAI;QACZ,OAAO,EAAE,CAAC,CAAC,OAAO;AACnB,KAAA,CAAC,CAAC,CAAC;AACN,CAAC;AAED,SAAS,gCAAgC,CAAC,QAAqC,EAAA;AAC7E,IAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,QAAA,OAAO,SAAS,CAAC;AAClB,KAAA;IACD,OAAO;QACL,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;YAC3B,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,IAAI,EAAE,CAAC,CAAC,IAAI;YACZ,OAAO,EAAE,CAAC,CAAC,OAAO;AACnB,SAAA,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}

package/dist/esm/CodingInput/CodingInput.js

@@ -3,14 +3,15 @@ import { ValueSetAutocomplete } from '../ValueSetAutocomplete/ValueSetAutocomple
 
 function CodingInput(props) {
     const [value, setValue] = 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 {

package/dist/esm/CodingInput/CodingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodingInput.js","sources":["../../../src/CodingInput/CodingInput.tsx"],"sourcesContent":["import { Coding, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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;;;;"}
+{"version":3,"file":"CodingInput.js","sources":["../../../src/CodingInput/CodingInput.tsx"],"sourcesContent":["import { Coding, ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { ValueSetAutocomplete } from '../ValueSetAutocomplete/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(newValues: ValueSetExpansionContains[]): void {\n    const newValue = newValues[0];\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      elementDefinition={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,SAAsC,EAAA;AAC1D,QAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;QAC9B,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,iBAAiB,EAAE,KAAK,CAAC,QAAQ,EACjC,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/Container/Container.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ContainerProps } from '@mantine/core';
+export declare function Container(props: ContainerProps): JSX.Element;

package/dist/esm/Container/Container.js

@@ -0,0 +1,20 @@
+import { __rest } from '../node_modules/tslib/tslib.es6.js';
+import { createStyles, Container as Container$1 } from '@mantine/core';
+import React from 'react';
+
+const useStyles = createStyles(() => ({
+    root: {
+        '@media (max-width: 800px)': {
+            paddingLeft: 4,
+            paddingRight: 4,
+        },
+    },
+}));
+function Container(props) {
+    const { children } = props, others = __rest(props, ["children"]);
+    const { classes } = useStyles();
+    return (React.createElement(Container$1, Object.assign({ className: classes.root }, others), children));
+}
+
+export { Container };
+//# sourceMappingURL=Container.js.map

package/dist/esm/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/Container/Container.tsx"],"sourcesContent":["import { Container as MantineContainer, ContainerProps, createStyles } from '@mantine/core';\nimport React from 'react';\n\nconst useStyles = createStyles(() => ({\n  root: {\n    '@media (max-width: 800px)': {\n      paddingLeft: 4,\n      paddingRight: 4,\n    },\n  },\n}));\n\nexport function Container(props: ContainerProps): JSX.Element {\n  const { children, ...others } = props;\n  const { classes } = useStyles();\n\n  return (\n    <MantineContainer className={classes.root} {...others}>\n      {children}\n    </MantineContainer>\n  );\n}\n"],"names":["MantineContainer"],"mappings":";;;;AAGA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACpC,IAAA,IAAI,EAAE;AACJ,QAAA,2BAA2B,EAAE;AAC3B,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,YAAY,EAAE,CAAC;AAChB,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAEE,SAAU,SAAS,CAAC,KAAqB,EAAA;IAC7C,MAAM,EAAE,QAAQ,EAAA,GAAgB,KAAK,EAAhB,MAAM,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,UAAA,CAAA,CAAQ,CAAC;AACtC,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;AAEhC,IAAA,QACE,KAAA,CAAA,aAAA,CAACA,WAAgB,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,IAAM,MAAM,CAAA,EAClD,QAAQ,CACQ,EACnB;AACJ;;;;"}

package/dist/esm/DiagnosticReportDisplay/DiagnosticReportDisplay.js

@@ -5,6 +5,7 @@ import { CodeableConceptDisplay } from '../CodeableConceptDisplay/CodeableConcep
 import { MedplumLink } from '../MedplumLink/MedplumLink.js';
 import { RangeDisplay } from '../RangeDisplay/RangeDisplay.js';
 import { ResourceBadge } from '../ResourceBadge/ResourceBadge.js';
+import { StatusBadge } from '../StatusBadge/StatusBadge.js';
 import { useResource } from '../useResource/useResource.js';
 
 const useStyles = createStyles((theme) => ({
@@ -75,7 +76,9 @@ function ObservationTable(props) {
                 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) {
@@ -93,7 +96,10 @@ function ObservationRow(props) {
             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;

package/dist/esm/DiagnosticReportDisplay/DiagnosticReportDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../../src/DiagnosticReportDisplay/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { createStyles, Group, Stack, Text, Title } from '@mantine/core';\nimport { capitalize, formatDateTime, formatObservationValue } 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/CodeableConceptDisplay';\nimport { MedplumLink } from '../MedplumLink/MedplumLink';\nimport { RangeDisplay } from '../RangeDisplay/RangeDisplay';\nimport { ResourceBadge } from '../ResourceBadge/ResourceBadge';\nimport { useResource } from '../useResource/useResource';\n\nconst useStyles = createStyles((theme) => ({\n  table: {\n    border: `0.1px solid ${theme.colors.gray[5]}`,\n    borderCollapse: 'collapse',\n\n    '& td, & th': {\n      border: `0.1px solid ${theme.colors.gray[5]}`,\n      padding: 4,\n    },\n  },\n\n  criticalRow: {\n    background: theme.colorScheme === 'dark' ? theme.colors.red[7] : theme.colors.red[1],\n    border: `0.1px solid ${theme.colors.red[5]}`,\n    color: theme.colors.red[5],\n    fontWeight: 500,\n\n    '& td': {\n      border: `0.1px solid ${theme.colors.red[5]}`,\n    },\n  },\n}));\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    <Stack>\n      <Title>Diagnostic Report</Title>\n      <Group mt=\"md\" spacing={30}>\n        {diagnosticReport.subject && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Subject\n            </Text>\n            <Text>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </Text>\n          </div>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <div key={interpreter.reference}>\n              <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n                Interpreter\n              </Text>\n              <Text>\n                <ResourceBadge value={interpreter} link={true} />\n              </Text>\n            </div>\n          ))}\n        {diagnosticReport.issued && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Issued\n            </Text>\n            <Text>{formatDateTime(diagnosticReport.issued)}</Text>\n          </div>\n        )}\n        {diagnosticReport.status && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Status\n            </Text>\n            <Text>{capitalize(diagnosticReport.status)}</Text>\n          </div>\n        )}\n      </Group>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </Stack>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  const { classes } = useStyles();\n  return (\n    <table className={classes.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 { classes, cx } = useStyles();\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  const critical = isCritical(observation);\n\n  return (\n    <tr className={cx({ [classes.criticalRow]: critical })}>\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  return <>{formatObservationValue(obs)}</>;\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 === 'A';\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../../src/DiagnosticReportDisplay/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { createStyles, Group, Stack, Text, Title } from '@mantine/core';\nimport { capitalize, formatDateTime, formatObservationValue } 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/CodeableConceptDisplay';\nimport { MedplumLink } from '../MedplumLink/MedplumLink';\nimport { RangeDisplay } from '../RangeDisplay/RangeDisplay';\nimport { ResourceBadge } from '../ResourceBadge/ResourceBadge';\nimport { StatusBadge } from '../StatusBadge/StatusBadge';\nimport { useResource } from '../useResource/useResource';\n\nconst useStyles = createStyles((theme) => ({\n  table: {\n    border: `0.1px solid ${theme.colors.gray[5]}`,\n    borderCollapse: 'collapse',\n\n    '& td, & th': {\n      border: `0.1px solid ${theme.colors.gray[5]}`,\n      padding: 4,\n    },\n  },\n\n  criticalRow: {\n    background: theme.colorScheme === 'dark' ? theme.colors.red[7] : theme.colors.red[1],\n    border: `0.1px solid ${theme.colors.red[5]}`,\n    color: theme.colors.red[5],\n    fontWeight: 500,\n\n    '& td': {\n      border: `0.1px solid ${theme.colors.red[5]}`,\n    },\n  },\n}));\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\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    <Stack>\n      <Title>Diagnostic Report</Title>\n      <Group mt=\"md\" spacing={30}>\n        {diagnosticReport.subject && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Subject\n            </Text>\n            <Text>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </Text>\n          </div>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <div key={interpreter.reference}>\n              <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n                Interpreter\n              </Text>\n              <Text>\n                <ResourceBadge value={interpreter} link={true} />\n              </Text>\n            </div>\n          ))}\n        {diagnosticReport.issued && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Issued\n            </Text>\n            <Text>{formatDateTime(diagnosticReport.issued)}</Text>\n          </div>\n        )}\n        {diagnosticReport.status && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Status\n            </Text>\n            <Text>{capitalize(diagnosticReport.status)}</Text>\n          </div>\n        )}\n      </Group>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </Stack>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  const { classes } = useStyles();\n  return (\n    <table className={classes.table}>\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Value</th>\n          <th>Reference Range</th>\n          <th>Interpretation</th>\n          <th>Category</th>\n          <th>Status</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 { classes, cx } = useStyles();\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  const critical = isCritical(observation);\n\n  return (\n    <tr className={cx({ [classes.criticalRow]: critical })}>\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      <td>\n        {observation.category && observation.category.length > 0 && (\n          <ul>\n            {observation.category.map((concept) => (\n              <li>\n                <CodeableConceptDisplay value={concept} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </td>\n      <td>{observation.status && <StatusBadge status={observation.status} />}</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  return <>{formatObservationValue(obs)}</>;\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 === 'A';\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/DiagnosticReportDisplay/DiagnosticReportDisplay.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 WithCategories: () => JSX.Element;

package/dist/esm/Document/Document.d.ts

@@ -1,6 +1,3 @@
-import React from 'react';
-export interface DocumentProps {
-    width?: number;
-    children?: React.ReactNode;
-}
-export declare function Document(props: DocumentProps): JSX.Element;
+/// <reference types="react" />
+import { PanelProps } from '../Panel/Panel';
+export declare function Document(props: PanelProps): JSX.Element;

package/dist/esm/Document/Document.js

@@ -1,13 +1,12 @@
-import { Container, Paper } from '@mantine/core';
+import { __rest } from '../node_modules/tslib/tslib.es6.js';
 import React from 'react';
+import { Container } from '../Container/Container.js';
+import { Panel } from '../Panel/Panel.js';
 
 function Document(props) {
-    let style = undefined;
-    if (props.width) {
-        style = { maxWidth: props.width };
-    }
+    const { children } = props, others = __rest(props, ["children"]);
     return (React.createElement(Container, null,
-        React.createElement(Paper, { style: style, mx: "auto", my: "lg", p: "lg", shadow: "xs", radius: "sm", withBorder: true }, props.children)));
+        React.createElement(Panel, Object.assign({}, others), children)));
 }
 
 export { Document };

package/dist/esm/Document/Document.js.map

@@ -1 +1 @@
-{"version":3,"file":"Document.js","sources":["../../../src/Document/Document.tsx"],"sourcesContent":["import { Container, Paper } from '@mantine/core';\nimport React from 'react';\n\nexport interface DocumentProps {\n  width?: number;\n  children?: React.ReactNode;\n}\n\nexport function Document(props: DocumentProps): JSX.Element {\n  let style: React.CSSProperties | undefined = undefined;\n  if (props.width) {\n    style = { maxWidth: props.width };\n  }\n\n  return (\n    <Container>\n      <Paper style={style} mx=\"auto\" my=\"lg\" p=\"lg\" shadow=\"xs\" radius=\"sm\" withBorder>\n        {props.children}\n      </Paper>\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;AAQM,SAAU,QAAQ,CAAC,KAAoB,EAAA;IAC3C,IAAI,KAAK,GAAoC,SAAS,CAAC;IACvD,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;AACnC,KAAA;IAED,QACE,oBAAC,SAAS,EAAA,IAAA;AACR,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,IAAA,EAAA,EAC7E,KAAK,CAAC,QAAQ,CACT,CACE,EACZ;AACJ;;;;"}
+{"version":3,"file":"Document.js","sources":["../../../src/Document/Document.tsx"],"sourcesContent":["import React from 'react';\nimport { Container } from '../Container/Container';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport function Document(props: PanelProps): JSX.Element {\n  const { children, ...others } = props;\n  return (\n    <Container>\n      <Panel {...others}>{children}</Panel>\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;;;AAIM,SAAU,QAAQ,CAAC,KAAiB,EAAA;IACxC,MAAM,EAAE,QAAQ,EAAA,GAAgB,KAAK,EAAhB,MAAM,GAAA,MAAA,CAAK,KAAK,EAA/B,CAAuB,UAAA,CAAA,CAAQ,CAAC;IACtC,QACE,oBAAC,SAAS,EAAA,IAAA;QACR,KAAC,CAAA,aAAA,CAAA,KAAK,oBAAK,MAAM,CAAA,EAAG,QAAQ,CAAS,CAC3B,EACZ;AACJ;;;;"}

package/dist/esm/FhirPathTable/FhirPathTable.d.ts

@@ -2,7 +2,7 @@ import { PropertyType } from '@medplum/core';
 import { Resource } from '@medplum/fhirtypes';
 import React from 'react';
 import { SearchClickEvent } from '../SearchControl/SearchControl';
-export interface SmartSearchField {
+export interface FhirPathTableField {
     readonly propertyType: PropertyType;
     readonly name: string;
     readonly fhirPath: string;
@@ -10,7 +10,7 @@ export interface SmartSearchField {
 export interface FhirPathTableProps {
     resourceType: string;
     query: string;
-    fields: SmartSearchField[];
+    fields: FhirPathTableField[];
     checkboxesEnabled?: boolean;
     onClick?: (e: SearchClickEvent) => void;
     onAuxClick?: (e: SearchClickEvent) => void;