@medplum/react 0.9.34 → 0.9.35

package/README.md

@@ -4,7 +4,7 @@ The Medplum React Component Library provides many helpful components to quickly
 
 The Medplum SDK can be used with any compliant FHIR server. However, some advanced features are only available when paired with a Medplum server.
 
-Check out a live demo: [https://docs.medplum.com/storybook/index.html](https://docs.medplum.com/storybook/index.html)
+Check out a live demo: <https://storybook.medplum.com/>
 
 ## Key Features
 

package/dist/cjs/SearchControlField.d.ts

@@ -1,4 +1,4 @@
-import { IndexedStructureDefinition, SearchRequest } from '@medplum/core';
+import { SearchRequest } from '@medplum/core';
 import { ElementDefinition, SearchParameter } from '@medplum/fhirtypes';
 /**
  * The SearchControlField type describes a field in the search control.
@@ -34,8 +34,7 @@ export interface SearchControlField {
 }
 /**
  * Returns the collection of field definitions for the search request.
- * @param typeSchema The schema for the resource type
  * @param search The search request definition.
  * @returns An array of field definitions.
  */
-export declare function getFieldDefinitions(schema: IndexedStructureDefinition, search: SearchRequest): SearchControlField[];
+export declare function getFieldDefinitions(search: SearchRequest): SearchControlField[];

package/dist/cjs/SearchFieldEditor.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { IndexedStructureDefinition, SearchRequest } from '@medplum/core';
+import { SearchRequest } from '@medplum/core';
 interface SearchFieldEditorProps {
-    schema: IndexedStructureDefinition;
     visible: boolean;
     search: SearchRequest;
     onOk: (search: SearchRequest) => void;

package/dist/cjs/SearchFilterEditor.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { IndexedStructureDefinition, SearchRequest } from '@medplum/core';
+import { SearchRequest } from '@medplum/core';
 import './SearchFilterEditor.css';
 export interface SearchFilterEditorProps {
-    schema: IndexedStructureDefinition;
     visible: boolean;
     search: SearchRequest;
     onOk: (search: SearchRequest) => void;

package/dist/cjs/SearchFilterValueDialog.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { Filter, IndexedStructureDefinition } from '@medplum/core';
+import { Filter } from '@medplum/core';
 import { SearchParameter } from '@medplum/fhirtypes';
 export interface SearchFilterValueDialogProps {
     title: string;
     visible: boolean;
-    schema: IndexedStructureDefinition;
     resourceType: string;
     searchParam?: SearchParameter;
     filter?: Filter;

package/dist/cjs/SearchFilterValueInput.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { IndexedStructureDefinition } from '@medplum/core';
 import { SearchParameter } from '@medplum/fhirtypes';
 export interface SearchFilterValueInputProps {
-    schema: IndexedStructureDefinition;
     resourceType: string;
     searchParam: SearchParameter;
     defaultValue?: string;

package/dist/cjs/SearchPopupMenu.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { Filter, IndexedStructureDefinition, SearchRequest } from '@medplum/core';
+import { Filter, SearchRequest } from '@medplum/core';
 import { SearchParameter } from '@medplum/fhirtypes';
 export interface SearchPopupMenuProps {
-    schema: IndexedStructureDefinition;
     search: SearchRequest;
     visible: boolean;
     x: number;

package/dist/cjs/index.js

@@ -18,7 +18,25 @@
 
     function getIssuesForExpression(outcome, expression) {
         var _a;
-        return (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a.filter((issue) => { var _a; return ((_a = issue.expression) === null || _a === void 0 ? void 0 : _a[0]) === expression; });
+        return (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a.filter((issue) => { var _a; return isExpressionMatch((_a = issue.expression) === null || _a === void 0 ? void 0 : _a[0], expression); });
+    }
+    function isExpressionMatch(expr1, expr2) {
+        // Expression can be either "fieldName" or "resourceType.fieldName"
+        if (expr1 === expr2) {
+            return true;
+        }
+        if (!expr1 || !expr2) {
+            return false;
+        }
+        const dot1 = expr1.indexOf('.');
+        if (dot1 >= 0 && expr1.substring(dot1 + 1) === expr2) {
+            return true;
+        }
+        const dot2 = expr2.indexOf('.');
+        if (dot2 >= 0 && expr2.substring(dot2 + 1) === expr1) {
+            return true;
+        }
+        return false;
     }
 
     function Input(props) {
@@ -518,7 +536,7 @@
             return clientId;
         }
         const origin = window.location.protocol + '//' + window.location.host;
-        const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com,https://storybook.medplum.com,https://graphiql.medplum.com,https://www.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
         if (authorizedOrigins.includes(origin)) {
             return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
         }
@@ -2550,11 +2568,14 @@
                     ((_b = propsRef.current) === null || _b === void 0 ? void 0 : _b.autoClose) &&
                     (ref === null || ref === void 0 ? void 0 : ref.current) &&
                     !ref.current.contains(e.target)) {
+                    killEvent(e);
                     props.onClose();
                 }
             }
             document.addEventListener('click', handleClick, true);
-            return () => document.removeEventListener('click', handleClick, true);
+            return () => {
+                document.removeEventListener('click', handleClick, true);
+            };
         }, [props]);
         // Listen for changes in the location
         // If the browser navigates to a new page, close the popup
@@ -2956,27 +2977,25 @@
 
     /**
      * Returns the collection of field definitions for the search request.
-     * @param typeSchema The schema for the resource type
      * @param search The search request definition.
      * @returns An array of field definitions.
      */
-    function getFieldDefinitions(schema, search) {
+    function getFieldDefinitions(search) {
         const resourceType = search.resourceType;
         const fields = [];
         for (const name of search.fields || ['id', '_lastUpdated']) {
-            fields.push(getFieldDefinition(schema, resourceType, name));
+            fields.push(getFieldDefinition(resourceType, name));
         }
         return fields;
     }
     /**
      * Return the field definition for a given field name.
      * Field names can be either property names or search parameter codes.
-     * @param typeSchema The schema for the resource type
      * @param resourceType The resource type.
      * @param name The search field name (either property name or search parameter code).
      * @returns The field definition.
      */
-    function getFieldDefinition(schema, resourceType, name) {
+    function getFieldDefinition(resourceType, name) {
         var _a;
         if (name === '_lastUpdated') {
             return {
@@ -3008,7 +3027,7 @@
                 ],
             };
         }
-        const typeSchema = schema.types[resourceType];
+        const typeSchema = core.globalSchema.types[resourceType];
         const exactElementDefinition = typeSchema.properties[name];
         const exactSearchParam = (_a = typeSchema.searchParams) === null || _a === void 0 ? void 0 : _a[name.toLowerCase()];
         // Best case: Exact match of element definition or search parameter.
@@ -3039,7 +3058,7 @@
         // Patient.email is a search parameter for the Patient.telecom element.
         // So we need to walk backwards to find the element definition.
         if (exactSearchParam) {
-            const details = core.getSearchParameterDetails(schema, resourceType, exactSearchParam);
+            const details = core.getSearchParameterDetails(resourceType, exactSearchParam);
             return { name, elementDefinition: details.elementDefinition, searchParams: [exactSearchParam] };
         }
         // Worst case: no element definition and no search parameter.
@@ -3655,7 +3674,7 @@
             return null;
         }
         const resourceType = props.search.resourceType;
-        const typeDef = props.schema.types[resourceType];
+        const typeDef = core.globalSchema.types[resourceType];
         const selected = (_a = state.search.fields) !== null && _a !== void 0 ? _a : [];
         const available = getFieldsList(typeDef)
             .filter((field) => !(selected === null || selected === void 0 ? void 0 : selected.includes(field)))
@@ -3730,7 +3749,7 @@
 
     function SearchFilterValueInput(props) {
         var _a;
-        const details = core.getSearchParameterDetails(props.schema, props.resourceType, props.searchParam);
+        const details = core.getSearchParameterDetails(props.resourceType, props.searchParam);
         const name = 'filter-value';
         switch (details.type) {
             case core.SearchParameterType.REFERENCE:
@@ -3791,9 +3810,8 @@
         if (!props.visible) {
             return null;
         }
-        const schema = props.schema;
         const resourceType = props.search.resourceType;
-        const searchParams = schema.types[resourceType].searchParams;
+        const searchParams = core.globalSchema.types[resourceType].searchParams;
         const filters = search.filters || [];
         return (React__default["default"].createElement(Dialog, { title: "Filters", visible: props.visible, onOk: () => props.onOk(searchRef.current), onCancel: props.onCancel },
             React__default["default"].createElement("div", { className: "medplum-filter-editor" },
@@ -3812,7 +3830,7 @@
                     React__default["default"].createElement("tbody", null,
                         filters.map((filter, index) => {
                             if (index === editingIndex) {
-                                return (React__default["default"].createElement(FilterRowInput, { key: `filter-${index}-${filters.length}-input`, schema: schema, resourceType: resourceType, searchParams: searchParams, defaultValue: filter, okText: "Save", onOk: (newFilter) => {
+                                return (React__default["default"].createElement(FilterRowInput, { key: `filter-${index}-${filters.length}-input`, resourceType: resourceType, searchParams: searchParams, defaultValue: filter, okText: "Save", onOk: (newFilter) => {
                                         const newFilters = [...filters];
                                         newFilters[index] = newFilter;
                                         setSearch(setFilters(searchRef.current, newFilters));
@@ -3823,7 +3841,7 @@
                                 return (React__default["default"].createElement(FilterRowDisplay, { key: `filter-${index}-${filters.length}-display`, resourceType: resourceType, searchParams: searchParams, filter: filter, onEdit: () => setEditingIndex(index), onDelete: () => setSearch(deleteFilter(searchRef.current, index)) }));
                             }
                         }),
-                        React__default["default"].createElement(FilterRowInput, { schema: schema, resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter }))))));
+                        React__default["default"].createElement(FilterRowInput, { resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter }))))));
     }
     function FilterRowDisplay(props) {
         const { filter } = props;
@@ -3860,7 +3878,7 @@
             React__default["default"].createElement("td", null, operators && (React__default["default"].createElement(Select, { testid: "filter-operation", defaultValue: value.operator, onChange: setFilterOperator },
                 React__default["default"].createElement("option", { value: "" }),
                 operators.map((operator) => (React__default["default"].createElement("option", { key: operator, value: operator }, getOpString(operator))))))),
-            React__default["default"].createElement("td", null, searchParam && value.operator && (React__default["default"].createElement(SearchFilterValueInput, { schema: props.schema, resourceType: props.resourceType, searchParam: searchParam, defaultValue: value.value, onChange: setFilterValue }))),
+            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(Button, { size: "small", onClick: () => {
                         props.onOk(valueRef.current);
@@ -3881,7 +3899,7 @@
         return (React__default["default"].createElement(Dialog, { title: props.title, visible: props.visible, onOk: onOk, onCancel: props.onCancel },
             React__default["default"].createElement("div", { style: { width: 500 } },
                 React__default["default"].createElement(Form, { onSubmit: onOk },
-                    React__default["default"].createElement(SearchFilterValueInput, { schema: props.schema, resourceType: props.resourceType, searchParam: props.searchParam, defaultValue: value, autoFocus: true, onChange: setValue })))));
+                    React__default["default"].createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: props.searchParam, defaultValue: value, autoFocus: true, onChange: setValue })))));
     }
 
     function MenuSeparator() {
@@ -4077,7 +4095,7 @@
     function SearchControl(props) {
         var _a, _b, _c, _d;
         const medplum = useMedplum();
-        const [schema, setSchema] = React.useState();
+        const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
         const { search, onLoad } = props;
         const [state, setState] = React.useState({
@@ -4095,7 +4113,7 @@
         React.useEffect(() => {
             setOutcome(undefined);
             medplum
-                .search(search.resourceType, core.formatSearchQuery(Object.assign(Object.assign({}, search), { total: 'accurate' })))
+                .search(search.resourceType, core.formatSearchQuery(Object.assign(Object.assign({}, search), { total: 'accurate', fields: undefined })))
                 .then((response) => {
                 setState(Object.assign(Object.assign({}, stateRef.current), { searchResponse: response }));
                 if (onLoad) {
@@ -4189,19 +4207,15 @@
         React.useEffect(() => {
             medplum
                 .requestSchema(props.search.resourceType)
-                .then((newSchema) => {
-                // The schema could have the same object identity,
-                // so need to use the spread operator to kick React re-render.
-                setSchema(Object.assign({}, newSchema));
-            })
+                .then(() => setSchemaLoaded(true))
                 .catch(console.log);
         }, [medplum, props.search.resourceType]);
-        const typeSchema = (_a = schema === null || schema === void 0 ? void 0 : schema.types) === null || _a === void 0 ? void 0 : _a[props.search.resourceType];
+        const typeSchema = schemaLoaded && ((_a = core.globalSchema === null || core.globalSchema === void 0 ? void 0 : core.globalSchema.types) === null || _a === void 0 ? void 0 : _a[props.search.resourceType]);
         if (!typeSchema) {
             return React__default["default"].createElement(Loading, null);
         }
         const checkboxColumn = props.checkboxesEnabled;
-        const fields = getFieldDefinitions(schema, search);
+        const fields = getFieldDefinitions(search);
         const resourceType = search.resourceType;
         const lastResult = state.searchResponse;
         const entries = lastResult === null || lastResult === void 0 ? void 0 : lastResult.entry;
@@ -4251,7 +4265,7 @@
             (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React__default["default"].createElement("div", { "data-testid": "empty-search", className: "medplum-empty-search" }, "No results")),
             outcome && (React__default["default"].createElement("div", { "data-testid": "search-error", className: "medplum-empty-search" },
                 React__default["default"].createElement("pre", { style: { textAlign: 'left' } }, JSON.stringify(outcome, undefined, 2)))),
-            React__default["default"].createElement(SearchPopupMenu, { schema: schema, search: props.search, visible: state.popupVisible, x: state.popupX, y: state.popupY, searchParams: state.popupSearchParams, onPrompt: (searchParam, filter) => {
+            React__default["default"].createElement(SearchPopupMenu, { search: props.search, visible: state.popupVisible, x: state.popupX, y: state.popupY, searchParams: state.popupSearchParams, onPrompt: (searchParam, filter) => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: false, filterDialogVisible: true, filterDialogSearchParam: searchParam, filterDialogFilter: filter }));
                 }, onChange: (result) => {
                     emitSearchChange(result);
@@ -4259,19 +4273,19 @@
                 }, onClose: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: false, popupSearchParams: undefined }));
                 } }),
-            React__default["default"].createElement(SearchFieldEditor, { schema: schema, search: props.search, visible: stateRef.current.fieldEditorVisible, onOk: (result) => {
+            React__default["default"].createElement(SearchFieldEditor, { search: props.search, visible: stateRef.current.fieldEditorVisible, onOk: (result) => {
                     emitSearchChange(result);
                     setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: false }));
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: false }));
                 } }),
-            React__default["default"].createElement(SearchFilterEditor, { schema: schema, search: props.search, visible: stateRef.current.filterEditorVisible, onOk: (result) => {
+            React__default["default"].createElement(SearchFilterEditor, { search: props.search, visible: stateRef.current.filterEditorVisible, onOk: (result) => {
                     emitSearchChange(result);
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: false }));
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: false }));
                 } }),
-            React__default["default"].createElement(SearchFilterValueDialog, { visible: stateRef.current.filterDialogVisible, title: 'Input', schema: schema, resourceType: resourceType, searchParam: state.filterDialogSearchParam, filter: state.filterDialogFilter, defaultValue: '', onOk: (filter) => {
+            React__default["default"].createElement(SearchFilterValueDialog, { visible: stateRef.current.filterDialogVisible, title: 'Input', resourceType: resourceType, searchParam: state.filterDialogSearchParam, filter: state.filterDialogFilter, defaultValue: '', onOk: (filter) => {
                     emitSearchChange(addFilter(props.search, filter.code, filter.operator, filter.value));
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterDialogVisible: false }));
                 }, onCancel: () => {
@@ -5636,6 +5650,7 @@
     function blame(history) {
         // Convert to array of array of lines
         const versions = history.entry
+            .filter((entry) => !!entry.resource)
             .map((entry) => {
             var _a;
             return ({