@medplum/react 2.0.15 → 2.0.17

package/dist/esm/AppShell/AppShell.mjs

@@ -0,0 +1,37 @@
+import { useMantineTheme, AppShell as AppShell$1 } from '@mantine/core';
+import React, { useState, Suspense } from 'react';
+import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.mjs';
+import { Loading } from '../Loading/Loading.mjs';
+import { useMedplum, useMedplumProfile } from '../MedplumProvider/MedplumProvider.mjs';
+import { Header } from './Header.mjs';
+import { Navbar } from './Navbar.mjs';
+
+function AppShell(props) {
+    const theme = useMantineTheme();
+    const [navbarOpen, setNavbarOpen] = useState(localStorage['navbarOpen'] === 'true');
+    const medplum = useMedplum();
+    const profile = useMedplumProfile();
+    function setNavbarOpenWrapper(open) {
+        localStorage['navbarOpen'] = open.toString();
+        setNavbarOpen(open);
+    }
+    function closeNavbar() {
+        setNavbarOpenWrapper(false);
+    }
+    function toggleNavbar() {
+        setNavbarOpenWrapper(!navbarOpen);
+    }
+    if (medplum.isLoading()) {
+        return React.createElement(Loading, null);
+    }
+    return (React.createElement(AppShell$1, { styles: {
+            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, { menus: props.menus, closeNavbar: closeNavbar }) : undefined },
+        React.createElement(ErrorBoundary, null,
+            React.createElement(Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
+}
+
+export { AppShell };
+//# sourceMappingURL=AppShell.mjs.map

package/dist/esm/AppShell/AppShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mjs","sources":["../../../src/AppShell/AppShell.tsx"],"sourcesContent":["import { AppShell as MantineAppShell, useMantineTheme } from '@mantine/core';\nimport React, { Suspense, useState } from 'react';\nimport { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary';\nimport { Loading } from '../Loading/Loading';\nimport { useMedplum, useMedplumProfile } from '../MedplumProvider/MedplumProvider';\nimport { Header } from './Header';\nimport { Navbar, NavbarMenu } from './Navbar';\n\nexport interface AppShellProps {\n  logo: React.ReactNode;\n  version?: string;\n  menus?: NavbarMenu[];\n  children: React.ReactNode;\n}\n\nexport function AppShell(props: AppShellProps): JSX.Element {\n  const theme = useMantineTheme();\n  const [navbarOpen, setNavbarOpen] = useState(localStorage['navbarOpen'] === 'true');\n  const medplum = useMedplum();\n  const profile = useMedplumProfile();\n\n  function setNavbarOpenWrapper(open: boolean): void {\n    localStorage['navbarOpen'] = open.toString();\n    setNavbarOpen(open);\n  }\n\n  function closeNavbar(): void {\n    setNavbarOpenWrapper(false);\n  }\n\n  function toggleNavbar(): void {\n    setNavbarOpenWrapper(!navbarOpen);\n  }\n\n  if (medplum.isLoading()) {\n    return <Loading />;\n  }\n\n  return (\n    <MantineAppShell\n      styles={{\n        main: {\n          background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n        },\n      }}\n      padding={0}\n      fixed={true}\n      header={profile && <Header logo={props.logo} version={props.version} navbarToggle={toggleNavbar} />}\n      navbar={profile && navbarOpen ? <Navbar menus={props.menus} closeNavbar={closeNavbar} /> : undefined}\n    >\n      <ErrorBoundary>\n        <Suspense fallback={<Loading />}>{props.children}</Suspense>\n      </ErrorBoundary>\n    </MantineAppShell>\n  );\n}\n"],"names":["MantineAppShell"],"mappings":";;;;;;;;AAeM,SAAU,QAAQ,CAAC,KAAoB,EAAA;AAC3C,IAAA,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;AAChC,IAAA,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,MAAM,CAAC,CAAC;AACpF,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IAEpC,SAAS,oBAAoB,CAAC,IAAa,EAAA;QACzC,YAAY,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7C,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;AAED,IAAA,SAAS,WAAW,GAAA;QAClB,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC7B;AAED,IAAA,SAAS,YAAY,GAAA;AACnB,QAAA,oBAAoB,CAAC,CAAC,UAAU,CAAC,CAAC;KACnC;AAED,IAAA,IAAI,OAAO,CAAC,SAAS,EAAE,EAAE;QACvB,OAAO,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,CAAG,CAAC;AACpB,KAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAACA,UAAe,EAAA,EACd,MAAM,EAAE;AACN,YAAA,IAAI,EAAE;gBACJ,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACvF,aAAA;SACF,EACD,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAA,CAAI,EACnG,MAAM,EAAE,OAAO,IAAI,UAAU,GAAG,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAI,CAAA,GAAG,SAAS,EAAA;AAEpG,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;AACZ,YAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,oBAAC,OAAO,EAAA,IAAA,CAAG,EAAG,EAAA,KAAK,CAAC,QAAQ,CAAY,CAC9C,CACA,EAClB;AACJ;;;;"}

package/dist/esm/AppShell/Header.mjs

@@ -0,0 +1,88 @@
+import { createStyles, Header as Header$1, Group, UnstyledButton, Menu, Text, Stack, Avatar } from '@mantine/core';
+import { formatHumanName, getReferenceString } from '@medplum/core';
+import React, { useState } from 'react';
+import { HumanNameDisplay } from '../HumanNameDisplay/HumanNameDisplay.mjs';
+import { useMedplumContext } from '../MedplumProvider/MedplumProvider.mjs';
+import { ResourceAvatar } from '../ResourceAvatar/ResourceAvatar.mjs';
+import { HeaderSearchInput } from './HeaderSearchInput.mjs';
+import IconChevronDown from '../node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.mjs';
+import IconSwitchHorizontal from '../node_modules/@tabler/icons-react/dist/esm/icons/IconSwitchHorizontal.mjs';
+import IconSettings from '../node_modules/@tabler/icons-react/dist/esm/icons/IconSettings.mjs';
+import IconLogout from '../node_modules/@tabler/icons-react/dist/esm/icons/IconLogout.mjs';
+
+const useStyles = createStyles((theme) => ({
+    logoButton: {
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        borderRadius: theme.radius.sm,
+        transition: 'background-color 100ms ease',
+        '&:hover': {
+            backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+        },
+    },
+    user: {
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        borderRadius: theme.radius.sm,
+        transition: 'background-color 100ms ease',
+        '&:hover': {
+            backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+        },
+    },
+    userName: {
+        fontWeight: 500,
+        lineHeight: 1,
+        marginRight: 3,
+        [theme.fn.smallerThan('xs')]: {
+            display: 'none',
+        },
+    },
+    userActive: {
+        backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+    },
+}));
+function Header(props) {
+    const context = useMedplumContext();
+    const { medplum, profile, navigate } = context;
+    const logins = medplum.getLogins();
+    const { classes, cx } = useStyles();
+    const [userMenuOpened, setUserMenuOpened] = useState(false);
+    return (React.createElement(Header$1, { height: 60, p: 8, style: { zIndex: 101 } },
+        React.createElement(Group, { position: "apart" },
+            React.createElement(Group, { spacing: "xs" },
+                React.createElement(UnstyledButton, { className: classes.logoButton, onClick: props.navbarToggle }, props.logo),
+                React.createElement(HeaderSearchInput, null)),
+            React.createElement(Menu, { width: 260, shadow: "xl", position: "bottom-end", transitionProps: { transition: 'pop-top-right' }, opened: userMenuOpened, onClose: () => setUserMenuOpened(false) },
+                React.createElement(Menu.Target, null,
+                    React.createElement(UnstyledButton, { className: cx(classes.user, { [classes.userActive]: userMenuOpened }), onClick: () => setUserMenuOpened((o) => !o) },
+                        React.createElement(Group, { spacing: 7 },
+                            React.createElement(ResourceAvatar, { value: profile, radius: "xl", size: 24 }),
+                            React.createElement(Text, { size: "sm", className: classes.userName }, formatHumanName(profile?.name?.[0])),
+                            React.createElement(IconChevronDown, { size: 12, stroke: 1.5 })))),
+                React.createElement(Menu.Dropdown, null,
+                    React.createElement(Stack, { align: "center", p: "xl" },
+                        React.createElement(ResourceAvatar, { size: "xl", radius: 100, value: context.profile }),
+                        React.createElement(HumanNameDisplay, { value: context.profile?.name?.[0] }),
+                        React.createElement(Text, { color: "dimmed", size: "xs" }, medplum.getActiveLogin()?.project?.display)),
+                    logins.length > 1 && React.createElement(Menu.Divider, null),
+                    logins.map((login) => login.profile?.reference !== getReferenceString(context.profile) && (React.createElement(Menu.Item, { key: login.profile?.reference, onClick: () => {
+                            medplum
+                                .setActiveLogin(login)
+                                .then(() => window.location.reload())
+                                .catch(console.log);
+                        } },
+                        React.createElement(Group, null,
+                            React.createElement(Avatar, { radius: "xl" }),
+                            React.createElement("div", { style: { flex: 1 } },
+                                React.createElement(Text, { size: "sm", weight: 500 }, login.profile?.display),
+                                React.createElement(Text, { color: "dimmed", size: "xs" }, login.project?.display)))))),
+                    React.createElement(Menu.Divider, null),
+                    React.createElement(Menu.Item, { icon: React.createElement(IconSwitchHorizontal, { size: 14, stroke: 1.5 }), onClick: () => navigate('/signin') }, "Add another account"),
+                    React.createElement(Menu.Item, { icon: React.createElement(IconSettings, { size: 14, stroke: 1.5 }), onClick: () => navigate(`/${getReferenceString(profile)}`) }, "Account settings"),
+                    React.createElement(Menu.Item, { icon: React.createElement(IconLogout, { size: 14, stroke: 1.5 }), onClick: async () => {
+                            await medplum.signOut();
+                            navigate('/signin');
+                        } }, "Sign out"),
+                    React.createElement(Text, { size: "xs", color: "dimmed", align: "center" }, props.version))))));
+}
+
+export { Header };
+//# sourceMappingURL=Header.mjs.map

package/dist/esm/AppShell/Header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","sources":["../../../src/AppShell/Header.tsx"],"sourcesContent":["import { Avatar, createStyles, Group, Header as MantineHeader, Menu, Stack, Text, UnstyledButton } from '@mantine/core';\nimport { formatHumanName, getReferenceString, ProfileResource } from '@medplum/core';\nimport { HumanName } from '@medplum/fhirtypes';\nimport { IconChevronDown, IconLogout, IconSettings, IconSwitchHorizontal } from '@tabler/icons-react';\nimport React, { useState } from 'react';\nimport { HumanNameDisplay } from '../HumanNameDisplay/HumanNameDisplay';\nimport { useMedplumContext } from '../MedplumProvider/MedplumProvider';\nimport { ResourceAvatar } from '../ResourceAvatar/ResourceAvatar';\nimport { HeaderSearchInput } from './HeaderSearchInput';\n\nconst useStyles = createStyles((theme) => ({\n  logoButton: {\n    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n    borderRadius: theme.radius.sm,\n    transition: 'background-color 100ms ease',\n\n    '&:hover': {\n      backgroundColor: theme.fn.lighten(\n        theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background as string,\n        0.8\n      ),\n    },\n  },\n\n  user: {\n    padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n    borderRadius: theme.radius.sm,\n    transition: 'background-color 100ms ease',\n\n    '&:hover': {\n      backgroundColor: theme.fn.lighten(\n        theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background as string,\n        0.8\n      ),\n    },\n  },\n\n  userName: {\n    fontWeight: 500,\n    lineHeight: 1,\n    marginRight: 3,\n\n    [theme.fn.smallerThan('xs')]: {\n      display: 'none',\n    },\n  },\n\n  userActive: {\n    backgroundColor: theme.fn.lighten(\n      theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background as string,\n      0.8\n    ),\n  },\n}));\n\ninterface HeaderProps {\n  logo: React.ReactNode;\n  version?: string;\n  navbarToggle: () => void;\n}\n\nexport function Header(props: HeaderProps): JSX.Element {\n  const context = useMedplumContext();\n  const { medplum, profile, navigate } = context;\n  const logins = medplum.getLogins();\n  const { classes, cx } = useStyles();\n  const [userMenuOpened, setUserMenuOpened] = useState(false);\n\n  return (\n    <MantineHeader height={60} p={8} style={{ zIndex: 101 }}>\n      <Group position=\"apart\">\n        <Group spacing=\"xs\">\n          <UnstyledButton className={classes.logoButton} onClick={props.navbarToggle}>\n            {props.logo}\n          </UnstyledButton>\n          <HeaderSearchInput />\n        </Group>\n\n        <Menu\n          width={260}\n          shadow=\"xl\"\n          position=\"bottom-end\"\n          transitionProps={{ transition: 'pop-top-right' }}\n          opened={userMenuOpened}\n          onClose={() => setUserMenuOpened(false)}\n        >\n          <Menu.Target>\n            <UnstyledButton\n              className={cx(classes.user, { [classes.userActive]: userMenuOpened })}\n              onClick={() => setUserMenuOpened((o) => !o)}\n            >\n              <Group spacing={7}>\n                <ResourceAvatar value={profile} radius=\"xl\" size={24} />\n                <Text size=\"sm\" className={classes.userName}>\n                  {formatHumanName(profile?.name?.[0] as HumanName)}\n                </Text>\n                <IconChevronDown size={12} stroke={1.5} />\n              </Group>\n            </UnstyledButton>\n          </Menu.Target>\n          <Menu.Dropdown>\n            <Stack align=\"center\" p=\"xl\">\n              <ResourceAvatar size=\"xl\" radius={100} value={context.profile} />\n              <HumanNameDisplay value={context.profile?.name?.[0] as HumanName} />\n              <Text color=\"dimmed\" size=\"xs\">\n                {medplum.getActiveLogin()?.project?.display}\n              </Text>\n            </Stack>\n            {logins.length > 1 && <Menu.Divider />}\n            {logins.map(\n              (login) =>\n                login.profile?.reference !== getReferenceString(context.profile as ProfileResource) && (\n                  <Menu.Item\n                    key={login.profile?.reference}\n                    onClick={() => {\n                      medplum\n                        .setActiveLogin(login)\n                        .then(() => window.location.reload())\n                        .catch(console.log);\n                    }}\n                  >\n                    <Group>\n                      <Avatar radius=\"xl\" />\n                      <div style={{ flex: 1 }}>\n                        <Text size=\"sm\" weight={500}>\n                          {login.profile?.display}\n                        </Text>\n                        <Text color=\"dimmed\" size=\"xs\">\n                          {login.project?.display}\n                        </Text>\n                      </div>\n                    </Group>\n                  </Menu.Item>\n                )\n            )}\n            <Menu.Divider />\n            <Menu.Item icon={<IconSwitchHorizontal size={14} stroke={1.5} />} onClick={() => navigate('/signin')}>\n              Add another account\n            </Menu.Item>\n            <Menu.Item\n              icon={<IconSettings size={14} stroke={1.5} />}\n              onClick={() => navigate(`/${getReferenceString(profile as ProfileResource)}`)}\n            >\n              Account settings\n            </Menu.Item>\n            <Menu.Item\n              icon={<IconLogout size={14} stroke={1.5} />}\n              onClick={async () => {\n                await medplum.signOut();\n                navigate('/signin');\n              }}\n            >\n              Sign out\n            </Menu.Item>\n            <Text size=\"xs\" color=\"dimmed\" align=\"center\">\n              {props.version}\n            </Text>\n          </Menu.Dropdown>\n        </Menu>\n      </Group>\n    </MantineHeader>\n  );\n}\n"],"names":["MantineHeader"],"mappings":"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"}

package/dist/esm/AppShell/HeaderSearchInput.mjs

@@ -0,0 +1,232 @@
+import { createStyles, Group, Text } from '@mantine/core';
+import { getDisplayString, getReferenceString, isUUID, formatHumanName } from '@medplum/core';
+import React, { forwardRef, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { AsyncAutocomplete } from '../AsyncAutocomplete/AsyncAutocomplete.mjs';
+import { useMedplumNavigate, useMedplum } from '../MedplumProvider/MedplumProvider.mjs';
+import { ResourceAvatar } from '../ResourceAvatar/ResourceAvatar.mjs';
+import IconSearch from '../node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs';
+
+const useStyles = createStyles(() => {
+    return {
+        searchInput: {
+            input: {
+                width: 220,
+                transition: 'width 0.2s',
+            },
+            'input:focus': {
+                width: 400,
+            },
+            '@media (max-width: 800px)': {
+                input: {
+                    width: 150,
+                },
+                'input:focus': {
+                    width: 150,
+                },
+            },
+        },
+    };
+});
+function toKey(resource) {
+    return resource.id;
+}
+function toOption(resource) {
+    return {
+        value: resource.id,
+        label: getDisplayString(resource),
+        resource,
+    };
+}
+function HeaderSearchInput() {
+    const { classes } = useStyles();
+    const navigate = useMedplumNavigate();
+    const medplum = useMedplum();
+    const location = useLocation();
+    const loadData = useCallback(async (input, signal) => {
+        const query = buildGraphQLQuery(input);
+        const options = { signal };
+        const response = (await medplum.graphql(query, undefined, undefined, options));
+        return getResourcesFromResponse(response, input);
+    }, [medplum]);
+    const handleSelect = useCallback((item) => {
+        if (item.length > 0) {
+            navigate(`/${getReferenceString(item[0])}`);
+        }
+    }, [navigate]);
+    return (React.createElement(AsyncAutocomplete, { key: location.pathname, size: "sm", radius: "md", className: classes.searchInput, icon: React.createElement(IconSearch, { size: 16 }), placeholder: "Search", itemComponent: ItemComponent, toKey: toKey, toOption: toOption, onChange: handleSelect, loadOptions: loadData }));
+}
+const ItemComponent = forwardRef(({ resource, ...others }, ref) => {
+    let helpText = undefined;
+    if (resource.resourceType === 'Patient') {
+        helpText = resource.birthDate;
+    }
+    else if (resource.resourceType === 'ServiceRequest') {
+        helpText = resource.subject?.display;
+    }
+    return (React.createElement("div", { ref: ref, ...others },
+        React.createElement(Group, { noWrap: true },
+            React.createElement(ResourceAvatar, { value: resource }),
+            React.createElement("div", null,
+                React.createElement(Text, null, getDisplayString(resource)),
+                React.createElement(Text, { size: "xs", color: "dimmed" }, helpText)))));
+});
+function buildGraphQLQuery(input) {
+    const escaped = JSON.stringify(input);
+    if (isUUID(input)) {
+        return `{
+      Patients1: PatientList(_id: ${escaped}, _count: 1) {
+        resourceType
+        id
+        identifier {
+          system
+          value
+        }
+        name {
+          given
+          family
+        }
+        birthDate
+      }
+      ServiceRequestList(_id: ${escaped}, _count: 1) {
+        resourceType
+        id
+        identifier {
+          system
+          value
+        }
+        subject {
+          display
+        }
+      }
+    }`.replace(/\s+/g, ' ');
+    }
+    return `{
+    Patients1: PatientList(name: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      name {
+        given
+        family
+      }
+      birthDate
+    }
+    Patients2: PatientList(identifier: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      name {
+        given
+        family
+      }
+      birthDate
+    }
+    ServiceRequestList(identifier: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      subject {
+        display
+      }
+    }
+  }`.replace(/\s+/g, ' ');
+}
+/**
+ * Returns a de-duped and sorted list of resources from the search response.
+ * The search request is actually 3+ separate searches, which can include duplicates.
+ * This function combines the results, de-dupes, and sorts by relevance.
+ * @param response The response from a search query.
+ * @param query The user entered search query.
+ * @returns The resources to display in the autocomplete.
+ */
+function getResourcesFromResponse(response, query) {
+    const resources = [];
+    if (response.data.Patients1) {
+        resources.push(...response.data.Patients1);
+    }
+    if (response.data.Patients2) {
+        resources.push(...response.data.Patients2);
+    }
+    if (response.data.ServiceRequestList) {
+        resources.push(...response.data.ServiceRequestList);
+    }
+    return sortByRelevance(dedupeResources(resources), query).slice(0, 5);
+}
+/**
+ * Removes duplicate resources from an array by ID.
+ * @param resources The array of resources with possible duplicates.
+ * @returns The array of resources with no duplicates.
+ */
+function dedupeResources(resources) {
+    const ids = new Set();
+    const result = [];
+    for (const resource of resources) {
+        if (!ids.has(resource.id)) {
+            ids.add(resource.id);
+            result.push(resource);
+        }
+    }
+    return result;
+}
+/**
+ * Sorts an array of resources by relevance.
+ * @param resources The candidate resources.
+ * @param query The user entered search string.
+ * @returns The sorted array of resources.
+ */
+function sortByRelevance(resources, query) {
+    return resources.sort((a, b) => {
+        return getResourceScore(b, query) - getResourceScore(a, query);
+    });
+}
+/**
+ * Calculates a relevance score of a candidate resource.
+ * Higher scores are better.
+ * @param resource The candidate resource.
+ * @param query The user entered search string.
+ * @returns The relevance score of the candidate resource.
+ */
+function getResourceScore(resource, query) {
+    let bestScore = 0;
+    if (resource.identifier) {
+        for (const identifier of resource.identifier) {
+            bestScore = Math.max(bestScore, getStringScore(identifier.value, query));
+        }
+    }
+    if (resource.resourceType === 'Patient' && resource.name) {
+        for (const name of resource.name) {
+            bestScore = Math.max(bestScore, getStringScore(formatHumanName(name), query));
+        }
+    }
+    return bestScore;
+}
+/**
+ * Calculates a relevance score of a candidate display string.
+ * Higher scores are better.
+ * @param str The candidate display string.
+ * @param query The user entered search string.
+ * @returns The relevance score of the candidate string.
+ */
+function getStringScore(str, query) {
+    if (!str) {
+        return 0;
+    }
+    const index = str.toLowerCase().indexOf(query.toLowerCase());
+    if (index < 0) {
+        return 0;
+    }
+    return 100 - index;
+}
+
+export { HeaderSearchInput };
+//# sourceMappingURL=HeaderSearchInput.mjs.map

package/dist/esm/AppShell/HeaderSearchInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearchInput.mjs","sources":["../../../src/AppShell/HeaderSearchInput.tsx"],"sourcesContent":["import { createStyles, Group, Text } from '@mantine/core';\nimport { formatHumanName, getDisplayString, getReferenceString, isUUID } from '@medplum/core';\nimport { Patient, ServiceRequest } from '@medplum/fhirtypes';\nimport { IconSearch } from '@tabler/icons-react';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { AsyncAutocomplete, AsyncAutocompleteOption } from '../AsyncAutocomplete/AsyncAutocomplete';\nimport { useMedplum, useMedplumNavigate } from '../MedplumProvider/MedplumProvider';\nimport { ResourceAvatar } from '../ResourceAvatar/ResourceAvatar';\n\nexport type HeaderSearchTypes = Patient | ServiceRequest;\n\nconst useStyles = createStyles(() => {\n  return {\n    searchInput: {\n      input: {\n        width: 220,\n        transition: 'width 0.2s',\n      },\n      'input:focus': {\n        width: 400,\n      },\n      '@media (max-width: 800px)': {\n        input: {\n          width: 150,\n        },\n        'input:focus': {\n          width: 150,\n        },\n      },\n    },\n  };\n});\n\ninterface SearchGraphQLResponse {\n  readonly data: {\n    readonly Patients1: Patient[] | undefined;\n    readonly Patients2: Patient[] | undefined;\n    readonly ServiceRequestList: ServiceRequest[] | undefined;\n  };\n}\n\nfunction toKey(resource: HeaderSearchTypes): string {\n  return resource.id as string;\n}\n\nfunction toOption(resource: HeaderSearchTypes): AsyncAutocompleteOption<HeaderSearchTypes> {\n  return {\n    value: resource.id as string,\n    label: getDisplayString(resource),\n    resource,\n  };\n}\n\nexport function HeaderSearchInput(): JSX.Element {\n  const { classes } = useStyles();\n  const navigate = useMedplumNavigate();\n  const medplum = useMedplum();\n  const location = useLocation();\n\n  const loadData = useCallback(\n    async (input: string, signal: AbortSignal): Promise<HeaderSearchTypes[]> => {\n      const query = buildGraphQLQuery(input);\n      const options = { signal };\n      const response = (await medplum.graphql(query, undefined, undefined, options)) as SearchGraphQLResponse;\n      return getResourcesFromResponse(response, input);\n    },\n    [medplum]\n  );\n\n  const handleSelect = useCallback(\n    (item: HeaderSearchTypes[]): void => {\n      if (item.length > 0) {\n        navigate(`/${getReferenceString(item[0])}`);\n      }\n    },\n    [navigate]\n  );\n\n  return (\n    <AsyncAutocomplete\n      key={location.pathname}\n      size=\"sm\"\n      radius=\"md\"\n      className={classes.searchInput}\n      icon={<IconSearch size={16} />}\n      placeholder=\"Search\"\n      itemComponent={ItemComponent}\n      toKey={toKey}\n      toOption={toOption}\n      onChange={handleSelect}\n      loadOptions={loadData}\n    />\n  );\n}\n\nconst ItemComponent = forwardRef<HTMLDivElement, any>(\n  ({ resource, ...others }: AsyncAutocompleteOption<HeaderSearchTypes>, ref) => {\n    let helpText: string | undefined = undefined;\n\n    if (resource.resourceType === 'Patient') {\n      helpText = resource.birthDate;\n    } else if (resource.resourceType === 'ServiceRequest') {\n      helpText = resource.subject?.display;\n    }\n\n    return (\n      <div ref={ref} {...others}>\n        <Group noWrap>\n          <ResourceAvatar value={resource} />\n          <div>\n            <Text>{getDisplayString(resource)}</Text>\n            <Text size=\"xs\" color=\"dimmed\">\n              {helpText}\n            </Text>\n          </div>\n        </Group>\n      </div>\n    );\n  }\n);\n\nfunction buildGraphQLQuery(input: string): string {\n  const escaped = JSON.stringify(input);\n  if (isUUID(input)) {\n    return `{\n      Patients1: PatientList(_id: ${escaped}, _count: 1) {\n        resourceType\n        id\n        identifier {\n          system\n          value\n        }\n        name {\n          given\n          family\n        }\n        birthDate\n      }\n      ServiceRequestList(_id: ${escaped}, _count: 1) {\n        resourceType\n        id\n        identifier {\n          system\n          value\n        }\n        subject {\n          display\n        }\n      }\n    }`.replace(/\\s+/g, ' ');\n  }\n  return `{\n    Patients1: PatientList(name: ${escaped}, _count: 5) {\n      resourceType\n      id\n      identifier {\n        system\n        value\n      }\n      name {\n        given\n        family\n      }\n      birthDate\n    }\n    Patients2: PatientList(identifier: ${escaped}, _count: 5) {\n      resourceType\n      id\n      identifier {\n        system\n        value\n      }\n      name {\n        given\n        family\n      }\n      birthDate\n    }\n    ServiceRequestList(identifier: ${escaped}, _count: 5) {\n      resourceType\n      id\n      identifier {\n        system\n        value\n      }\n      subject {\n        display\n      }\n    }\n  }`.replace(/\\s+/g, ' ');\n}\n\n/**\n * Returns a de-duped and sorted list of resources from the search response.\n * The search request is actually 3+ separate searches, which can include duplicates.\n * This function combines the results, de-dupes, and sorts by relevance.\n * @param response The response from a search query.\n * @param query The user entered search query.\n * @returns The resources to display in the autocomplete.\n */\nfunction getResourcesFromResponse(response: SearchGraphQLResponse, query: string): HeaderSearchTypes[] {\n  const resources = [];\n  if (response.data.Patients1) {\n    resources.push(...response.data.Patients1);\n  }\n  if (response.data.Patients2) {\n    resources.push(...response.data.Patients2);\n  }\n  if (response.data.ServiceRequestList) {\n    resources.push(...response.data.ServiceRequestList);\n  }\n  return sortByRelevance(dedupeResources(resources), query).slice(0, 5);\n}\n\n/**\n * Removes duplicate resources from an array by ID.\n * @param resources The array of resources with possible duplicates.\n * @returns The array of resources with no duplicates.\n */\nfunction dedupeResources(resources: HeaderSearchTypes[]): HeaderSearchTypes[] {\n  const ids = new Set<string>();\n  const result = [];\n\n  for (const resource of resources) {\n    if (!ids.has(resource.id as string)) {\n      ids.add(resource.id as string);\n      result.push(resource);\n    }\n  }\n\n  return result;\n}\n\n/**\n * Sorts an array of resources by relevance.\n * @param resources The candidate resources.\n * @param query The user entered search string.\n * @returns The sorted array of resources.\n */\nfunction sortByRelevance(resources: HeaderSearchTypes[], query: string): HeaderSearchTypes[] {\n  return resources.sort((a: HeaderSearchTypes, b: HeaderSearchTypes) => {\n    return getResourceScore(b, query) - getResourceScore(a, query);\n  });\n}\n\n/**\n * Calculates a relevance score of a candidate resource.\n * Higher scores are better.\n * @param resource The candidate resource.\n * @param query The user entered search string.\n * @returns The relevance score of the candidate resource.\n */\nfunction getResourceScore(resource: HeaderSearchTypes, query: string): number {\n  let bestScore = 0;\n\n  if (resource.identifier) {\n    for (const identifier of resource.identifier) {\n      bestScore = Math.max(bestScore, getStringScore(identifier.value, query));\n    }\n  }\n\n  if (resource.resourceType === 'Patient' && resource.name) {\n    for (const name of resource.name) {\n      bestScore = Math.max(bestScore, getStringScore(formatHumanName(name), query));\n    }\n  }\n\n  return bestScore;\n}\n\n/**\n * Calculates a relevance score of a candidate display string.\n * Higher scores are better.\n * @param str The candidate display string.\n * @param query The user entered search string.\n * @returns The relevance score of the candidate string.\n */\nfunction getStringScore(str: string | undefined, query: string): number {\n  if (!str) {\n    return 0;\n  }\n  const index = str.toLowerCase().indexOf(query.toLowerCase());\n  if (index < 0) {\n    return 0;\n  }\n  return 100 - index;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/AppShell/Navbar.mjs

@@ -0,0 +1,113 @@
+import { createStyles, Navbar as Navbar$1, Text, Space } from '@mantine/core';
+import React from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { CodeInput } from '../CodeInput/CodeInput.mjs';
+import { MedplumLink } from '../MedplumLink/MedplumLink.mjs';
+import { useMedplumNavigate } from '../MedplumProvider/MedplumProvider.mjs';
+
+const useStyles = createStyles((theme) => {
+    return {
+        menuTitle: {
+            margin: '20px 0 4px 6px',
+            fontSize: '9px',
+            fontWeight: 'normal',
+            textTransform: 'uppercase',
+            letterSpacing: '2px',
+        },
+        link: {
+            ...theme.fn.focusStyles(),
+            display: 'flex',
+            alignItems: 'center',
+            textDecoration: 'none',
+            fontSize: theme.fontSizes.sm,
+            color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+            padding: `8px 12px`,
+            borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            '&:hover': {
+                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+                color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+                textDecoration: 'none',
+                [`& svg`]: {
+                    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+                },
+            },
+            '& svg': {
+                color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+                marginRight: theme.spacing.sm,
+                strokeWidth: 1.5,
+                width: 18,
+                height: 18,
+            },
+        },
+        linkActive: {
+            '&, &:hover': {
+                backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
+                color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+                [`& svg`]: {
+                    color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+                },
+            },
+        },
+    };
+});
+function Navbar(props) {
+    const { classes } = useStyles();
+    const navigate = useMedplumNavigate();
+    function onLinkClick(e, to) {
+        e.stopPropagation();
+        e.preventDefault();
+        navigate(to);
+        if (window.innerWidth < 768) {
+            props.closeNavbar();
+        }
+    }
+    function navigateResourceType(resourceType) {
+        if (resourceType) {
+            navigate(`/${resourceType}`);
+        }
+    }
+    return (React.createElement(Navbar$1, { width: { sm: 250 }, p: "xs" },
+        React.createElement(Navbar$1.Section, null,
+            React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
+                    binding: {
+                        valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
+                    },
+                }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
+        props.menus && (React.createElement(Navbar$1.Section, { grow: true }, props.menus.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
+            React.createElement(Text, { className: classes.menuTitle }, menu.title),
+            menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, onClick: (e) => onLinkClick(e, link.href) },
+                React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
+                React.createElement("span", null, link.label)))))))))));
+}
+function NavbarLink(props) {
+    const { classes, cx } = useStyles();
+    const location = useLocation();
+    const [searchParams] = useSearchParams();
+    const toUrl = new URL(props.to, window.location.protocol + '//' + window.location.host);
+    const isActive = location.pathname === toUrl.pathname && matchesParams(searchParams, toUrl);
+    return (React.createElement(MedplumLink, { onClick: props.onClick, to: props.to, className: cx(classes.link, { [classes.linkActive]: isActive }) }, props.children));
+}
+/**
+ * Returns true if the search params match.
+ * @param searchParams The current search params.
+ * @param toUrl The destination URL of the link.
+ * @returns True if the search params match.
+ */
+function matchesParams(searchParams, toUrl) {
+    for (const [key, value] of toUrl.searchParams.entries()) {
+        if (searchParams.get(key) !== value) {
+            return false;
+        }
+    }
+    return true;
+}
+function NavLinkIcon(props) {
+    if (props.icon) {
+        return props.icon;
+    }
+    return React.createElement(Space, { w: 30 });
+}
+
+export { Navbar };
+//# sourceMappingURL=Navbar.mjs.map

package/dist/esm/AppShell/Navbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.mjs","sources":["../../../src/AppShell/Navbar.tsx"],"sourcesContent":["import { createStyles, Navbar as MantineNavbar, Space, Text } from '@mantine/core';\nimport React from 'react';\nimport { useLocation, useSearchParams } from 'react-router-dom';\nimport { CodeInput } from '../CodeInput/CodeInput';\nimport { MedplumLink } from '../MedplumLink/MedplumLink';\nimport { useMedplumNavigate } from '../MedplumProvider/MedplumProvider';\n\nconst useStyles = createStyles((theme) => {\n  return {\n    menuTitle: {\n      margin: '20px 0 4px 6px',\n      fontSize: '9px',\n      fontWeight: 'normal',\n      textTransform: 'uppercase',\n      letterSpacing: '2px',\n    },\n\n    link: {\n      ...theme.fn.focusStyles(),\n      display: 'flex',\n      alignItems: 'center',\n      textDecoration: 'none',\n      fontSize: theme.fontSizes.sm,\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n      padding: `8px 12px`,\n      borderRadius: theme.radius.sm,\n      fontWeight: 500,\n\n      '&:hover': {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n        color: theme.colorScheme === 'dark' ? theme.white : theme.black,\n        textDecoration: 'none',\n\n        [`& svg`]: {\n          color: theme.colorScheme === 'dark' ? theme.white : theme.black,\n        },\n      },\n\n      '& svg': {\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],\n        marginRight: theme.spacing.sm,\n        strokeWidth: 1.5,\n        width: 18,\n        height: 18,\n      },\n    },\n\n    linkActive: {\n      '&, &:hover': {\n        backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,\n        color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,\n        [`& svg`]: {\n          color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,\n        },\n      },\n    },\n  };\n});\n\nexport interface NavbarLink {\n  icon?: JSX.Element;\n  label?: string;\n  href: string;\n}\n\nexport interface NavbarMenu {\n  title?: string;\n  links?: NavbarLink[];\n}\n\nexport interface NavbarProps {\n  menus?: NavbarMenu[];\n  closeNavbar: () => void;\n}\n\nexport function Navbar(props: NavbarProps): JSX.Element {\n  const { classes } = useStyles();\n  const navigate = useMedplumNavigate();\n\n  function onLinkClick(e: React.SyntheticEvent, to: string): void {\n    e.stopPropagation();\n    e.preventDefault();\n    navigate(to);\n    if (window.innerWidth < 768) {\n      props.closeNavbar();\n    }\n  }\n\n  function navigateResourceType(resourceType: string | undefined): void {\n    if (resourceType) {\n      navigate(`/${resourceType}`);\n    }\n  }\n\n  return (\n    <MantineNavbar width={{ sm: 250 }} p=\"xs\">\n      <MantineNavbar.Section>\n        <CodeInput\n          key={window.location.pathname}\n          name=\"resourceType\"\n          placeholder=\"Resource Type\"\n          property={{\n            binding: {\n              valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',\n            },\n          }}\n          onChange={(newValue) => navigateResourceType(newValue)}\n          creatable={false}\n          maxSelectedValues={0}\n          clearSearchOnChange={true}\n          clearable={false}\n        />\n      </MantineNavbar.Section>\n      {props.menus && (\n        <MantineNavbar.Section grow>\n          {props.menus.map((menu) => (\n            <React.Fragment key={`menu-${menu.title}`}>\n              <Text className={classes.menuTitle}>{menu.title}</Text>\n              {menu.links?.map((link) => (\n                <NavbarLink key={link.href} to={link.href} onClick={(e) => onLinkClick(e, link.href)}>\n                  <NavLinkIcon to={link.href} icon={link.icon} />\n                  <span>{link.label}</span>\n                </NavbarLink>\n              ))}\n            </React.Fragment>\n          ))}\n        </MantineNavbar.Section>\n      )}\n    </MantineNavbar>\n  );\n}\n\ninterface NavbarLinkProps {\n  to: string;\n  onClick: React.MouseEventHandler;\n  children: React.ReactNode;\n}\n\nfunction NavbarLink(props: NavbarLinkProps): JSX.Element {\n  const { classes, cx } = useStyles();\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const toUrl = new URL(props.to, window.location.protocol + '//' + window.location.host);\n  const isActive = location.pathname === toUrl.pathname && matchesParams(searchParams, toUrl);\n\n  return (\n    <MedplumLink onClick={props.onClick} to={props.to} className={cx(classes.link, { [classes.linkActive]: isActive })}>\n      {props.children}\n    </MedplumLink>\n  );\n}\n\n/**\n * Returns true if the search params match.\n * @param searchParams The current search params.\n * @param toUrl The destination URL of the link.\n * @returns True if the search params match.\n */\nfunction matchesParams(searchParams: URLSearchParams, toUrl: URL): boolean {\n  for (const [key, value] of toUrl.searchParams.entries()) {\n    if (searchParams.get(key) !== value) {\n      return false;\n    }\n  }\n  return true;\n}\n\ninterface NavLinkIconProps {\n  to: string;\n  icon?: JSX.Element;\n}\n\nfunction NavLinkIcon(props: NavLinkIconProps): JSX.Element {\n  if (props.icon) {\n    return props.icon;\n  }\n  return <Space w={30} />;\n}\n"],"names":["MantineNavbar"],"mappings":"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"}

package/dist/esm/AsyncAutocomplete/AsyncAutocomplete.mjs

@@ -3,7 +3,7 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { killEvent } from '../utils/dom.mjs';
 
 function AsyncAutocomplete(props) {
-    const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, ...rest } = props;
+    const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, creatable, ...rest } = props;
     const defaultItems = toDefaultItems(defaultValue);
     const inputRef = useRef(null);
     const [lastValue, setLastValue] = useState(undefined);
@@ -61,13 +61,14 @@ function AsyncAutocomplete(props) {
         const result = [];
         for (const value of values) {
             let item = optionsRef.current?.find((option) => option.value === value)?.resource;
-            if (!item) {
+            if (!item && creatable !== false) {
                 item = onCreate(value);
             }
-            result.push(item);
+            if (item)
+                result.push(item);
         }
         onChange(result);
-    }, [onChange, onCreate]);
+    }, [creatable, onChange, onCreate]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
             if (!timerRef.current && !abortControllerRef.current) {
@@ -97,7 +98,7 @@ function AsyncAutocomplete(props) {
             }
         };
     }, []);
-    return (React.createElement(MultiSelect, { ...rest, ref: inputRef, defaultValue: defaultItems.map(toKey), searchable: true, onKeyDown: handleKeyDown, onSearchChange: handleSearchChange, data: options, onFocus: handleTimer, onChange: handleChange, onCreate: handleCreate, rightSectionWidth: 40, rightSection: abortController ? React.createElement(Loader, { size: 16 }) : null, filter: handleFilter }));
+    return (React.createElement(MultiSelect, { ...rest, ref: inputRef, defaultValue: defaultItems.map(toKey), searchable: true, onKeyDown: handleKeyDown, onSearchChange: handleSearchChange, data: options, onFocus: handleTimer, onChange: handleChange, onCreate: handleCreate, rightSectionWidth: 40, rightSection: abortController ? React.createElement(Loader, { size: 16 }) : null, filter: handleFilter, creatable: true }));
 }
 function toDefaultItems(defaultValue) {
     if (!defaultValue) {