@medplum/react 2.0.20 → 2.0.21

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;
@@ -89,6 +89,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,
@@ -1101,8 +1108,9 @@
                 if (!item && creatable !== false) {
                     item = onCreate(value);
                 }
-                if (item)
+                if (item) {
                     result.push(item);
+                }
             }
             onChange(result);
         }, [creatable, onChange, onCreate]);
@@ -1193,7 +1201,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 +1414,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) },
@@ -1537,11 +1545,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,
         };
@@ -1575,9 +1592,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 +1793,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))));
     }
 
@@ -3585,6 +3599,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 +3607,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 +3627,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 +3638,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 +3919,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) {
@@ -5113,7 +5131,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) {
@@ -7189,9 +7207,9 @@
         }
         if (typeof window !== 'undefined') {
             const origin = window.location.protocol + '//' + window.location.host;
-            const authorizedOrigins = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com,https://storybook.medplum.com,https://graphiql.medplum.com,https://www.medplum.com"?.split(',') ?? [];
+            const authorizedOrigins = "undefined"?.split(',') ?? [];
             if (authorizedOrigins.includes(origin)) {
-                return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
+                return "undefined";
             }
         }
         return undefined;
@@ -7486,7 +7504,7 @@
      * 5) Success - Return to the caller with either a code or a redirect
      */
     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 +7545,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));