@medplum/react 0.10.0 → 0.10.1

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/StatusBadge.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import './StatusBadge.css';
 export interface StatusBadgeProps {
     readonly status: string;
 }

package/dist/cjs/ValueSetAutocomplete.d.ts

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

package/dist/cjs/index.d.ts

@@ -23,7 +23,6 @@ export * from './Document';
 export * from './EncounterTimeline';
 export * from './ErrorBoundary';
 export * from './FhirPathTable';
-export * from './FooterLinks';
 export * from './Form';
 export * from './FormSection';
 export * from './FormUtils';
@@ -57,19 +56,13 @@ export * from './ResourcePropertyInput';
 export * from './ResourceTable';
 export * from './ResourceTimeline';
 export * from './Scheduler';
-export * from './Scrollable';
 export * from './SearchControl';
 export * from './SearchFieldEditor';
 export * from './SearchFilterEditor';
 export * from './SearchUtils';
 export * from './ServiceRequestTimeline';
 export * from './StatusBadge';
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanel';
-export * from './TabSwitch';
 export * from './Timeline';
-export * from './TitleBar';
 export * from './useResource';
 export * from './utils';
 export * from './utils/date';

package/dist/cjs/index.js

@@ -1228,51 +1228,59 @@
         return (React__default["default"].createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
     }
 
+    function valueSetElementToAutocompleteItem(element) {
+        return {
+            value: element.code,
+            label: getDisplay(element),
+            element,
+        };
+    }
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
-        const defaultValue = props.defaultValue;
-        const [value, setValue] = React.useState(defaultValue);
-        const [text, setText] = React.useState(defaultValue ? getDisplay(defaultValue) : '');
-        const [loading, setLoading] = React.useState(false);
-        const [data, setData] = React.useState([]);
-        function loadValues(input) {
+        const { property, defaultValue } = props;
+        const [textValues, setTextValues] = React.useState(defaultValue ? [defaultValue.code] : []);
+        const [data, setData] = React.useState(defaultValue ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
+        const dataRef = React.useRef();
+        dataRef.current = data;
+        const loadValues = React.useCallback((input) => __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            return __awaiter(this, void 0, void 0, function* () {
-                setLoading(true);
-                const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-                const valueSet = yield medplum.searchValueSet(system, input);
-                const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
-                setData(valueSetElements.map((element) => ({ value: getDisplay(element), element })));
-                setLoading(false);
-            });
-        }
-        function handleChange(val) {
-            return __awaiter(this, void 0, void 0, function* () {
-                setText(val);
-                return loadValues(val);
-            });
-        }
-        function handleSelect(item) {
-            setValue(item.element);
-            setText(item.value);
-            setData([]);
-            if (props.onChange) {
-                props.onChange(item.element);
+            const system = (_a = property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
+            const valueSet = yield medplum.searchValueSet(system, input);
+            const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
+            const newData = [...dataRef.current];
+            for (const valueSetElement of valueSetElements) {
+                if (!newData.some((item) => item.value === valueSetElement.code)) {
+                    newData.push(valueSetElementToAutocompleteItem(valueSetElement));
+                }
             }
-        }
-        function handleBlur(val) {
-            if (!value) {
-                const unstructured = {
-                    display: val,
-                    code: val,
-                };
-                setValue(unstructured);
-                if (props.onChange) {
-                    props.onChange(unstructured);
+            setData(newData);
+        }), [medplum, property, dataRef]);
+        function handleChange(values) {
+            setTextValues(values);
+            const textValue = values[0];
+            let currentItem = undefined;
+            if (textValue) {
+                currentItem = dataRef.current.find((item) => item.value === values[0]);
+                if (!currentItem) {
+                    const newElement = { code: textValue, display: textValue };
+                    currentItem = valueSetElementToAutocompleteItem(newElement);
+                    setData([...dataRef.current, currentItem]);
                 }
             }
+            if (props.onChange) {
+                props.onChange(currentItem === null || currentItem === void 0 ? void 0 : currentItem.element);
+            }
         }
-        return (React__default["default"].createElement(core$1.Autocomplete, { value: text, data: data, placeholder: props.placeholder, onFocus: () => loadValues(text), onBlur: () => handleBlur(text), onChange: handleChange, onItemSubmit: handleSelect, rightSection: loading ? React__default["default"].createElement(core$1.Loader, { size: 16 }) : null }));
+        React.useEffect(() => {
+            loadValues('').catch(console.log);
+        }, [loadValues]);
+        return (React__default["default"].createElement(core$1.MultiSelect, { data: data, placeholder: props.placeholder, searchable: true, creatable: true, clearable: true, value: textValues, filter: (value, selected, item) => {
+                var _a, _b;
+                return !!(textValues.length === 0 &&
+                    !selected &&
+                    (((_a = item.element.display) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value.toLowerCase().trim())) ||
+                        ((_b = item.element.code) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(value.toLowerCase().trim()))));
+            }, onChange: handleChange, getCreateLabel: (query) => `+ Create ${query}`, onCreate: (query) => valueSetElementToAutocompleteItem({ code: query, display: query }) }));
     }
     function getDisplay(item) {
         return item.display || item.code || '';
@@ -1281,7 +1289,7 @@
     function CodeableConceptInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
         function handleChange(newValue) {
-            const newConcept = valueSetElementToCodeableConcept(newValue);
+            const newConcept = newValue && valueSetElementToCodeableConcept(newValue);
             setValue(newConcept);
             if (props.onChange) {
                 props.onChange(newConcept);
@@ -1322,16 +1330,16 @@
         return (React__default["default"].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;
     }
 
     function CodingInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
         function handleChange(newValue) {
-            const newConcept = valueSetElementToCoding(newValue);
+            const newConcept = newValue && valueSetElementToCoding(newValue);
             setValue(newConcept);
             if (props.onChange) {
                 props.onChange(newConcept);
@@ -2058,7 +2066,7 @@
     }
     function ObservationTable(props) {
         var _a;
-        return (React__default["default"].createElement("table", { className: "medplum-table" },
+        return (React__default["default"].createElement(core$1.Table, { withBorder: true, withColumnBorders: true },
             React__default["default"].createElement("thead", null,
                 React__default["default"].createElement("tr", null,
                     React__default["default"].createElement("th", null, "Test"),
@@ -2107,6 +2115,9 @@
         if (!range) {
             return null;
         }
+        if (range.text) {
+            return React__default["default"].createElement(React__default["default"].Fragment, null, range.text);
+        }
         return React__default["default"].createElement(RangeDisplay, { value: range });
     }
     /**
@@ -2118,7 +2129,7 @@
     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';
     }
 
     function ResourceDiffTable(props) {
@@ -2187,14 +2198,6 @@
         return (React__default["default"].createElement(BackboneElementDisplay, { value: { type: value.resourceType, value }, ignoreMissingValues: props.ignoreMissingValues }));
     }
 
-    function Scrollable(props) {
-        const containerHeight = props.height || '100%';
-        const contentHeight = props.height ? props.height + 25 : '100%';
-        const className = 'medplum-scrollable-content' + (props.className ? ` ${props.className}` : '');
-        return (React__default["default"].createElement("div", { className: "medplum-scrollable-container", style: { height: containerHeight } },
-            React__default["default"].createElement("div", { className: className, role: props.role, style: { height: contentHeight } }, props.children)));
-    }
-
     /**
      * ErrorBoundary is a React component that handles errors in its child components.
      * See: https://reactjs.org/docs/error-boundaries.html
@@ -2422,10 +2425,13 @@
                                 input.focus();
                             }
                         } },
-                        React__default["default"].createElement(core$1.Group, { noWrap: true },
+                        React__default["default"].createElement(core$1.Group, { spacing: "xs", noWrap: true, style: { width: '100%' } },
                             React__default["default"].createElement(ResourceAvatar, { value: sender }),
-                            React__default["default"].createElement(core$1.TextInput, { name: "text", "data-testid": "timeline-input", ref: inputRef, size: "md", radius: "xl", rightSectionWidth: 40, rightSection: React__default["default"].createElement(AttachmentButton, { onUpload: createMedia }, (props) => (React__default["default"].createElement(core$1.ActionIcon, Object.assign({}, props, { size: 24, radius: "xl", color: "blue", variant: "filled" }),
-                                    React__default["default"].createElement(icons.IconCloudUpload, { size: 16 })))), placeholder: "Add comment" })))))),
+                            React__default["default"].createElement(core$1.TextInput, { name: "text", ref: inputRef, placeholder: "Add comment", style: { width: '100%', maxWidth: 300 } }),
+                            React__default["default"].createElement(core$1.ActionIcon, { type: "submit", radius: "xl", color: "blue", variant: "filled" },
+                                React__default["default"].createElement(icons.IconMessage, { size: 16 })),
+                            React__default["default"].createElement(AttachmentButton, { onUpload: createMedia }, (props) => (React__default["default"].createElement(core$1.ActionIcon, Object.assign({}, props, { radius: "xl", color: "blue", variant: "filled" }),
+                                React__default["default"].createElement(icons.IconCloudUpload, { size: 16 }))))))))),
             items.map((item) => {
                 var _a;
                 if (item.resourceType === resource.resourceType && item.id === resource.id) {
@@ -2498,7 +2504,7 @@
     }
     function AuditEventTimelineItem(props) {
         return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-            React__default["default"].createElement(Scrollable, null,
+            React__default["default"].createElement(core$1.ScrollArea, null,
                 React__default["default"].createElement("pre", null, props.resource.outcomeDesc))));
     }
     function DiagnosticReportTimelineItem(props) {
@@ -3455,7 +3461,8 @@
                             }
                         }),
                         React__default["default"].createElement(FilterRowInput, { resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter })))),
-            React__default["default"].createElement(core$1.Button, { onClick: () => props.onOk(searchRef.current) }, "OK")));
+            React__default["default"].createElement(core$1.Group, { position: "right", mt: "xl" },
+                React__default["default"].createElement(core$1.Button, { onClick: () => props.onOk(searchRef.current) }, "OK"))));
     }
     function FilterRowDisplay(props) {
         const { filter } = props;
@@ -3487,7 +3494,7 @@
         return (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", null,
                 React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "filter-field", defaultValue: valueRef.current.code, onChange: (e) => setFilterCode(e.currentTarget.value), data: Object.keys(props.searchParams).map((param) => ({ value: param, label: buildFieldNameString(param) })) })),
-            React__default["default"].createElement("td", null, operators && (React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "filter-operation", defaultValue: value.operator, onChange: (e) => setFilterOperator(e.currentTarget.value), data: operators.map((op) => ({ value: op, label: getOpString(op) })) }))),
+            React__default["default"].createElement("td", null, operators && (React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "filter-operation", defaultValue: value.operator, onChange: (e) => setFilterOperator(e.currentTarget.value), data: ['', ...operators.map((op) => ({ value: op, label: getOpString(op) }))] }))),
             React__default["default"].createElement("td", null, searchParam && value.operator && (React__default["default"].createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: searchParam, defaultValue: value.value, onChange: setFilterValue }))),
             React__default["default"].createElement("td", null,
                 value.code && value.operator && value.value && (React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: () => {
@@ -4006,10 +4013,6 @@
     }
     const MemoizedFhirPathTable = React__default["default"].memo(FhirPathTable);
 
-    function FooterLinks(props) {
-        return React__default["default"].createElement("div", { className: "medplum-footer" }, props.children);
-    }
-
     const searches = [
         '$/_history',
         'Communication?subject=$',
@@ -4725,8 +4728,61 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
+    /*
+     * Request status: https://hl7.org/fhir/valueset-request-status.html
+     * draft, active, on-hold, revoked, completed, entered-in-error, unknown
+     *
+     * Publication status: https://hl7.org/fhir/valueset-publication-status.html
+     * draft, active, retired, unknown
+     *
+     * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
+     * registered, preliminary, final, amended, cancelled, entered-in-error, unknown
+     *
+     * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
+     * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
+     *
+     * Task status: https://hl7.org/fhir/valueset-task-status.html
+     * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
+     *
+     * Appointment status: https://www.hl7.org/fhir/valueset-appointmentstatus.html
+     * proposed, pending, booked, arrived, fulfilled, cancelled, noshow, entered-in-error, chcked-in, waitlist
+     */
+    const statusToColor = {
+        draft: 'blue',
+        active: 'blue',
+        'on-hold': 'yellow',
+        revoked: 'red',
+        completed: 'green',
+        'entered-in-error': 'red',
+        unknown: 'gray',
+        retired: 'gray',
+        registered: 'blue',
+        preliminary: 'blue',
+        final: 'green',
+        amended: 'yellow',
+        cancelled: 'red',
+        requested: 'blue',
+        received: 'blue',
+        accepted: 'blue',
+        rejected: 'red',
+        ready: 'blue',
+        'in-progress': 'blue',
+        failed: 'red',
+        proposed: 'blue',
+        pending: 'blue',
+        booked: 'blue',
+        arrived: 'blue',
+        fulfilled: 'green',
+        noshow: 'red',
+        'checked-in': 'blue',
+        waitlist: 'gray',
+        routine: 'gray',
+        urgent: 'red',
+        asap: 'red',
+        stat: 'red',
+    };
     function StatusBadge(props) {
-        return React__default["default"].createElement("span", { className: `medplum-status medplum-status-${props.status}` }, props.status);
+        return React__default["default"].createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
     }
 
     function RequestGroupDisplay(props) {
@@ -5071,7 +5127,7 @@
         if (!value) {
             return React__default["default"].createElement("div", null, "Loading...");
         }
-        return (React__default["default"].createElement("table", { className: "medplum-table" },
+        return (React__default["default"].createElement(core$1.Table, { withBorder: true, withColumnBorders: true },
             React__default["default"].createElement("thead", null,
                 React__default["default"].createElement("tr", null,
                     React__default["default"].createElement("th", null, "Author"),
@@ -5311,56 +5367,6 @@
             }) }));
     }
 
-    function Tab(props) {
-        let className = 'medplum-tab';
-        if (props.selected) {
-            className += ' selected';
-        }
-        function clickHandler(e) {
-            killEvent(e);
-            // The onClick prop is set by TabBar as parent component.
-            // Using Tab outside of a TabBar is unsupported.
-            props.onClick(props.name, e.button);
-        }
-        return (React__default["default"].createElement("a", { href: `#${props.name}`, role: "tab", "aria-selected": props.selected, className: className, onClick: clickHandler, onAuxClick: clickHandler }, props.label));
-    }
-
-    function TabList(props) {
-        return (React__default["default"].createElement(Scrollable, { className: "medplum-surface", height: 50 },
-            React__default["default"].createElement("div", { role: "tablist", className: "medplum-tablist" },
-                React__default["default"].createElement("div", { className: "medplum-tablist-foreground" }, React__default["default"].Children.map(props.children, (child, tabIndex) => {
-                    if (React__default["default"].isValidElement(child) && child.type === Tab) {
-                        return React__default["default"].cloneElement(child, {
-                            selected: child.props.name === props.value,
-                            onClick: props.onChange,
-                            tabIndex,
-                        });
-                    }
-                    else {
-                        return null;
-                    }
-                })))));
-    }
-
-    function TabPanel(props) {
-        return React__default["default"].createElement("div", { role: "tabpanel" }, props.children);
-    }
-
-    function TabSwitch(props) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(props.children, (child) => {
-            if (React__default["default"].isValidElement(child) && child.type === TabPanel && child.props.name === props.value) {
-                return child;
-            }
-            else {
-                return null;
-            }
-        })));
-    }
-
-    function TitleBar(props) {
-        return React__default["default"].createElement("div", { className: "medplum-title-bar" }, props.children);
-    }
-
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
@@ -5387,7 +5393,6 @@
     exports.EncounterTimeline = EncounterTimeline;
     exports.ErrorBoundary = ErrorBoundary;
     exports.FhirPathTable = FhirPathTable;
-    exports.FooterLinks = FooterLinks;
     exports.Form = Form;
     exports.FormSection = FormSection;
     exports.HumanNameDisplay = HumanNameDisplay;
@@ -5424,7 +5429,6 @@
     exports.ResourceTable = ResourceTable;
     exports.ResourceTimeline = ResourceTimeline;
     exports.Scheduler = Scheduler;
-    exports.Scrollable = Scrollable;
     exports.SearchChangeEvent = SearchChangeEvent;
     exports.SearchClickEvent = SearchClickEvent;
     exports.SearchControl = SearchControl;
@@ -5434,13 +5438,8 @@
     exports.ServiceRequestTimeline = ServiceRequestTimeline;
     exports.SignInForm = SignInForm;
     exports.StatusBadge = StatusBadge;
-    exports.Tab = Tab;
-    exports.TabList = TabList;
-    exports.TabPanel = TabPanel;
-    exports.TabSwitch = TabSwitch;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
-    exports.TitleBar = TitleBar;
     exports.addDateEqualsFilter = addDateEqualsFilter;
     exports.addDateFilter = addDateFilter;
     exports.addDateFilterBetween = addDateFilterBetween;