@medplum/react 2.0.20 → 2.0.22

package/dist/cjs/index.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('prop-types'), require('@mantine/notifications')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', 'prop-types', '@mantine/notifications'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.medplum = global.medplum || {}, global.medplum.react = {}), global.medplum.core, global.React, global.mantine.core, global.PropTypes, global.mantine.notifications));
-})(this, (function (exports, core, React, core$1, PropTypes, notifications) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('@mantine/notifications'), require('prop-types')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', '@mantine/notifications', 'prop-types'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.medplum = global.medplum || {}, global.medplum.react = {}), global.medplum.core, global.React, global.mantine.core, global.mantine.notifications, global.PropTypes));
+})(this, (function (exports, core, React, core$1, notifications, PropTypes) { 'use strict';
 
     function AddressDisplay(props) {
         const address = props.value;
@@ -71,6 +71,8 @@
      * Medplum context includes:
      *   1) medplum - Medplum client library
      *   2) profile - The current user profile (if signed in)
+     * @param props The MedplumProvider React props.
+     * @returns The MedplumProvider React node.
      */
     function MedplumProvider(props) {
         const medplum = props.medplum;
@@ -89,6 +91,13 @@
             medplum.addEventListener('change', eventListener);
             return () => medplum.removeEventListeneer('change', eventListener);
         }, [medplum, state]);
+        React.useEffect(() => {
+            function eventListener() {
+                notifications.showNotification({ color: 'red', message: 'No connection to server', autoClose: false });
+            }
+            medplum.addEventListener('offline', eventListener);
+            return () => medplum.removeEventListeneer('offline', eventListener);
+        }, [medplum]);
         const medplumContext = {
             ...state,
             medplum,
@@ -98,6 +107,7 @@
     }
     /**
      * Returns the MedplumContext instance.
+     * @returns The MedplumContext instance.
      */
     function useMedplumContext() {
         return React.useContext(reactContext);
@@ -105,6 +115,7 @@
     /**
      * Returns the MedplumClient instance.
      * This is a shortcut for useMedplumContext().medplum.
+     * @returns The MedplumClient instance.
      */
     function useMedplum() {
         return useMedplumContext().medplum;
@@ -154,7 +165,7 @@
     }
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
     var defaultAttributes = {
@@ -170,7 +181,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -234,7 +245,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -255,7 +266,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -266,7 +277,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -282,7 +293,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -297,7 +308,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -319,7 +330,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -332,7 +343,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -355,7 +366,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -371,7 +382,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -391,7 +402,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -400,7 +411,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -416,7 +427,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -425,7 +436,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -435,7 +446,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -446,7 +457,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -463,7 +474,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -479,7 +490,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -495,7 +506,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -506,7 +517,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -529,7 +540,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -540,7 +551,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -550,7 +561,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -568,7 +579,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -586,7 +597,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -601,7 +612,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -627,7 +638,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -644,7 +655,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -653,7 +664,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -662,7 +673,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -679,7 +690,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -696,7 +707,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -714,7 +725,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -724,7 +735,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -734,7 +745,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -750,7 +761,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -763,7 +774,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -776,7 +787,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -791,7 +802,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -807,7 +818,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -826,7 +837,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -842,7 +853,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.19.0 - MIT
+     * @tabler/icons-react v2.22.0 - MIT
      */
 
 
@@ -967,6 +978,7 @@
      * React Hook to use a FHIR reference.
      * Handles the complexity of resolving references and caching resources.
      * @param value The resource or reference to resource.
+     * @param setOutcome Optional callback to set the OperationOutcome.
      * @returns The resolved resource.
      */
     function useResource(value, setOutcome) {
@@ -1101,8 +1113,9 @@
                 if (!item && creatable !== false) {
                     item = onCreate(value);
                 }
-                if (item)
+                if (item) {
                     result.push(item);
+                }
             }
             onChange(result);
         }, [creatable, onChange, onCreate]);
@@ -1193,7 +1206,7 @@
                 navigate(`/${core.getReferenceString(item[0])}`);
             }
         }, [navigate]);
-        return (React.createElement(AsyncAutocomplete, { key: props.pathname, size: "sm", radius: "md", className: classes.searchInput, icon: React.createElement(IconSearch, { size: 16 }), placeholder: "Search", itemComponent: ItemComponent$1, toKey: toKey$1, toOption: toOption$1, onChange: handleSelect, loadOptions: loadData }));
+        return (React.createElement(AsyncAutocomplete, { key: `${props.pathname}?${props.searchParams}`, size: "sm", radius: "md", className: classes.searchInput, icon: React.createElement(IconSearch, { size: 16 }), placeholder: "Search", itemComponent: ItemComponent$1, toKey: toKey$1, toOption: toOption$1, onChange: handleSelect, loadOptions: loadData, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false }));
     }
     const ItemComponent$1 = React.forwardRef(({ resource, ...others }, ref) => {
         let helpText = undefined;
@@ -1406,7 +1419,7 @@
             React.createElement(core$1.Group, { position: "apart" },
                 React.createElement(core$1.Group, { spacing: "xs" },
                     React.createElement(core$1.UnstyledButton, { className: classes.logoButton, onClick: props.navbarToggle }, props.logo),
-                    React.createElement(HeaderSearchInput, null)),
+                    React.createElement(HeaderSearchInput, { pathname: props.pathname, searchParams: props.searchParams })),
                 React.createElement(core$1.Menu, { width: 260, shadow: "xl", position: "bottom-end", transitionProps: { transition: 'pop-top-right' }, opened: userMenuOpened, onClose: () => setUserMenuOpened(false) },
                     React.createElement(core$1.Menu.Target, null,
                         React.createElement(core$1.UnstyledButton, { className: cx(classes.user, { [classes.userActive]: userMenuOpened }), onClick: () => setUserMenuOpened((o) => !o) },
@@ -1444,6 +1457,7 @@
     /**
      * Parses an HTML form and returns the result as a JavaScript object.
      * @param form The HTML form element.
+     * @returns Form values in key value pairs.
      */
     function parseForm(form) {
         const result = {};
@@ -1464,8 +1478,8 @@
      * Parses an HTML input element.
      * Sets the name/value pair in the result,
      * but only if the element is enabled and checked.
-     * @param el The input element.
      * @param result The result builder.
+     * @param el The input element.
      */
     function parseInputElement(result, el) {
         if (el.disabled) {
@@ -1537,11 +1551,20 @@
     }
 
     function toKey(element) {
-        return element.code;
+        if (typeof element.code === 'string') {
+            return element.code;
+        }
+        return JSON.stringify(element);
+    }
+    function getDisplay(item) {
+        if (typeof item.display === 'string') {
+            return item.display;
+        }
+        return toKey(item);
     }
     function toOption(element) {
         return {
-            value: element.code,
+            value: toKey(element),
             label: getDisplay(element),
             resource: element,
         };
@@ -1554,6 +1577,9 @@
     }
     /**
      * A low-level component to autocomplete based on a FHIR Valueset.
+     * This is the base component for CodeableConceptInput, CodingInput, and CodeInput.
+     * @param props The ValueSetAutocomplete React props.
+     * @returns The ValueSetAutocomplete React node.
      */
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
@@ -1575,9 +1601,6 @@
         }, [medplum, elementDefinition]);
         return (React.createElement(AsyncAutocomplete, { ...rest, creatable: creatable ?? true, clearable: clearable ?? true, toKey: toKey, toOption: toOption, loadOptions: loadValues, onCreate: createValue, getCreateLabel: creatable === false ? undefined : (query) => `+ Create ${query}` }));
     }
-    function getDisplay(item) {
-        return item.display || item.code || '';
-    }
 
     function CodeInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
@@ -1779,8 +1802,8 @@
                 main: {
                     background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
                 },
-            }, padding: 0, fixed: true, header: profile && React.createElement(Header, { logo: props.logo, version: props.version, navbarToggle: toggleNavbar }), navbar: profile && navbarOpen ? (React.createElement(Navbar, { pathname: props.pathname, searchParams: props.searchParams, menus: props.menus, closeNavbar: closeNavbar, displayAddBookmark: props.displayAddBookmark })) : undefined },
-            React.createElement(ErrorBoundary, null,
+            }, padding: 0, fixed: true, header: profile && (React.createElement(Header, { pathname: props.pathname, searchParams: props.searchParams, logo: props.logo, version: props.version, navbarToggle: toggleNavbar })), navbar: profile && navbarOpen ? (React.createElement(Navbar, { pathname: props.pathname, searchParams: props.searchParams, menus: props.menus, closeNavbar: closeNavbar, displayAddBookmark: props.displayAddBookmark })) : undefined },
+            React.createElement(ErrorBoundary, { key: `${props.pathname}?${props.searchParams?.toString()}` },
                 React.createElement(React.Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
     }
 
@@ -1822,8 +1845,7 @@
         }
         /**
          * Processes a single file.
-         *
-         * @param {File} file The file descriptor.
+         * @param file The file descriptor.
          */
         function processFile(file) {
             if (!file) {
@@ -2048,7 +2070,9 @@
     }
 
     /**
-     * Low-level component that renders a property from a given resource, given type information
+     * Low-level component that renders a property from a given resource, given type information.
+     * @param props The ResourcePropertyDisplay React props.
+     * @returns The ResourcePropertyDisplay React node.
      */
     function ResourcePropertyDisplay(props) {
         const { property, propertyType, value } = props;
@@ -2062,11 +2086,12 @@
             case core.PropertyType.boolean:
                 return React.createElement(React.Fragment, null, value === undefined ? '' : Boolean(value).toString());
             case core.PropertyType.SystemString:
+            case core.PropertyType.string:
+                return React.createElement("div", { style: { whiteSpace: 'pre-wrap' } }, value);
             case core.PropertyType.code:
             case core.PropertyType.date:
             case core.PropertyType.integer:
             case core.PropertyType.positiveInt:
-            case core.PropertyType.string:
             case core.PropertyType.unsignedInt:
             case core.PropertyType.uri:
             case core.PropertyType.url:
@@ -2128,7 +2153,7 @@
      * According to the spec, there can only be one property for a given element definition.
      * This function returns the value and the type.
      * @param context The base context (usually a FHIR resource).
-     * @param property The property definition.
+     * @param path The property path.
      * @returns The value of the property and the property type.
      */
     function getValueAndType(context, path) {
@@ -2453,6 +2478,7 @@
      * Returns the input type for the requested type.
      * JSDOM does not support many of the valid <input> type attributes.
      * For example, it won't fire change events for <input type="datetime-local">.
+     * @returns The input type for the current environment.
      */
     function getInputType() {
         return 'datetime-local';
@@ -3215,11 +3241,6 @@
         return (React.createElement(core$1.Stack, { justify: "flex-start", spacing: "xs" }, value.map((note, index) => note.text && (React.createElement(core$1.Blockquote, { key: `note-${index}`, classNames: { cite: classes.noteCite, body: classes.noteBody, root: classes.noteRoot }, cite: note.authorReference?.display || note.authorString, icon: null }, note.text)))));
     }
 
-    /**
-     * Renders the name of a resource, given either the resource itself or a reference to the resource.
-     * @param props
-     * @returns
-     */
     function ResourceName(props) {
         const { value, link, ...rest } = props;
         const [outcome, setOutcome] = React.useState();
@@ -3585,6 +3606,7 @@
     function TimelineItem(props) {
         const { resource, profile, padding, popupMenuItems, ...others } = props;
         const author = profile ?? resource.meta?.author;
+        const dateTime = props.dateTime ?? resource.meta?.lastUpdated;
         return (React.createElement(Panel, { "data-testid": "timeline-item", fill: true, ...others },
             React.createElement(core$1.Group, { position: "apart", spacing: 8, mx: "xs", my: "sm" },
                 React.createElement(ResourceAvatar, { value: author, link: true, size: "md" }),
@@ -3592,7 +3614,7 @@
                     React.createElement(core$1.Text, { size: "sm" },
                         React.createElement(ResourceName, { color: "dark", weight: 500, value: author, link: true })),
                     React.createElement(core$1.Text, { size: "xs" },
-                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime(props.resource.meta?.lastUpdated)),
+                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime(dateTime)),
                         React.createElement(core$1.Text, { component: "span", color: "dimmed", mx: 8 }, "\u00B7"),
                         React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, props.resource.resourceType))),
                 popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
@@ -3612,8 +3634,8 @@
      */
     function sortByDateAndPriority(resources, timelineResource) {
         resources.sort((a, b) => {
-            const priority1 = getPriorityScore(a);
-            const priority2 = getPriorityScore(b);
+            const priority1 = getPriorityScore(a, timelineResource);
+            const priority2 = getPriorityScore(b, timelineResource);
             if (priority1 > priority2) {
                 return 1;
             }
@@ -3623,10 +3645,13 @@
             return getTime(a, timelineResource) - getTime(b, timelineResource);
         });
     }
-    function getPriorityScore(resource) {
-        const priority = resource.priority;
-        if (typeof priority === 'string') {
-            return { stat: 4, asap: 3, urgent: 2 }[priority] || 0;
+    function getPriorityScore(resource, timelineResource) {
+        if (!isSameResourceType(resource, timelineResource)) {
+            // Only use priority if not the primary resource of a timeline view.
+            const priority = resource.priority;
+            if (typeof priority === 'string') {
+                return { stat: 4, asap: 3, urgent: 2 }[priority] || 0;
+            }
         }
         return 0;
     }
@@ -3901,7 +3926,7 @@
         const { classes } = useStyles$7();
         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, { ...props }) },
+        return (React.createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, dateTime: props.resource.sent, padding: true, className: className, popupMenuItems: React.createElement(TimelineItemPopupMenu, { ...props }) },
             React.createElement("p", null, props.resource.payload?.[0]?.contentString)));
     }
     function MediaTimelineItem(props) {
@@ -4080,8 +4105,9 @@
     };
     /**
      * Sets the array of filters.
-     *
-     * @param {Array} filters The new filters.
+     * @param definition The original search request.
+     * @param filters The new filters.
+     * @returns The updated search request.
      */
     function setFilters(definition, filters) {
         return {
@@ -4093,25 +4119,29 @@
     }
     /**
      * Clears all of the filters.
+     * @param definition The original search request.
+     * @returns The updated search request.
      */
     function clearFilters(definition) {
         return setFilters(definition, []);
     }
     /**
      * Clears all of the filters on a certain field.
-     *
-     * @param {string} code The field key name to clear filters.
+     * @param definition The original search request.
+     * @param code The field key name to clear filters.
+     * @returns The updated search request.
      */
     function clearFiltersOnField(definition, code) {
         return setFilters(definition, (definition.filters || []).filter((f) => f.code !== code));
     }
     /**
      * Adds a filter.
-     *
-     * @param {string} field The field key name.
-     * @param {Operator} op The operation key name.
-     * @param {?string} value The filter value.
-     * @param {boolean=} opt_clear Optional flag to clear filters on the field.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param op The operation key name.
+     * @param value The filter value.
+     * @param opt_clear Optional flag to clear filters on the field.
+     * @returns The updated search request.
      */
     function addFilter(definition, field, op, value, opt_clear) {
         if (opt_clear) {
@@ -4126,8 +4156,9 @@
     }
     /**
      * Adds a field.
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addField(definition, field) {
         if (definition.fields && definition.fields.includes(field)) {
@@ -4146,8 +4177,9 @@
     }
     /**
      * Deletes a filter at the specified index.
-     *
-     * @param {number} index The filter index.
+     * @param definition The original search request.
+     * @param index The filter index.
+     * @returns The updated search request.
      */
     function deleteFilter(definition, index) {
         if (!definition.filters) {
@@ -4163,24 +4195,27 @@
     }
     /**
      * Adds a filter that constrains the specified field to "yesterday".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addYesterdayFilter(definition, field) {
         return addDayFilter(definition, field, -1);
     }
     /**
      * Adds a filter that constrains the specified field to "today".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addTodayFilter(definition, field) {
         return addDayFilter(definition, field, 0);
     }
     /**
      * Adds a filter that constrains the specified field to "tomorrow".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addTomorrowFilter(definition, field) {
         return addDayFilter(definition, field, 1);
@@ -4191,9 +4226,10 @@
      * "Today" would be 0.
      * "Yesterday" would be -1.
      * "Tomorrow" would be 1.
-     *
-     * @param {string} field The field key name.
-     * @param {number} delta The number of days from this day.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param delta The number of days from this day.
+     * @returns The updated search request.
      */
     function addDayFilter(definition, field, delta) {
         const startTime = new Date();
@@ -4206,24 +4242,27 @@
     }
     /**
      * Adds a filter that constrains the specified field to "last month".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addLastMonthFilter(definition, field) {
         return addMonthFilter(definition, field, -1);
     }
     /**
      * Adds a filter that constrains the specified field to "this month".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addThisMonthFilter(definition, field) {
         return addMonthFilter(definition, field, 0);
     }
     /**
      * Adds a filter that constrains the specified field to "next month".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addNextMonthFilter(definition, field) {
         return addMonthFilter(definition, field, 1);
@@ -4234,9 +4273,10 @@
      * "This month" would be 0.
      * "Last month" would be -1.
      * "Next month" would be 1.
-     *
-     * @param {string} field The field key name.
-     * @param {number} delta The number of months from this month.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param delta The number of months from this month.
+     * @returns The updated search request.
      */
     function addMonthFilter(definition, field, delta) {
         const startTime = new Date();
@@ -4252,8 +4292,9 @@
     }
     /**
      * Adds a filter that constrains the specified field to the year to date.
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @returns The updated search request.
      */
     function addYearToDateFilter(definition, field) {
         const startTime = new Date();
@@ -4265,10 +4306,11 @@
     }
     /**
      * Adds a filter for a date between two dates (inclusive of both dates).
-     *
-     * @param {string} field The field key name.
-     * @param {Date} d1 The start date.
-     * @param {Date} d2 The end date.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param d1 The start date.
+     * @param d2 The end date.
+     * @returns The updated search request.
      */
     function addDateFilterBetween(definition, field, d1, d2) {
         definition = clearFiltersOnField(definition, field);
@@ -4278,26 +4320,30 @@
     }
     /**
      * 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.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param op The date/time operation.
+     * @param value The date.
+     * @returns The updated search request.
      */
     function addDateFilterImpl(definition, field, op, value) {
         return addFilter(definition, field, op, value.toISOString());
     }
     /**
      * Adds a filter that constrains the specified field to "missing".
-     *
-     * @param {string} field The field key name.
+     * @param definition The original search request.
+     * @param field The field key name.
+     * @param value Optional boolean value. Default is true.
+     * @returns The updated search request.
      */
     function addMissingFilter(definition, field, value = true) {
         return addFilter(definition, field, core.Operator.MISSING, value.toString());
     }
     /**
      * Sets the offset (starting at zero).
-     *
-     * @param {number} offset The offset number.
+     * @param definition The original search request.
+     * @param offset The offset number.
+     * @returns The updated search request.
      */
     function setOffset(definition, offset) {
         if (definition.offset === offset) {
@@ -4313,7 +4359,7 @@
      * Creates a new search request with the search offset at the specified page.
      * @param definition The search definition.
      * @param page The new page number
-     * @return The new search definition.
+     * @returns The new search definition.
      */
     function setPage(definition, page) {
         const count = definition.count ?? core.DEFAULT_SEARCH_COUNT;
@@ -4323,8 +4369,10 @@
     /**
      * Sorts the search by the specified key, and optional direction.
      * Direction defaults to ascending ('asc') if not specified.
-     *
-     * @param {string} sortField The sort key.
+     * @param definition The original search request.
+     * @param sort The sort key.
+     * @param desc Optional descending flag. Default is false.
+     * @returns The updated search request.
      */
     function setSort(definition, sort, desc) {
         if (sort === getSortField(definition) && desc !== undefined && desc === isSortDescending(definition)) {
@@ -4345,8 +4393,9 @@
      * Toggles the sort of the search by key.
      * If the search is already sorted by the key, reverses the direction.
      * If the search is not sorted by the key, sort in ascending order.
-     *
-     * @param {string} key The field key name.
+     * @param definition The original search request.
+     * @param key The field key name.
+     * @returns The updated search request.
      */
     function toggleSort(definition, key) {
         let desc = false;
@@ -4380,9 +4429,8 @@
     }
     /**
      * Returns a string representing the operation.
-     *
-     * @param {string} op The operation code.
-     * @return {string} A display string for the operation.
+     * @param op The operation code.
+     * @returns A display string for the operation.
      */
     function getOpString(op) {
         return operatorNames[op] ?? '';
@@ -4422,7 +4470,7 @@
     /**
      * Returns a fragment to be displayed in the search table for the value.
      * @param resource The parent resource.
-     * @param key The search code or FHIRPath expression.
+     * @param field The search code or FHIRPath expression.
      * @returns The fragment to display.
      */
     function renderValue(resource, field) {
@@ -4491,8 +4539,7 @@
         /**
          * Handles a key down event on the "available" field.
          * If the user presses enter, it is a shortcut for the "Add" button.
-         *
-         * @param {KeyboardEvent} e The keyboard event.
+         * @param e The keyboard event.
          */
         function handleAvailableKeyDown(e) {
             if (e.key === 'Enter') {
@@ -4509,8 +4556,7 @@
         /**
          * Handles a key down event on the "available" field.
          * If the user presses enter, it is a shortcut for the "Add" button.
-         *
-         * @param {KeyboardEvent} e The keyboard event.
+         * @param e The keyboard event.
          */
         function handleSelectedKeyDown(e) {
             if (e.key === 'Enter') {
@@ -4597,9 +4643,9 @@
         }
         /**
          * Swaps two fields in the search.
-         *
-         * @param {number} i The index of the first field.
-         * @param {number} j The index of the second field.
+         * @param fields The array of fields.
+         * @param i The index of the first field.
+         * @param j The index of the second field.
          */
         function swapFields(fields, i, j) {
             const temp = fields[i];
@@ -4644,6 +4690,7 @@
      * Returns a list of fields/columns available for a type.
      * The result is the union of properties and search parameters.
      * @param typeSchema The type definition.
+     * @returns A list of fields/columns available for a resource type.
      */
     function getFieldsList(typeSchema) {
         const result = [];
@@ -5094,6 +5141,8 @@
      * The SearchControl component represents the embeddable search table control.
      * It includes the table, rows, headers, sorting, etc.
      * It does not include the field editor, filter editor, pagination buttons.
+     * @param props The SearchControl React props.
+     * @returns The SearchControl React node.
      */
     function SearchControl(props) {
         const { classes } = useStyles$6();
@@ -5113,7 +5162,7 @@
         React.useEffect(() => {
             setOutcome(undefined);
             medplum
-                .search(search.resourceType, core.formatSearchQuery({ ...search, total: 'estimate', fields: undefined }))
+                .search(search.resourceType, core.formatSearchQuery({ ...search, total: search.total ?? 'estimate', fields: undefined }))
                 .then((response) => {
                 setState({ ...stateRef.current, searchResponse: response });
                 if (onLoad) {
@@ -5176,7 +5225,6 @@
         }
         /**
          * Handles a click on a order row.
-         *
          * @param e The click event.
          * @param resource The FHIR resource.
          */
@@ -5354,6 +5402,8 @@
 
     /**
      * The FhirPathTable component represents the embeddable search table control.
+     * @param props FhirPathTable React props.
+     * @returns FhirPathTable React node.
      */
     function FhirPathTable(props) {
         const medplum = useMedplum();
@@ -5722,7 +5772,8 @@
      * React needs unique IDs for components for rendering performance.
      * All of the important components in the questionnaire builder have id properties for this:
      * Questionnaire, QuestionnaireItem, and QuestionnaireItemAnswerOption.
-     * @return A unique key.
+     * @param existing Optional existing id which will update nextId.
+     * @returns A unique key.
      */
     function generateId$1(existing) {
         if (existing) {
@@ -6258,7 +6309,8 @@
     /**
      * Generates a link ID for an item.
      * Link IDs are required properties on QuestionnaireItem objects.
-     * @return A unique link ID.
+     * @param prefix The link ID prefix string.
+     * @returns A unique link ID.
      */
     function generateLinkId(prefix) {
         return prefix + nextLinkId++;
@@ -6268,7 +6320,7 @@
      * React needs unique IDs for components for rendering performance.
      * All of the important components in the questionnaire builder have id properties for this:
      * Questionnaire, QuestionnaireItem, and QuestionnaireItemAnswerOption.
-     * @return A unique key.
+     * @returns A unique key.
      */
     function generateId() {
         return 'id-' + nextId++;
@@ -6367,6 +6419,8 @@
         }
         /**
          * Add/Remove/Update specific Qualified Intervals
+         * @param groupId The reference range group ID.
+         * @param changedInterval The updated reference range interval.
          */
         function changeInterval(groupId, changedInterval) {
             setIntervalGroups((groups) => {
@@ -6446,7 +6500,9 @@
                     React.createElement(IconCirclePlus, null)))));
     }
     /**
-     * Render the "filters" section of the IntervalGroup. Also populates some initial
+     * Render the "filters" section of the IntervalGroup.
+     * @param props The ReferenceRangeGroupFilter React props.
+     * @returns The ReferenceRangeGroupFilter React node.
      */
     function ReferenceRangeGroupFilters(props) {
         const { intervalGroup, onChange } = props;
@@ -6510,7 +6566,7 @@
      * Helper function that assigns ids to each qualifiedInterval of an ObservationDefinition
      * @param definition An ObservationDefinition
      * @param setIntervalId React setState function for the intervalId
-     * @returns
+     * @returns The updated observation definition.
      */
     function ensureQualifiedIntervalKeys(definition, setIntervalId) {
         const intervals = definition.qualifiedInterval || [];
@@ -6535,7 +6591,10 @@
     }
     /**
      * Group all ObservationDefinitionQualifiedIntervals based on the values of their "filter" properties,
-     * so that similar ranges can be grouped together
+     * so that similar ranges can be grouped together.
+     * @param intervals Array of reference range intervals.
+     * @param setGroupId Callback to set the group ID.
+     * @returns The grouped intervals.
      */
     function groupQualifiedIntervals(intervals, setGroupId) {
         let groupId = 1;
@@ -6555,8 +6614,9 @@
         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.
+     * Generates a unique string for each set of filter values, so that similarly filtered intervals can be grouped together.
+     * @param interval The reference range interval.
+     * @returns A "group key" that corresponds to the value of the interval filter properties.
      */
     function generateGroupKey(interval) {
         const results = [
@@ -7144,6 +7204,7 @@
     /**
      * Dynamically creates a script tag for the specified JavaScript file.
      * @param src The JavaScript file URL.
+     * @param onload Optional callback for the onload event.
      */
     function createScriptTag(src, onload) {
         const head = document.getElementsByTagName('head')[0];
@@ -7484,9 +7545,11 @@
      * 3) Choose profile - If the user has multiple profiles, prompt to choose one
      * 4) Choose scope - If the user has multiple scopes, prompt to choose one
      * 5) Success - Return to the caller with either a code or a redirect
+     * @param props The SignInForm React props.
+     * @returns The SignInForm React node.
      */
     function SignInForm(props) {
-        const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode, ...baseLoginRequest } = props;
+        const { login: loginCode, chooseScopes, onSuccess, onForgotPassword, onRegister, onCode, ...baseLoginRequest } = props;
         const medplum = useMedplum();
         const [login, setLogin] = React.useState(undefined);
         const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
@@ -7527,13 +7590,17 @@
             handleCode(response.code);
         }, [handleCode]);
         React.useEffect(() => {
-            if (props.login) {
+            // Beware the race condition here
+            // The `useMedplum` hook will return a new instance of the MedplumClient on login
+            // We do not want to request the login status again in that case
+            // Only request login status once
+            if (loginCode && !login) {
                 medplum
-                    .get('auth/login/' + props.login)
+                    .get('auth/login/' + loginCode)
                     .then(handleAuthResponse)
                     .catch(console.error);
             }
-        }, [medplum, props, handleAuthResponse]);
+        }, [medplum, loginCode, login, handleAuthResponse]);
         return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
                 return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, disableGoogleAuth: props.disableGoogleAuth, ...baseLoginRequest }, props.children));