@medplum/react 1.0.0 → 1.0.2

package/dist/cjs/index.js

@@ -557,6 +557,7 @@
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
                     React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
                             try {
+                                yield medplum.startPkce();
                                 props.handleAuthResponse(yield medplum.startGoogleLogin({
                                     googleClientId: response.clientId,
                                     googleCredential: response.credential,
@@ -623,35 +624,25 @@
     }
 
     function AuthenticationForm(props) {
+        const { generatePkce, onForgotPassword, onRegister, handleAuthResponse, children } = props, baseLoginRequest = __rest(props, ["generatePkce", "onForgotPassword", "onRegister", "handleAuthResponse", "children"]);
         const medplum = useMedplum();
         const googleClientId = getGoogleClientId(props.googleClientId);
         const [outcome, setOutcome] = React.useState();
         const issues = getIssuesForExpression(outcome, undefined);
         function startPkce() {
             return __awaiter(this, void 0, void 0, function* () {
-                if (props.generatePkce) {
+                if (generatePkce) {
                     yield medplum.startPkce();
                 }
             });
         }
         return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
                 startPkce()
-                    .then(() => medplum.startLogin({
-                    projectId: props.projectId,
-                    clientId: props.clientId,
-                    resourceType: props.resourceType,
-                    scope: props.scope,
-                    nonce: props.nonce,
-                    codeChallenge: props.codeChallenge,
-                    codeChallengeMethod: props.codeChallengeMethod,
-                    email: formData.email,
-                    password: formData.password,
-                    remember: formData.remember === 'true',
-                }))
-                    .then(props.handleAuthResponse)
+                    .then(() => medplum.startLogin(Object.assign(Object.assign({}, baseLoginRequest), { email: formData.email, password: formData.password, remember: formData.remember === 'on' })))
+                    .then(handleAuthResponse)
                     .catch(setOutcome);
             } },
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
             issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => {
                 var _a, _b;
                 return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
@@ -660,17 +651,7 @@
                 React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
                     React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
                             startPkce()
-                                .then(() => medplum.startGoogleLogin({
-                                projectId: props.projectId,
-                                clientId: props.clientId,
-                                resourceType: props.resourceType,
-                                scope: props.scope,
-                                nonce: props.nonce,
-                                codeChallenge: props.codeChallenge,
-                                codeChallengeMethod: props.codeChallengeMethod,
-                                googleClientId: response.clientId,
-                                googleCredential: response.credential,
-                            }))
+                                .then(() => medplum.startGoogleLogin(Object.assign(Object.assign({}, baseLoginRequest), { googleCredential: response.credential })))
                                 .then(props.handleAuthResponse)
                                 .catch(setOutcome);
                         } })),
@@ -679,9 +660,9 @@
                 React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
-                props.onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onForgotPassword, size: "xs" }, "Forgot password")),
-                props.onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onRegister, size: "xs" }, "Register")),
-                React.createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
+                onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
+                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
+                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs" }),
                 React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
 
@@ -710,7 +691,28 @@
             })));
     }
 
+    function ChooseScopeForm(props) {
+        const medplum = useMedplum();
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+                medplum
+                    .post('auth/scope', {
+                    login: props.login,
+                    scope: Object.keys(formData).join(' '),
+                })
+                    .then(props.handleAuthResponse)
+                    .catch(console.log);
+            } },
+            React.createElement(core$1.Stack, null,
+                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                    React.createElement(Logo, { size: 32 }),
+                    React.createElement(core$1.Title, null, "Choose scope")),
+                React.createElement(core$1.Stack, null, (props.scope || 'openid').split(' ').map((scopeName) => (React.createElement(core$1.Checkbox, { key: scopeName, id: scopeName, name: scopeName, label: scopeName, defaultChecked: true })))),
+                React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                    React.createElement(core$1.Button, { type: "submit" }, "Set scope")))));
+    }
+
     function SignInForm(props) {
+        const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode } = props, baseLoginRequest = __rest(props, ["chooseScopes", "onSuccess", "onForgotPassword", "onRegister", "onCode"]);
         const medplum = useMedplum();
         const [login, setLogin] = React.useState(undefined);
         const [memberships, setMemberships] = React.useState(undefined);
@@ -722,24 +724,35 @@
                 setMemberships(response.memberships);
             }
             if (response.code) {
-                if (props.onCode) {
-                    props.onCode(response.code);
+                if (chooseScopes) {
+                    setMemberships(undefined);
                 }
                 else {
-                    medplum
-                        .processCode(response.code)
-                        .then(() => {
-                        if (props.onSuccess) {
-                            props.onSuccess();
-                        }
-                    })
-                        .catch(console.log);
+                    handleCode(response.code);
                 }
             }
         }
+        function handleScopeResponse(response) {
+            handleCode(response.code);
+        }
+        function handleCode(code) {
+            if (onCode) {
+                onCode(code);
+            }
+            else {
+                medplum
+                    .processCode(code)
+                    .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
+        }
         return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React.createElement(AuthenticationForm, { projectId: props.projectId, clientId: props.clientId, resourceType: props.resourceType, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, generatePkce: !props.onCode, codeChallenge: props.codeChallenge, codeChallengeMethod: props.codeChallengeMethod, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+                return (React.createElement(AuthenticationForm, Object.assign({ generatePkce: !onCode, onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse }, baseLoginRequest), props.children));
             }
             else if (memberships) {
                 return React.createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
@@ -747,6 +760,9 @@
             else if (props.projectId === 'new') {
                 return React.createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
             }
+            else if (props.chooseScopes) {
+                return React.createElement(ChooseScopeForm, { login: login, scope: props.scope, handleAuthResponse: handleScopeResponse });
+            }
             else {
                 return React.createElement("div", null, "Success");
             }
@@ -860,7 +876,7 @@
                 React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
                     React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
             React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
-            React.createElement(core$1.Group, null,
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
                 React.createElement(core$1.Button, { type: "submit" }, "OK"),
                 props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
                         props.onDelete(value);
@@ -880,7 +896,7 @@
         return obj;
     }
 
-    const useStyles$a = core$1.createStyles((theme) => ({
+    const useStyles$b = core$1.createStyles((theme) => ({
         root: {
             display: 'grid',
             gridTemplateColumns: '30% 70%',
@@ -901,7 +917,7 @@
     }));
     function DescriptionList(props) {
         const { children, compact } = props;
-        const { classes, cx } = useStyles$a();
+        const { classes, cx } = useStyles$b();
         return React.createElement("dl", { className: cx(classes.root, { [classes.compact]: compact }) }, children);
     }
     function DescriptionListEntry(props) {
@@ -923,7 +939,10 @@
                 typeName,
                 "\u00A0not implemented");
         }
-        if (typeof value === 'object' && 'name' in value && Object.keys(value).length === 1) {
+        if (typeof value === 'object' &&
+            'name' in value &&
+            Object.keys(value).length === 1 &&
+            typeof value.name === 'string') {
             // Special case for common BackboneElement pattern
             // Where there is an object with a single property 'name'
             // Just display the name value.
@@ -1020,43 +1039,11 @@
     }
 
     function QuantityDisplay(props) {
-        return React.createElement(React.Fragment, null, formatQuantityString(props.value));
-    }
-    function formatQuantityString(quantity) {
-        if (!quantity) {
-            return '';
-        }
-        const result = [];
-        if (quantity.comparator) {
-            result.push(quantity.comparator);
-            result.push(' ');
-        }
-        if (quantity.value !== undefined) {
-            result.push(quantity.value);
-        }
-        if (quantity.unit) {
-            if (quantity.unit !== '%') {
-                result.push(' ');
-            }
-            result.push(quantity.unit);
-        }
-        return result.join('');
+        return React.createElement(React.Fragment, null, core.formatQuantity(props.value));
     }
 
     function RangeDisplay(props) {
-        return React.createElement(React.Fragment, null, formatRangeString(props.value));
-    }
-    function formatRangeString(range) {
-        if (!range || (!range.low && !range.high)) {
-            return '';
-        }
-        if (range.low && !range.high) {
-            return `>= ${formatQuantityString(range.low)}`;
-        }
-        if (!range.low && range.high) {
-            return `<= ${formatQuantityString(range.high)}`;
-        }
-        return `${formatQuantityString(range.low)} - ${formatQuantityString(range.high)}`;
+        return React.createElement(React.Fragment, null, core.formatRange(props.value));
     }
 
     function RatioDisplay(props) {
@@ -1256,8 +1243,8 @@
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
         const { property, defaultValue } = props;
-        const [textValues, setTextValues] = React.useState(defaultValue ? [defaultValue.code] : []);
-        const [data, setData] = React.useState(defaultValue ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
+        const [textValues, setTextValues] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [defaultValue.code] : []);
+        const [data, setData] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
         const dataRef = React.useRef();
         dataRef.current = data;
         const loadValues = React.useCallback((input) => __awaiter(this, void 0, void 0, function* () {
@@ -1267,7 +1254,7 @@
             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)) {
+                if (valueSetElement.code && !newData.some((item) => item.value === valueSetElement.code)) {
                     newData.push(valueSetElementToAutocompleteItem(valueSetElement));
                 }
             }
@@ -1592,8 +1579,8 @@
         }
         return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
             React.createElement(core$1.NativeSelect, { style: { width: 80 }, "data-testid": props.name + '-comparator', defaultValue: value === null || value === void 0 ? void 0 : value.comparator, data: ['', '<', '<=', '>=', '>'], onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { comparator: e.currentTarget.value })) }),
-            React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, type: "number", step: "any", placeholder: "Value", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toString(), onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: tryParseNumber(e.currentTarget.value) })) }),
-            React.createElement(core$1.TextInput, { placeholder: "Unit", defaultValue: value === null || value === void 0 ? void 0 : value.unit, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { unit: e.currentTarget.value })) })));
+            React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name + '-value', type: "number", step: "any", placeholder: "Value", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toString(), onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: tryParseNumber(e.currentTarget.value) })) }),
+            React.createElement(core$1.TextInput, { placeholder: "Unit", "data-testid": props.name + '-unit', defaultValue: value === null || value === void 0 ? void 0 : value.unit, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { unit: e.currentTarget.value })) })));
     }
     function tryParseNumber(str) {
         if (!str) {
@@ -2069,7 +2056,7 @@
             React.createElement(ResourceName, { value: props.value, link: props.link })));
     }
 
-    const useStyles$9 = core$1.createStyles((theme) => ({
+    const useStyles$a = core$1.createStyles((theme) => ({
         table: {
             border: `0.1px solid ${theme.colors.gray[5]}`,
             borderCollapse: 'collapse',
@@ -2130,7 +2117,7 @@
     }
     function ObservationTable(props) {
         var _a;
-        const { classes } = useStyles$9();
+        const { classes } = useStyles$a();
         return (React.createElement("table", { className: classes.table },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -2141,7 +2128,7 @@
             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) {
-        const { classes, cx } = useStyles$9();
+        const { classes, cx } = useStyles$a();
         const observation = useResource(props.value);
         if (!observation) {
             return null;
@@ -2192,10 +2179,10 @@
     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' || code === 'RR';
+        return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
-    const useStyles$8 = core$1.createStyles((theme) => ({
+    const useStyles$9 = core$1.createStyles((theme) => ({
         root: {
             borderCollapse: 'collapse',
             width: '100%',
@@ -2216,7 +2203,7 @@
         },
     }));
     function ResourceDiffTable(props) {
-        const { classes } = useStyles$8();
+        const { classes } = useStyles$9();
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
@@ -2299,7 +2286,7 @@
         }
         render() {
             if (this.state.error) {
-                return React.createElement(core$1.Title, null, "Something went wrong.");
+                return (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), title: "Something went wrong", color: "red" }, core.normalizeErrorString(this.state.error)));
             }
             return this.props.children;
         }
@@ -2377,7 +2364,7 @@
         return new Date(dateTime).getTime();
     }
 
-    const useStyles$7 = core$1.createStyles((theme) => ({
+    const useStyles$8 = core$1.createStyles((theme) => ({
         pinnedComment: {
             backgroundColor: theme.colors.blue[0],
         },
@@ -2530,8 +2517,9 @@
                 disallowClose: true,
             });
         }
-        if (!resource || !history) {
-            return React.createElement(core$1.Loader, null);
+        if (!resource) {
+            return (React.createElement(core$1.Center, { style: { width: '100%', height: '100%' } },
+                React.createElement(core$1.Loader, null)));
         }
         return (React.createElement(Timeline, null,
             props.createCommunication && (React.createElement(core$1.Paper, { m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true },
@@ -2605,7 +2593,7 @@
     }
     function CommunicationTimelineItem(props) {
         var _a, _b;
-        const { classes } = useStyles$7();
+        const { classes } = useStyles$8();
         const routine = !props.resource.priority || props.resource.priority === 'routine';
         const className = routine ? undefined : classes.pinnedComment;
         return (React.createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, padding: true, className: className, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
@@ -2726,98 +2714,6 @@
         return React.createElement(ResourcePropertyDisplay, { value: value[0] || '', propertyType: props.propertyType });
     }
 
-    /**
-     * Returns the collection of field definitions for the search request.
-     * @param search The search request definition.
-     * @returns An array of field definitions.
-     */
-    function getFieldDefinitions(search) {
-        const resourceType = search.resourceType;
-        const fields = [];
-        for (const name of search.fields || ['id', '_lastUpdated']) {
-            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 resourceType The resource type.
-     * @param name The search field name (either property name or search parameter code).
-     * @returns The field definition.
-     */
-    function getFieldDefinition(resourceType, name) {
-        var _a;
-        if (name === '_lastUpdated') {
-            return {
-                name: '_lastUpdated',
-                searchParams: [
-                    {
-                        resourceType: 'SearchParameter',
-                        base: ['Resource'],
-                        code: '_lastUpdated',
-                        name: '_lastUpdated',
-                        type: 'date',
-                        expression: 'Resource.meta.lastUpdated',
-                    },
-                ],
-            };
-        }
-        if (name === 'meta.versionId') {
-            return {
-                name: 'meta.versionId',
-                searchParams: [
-                    {
-                        resourceType: 'SearchParameter',
-                        base: ['Resource'],
-                        code: '_versionId',
-                        name: '_versionId',
-                        type: 'token',
-                        expression: 'Resource.meta.versionId',
-                    },
-                ],
-            };
-        }
-        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.
-        // Examples: ServiceRequest.subject, Patient.name, Patient.birthDate
-        // In this case, we only show the one search parameter.
-        if (exactElementDefinition && exactSearchParam) {
-            return { name, elementDefinition: exactElementDefinition, searchParams: [exactSearchParam] };
-        }
-        // Next best case: Exact match of element definition
-        // Examples: Observation.value
-        // In this case, there could be zero or more search parameters that are a function of the element definition.
-        // So search for those search parameters.
-        if (exactElementDefinition) {
-            let searchParams = undefined;
-            if (typeSchema.searchParams) {
-                const path = `${resourceType}.${name.replaceAll('[x]', '')}`;
-                searchParams = Object.values(typeSchema.searchParams).filter((p) => { var _a; return (_a = p.expression) === null || _a === void 0 ? void 0 : _a.includes(path); });
-                if (searchParams.length === 0) {
-                    searchParams = undefined;
-                }
-            }
-            return { name, elementDefinition: exactElementDefinition, searchParams };
-        }
-        // Search parameter case: Exact match of search parameter
-        // Examples: Observation.value-quantity, Patient.email
-        // Here we have a search parameter, but no element definition.
-        // Observation.value-quantity is a search parameter for the Observation.value element.
-        // 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(resourceType, exactSearchParam);
-            return { name, elementDefinition: details.elementDefinition, searchParams: [exactSearchParam] };
-        }
-        // Worst case: no element definition and no search parameter.
-        // This is probably a malformed URL that includes an unknown field.
-        // We will render the column header, but all cells will be empty.
-        return { name };
-    }
-
     const searchParamToOperators = {
         string: [core.Operator.EQUALS, core.Operator.NOT, core.Operator.CONTAINS, core.Operator.EXACT],
         fulltext: [core.Operator.EQUALS, core.Operator.NOT, core.Operator.CONTAINS, core.Operator.EXACT],
@@ -3055,26 +2951,6 @@
         const endTime = new Date();
         return addDateFilterBetween(definition, field, startTime, endTime);
     }
-    /**
-     * Adds a filter for a field equaling a specified date.
-     *
-     * @param {string} field The field key name.
-     * @param {Date} value The date.
-     */
-    function addDateEqualsFilter(definition, field, value) {
-        return addDateFilterBetween(definition, field, value, value);
-    }
-    /**
-     * Adds a filter for a date before a certain date/time.
-     *
-     * @param {string} field The field key name.
-     * @param {Operator} op The date/time operation.
-     * @param {Date} value The date.
-     */
-    function addDateFilter(definition, field, op, value) {
-        definition = clearFiltersOnField(definition, field);
-        return addDateFilterImpl(definition, field, op, value);
-    }
     /**
      * Adds a filter for a date between two dates (inclusive of both dates).
      *
@@ -3106,17 +2982,6 @@
     function addMissingFilter(definition, field, value = true) {
         return addFilter(definition, field, core.Operator.MISSING, value.toString());
     }
-    /**
-     * Returns true if the search has any filters on the specified field.
-     *
-     * @param {string} code The field key name.
-     */
-    function hasFilterOnField(definition, code) {
-        if (!definition.filters) {
-            return false;
-        }
-        return definition.filters.find((f) => f.code === code) !== undefined;
-    }
     /**
      * Sets the offset (starting at zero).
      *
@@ -3766,6 +3631,98 @@
             React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconX, { size: 14 }), onClick: () => props.onClear(searchParam) }, "Clear filters")));
     }
 
+    /**
+     * Returns the collection of field definitions for the search request.
+     * @param search The search request definition.
+     * @returns An array of field definitions.
+     */
+    function getFieldDefinitions(search) {
+        const resourceType = search.resourceType;
+        const fields = [];
+        for (const name of search.fields || ['id', '_lastUpdated']) {
+            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 resourceType The resource type.
+     * @param name The search field name (either property name or search parameter code).
+     * @returns The field definition.
+     */
+    function getFieldDefinition(resourceType, name) {
+        var _a;
+        if (name === '_lastUpdated') {
+            return {
+                name: '_lastUpdated',
+                searchParams: [
+                    {
+                        resourceType: 'SearchParameter',
+                        base: ['Resource'],
+                        code: '_lastUpdated',
+                        name: '_lastUpdated',
+                        type: 'date',
+                        expression: 'Resource.meta.lastUpdated',
+                    },
+                ],
+            };
+        }
+        if (name === 'meta.versionId') {
+            return {
+                name: 'meta.versionId',
+                searchParams: [
+                    {
+                        resourceType: 'SearchParameter',
+                        base: ['Resource'],
+                        code: '_versionId',
+                        name: '_versionId',
+                        type: 'token',
+                        expression: 'Resource.meta.versionId',
+                    },
+                ],
+            };
+        }
+        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.
+        // Examples: ServiceRequest.subject, Patient.name, Patient.birthDate
+        // In this case, we only show the one search parameter.
+        if (exactElementDefinition && exactSearchParam) {
+            return { name, elementDefinition: exactElementDefinition, searchParams: [exactSearchParam] };
+        }
+        // Next best case: Exact match of element definition
+        // Examples: Observation.value
+        // In this case, there could be zero or more search parameters that are a function of the element definition.
+        // So search for those search parameters.
+        if (exactElementDefinition) {
+            let searchParams = undefined;
+            if (typeSchema.searchParams) {
+                const path = `${resourceType}.${name.replaceAll('[x]', '')}`;
+                searchParams = Object.values(typeSchema.searchParams).filter((p) => { var _a; return (_a = p.expression) === null || _a === void 0 ? void 0 : _a.includes(path); });
+                if (searchParams.length === 0) {
+                    searchParams = undefined;
+                }
+            }
+            return { name, elementDefinition: exactElementDefinition, searchParams };
+        }
+        // Search parameter case: Exact match of search parameter
+        // Examples: Observation.value-quantity, Patient.email
+        // Here we have a search parameter, but no element definition.
+        // Observation.value-quantity is a search parameter for the Observation.value element.
+        // 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(resourceType, exactSearchParam);
+            return { name, elementDefinition: details.elementDefinition, searchParams: [exactSearchParam] };
+        }
+        // Worst case: no element definition and no search parameter.
+        // This is probably a malformed URL that includes an unknown field.
+        // We will render the column header, but all cells will be empty.
+        return { name };
+    }
+
     class SearchChangeEvent extends Event {
         constructor(definition) {
             super('change');
@@ -3785,7 +3742,7 @@
             this.browserEvent = browserEvent;
         }
     }
-    const useStyles$6 = core$1.createStyles((theme) => ({
+    const useStyles$7 = core$1.createStyles((theme) => ({
         root: {
             maxWidth: '100%',
             overflow: 'auto',
@@ -3822,8 +3779,8 @@
      * It does not include the field editor, filter editor, pagination buttons.
      */
     function SearchControl(props) {
-        var _a, _b;
-        const { classes } = useStyles$6();
+        var _a, _b, _c;
+        const { classes } = useStyles$7();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
@@ -3935,7 +3892,8 @@
         }, [medplum, 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.createElement(core$1.Loader, null);
+            return (React.createElement(core$1.Center, { style: { width: '100%', height: '100%' } },
+                React.createElement(core$1.Loader, null)));
         }
         const checkboxColumn = props.checkboxesEnabled;
         const fields = getFieldDefinitions(search);
@@ -4016,7 +3974,7 @@
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: false }));
                 } }),
-            React.createElement(SearchFilterValueDialog, { visible: stateRef.current.filterDialogVisible, title: 'Input', resourceType: resourceType, searchParam: state.filterDialogSearchParam, filter: state.filterDialogFilter, defaultValue: '', onOk: (filter) => {
+            React.createElement(SearchFilterValueDialog, { key: (_c = state.filterDialogSearchParam) === null || _c === void 0 ? void 0 : _c.code, 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: () => {
@@ -4197,7 +4155,7 @@
             }) }));
     }
 
-    const useStyles$5 = core$1.createStyles((theme) => ({
+    const useStyles$6 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4263,7 +4221,7 @@
                 React.createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
-        const { classes } = useStyles$5();
+        const { classes } = useStyles$6();
         const actionsRef = React.useRef();
         actionsRef.current = props.actions;
         function changeAction(changedAction) {
@@ -4286,7 +4244,7 @@
                     } }, "Add action"))));
     }
     function ActionBuilder(props) {
-        const { classes, cx } = useStyles$5();
+        const { classes, cx } = useStyles$6();
         const { action } = props;
         const actionType = getInitialActionType(action);
         const editing = props.selectedKey === props.action.id;
@@ -4707,7 +4665,7 @@
         }
     }
 
-    const useStyles$4 = core$1.createStyles((theme) => ({
+    const useStyles$5 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4786,7 +4744,7 @@
     }
     function ItemBuilder(props) {
         var _a;
-        const { classes, cx } = useStyles$4();
+        const { classes, cx } = useStyles$5();
         const resource = props.item;
         const item = props.item;
         const isResource = 'resourceType' in props.item;
@@ -4963,6 +4921,266 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
+    const useStyles$4 = core$1.createStyles((theme) => ({
+        section: {
+            position: 'relative',
+            margin: '4px 4px 8px 0',
+            padding: '6px 12px 16px 6px',
+            border: `1.5px solid ${theme.colors.gray[3]}`,
+            borderRadius: theme.radius.sm,
+            transition: 'all 0.1s',
+        },
+    }));
+    // Properties of qualified intervals used for grouping
+    const intervalFilters = ['gender', 'age', 'gestationalAge', 'context', 'appliesTo'];
+    const defaultProps = {
+        definition: { resourceType: 'ObservationDefinition' },
+        onSubmit: () => {
+            return;
+        },
+    };
+    function ReferenceRangeEditor(props) {
+        props = Object.assign(defaultProps, props);
+        const defaultDefinition = props.definition;
+        const [intervalGroups, setIntervalGroups] = React.useState([]);
+        const [groupId, setGroupId] = React.useState(1);
+        const [intervalId, setIntervalId] = React.useState(1);
+        React.useEffect(() => {
+            const definition = ensureQualifiedIntervalKeys(defaultDefinition, setIntervalId);
+            setIntervalGroups(groupQualifiedIntervals(definition.qualifiedInterval || [], setGroupId));
+        }, [defaultDefinition]);
+        return (React.createElement(Form, { testid: "reference-range-editor", onSubmit: submitDefinition },
+            React.createElement(core$1.Stack, null, intervalGroups.map((intervalGroup) => {
+                var _a;
+                return (React.createElement(ReferenceRangeGroupEditor, { unit: getUnitString((_a = defaultDefinition.quantitativeDetails) === null || _a === void 0 ? void 0 : _a.unit), onChange: changeInterval, onAdd: addInterval, onRemove: removeInterval, onRemoveGroup: removeGroup, key: `group-${intervalGroup.id}`, intervalGroup: intervalGroup }));
+            })),
+            React.createElement(core$1.ActionIcon, { title: "Add Group", size: "sm", onClick: (e) => {
+                    killEvent(e);
+                    addGroup({ id: `group-id-${groupId}`, filters: {}, intervals: [] });
+                    setGroupId((id) => id + 1);
+                } },
+                React.createElement(icons.IconCirclePlus, null)),
+            React.createElement(core$1.Group, { position: "right" },
+                React.createElement(core$1.Button, { type: "submit" }, "Save"))));
+        /**
+         * Submit qualified intervals
+         */
+        function submitDefinition() {
+            const qualifiedInterval = intervalGroups
+                .flatMap((group) => group.intervals)
+                .filter((interval) => !isEmptyInterval(interval));
+            props.onSubmit(Object.assign(Object.assign({}, defaultDefinition), { qualifiedInterval }));
+        }
+        /**
+         * Add Remove Interval Groups
+         */
+        function addGroup(addedGroup) {
+            setIntervalGroups((currentGroups) => [...currentGroups, addedGroup]);
+        }
+        function removeGroup(removedGroup) {
+            setIntervalGroups((currentGroups) => currentGroups.filter((group) => group.id !== removedGroup.id));
+        }
+        /**
+         * Add/Remove/Update specific Qualified Intervals
+         */
+        function changeInterval(groupId, changedInterval) {
+            setIntervalGroups((groups) => {
+                var _a, _b;
+                groups = [...groups];
+                const currentGroup = groups.find((g) => g.id === groupId);
+                const index = (_a = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.intervals) === null || _a === void 0 ? void 0 : _a.findIndex((interval) => interval.id === changedInterval.id);
+                if (index !== undefined && ((_b = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.intervals) === null || _b === void 0 ? void 0 : _b[index])) {
+                    currentGroup.intervals[index] = changedInterval;
+                }
+                return groups;
+            });
+        }
+        function addInterval(groupId, addedInterval) {
+            if (addedInterval.id === undefined) {
+                addedInterval.id = `id-${intervalId}`;
+                setIntervalId((id) => id + 1);
+            }
+            setIntervalGroups((groups) => {
+                groups = [...groups];
+                const currentGroupIndex = groups.findIndex((g) => g.id === groupId);
+                if (currentGroupIndex != -1) {
+                    const currentGroup = Object.assign({}, groups[currentGroupIndex]);
+                    addedInterval = Object.assign(Object.assign({}, addedInterval), currentGroup.filters);
+                    currentGroup.intervals = [...currentGroup.intervals, addedInterval];
+                    groups[currentGroupIndex] = currentGroup;
+                }
+                return groups;
+            });
+        }
+        function removeInterval(groupId, removedInterval) {
+            setIntervalGroups((groups) => {
+                groups = [...groups];
+                const currentGroup = groups.find((g) => g.id === groupId);
+                if (currentGroup) {
+                    currentGroup.intervals = currentGroup.intervals.filter((interval) => interval.id !== removedInterval.id);
+                }
+                return groups;
+            });
+        }
+    }
+    function ReferenceRangeGroupEditor(props) {
+        const { intervalGroup, unit } = props;
+        const { classes } = useStyles$4();
+        return (React.createElement(core$1.Container, { "data-testid": intervalGroup.id, className: classes.section },
+            React.createElement(core$1.Stack, { spacing: 'lg' },
+                React.createElement(core$1.Group, { position: "right" },
+                    React.createElement(core$1.ActionIcon, { title: "Remove Group", "data-testid": `remove-group-button-${intervalGroup.id}`, key: `remove-group-button-${intervalGroup.id}`, size: "sm", onClick: (e) => {
+                            killEvent(e);
+                            props.onRemoveGroup(intervalGroup);
+                        } },
+                        React.createElement(icons.IconCircleMinus, null))),
+                React.createElement(ReferenceRangeGroupFilters, { intervalGroup: intervalGroup, onChange: props.onChange }),
+                React.createElement(core$1.Divider, null),
+                intervalGroup.intervals.map((interval) => (React.createElement(core$1.Stack, { key: `interval-${interval.id}`, spacing: 'xs' },
+                    React.createElement(core$1.Group, null,
+                        React.createElement(core$1.TextInput, { key: `condition-${interval.id}`, "data-testid": `condition-${interval.id}`, defaultValue: interval.condition, label: 'Condition: ', size: 'sm', onChange: (e) => {
+                                killEvent(e);
+                                props.onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { condition: e.currentTarget.value.trim() }));
+                            } }),
+                        React.createElement(core$1.ActionIcon, { title: "Remove Interval", size: "sm", key: `remove-interval-${interval.id}`, "data-testid": `remove-interval-${interval.id}`, onClick: (e) => {
+                                killEvent(e);
+                                props.onRemove(intervalGroup.id, interval);
+                            } },
+                            React.createElement(icons.IconCircleMinus, null))),
+                    React.createElement(RangeInput, { onChange: (range) => {
+                            props.onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { range }));
+                        }, key: `range-${interval.id}`, name: `range-${interval.id}`, defaultValue: interval.range })))),
+                React.createElement(core$1.ActionIcon, { title: "Add Interval", size: "sm", onClick: (e) => {
+                        killEvent(e);
+                        props.onAdd(intervalGroup.id, {
+                            range: {
+                                low: { unit },
+                                high: { unit },
+                            },
+                        });
+                    } },
+                    React.createElement(icons.IconCirclePlus, null)))));
+    }
+    /**
+     * Render the "filters" section of the IntervalGroup. Also populates some initial
+     */
+    function ReferenceRangeGroupFilters(props) {
+        var _a, _b;
+        const { intervalGroup, onChange } = props;
+        // Pre-populate the units of the age filter
+        if (!intervalGroup.filters.age) {
+            intervalGroup.filters.age = {};
+        }
+        for (const key of ['low', 'high']) {
+            if (!((_a = intervalGroup.filters.age[key]) === null || _a === void 0 ? void 0 : _a.unit)) {
+                intervalGroup.filters.age[key] = Object.assign(Object.assign({}, intervalGroup.filters.age[key]), { unit: 'years', system: 'http://unitsofmeasure.org' });
+            }
+        }
+        return (React.createElement(core$1.Stack, { style: { maxWidth: '50%' } },
+            React.createElement(core$1.Group, null,
+                React.createElement(core$1.NativeSelect, { data: ['', 'male', 'female'], label: "Gender:", defaultValue: intervalGroup.filters.gender || '', onChange: (e) => {
+                        var _a;
+                        for (const interval of intervalGroup.intervals) {
+                            let newGender = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+                            if (newGender === '') {
+                                newGender = undefined;
+                            }
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { gender: newGender }));
+                        }
+                    } })),
+            React.createElement(core$1.Group, { spacing: 'xs' },
+                React.createElement(core$1.Text, { component: "label", htmlFor: `div-age-${intervalGroup.id}` }, "Age:"),
+                React.createElement("div", { id: `div-age-${intervalGroup.id}` },
+                    React.createElement(RangeInput, { key: `age-${intervalGroup.id}`, name: `age-${intervalGroup.id}`, defaultValue: intervalGroup.filters['age'], onChange: (ageRange) => {
+                            for (const interval of intervalGroup.intervals) {
+                                onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { age: ageRange }));
+                            }
+                        } }))),
+            React.createElement(core$1.NativeSelect, { data: ['', 'pre-puberty', 'follicular', 'midcycle', 'luteal', 'postmenopausal'], label: "Endocrine:", defaultValue: ((_b = intervalGroup.filters.context) === null || _b === void 0 ? void 0 : _b.text) || '', onChange: (e) => {
+                    var _a;
+                    for (const interval of intervalGroup.intervals) {
+                        let newEndocrine = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+                        if (newEndocrine === '') {
+                            newEndocrine = undefined;
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { context: undefined }));
+                        }
+                        else {
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { context: {
+                                    text: newEndocrine,
+                                    coding: [
+                                        { code: newEndocrine, system: 'http://terminology.hl7.org/CodeSystem/referencerange-meaning' },
+                                    ],
+                                } }));
+                        }
+                    }
+                } })));
+    }
+    /**
+     * Helper function that assigns ids to each qualifiedInterval of an ObservationDefinition
+     * @param definition An ObservationDefinition
+     * @param setIntervalId React setState function for the intervalId
+     * @returns
+     */
+    function ensureQualifiedIntervalKeys(definition, setIntervalId) {
+        const intervals = definition.qualifiedInterval || [];
+        // Set the nextId to the max of any existing numeric id
+        let nextId = Math.max(...intervals.map((interval) => {
+            var _a;
+            const existingNum = parseInt(((_a = interval.id) === null || _a === void 0 ? void 0 : _a.substring(3)) || '');
+            return !isNaN(existingNum) ? existingNum : Number.NEGATIVE_INFINITY;
+        })) + 1;
+        if (!Number.isFinite(nextId)) {
+            nextId = 1;
+        }
+        // If an interval doesn't have an id, set it to the nextId
+        definition = Object.assign(Object.assign({}, definition), { qualifiedInterval: intervals.map((interval) => (Object.assign(Object.assign({}, interval), { id: interval.id || `id-${nextId++}` }))) });
+        setIntervalId(nextId);
+        return definition;
+    }
+    /**
+     * Group all ObservationDefinitionQualifiedIntervals based on the values of their "filter" properties,
+     * so that similar ranges can be grouped together
+     */
+    function groupQualifiedIntervals(intervals, setGroupId) {
+        let groupId = 1;
+        const groups = {};
+        for (const interval of intervals) {
+            const groupKey = generateGroupKey(interval);
+            if (!(groupKey in groups)) {
+                groups[groupKey] = {
+                    id: `group-id-${groupId++}`,
+                    filters: Object.fromEntries(intervalFilters.map((f) => [f, interval[f]])),
+                    intervals: [],
+                };
+            }
+            groups[groupKey].intervals.push(interval);
+        }
+        setGroupId(groupId);
+        return Object.values(groups);
+    }
+    /**
+     * Generates a unique string for each set of filter values, so that similarly filtered intervals can be grouped together
+     * @return A "group key" that corresponds to the value of the interval filter properties.
+     */
+    function generateGroupKey(interval) {
+        var _a, _b;
+        const results = [
+            `gender=${interval.gender}`,
+            `age=${core.formatRange(interval.age)}`,
+            `gestationalAge=${core.formatRange(interval.gestationalAge)}`,
+            `context=${(_a = interval.context) === null || _a === void 0 ? void 0 : _a.text}`,
+            `appliesTo=${(_b = interval.appliesTo) === null || _b === void 0 ? void 0 : _b.map((c) => c.text).join('+')}`,
+        ];
+        return results.join(':');
+    }
+    function getUnitString(unit) {
+        return unit && (core.getCodeBySystem(unit, 'http://unitsofmeasure.org') || unit.text);
+    }
+    function isEmptyInterval(interval) {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = interval.range) === null || _a === void 0 ? void 0 : _a.low) === null || _b === void 0 ? void 0 : _b.value) === undefined && ((_d = (_c = interval.range) === null || _c === void 0 ? void 0 : _c.high) === null || _d === void 0 ? void 0 : _d.value) === undefined;
+    }
+
     /*
      * Request status: https://hl7.org/fhir/valueset-request-status.html
      * draft, active, on-hold, revoked, completed, entered-in-error, unknown
@@ -5759,6 +5977,8 @@
     exports.RangeDisplay = RangeDisplay;
     exports.RangeInput = RangeInput;
     exports.ReferenceInput = ReferenceInput;
+    exports.ReferenceRangeEditor = ReferenceRangeEditor;
+    exports.ReferenceRangeGroupEditor = ReferenceRangeGroupEditor;
     exports.RegisterForm = RegisterForm;
     exports.RequestGroupDisplay = RequestGroupDisplay;
     exports.ResourceArrayDisplay = ResourceArrayDisplay;
@@ -5787,8 +6007,6 @@
     exports.StatusBadge = StatusBadge;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
-    exports.addDateEqualsFilter = addDateEqualsFilter;
-    exports.addDateFilter = addDateFilter;
     exports.addDateFilterBetween = addDateFilterBetween;
     exports.addField = addField;
     exports.addFilter = addFilter;
@@ -5807,7 +6025,6 @@
     exports.convertLocalToIso = convertLocalToIso;
     exports.createScriptTag = createScriptTag;
     exports.deleteFilter = deleteFilter;
-    exports.formatRangeString = formatRangeString;
     exports.getErrorsForInput = getErrorsForInput;
     exports.getIssuesForExpression = getIssuesForExpression;
     exports.getOpString = getOpString;
@@ -5816,7 +6033,6 @@
     exports.getSortField = getSortField;
     exports.getTimeString = getTimeString;
     exports.getValueAndType = getValueAndType;
-    exports.hasFilterOnField = hasFilterOnField;
     exports.initRecaptcha = initRecaptcha;
     exports.isChoiceQuestion = isChoiceQuestion;
     exports.isQuestionEnabled = isQuestionEnabled;